Chart.js to create Pie Chart and display all data - 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 and display all data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from ww  w  .j  a v  a  2s .co  m*/
$(function(){
  var ie = 12,
   firefox = 7,
   chrome = 15,
   safari = 13,
   opera = 4,
   chart = $('#chart')[0];
   var charObj = new Chart(chart, {
   data: {
       datasets: [{
      data: [
          firefox,
          safari,
          ie,
          opera,
         chrome
      ],
      backgroundColor: [
         "#FF6283",
         "#4BC0C0",
         "#FFCC54",
         "#000000",
         "#36A2EB"
      ],
      label: 'Browser' // for legend
   }],
      labels: [
         "Firefox",
         "Safari",
         "Internet Explorer",
         "Opera",
         "Chrome"
      ]
   },
     type: 'polarArea'
   });
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart" width="700px" height="700px"></canvas>  
   </body>
</html>

Related Tutorials