Charts In ASP.NET MVC Using Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>

@section head
{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
}

<div style="font-family: Corbel; font-size: small; text-align: center;" class="row">
    <div style="width: 100%; height: 100%;">
        <canvas id="myChart" style="padding: 0; margin: auto; display: block;"></canvas>
    </div>
</div>

[HttpPost]
public JsonResult NewChart()
{
    List<object> iData = new List<object>();
    // Creating sample data
    DataTable dt = new DataTable();
    dt.Columns.Add("Employee", System.Type.GetType("System.String"));
    dt.Columns.Add("Credit", System.Type.GetType("System.Int32"));
    DataRow dr = dt.NewRow();
    dr["Employee"] = "Sam";
    dr["Credit"] = 123;
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["Employee"] = "Alex";
    dr["Credit"] = 456;
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["Employee"] = "Michael";
    dr["Credit"] = 587;
    dt.Rows.Add(dr);
    // Looping and extracting each DataColumn to List<Object>
    foreach (DataColumn dc in dt.Columns)
    {
        List<object> x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
        iData.Add(x);
    }
    // Source data returned as JSON
    return Json(iData, JsonRequestBehavior.AllowGet);
}

Table 1. The data from the source table is processed in such a way that each column in the result table is made into a separate list. The first column is expected to have the X-axis data of the chart, whereas the consequent columns hold the data for Y-axis. (Chart.js expects the Axis labels in a separate list. Please check the AJAX call section.)

The data for axises is combined to a single List<Object> and returned from the method as JSON.

AJAX calls are used in the <script> section of View to call the method in Controller to get the chart data.

<script>
    $.ajax({
        type: "POST",
        url: "/Chart/NewChart",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (chData) {
            var aData = chData;
            var aLabels = aData[0];
            var aDatasets1 = aData[1];
            var dataT = {
                labels: aLabels,
                datasets: [{
                    label: "Test Data",
                    data: aDatasets1,
                    fill: false,
                    backgroundColor: [
                        "rgba(54, 162, 235, 0.2)",
                        "rgba(255, 99, 132, 0.2)",
                        "rgba(255, 159, 64, 0.2)",
                        "rgba(255, 205, 86, 0.2)",
                        "rgba(75, 192, 192, 0.2)",
                        "rgba(153, 102, 255, 0.2)",
                        "rgba(201, 203, 207, 0.2)"
                    ],
                    borderColor: [
                        "rgb(54, 162, 235)",
                        "rgb(255, 99, 132)",
                        "rgb(255, 159, 64)",
                        "rgb(255, 205, 86)",
                        "rgb(75, 192, 192)",
                        "rgb(153, 102, 255)",
                        "rgb(201, 203, 207)"
                    ],
                    borderWidth: 1
                }]
            };
            var ctx = $("#myChart").get(0).getContext("2d");
            var myNewChart = new Chart(ctx, {
                type: 'bar',
                data: dataT,
                options: {
                    responsive: true,
                    title: { display: true, text: 'CHART.JS DEMO CHART' },
                    legend: { position: 'bottom' },
                    scales: {
                        xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                        yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 50, beginAtZero: true } }]
                    }
                }
            });
        }
    });
</script>

Listing 5. aData[0] has the data for X-Axis labels and aData[1] has the data for Y-Axis correspondingly.

As in the code, the AJAX call is made to the Controller method ’/Chart/NewChart’ where ‘Chart’ is the name of the Controller class and ‘NewChart’ is the method that returns the source data for the chart in JSON format.

AJAX call, when returned successfully, processes the returned JSON data.

The JSON data is processed to extract the labels and axis data for the chart preparation. The 2D context of the canvas ‘myChart’ is created using the ‘getContext("2d")’ method, and then the context is used to create the chart object in ‘new Chart()’ method inside the script.

Result chart in view

Figure 1

Chart type, legends, color, step size, etc. can be changed and controlled in the ‘new Chart()’ function of the AJAX script.

Please refer to the Chart.js documentation for the explanations of different keywords used for chart effects/properties, as it will be out of the scope of this article.

Summary

In this article, I discussed how we can create a chart in ASP.NET MVC using Chart.js and C#. We also saw how we can add a chart to a View and fetch the data from the Controller to the chart in View.