Chart.js to create pie chart - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Pie Chart

Description

Chart.js to create pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from  w w  w .j  a v a  2  s  .co  m*/
var data = {
    labels: [
        "Java",
        "Scala",
        "PHP",
        "HTML"
    ],
    datasets: [
        {
            data: [25, 10, 30, 35],
            backgroundColor: [
                "#811BD6",
                "#9CBABA",
                "#D18177",
                "#6AE128"
            ]
        }]
};
var ctx = document.getElementById("my-chart");
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js"></script> 
      <canvas id="my-chart"></canvas>  
   </body>
</html>

Related Tutorials