chart

Polar Area


Polar Area Chart
<div style="width: 80%" class="text-center">
  <canvas id="polar-area" width="400" height="400"/>
  </canvas>
</div>



$(document).ready(function() {
    // Polar Area Chart
    var polarData = [
      {
        value: 200,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
      },
      {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
      },
      {
        value: 120,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
      },
      {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
      },
      {
        value: 150,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
      }
    ];

  window.onload = function(){
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
      responsive:true
    });
  };
});

Doughnut Chart


Doughnut Chart
<div style="width: 80%" class="text-center">
  <canvas id="doughnutChart" width="500" height="500"/>
  </canvas>
</div>



$(document).ready(function() {
    // Doughnut Chart
    var doughnutData = [
      {
        value: 200,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
      },
      {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
      },
      {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
      },
      {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
      },
      {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
      }
    ];
  window.onload = function(){
    var chart_doughnutChart = document.getElementById("doughnutChart").getContext("2d");
    window.myDoughnut = new Chart(chart_doughnutChart).Doughnut(doughnutData, {
      responsive : true
    });
  };
});

Radar Chart

Line Chart


Radar Chart
<div style="width: 80%" class="text-center">
  <canvas id="radarChart" width="500" height="500"/>
  </canvas>
</div>



$(document).ready(function() {
    // Radar Chart
    var radarChartData = {
      labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
      datasets: [
        {
          label: "My First 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: [65,59,90,81,56,55,40]
        },
        {
          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,96,27,100]
        }
      ]
    };
    window.onload = function(){
      var chart_radarChart = document.getElementById("radarChart").getContext("2d");
      window.myRadar = new Chart(chart_radarChart).Radar(radarChartData, {
        responsive: true
      });
    };   

});




Line Chart
<div style="width: 90%" class="text-center">
  <canvas id="lineChart" height="450" width="600"></canvas>
</div>



$(document).ready(function() {
    // Line Chart
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
      labels : ["January","February","March","April","May","June","July"],
      datasets : [
        {
          label: "My First 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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
          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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
      ]
    }
  };
    window.onload = function(){
      var chart_lineChart = document.getElementById("lineChart").getContext("2d");
      window.myLine = new Chart(chart_lineChart).Line(lineChartData, {
        responsive: true
      });
    };

});

Bar Chart

Pie Custom Tooltips


Bar Chart
<div style="width: 90%" class="text-center">
  <canvas id="barChart" width="500" height="500"/>
  </canvas>
</div>



$(document).ready(function() {
    // Bar Chart
      var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
      var barChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
          {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
          },
          {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
          }
        ]
      }
  };
    window.onload = function(){
      var chart_barChart = document.getElementById("barChart").getContext("2d");
      window.myBar = new Chart(chart_barChart).Bar(barChartData, {
        responsive : true
      });
    };
});



Pie Custom Tooltips
<div style="width: 80%" class="text-center">
  <canvas id="pieChart" width="500" height="500"/>
  </canvas>
</div>



$(document).ready(function() {
    // Pie Chart
      var pieData = [
        {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
        },
        {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
        },
        {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
        },
        {
          value: 40,
          color: "#949FB1",
          highlight: "#A8B3C5",
          label: "Grey"
        },
        {
          value: 120,
          color: "#4D5360",
          highlight: "#616774",
          label: "Dark Grey"
        }

      ];

    window.onload = function(){
      var chart_peiChart = document.getElementById("peiChart").getContext("2d");
      window.myBar = new Chart(chart_peiChart).Pie(pieData, {
        responsive : true
      });
    };
});