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 Column Charts from Database using Charts Helper class in ASP.Net MVC Razor.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Model
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; }
}
 
 
Namespaces
You will need to import the following namespaces.
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
 
Controller
The Controller consists of the Index Action method. Inside this Action method, the statistical data for the Column 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;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new OrderModel
                    {
                        ShipCity = sdr["ShipCity"].ToString(),
                        TotalOrders = Convert.ToInt32(sdr["TotalOrders"])
                    });
                }
            }
 
            con.Close();
        }
    }
 
    return View(chartData);
}
 
 
View
Inside the View, in the very first line the Generic List of OrderModel class is declared as Model for the View.
The Column 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. Column, 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>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @{
        var chart = new Chart(width: 500, height: 500, theme: ChartTheme.Yellow)
       .AddTitle("USA City Distribution")
       .AddSeries("Default", chartType: "Column",
            xValue: Model, xField: "ShipCity",
            yValues: Model, yFields: "TotalOrders")
        .Write();
    }
</body>
</html>
 
 
Screenshot
Create Charts (Column Charts) from Database using Charts Helper in ASP.Net MVC
 
 
Downloads
Download Code