ASP.NET MVC: Draw Chart using Razor Chart Helper

Updated on September 20, 2015     Kisan Patel

This tutorial will show you how to display data in graphical form, using the Chart Helper in ASP.NET MVC?

The “Chart Helper” can create chart images of different types with many formatting options and labels. It can create standard charts like area charts, bar charts, column charts, line charts, and pie charts, along with more specialized charts like stock charts.

The data you display in a chart can be from an array, from the results returned from a database, or from data that’s in an XML file.

Lets create new ASP.NET MVC 5 application and name it to “MvcChartDemo” then add the below ProductSales model and DbContext class inside Models folder.

public class ProductSales
{
    public int Id { get; set; }

    public string Name { get; set; }

    public int Sales { get; set; }
}

public class SalesContext : DbContext
{
    public DbSet ProductSales { get; set; }
}

Next, add the below connectionStrings in Web.config file:

<connectionStrings>
     <add name="SalesContext" providerName="System.Data.SqlClient" connectionString="Data Source=./SQLExpress;Initial Catalog=Test;Integrated Security=SSPI;" />
</connectionStrings>

Next, create HomeController and add the Index action method as shown in below code:

Also, create the /Views/Home/Index.cshtml view and replace the content with the following code.

Index.cshtml

@model IEnumerable<MvcChartDemo.Models.ProductSales>

@{
   ViewBag.Title = "Chart Helper Demo";
}

<h2>Chart Helper Demo</h2>
@{
var key = new Chart(width: 600, height: 400)
                  .AddTitle("Product Sales")
                  .AddSeries("Default",
                             xValue: Model, xField: "Name",
                             yValues: Model, yFields: "Sales")
                  .Write();
}

Here, we create the Chart using the following Chart Helpers method.

@{
var key = new Chart(width: 600, height: 400)
                 .AddTitle("Product Sales")
                 .AddSeries("Default",
                             xValue: Model, xField: "Name",
                             yValues: Model, yFields: "Sales")
                 .Write();
}

The code first creates a new chart and sets its width and height. You specify the chart title by using the AddTitle method. To add data, you use the AddSeries method. In this example, you use the name, xValue, and yValues parameters of the AddSeries method. The name parameter is displayed in the chart legend. The xValue parameter contains an array of data that is displayed along the horizontal axis of the chart. The yValues parameter contains an array of data this is used to plot the vertical points of the chart.

The Write method actually renders the chart. In this case, because you did not specify a chart type, the Chart helper renders its default chart, which is a column chart.

Now, run the application and you will see below output…

You can change the Chart Type by defines chartType parameter of chart inside AddSeries method:

@{
var key = new Chart(width: 600, height: 400)
                  .AddTitle("Product Sales")
                  .AddSeries(chartType: "Pie",
                             xValue: Model, xField: "Name",
                             yValues: Model, yFields: "Sales")
                  .Write();
}

Download Complete Source Code