Geek asks and answers

Google Charts - An Example of Transition to Animation

Take a look at my JS below for my drawChart function for google chart. It works as I expected. HOWEVER, because it var chart ...is inside the drawChart function, animations do not work - instead, Google thinks it creates a new chart every time and just updates the chart.

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

If I pulled out var chart ...of a function drawChart, I get the error "Chart is not defined." Appreciate the help from those who have worked a lot with Google graphics cards. 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();
}
+3
source share
1 answer

I have never tried google maps, but I think this code will 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 determination error cannot be due to the fact that you could place your code before downloading the google library. Therefore, the diagram was called before google objects existed (it’s hard to say only with this fragment).

+3
source

More articles:


All Articles