asp.net MVC

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

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

In this article I will show you how to create 5 canvas charts from database in asp.net 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. 

Database:

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 ado.net 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;
                System.Threading.Thread.Sleep(500);
 
                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;
 
                List.Add(ship);
                i++;
            }
            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.

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Order Distribution for UK</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
                $.ajax({
                type: 'POST',
                url: "@Url.Action("GetData", "Chart", new { area = "" })",
                data: {},
                success: function (data) {
                    LoadChart(data.success);
                }
            });
 
          });
        function LoadChart(data) {
            $("#myChart").html("");
 
            var el = document.createElement('canvas');
            $("#myChart")[0].appendChild(el);
 
           //Fix for IE 8
           if ($.browser.msie && $.browser.version == "8.0") {
                G_vmlCanvasManager.initElement(el);
            }
            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);
                    $("#myChart").append(div);
                }
 
            }
        }

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

Output:

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

Related Article

Post your comments / questions



Recent Article