Using Charts.js with ASP.NET

Following is an example of using Charts.js library to display nice graphs & charts after providing the data via C#/ASP.NET:

1. Download and unzip the Charts.js javascript library and add the entire folder into the ASP.NET project in the Visual Studio. 
2. Add the refrence in head of ASP.NET:
   

   <script src="Scripts/Chart.js-master/Chart.js"></script>
   

3. Add the following javascript in ASP.NET file with .NET variables (ChartLables, ChartData1 & ChartData2) that will be populated via C#:
   

   <script>
           var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
           var lineChartData = {
               //labels: ["January", "February", "March", "April", "May", "June", "July"],
               labels: <% =this.ChartLabels %>,
               datasets: [
                   {
                       label: "Query Count",
                       fillColor: "rgba(220,220,220,0.2)",
                       strokeColor: "rgba(220,220,220,1)",
                       pointColor: "rgba(220,220,220,1)",
                       pointStrokeColor: "#fff",
                       pointHighlightFill: "#fff",
                       pointHighlightStroke: "rgba(220,220,220,1)",
                       //data: [0, 1, 4, 6, 10, 8, 6]
                       data: <% =this.ChartData1 %>
                   },
                   {
                       label: "My Second dataset",
                       fillColor: "rgba(151,187,205,0.2)",
                       strokeColor: "rgba(151,187,205,1)",
                       pointColor: "rgba(151,187,205,1)",
                       pointStrokeColor: "#fff",
                       pointHighlightFill: "#fff",
                       pointHighlightStroke: "rgba(151,187,205,1)",
                       //data: [28, 48, 40, 19, 86, 27, 90]
                       data: <% =this.ChartData2 %>
                   }
               ]
           }
           function DrawChart() {
               var ctx = document.getElementById("canvas").getContext("2d");
               window.myLine = new Chart(ctx).Line(lineChartData, {
                   responsive: true
               });
           }
       </script>
   

4. Add the following HTML snippet to ASP.NET page where the chart will actually be displayed:
   

   <div style="width: 100%">
     <div>
       <canvas id="canvas" height="250" width="400"></canvas>
     </div>
   </div>
   

5. On the C# file (.NET code behind), simply populate the data into the three C# variables and call the javascript function DrawChart(); on some ASP.NET button click:
   

   public string ChartLabels = null;
   public string ChartData1 = null;
   public string ChartData2 = null;
   
   this.ChartLabels = "['January', 'February', 'March', 'April', 'May', 'June', 'July']";
   this.ChartData1 = "[65, 59, 80, 81, 56, 55, 40]";
   this.ChartData2 = "[28, 48, 40, 19, 86, 27, 90]";
   
   //Call the Javascript function from C#
   Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "DrawChart()", true);