ChartJS.org Pie Chart

<canvas id=PieChartCanvas" style="width:100%;height:100px;"></canvas>
<script src="~/Assets/js/charts/chartjs.org/Chart.min.js"></script>

<script>

    //Declaring chart context.
    var PieChartContext = document.getElementById("PieChartCanvas").getContext("2d");
    //Chart data (an array of objects).
    var data = [
    {
        value: '@ViewBag.LikedQuantity',
        color: "#2D882D",
        highlight: "#116611",
        label: "Liked"
    },
    {
        value: '@ViewBag.NotLikedQuantity',
        color: "#AA3939",
        highlight: "#550000",
        label: "Not Liked"
    }
    ]

    //Finally draw the chart.
    var PieChart = new Chart(PieChartContext).Pie(data);

</script>

Advertisements

Feature comparison between various Chart & Graph tools

HighCharts

  • Free for non-commercial
  • Very very rich & interactive examples.
  • Documentation is awesome.
  • Perhaps, easy to use.
  • I haven’t use it yet. But I think I should strongly recommend it.

Chart.js

  • Free
  • Rich examples
  • Very good documentation.
  • Easy to use.
  • I recommend it. Personally I used it in a project and feel happy.

Flot

  • Free
  • Examples are not rich.
  • Documentation is not fully featured. Difficult for novish.
  • But it has robust capabilities.

CanvasJs

  • Free for non-commercial, An attribution link is displayed to the bottom right of the chart.

JQuery SparkLines

  • Tiny chart

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>