In this article, I am going to explain you how to draw or implement chart in ASP.NET MVC using Chart Class (System.Web.Helpers) in C#. Below is the step by step tutorial.
Creating ASP.NET MVC 5 application
First of all create a new asp.net mvc 5 empty project. I am using visual studio 2013.
1) Open visual studio.
2) Go to File → New → Project.
3) Select Visual C# → Web → ASP.NET Web Application.
4) Give project name MVCChartDemo and click on OK as shown below.
1) Open visual studio.
2) Go to File → New → Project.
3) Select Visual C# → Web → ASP.NET Web Application.
4) Give project name MVCChartDemo and click on OK as shown below.
A new window will open as shown below. Select Empty Template, check on MVC and click on OK.
Adding Controller
Next step is to add controller. Add a new controller with name 'Home'. By default Index ActionResult will be generated. Add a new ActionResult method DrawChart as shown below.
Add namespace → System.Web.Helpers to support chart class.
Add namespace → System.Web.Helpers to support chart class.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;
namespace MVCChartDemo.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult DrawChart()
{
new Chart(width: 500, height: 350)
.AddTitle("Mobile Product Chart")
.AddSeries(chartType: "column",
xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
yValues: new[] { "50", "60", "80", "30" })
.Write("png");
return null;
}
}
}
Adding View
Next step is to add View. Right click on Index method and click on Add View. Set View name as Index, set Template as Empty(without model) and click on OK. Add below code to load DrawChart method.
style="margin-left:150px;">
src="@Url.Action("DrawChart")" alt="Draw Chart in ASP.NET MVC" />
Now run your application and you will see the below output as bar chart is generated.
Now to draw Pie Chart set from chartType: "column" to chartType: "pie".
Applying Themes
Now we will apply various theme to make chart look nicer. To apply theme, change below line of code while creating chart object.
public ActionResult DrawChart()
{
new Chart(width: 500, height: 350, theme:ChartTheme.Green) // change in-built theme here
.AddTitle("Mobile Product Chart")
.AddSeries(chartType: "column",
xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
yValues: new[] { "50", "60", "80", "30" })
.Write("png");
return null;
}
You can see the below chart after applying theme.
Applying Custom Themes
Now we can apply custom theme to chart.
public ActionResult DrawChart()
{
string Mytheme = @"
";
new Chart(width: 500, height: 300, theme: Mytheme)
.AddTitle("Mobile Product Chart")
.AddSeries(chartType: "column",
xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
yValues: new[] { "50", "60", "80", "30" })
.Write("png");
return null;
}
You can customize your theme as per your requirement. Below is the another customize css theme.
public ActionResult DrawChart()
{
string Mytheme = @"";
PaletteCustomColors=""97,97,97; 209,98,96; 168,203,104; 142,116,178; 93,186,215; 255,155,83; 148,172,215; 217,148,147; 189,213,151; 173,158,196; 145,201,221; 255,180,138"">
new Chart(width: 500, height: 300, theme: Mytheme)
.AddTitle("Mobile Product Chart")
.AddSeries(chartType: "column",
xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
yValues: new[] { "50", "60", "80", "30" })
.Write("png");
return null;
}
Below is the output.
Below is the another way to return chart from controller to view.
public ActionResult DrawChart()
{
var chart = new Chart(width: 500, height: 350)
.AddTitle("Mobile Product List")
.AddSeries(chartType: "column",
xValue: new[] { "Apple", "HTC", "Samsung", "Nokia" },
yValues: new[] { "50", "60", "80", "30" })
.GetBytes("png");
return File(chart, "image/bytes");
}
