Show Google pie charts on click at text or image?

Question

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.

This is not a php question, but javascript. If you want to attach an onclick event in your HTML use on click event like so: onclick="drawChart()" — K.I
– K.I, Commented Jun 14, 2016 at 13:18
Thanks, but this is not working for me. I tried this one '<script type="text/javascript" src="gstatic.com/charts/loader.js"></script> <p onclick="drawChart()"> Hello World! </p>' but no success! — V. Wolf
– V. Wolf, Commented Jun 14, 2016 at 13:37
Its hard to tell what the problem is not seeing all the code. Post all parts of the code — K.I
– K.I, Commented Jun 14, 2016 at 13:42
Hi @K.I , the above code is runable in JSFiddle. In my previous comment i replaced the <div> tag with the <p> tag like so: <p onclick="drawChart()"> Hello World! </p>'. Now the code is still runable, but no Chart appears nor the 'Hello World' is clickable. — V. Wolf
– V. Wolf, Commented Jun 14, 2016 at 14:54

K.I · Accepted Answer · 2016-06-14 15:40:21Z

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>

Thanks, K.I. It works now. I wonder if there is a chance to have the piechart poping up in a new smaller sized window?
No problem. And yes it is possible, have a look at this: jsfiddle.net/kjrtr/1
Sorry for bothering you, but how would one include this Javascript into a php or html script? I am asking, because I can not see the connection between the html scrlpt and the jquery function in your example.
You can include this line in your html head element: <script src="ajax.googleapis.com/ajax/libs/jquery/1.12.2/…>

Collectives™ on Stack Overflow

Show Google pie charts on click at text or image?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related