Search code examples
javascriptphpgoogle-pie-chart

Show Google pie charts on click at text or image?


I did not manage to set up a link where an onClick() - action would generate a Goolge pie chart. Here is an example via JSFiddle.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <div id="piechart" style="width: 900px; height: 500px;"></div>

  google.charts.load('current', {'packages':['corechart']});
  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'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

I would like to have a clickable text or string such that after a click a small window or pop-up window appears with the chart in it. Is this possible?

Thanks in advance.


Solution

  • Here is full code that works:

    <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() {
    
            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>