Hey people. Need help. Will be much appreciated.

67 views
Skip to first unread message

Jay Modha

unread,
Feb 26, 2013, 12:20:36 PM2/26/13
to google-visua...@googlegroups.com
//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>

asgallant

unread,
Feb 26, 2013, 1:04:59 PM2/26/13
to google-visua...@googlegroups.com
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>

Jay Modha

unread,
Feb 27, 2013, 4:14:46 PM2/27/13
to google-visua...@googlegroups.com
Thank you so much mate..works perfectly :D

Arthur Hebert

unread,
Apr 22, 2023, 5:28:29 PM4/22/23
to Google Visualization API
I know this is an old post. This helped me a lot. 
Trying to pass the help on to a similar post since this post helped me. 

Reply all
Reply to author
Forward
0 new messages