Google Chart with Modal implementation - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Google Chart with Modal implementation

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']
    });/*w w  w .  j a  v a2 s  .c  o  m*/
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);
      var options = {
        title: 'My Daily Activities'
      };
      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        if (selectedItem) {
          var task = data.getValue(selectedItem.row, 0);
          console.log('The user selected ' + task);
        }
      }
      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      google.visualization.events.addListener(chart, 'select', selectHandler);
      chart.draw(data, options);
    }
  
      </script> 
   </head> 
   <body> 
      <div id="piechart" style="width: 900px; height: 500px;"></div>  
   </body>
</html>

Related Tutorials