Line Chart With Chart.js

We are going to plot a line chart as follows-

chartjs line chart

I choosed chart.js for this task. This type of chart is easy with chart.js. It’s free also.

Here is the client-side code:

 <canvas id="canvas" height="85"></canvas>
<script>
    
    //array variable to hold the x-axis label
    var chartLabels = []; 

    //Data can be sent from server as DataTable or List<T> or simply an array.
    //I'm sending here a string[].
    //Iterate the source to populate the chart label array.
    @foreach(var label in ViewBag.ChartLabel)
    {
       <text>
           chartLabels.push('@label');
       </text>
    }
    //or, var chartLabels = @Html.Raw(Json.Encode(ViewBag.ChartLabel));

    //array variable to hold the data for 1st line (top most)
    var line1 = [];

    //Data can be sent from server as DataTable or List<T> or simply an array.
    //I'm sending here an int[].
    //Iterate the source to populate the line1 array.
    @foreach (var item in ViewBag.Data1)
    {
       <text>
          line1.push(@item);
       </text>
    }
    //or, var line1 = @Html.Raw(Json.Encode(ViewBag.Data1));


    //array variable to hold the data for 2nd line (bottom most)
    var line2= [];

    //Data can be sent from server as DataTable or List<T> or simply an array.
    //I'm sending here an int[].
    //Iterate the source to populate the line2 array.
    @foreach (var item in ViewBag.Data2)
    {
       <text>
            line2.push(@item);
       </text>
    }
    //or, var line2 = @Html.Raw(Json.Encode(ViewBag.Data2));
 
   //=========================================================================
    Note: The following can be used in stead of the above foreach loops 
    var labels = @Html.Raw(Json.Encode(ViewBag.ChartLabel));
    //=========================================================================

    //This is default instruction from chart.js
    var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
    

    var lineChartData = 
    {
       labels: chartLabels,
       datasets:
       [
          {
             label: "My First 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: line1
         },
         {
            label: "My Second dataset",
            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: line2
         }
         //More datasets can be added here. That will draw another line.
       ]
    }

    window.onload = function () 
    {
       var ctx = document.getElementById("canvas").getContext("2d");
       window.myLine = new Chart(ctx).Line(lineChartData, {
       responsive: true
       });
    }
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s