Populate a Google pie chart with a dropdown list - Javascript Google Chart

Javascript examples for Google Chart:Pie Chart

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

Description

Populate a Google pie chart with a dropdown list

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    google.charts.load("current", {
      packages: ["corechart"]
    });/*from  w  ww.  j  av  a 2 s. co  m*/
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var listbox = document.getElementById("chart");
      var selIndex = listbox.selectedIndex;
      var selValue = listbox.options[selIndex].value;
      var selText = listbox.options[selIndex].text;
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Percentage'],
        ['Base Pay', selText * 1], 
        ['Variable Pay', 2],
        ['Benefits', 2],
        ['Retirement', 2],
        ['Other', 7]
      ]);
      var options = {
        title: 'Chart Title',
        is3D: true,
      };
      var chart = new google.visualization.PieChart(
        document.getElementById('piechart_3d')
      );
      chart.draw(data, options);
    }
  
      </script> 
   </head> 
   <body> 
      <div id="piechart_3d" style="width: 900px; height: 200px;"></div> 
      <select id="chart" name="select1" onchange="drawChart()"> 
         <option disabled>Choose Base Pay</option> 
         <option selected value="100">1</option> 
         <option value="200">3</option> 
      </select>  
   </body>
</html>

Related Tutorials