Top Menu

Monday, January 19, 2015

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);
    
    

No comments:

Post a Comment

Official SharePoint Documentation

I have recently contributed to the official SharePoint documentation for developement. Check it out here: https://docs.microsoft.com/en-us...