How to create HTML 5 canvas chart from database using jQuery chart.js in MVC c#?

How to create HTML 5 canvas chart from database using jQuery chart.js in MVC c#?, someone asked me to explain?

In this article I will show you how to create 5 canvas charts from database in MVC c# implemented using chart.js. 

The chart will display the order statics of the country UK where the orders have been shipped. The jQuery ajax post call to a controller function GetData() and result the json response and bind the data in the chart using HTML canvas. 


Here I am using Northwind database. You can download it from following link.

Download Northwind Database

Open Microsoft sql management studio and right click on the database and attach it.

Step 1: Create an entity data model using table orders and generate entity for that.

Step 2: Right click on the "Controllers" folder and add "Chart" controller. Copy and paste the following code.

public class ChartController : Controller
        // GET: /Chart/
        public ActionResult Index()
            return View();
        public ActionResult GetData()
            models db = new models();
            var query = from queryResult in db.Orders.AsEnumerable()
                        where queryResult.ShipCountry == "UK"
                        group queryResult by queryResult.ShipCity into rowGroup
                        select new
                            Name = rowGroup.Key,
                            OrdersCount = rowGroup.Count()
            List<Shiping> List = new List<Shiping>();
            int i = 0;
            foreach (var row in query)
                Shiping ship = new Shiping();
                ship.Name = row.Name;
                ship.value = row.OrdersCount;
                Random randomGen = new Random();
                KnownColor[] names = (KnownColor[])Enum.GetValues(typeof(KnownColor));
                KnownColor randomColorName = names[randomGen.Next(names.Length)];
                Color randomColor = Color.FromKnownColor(randomColorName);
                ship.color = randomColor.Name;
            string output = JsonConvert.SerializeObject(List);
            return new JsonResult
                Data = new
                    success = output,
                    message = "Success",
                JsonRequestBehavior = JsonRequestBehavior.AllowGet



Step 3: Right click on the "Index" action method in the "ChartController" and add "Index" view. Copy and paste the following code.

    <meta name="viewport" content="width=device-width" />
    <title>Order Distribution for UK</title>
    <script type="text/javascript" src=""></script>
    <script src="//" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
                type: 'POST',
                url: "@Url.Action("GetData", "Chart", new { area = "" })",
                data: {},
                success: function (data) {
        function LoadChart(data) {
            var el = document.createElement('canvas');
           //Fix for IE 8
           if ($.browser.msie && $.browser.version == "8.0") {
            var ctx = el.getContext('2d');
            var json = $.parseJSON(data);
            var chart = new Chart(ctx).Doughnut(json);
            if (data != null) {
                for (var i = 0; i < json.length; i++) {
                    var div = $("<div />");
                    div.css("margin-bottom", "10px");
                    div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + json[i].color + "'></span> " + json[i].Name);

<body style="border: 1px solid #DED8D8; width: 500px; height: 305px; font-family: Arial;">
        <h2>Order Distribution for UK</h2>
        <table border="0" cellpadding="0" cellspacing="0">
                    <div id="myChart">


create HTML 5 canvas chart from database using jQuery chart.js in MVC

Post your comments / questions