Chart.js example in ASP.NET Webforms

First, we have to generate a compatible data source for the chart on the server side. 

[WebMethod]
public static string LoadBarChart()
{

    var data = new
    {
        labels = new[] {"South Western","Western","Northern","North Eastern","Eastern" },
        datasets = new[] {
            new  { label = "2016 - 2017", backgroundColor = new[] { "rgba(220, 220, 220, 0.5)" }, pointBorderColor = "#fff", data = new[] {"100","200","150","375","500"} }
            ,new  { label = "2017 - 2018", backgroundColor = new[] { "#018AC8", "#058EAA", "#DEB816", "#E37F1C", "#4A5D0E" }, pointBorderColor = "#fff", data = new[] {"122","210","175","375","525"}  }

        }
    };

    return data.ToJSON();
}


public static class JSONHelper
{
    public static string ToJSON(this object obj)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        return serializer.Serialize(obj);
    }

    public static string ToJSON(this object obj, int recursionDepth)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        serializer.RecursionLimit = recursionDepth;
        return serializer.Serialize(obj);
    }
}

Add the following in your .aspx page.

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div id="chart_div">
                            <canvas id="barChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Then goes your javascript / jquery code

$(function () {

    var ctx2 = document.getElementById("barChart").getContext("2d");

    var fetch_url;
    fetch_url = '../mymap.aspx/LoadBarChart';
    return $.ajax({
        url: fetch_url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (res, textStatus) {

            var parsedJson = JSON.parse(res.d);
            var barData = parsedJson;
            var barOptions = {
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                    yAxes: [{

                        gridLines: {
                            display: true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Millions'
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: true
                        }
                    }]
                }

            };

            var myChart = new Chart(ctx2, { type: 'bar', data: barData, options: barOptions }); 
        },
        error: function (res, textStatus) {

        }
    });

});