You need to change the callback to call init instead of drawChart: google.setOnLoadCallback(init);
Also, you need to set the id of the container div and the id used in the document.getElementById call to be the same (one is "chart_div", one is "visualization"; it doesn't matter what you pick as long as they are the same). To fully duplicate the example, you need a button type input element with an ID of "b1": <input type="button" id="b1" value="Change Value"></input> Here's a working example: <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(init); function init() { var options = { width: 400, height: 240, animation:{ duration: 1000, easing: 'out', }, vAxis: {minValue:0, maxValue:1000} }; var data = new google.visualization.DataTable(); data.addColumn('string', 'N'); data.addColumn('number', 'Value'); data.addRow(['V', 200]); var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); var button = document.getElementById('b1'); function drawChart() { // Disabling the button while the chart is drawing. button.disabled = true; google.visualization.events.addListener(chart, 'ready', function() { button.disabled = false; }); chart.draw(data, options); } button.onclick = function() { var newValue = 1000 - data.getValue(0, 1); data.setValue(0, 1, newValue); drawChart(); } drawChart(); } </script> </head> <body> <input type="button" id="b1" value="Change Value"></input> <div id="chart_div"></div> </body> </html> On Tuesday, February 26, 2013 12:20:36 PM UTC-5, Jay Modha wrote: > > //I have copied and pasted this simple example which google have provided > to change values in a graph - smooth transition, however I get a blank > screen on my website. Any ideas why? > Help will be much appreciated. Thanks in advance > > > > <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 init() { > var options = { > width: 400, > height: 240, > animation:{ > duration: 1000, > easing: 'out', > }, > vAxis: {minValue:0, maxValue:1000} > }; > var data = new google.visualization.DataTable(); > data.addColumn('string', 'N'); > data.addColumn('number', 'Value'); > data.addRow(['V', 200]); > > var chart = new google.visualization.ColumnChart( > document.getElementById('visualization')); > var button = document.getElementById('b1'); > > function drawChart() { > // Disabling the button while the chart is drawing. > button.disabled = true; > google.visualization.events.addListener(chart, 'ready', > function() { > button.disabled = false; > }); > chart.draw(data, options); > } > > button.onclick = function() { > var newValue = 1000 - data.getValue(0, 1); > data.setValue(0, 1, newValue); > drawChart(); > } > drawChart(); > } > </script> > </head> > <body> > <div id="chart_div" style="width: 900px; height: 500px;"></div> > </body> > </html> > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
