Show Google pie charts on click at text or image - Javascript Google Chart

Javascript examples for Google Chart:Pie Chart

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

Description

Show Google pie charts on click at text or image

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']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {/*from  w w w. j  av  a2  s .co  m*/
        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'
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
      function your_function(){
        if (document.getElementById('piechart').style.display==='none')
        {
            document.getElementById('piechart').style.display='block';
        }
        else
        {
            document.getElementById('piechart').style.display='none';
        }
      }
    
      </script> 
   </head> 
   <body> 
      <div id="piechart" style="width: 900px; height: 500px;"></div> 
      <p onclick="your_function();">Click Me</p>  
   </body>
</html>

Related Tutorials