Google Charts - animation transition example

Question

Take a looka t my JS below, for my drawChart function for a google chart. This works as I expected. HOWEVER, because var chart ... is inside the drawChart function, the animations do not work - instead google thinks it's creating a brand new chart each time, and just refreshes the chart.

I would like to do something like in their examples, where the data moves according to my settings (1000ms, default easing: linear). Examples are here: https://developers.google.com/chart/interactive/docs/animation

If I pull out the var chart ... from the drawChart function, I get a "Chart not defined" error. Appreciate the help from anyone who has worked with google charts a lot. Thanks for the help.

var chart = "notSet";
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(setGoogleData);
google.setOnLoadCallback(drawChart);
newValue = 0;
var data = [];
function setGoogleData(){
  data[0] = new google.visualization.DataTable(JSON_DATA_LOCATED_HERE);
  data[1] = new google.visualization.DataTable(JSON_DATA_LOCATED_HERE);
  var chart = new google.visualization.LineChart(document.getElementById('stopByTripChart'));
}
function drawChart() {
  if(chart == "notSet"){
    var chart = new google.visualization.LineChart(document.getElementById('stopByTripChart'));
  }
  var options = {"title":"Average Load Summary","titlePosition":"in","width":1100,"height":700,"hAxis.slantedTextAngle":90,"hAxis.position":"out","pointSize":5,"animation.duration":1000,"animation.easing":"linear","hAxis.showTextEvery":1,"hAxis.title":"Stops"};
  chart.draw(data[newValue], options);
}
function changeChart(){
  newValue = document.getElementById("chartNumber").value;
  drawChart();
}

Py. Py. · Accepted Answer · 2012-04-22T18:24:35

I've never tried Google charts myself, but I think such a code would work:

var chart = null;
function drawChart() {
  if(chart === null){
     chart = new google.visualization.LineChart(document.getElementById('stopByTripChart'));
  }
  var options = {"title":"Average Load Summary",
                 "titlePosition":"in",
                 "width":1100,
                 "height":700,
                 "hAxis" :{"slantedTextAngle":90,
                           "position":"out",
                           "showTextEvery":1,
                           "title":"Stops"},
                 "pointSize":5,
                 "animation":{"duration":1000,
                              "easing": 'out'};
  chart.draw(data[newValue], options);
}
function changeChart(){
  newValue = document.getElementById("chartNumber").value;
  drawChart();
}

Otherwise, the error about chart not being defined might come from the fact that you might have placed your code before the load of the google library. Hence, chart was called before the google objects existed (tho it's hard to tell with just that snippet).

Google Charts - animation transition example

1 Answers