In this article I will explain with an example, how to create Charts from Database using Charts Helper class in ASP.Net MVC Razor.
This article will illustrate how to create Pie Charts from Database using Charts Helper class in ASP.Net MVC Razor.
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
The following Model class consists of two properties i.e. ShipCity and TotalOrders.
public class OrderModel
    public string ShipCity { get; set; }
    public int TotalOrders { get; set; }
You will need to import the following namespaces.
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
The Controller consists of the Index Action method. Inside this Action method, the statistical data for the Pie chart is fetched from the Orders table and it is populated into the Generic List of OrderModel class objects.
Finally the Generic List of OrderModel class is returned back to the View.
public ActionResult Index()
    string query = "SELECT ShipCity, COUNT(orderid) TotalOrders";
    query += " FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
    string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
    List<OrderModel> chartData = new List<OrderModel>();
    using (SqlConnection con = new SqlConnection(constr))
        using (SqlCommand cmd = new SqlCommand(query))
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            using (SqlDataReader sdr = cmd.ExecuteReader())
                while (sdr.Read())
                    chartData.Add(new OrderModel
                        ShipCity = sdr["ShipCity"].ToString(),
                        TotalOrders = Convert.ToInt32(sdr["TotalOrders"])
    return View(chartData);
Inside the View, in the very first line the Generic List of OrderModel class is declared as Model for the View.
The Pie Chart is created using Chart method which accepts the following parameters.
Width – width of the Chart.
Height – height of the Chart.
Theme (Optional) – Allows to set the Theme of the Chart from the predefined themes.
The following methods are also used.
AddTitle – Sets the Title for the Chart.
AddSeries – This method sets the type of Chart i.e. Pie, Bar, etc. and also sets the X and Y values for the Chart.
Write – The Write method is used to render the Chart on the page.
@model List<Charts_MVC.Models.OrderModel>
    Layout = null;
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width"/>
        var chart = new Chart(width: 500, height: 500, theme: ChartTheme.Yellow)
       .AddTitle("USA City Distribution")
       .AddSeries("Default", chartType: "Pie",
            xValue: Model, xField: "ShipCity",
            yValues: Model, yFields: "TotalOrders")
Create Charts using Chart Helper in ASP.Net MVC Razor