articles

Home / DeveloperSection / Articles / Chart Helper in ASP.NET MVC

Chart Helper in ASP.NET MVC

Chart Helper in ASP.NET MVC

Chris Anderson 22337 10-Oct-2011

Into the ASP.NET MVC 3, It provides various helper methods that are used for different purposes. 
The chart helper method is one of them, which makes it very easy to create charts in ASP.NET MVC. Into this article, I will show you that how you can use Chart helper in ASP.NET MVC. And at the same time, I will also show you how to use the theme provided by ASP.NET MVC to style your chart. And then I will show how to create a custom theme for making your chart background as transparent.

First of all Open visual studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project as seen below:

Chart Helper in ASP.NET MVC

Choose Razor as the view engine and click OK.Chart Helper in ASP.NET MVC

Add a controller in your project and give name as HomeController as shown in the below figure:Chart Helper in ASP.NET MVC

After adding a Controller adds the code as shown below:

using System.Web.Mvc;
using System.Web.Helpers;

namespace ChartDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Chart()
        {
            new Chart(width: 400, height: 200, theme: ChartTheme.Green)
                 .AddSeries(
                      chartType: "column",
                   xValue: new[] { "Math", "English", "Computer", "Science" },
                     yValues: new[] { "80", "90", "78", "68" })
                   .Write("png");
            return null;
        }
    }
}

The chart is rendered as an image, to use the action you need to add an HTML

image to your page like this: 

<html>
<head>
    <title>Index</title>
</head>
<body>
    <div>
        <img src="@Url.Action("Chart")" alt="" />
    </div>
</body>
</html>

The chart is displayed on the page as follows:

Chart Helper in ASP.NET MVC

Now, let's add a custom theme which set the background color of your chart to

transparent and chart area background color to Aqua:

public ActionResult Chart()
{
    string myTheme =
           @"<Chart BackColor=""Transparent"" ForeColor=""Navy"">
                      <ChartAreas>
                             <ChartArea Name=""Default"" BackColor=""Aqua"" ></ChartArea>                        </ChartAreas>
             </Chart>";
            new Chart(width: 400, height: 200, theme: myTheme)
                 .AddSeries(
                      chartType: "column",
                   xValue: new[] { "Math", "English", "Computer", "Science" },
                     yValues: new[] { "80", "90", "78", "68" })
                   .Write("png");
            return null;
}

  Run this application again, you will see the following screen:

Chart Helper in ASP.NET MVC

Thanks for reading this article and I think this will help you a lot.


[Read also this Article:- ToolBarTray Control in WPF]


Updated 04-Mar-2020
hi I am software developer at mindstick software pvt. ltd.

Leave Comment

Comments

Liked By