Google Pie chart with legend - Javascript Google Chart

Javascript examples for Google Chart:Pie Chart

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

Description

Google Pie chart with legend

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://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   ww w .  j a va2s .co  m*/

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['TV', 4],
    ['Gym', 2],
    ['Sleep', 8]
  ]);

  var options = {
    'title': 'My Average Day',
    'width': 550,
    'height': 400
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
    }

      </script> 
   </head> 
   <body> 
      <div id="piechart"></div>  
   </body>
</html>

Related Tutorials