chart.js

In here show how to use chart.js, Chart js is open source chart platform for web based applications.So it is very easy to use chart.js in your web site.First you have to download (https://github.com/nnnick/Chart.js) chart.js and chart.min.js files.Then in your html file you can add this code for bar chart.

Bar chart

<script> 

 var barChartData = {



  labels : ["Sunday","Mondey","Tuesday","Wednesday","Thursday","Friday","Saturday"],

  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 : [85,65,35,55,80,20,90]

   },

   {

    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 : [55,100,30,70,30,65,45]

   }

  ]

 }

 window.onload = function(){



  var ctx = document.getElementById("canvas").getContext("2d");

  window.myBar = new Chart(ctx).Bar(barChartData, {

   responsive : true

  });

 }

 </script>

Then inside canvas you can draw the bar chart.

<div style="width: 50%">
   <canvas id="canvas" height="450" width="600"></canvas>
</div>

Inside the Script you can change colors of charts.

Pie chart

<script>

  var pieData = [

    {

     value: 300,

     color:"#F7464A",

     highlight: "#FF5A5E",

     label: "Food"

    },

    {

     value: 50,

     color: "#46BFBD",

     highlight: "#5AD3D1",

     label: "Transport"

    },

    {

     value: 100,

     color: "#FDB45C",

     highlight: "#FFC870",

     label: "Drinks"

    },

    {

     value: 40,

     color: "#949FB1",

     highlight: "#A8B3C5",

     label: "class"

    },

    {

     value: 120,

     color: "#4D5360",

     highlight: "#616774",

     label: "Others"

    }



   ];



   window.onload = function(){

    var ctx = document.getElementById("chart-area").getContext("2d");

    window.myPie = new Chart(ctx).Pie(pieData);

   };



 </script>