onclick - how to draw a Google Pie Chart only on a click event using javascript/jquery? -
how draw google pie chart on click event using javascript/jquery?
ive tried calling drawchart on onclick event no success.
from api:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.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); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
to extend davidkonrad's answer, should wrap click event in callback api loader, plausible user slow connection google's servers click draw button before api finished loading:
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 initialize () { $(/* click event element selector */).click(function() { drawchart(); }); } google.setonloadcallback(initialize); google.load("visualization", "1", {packages:["corechart"]}); 