Google Charts - animation transition example

[solobos]

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.

function drawChart() {
  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,"hAxis.showTextEvery":1,"hAxis.title":"Stops"};
  chart.draw(data[newValue], options);
}
function changeChart(){
  newValue = document.getElementById("chartNumber").value;
  drawChart();
}

[asgallant]

The best way to approach this problem depends on what else is going on.  If you are calling changeChart() from an event (like a button click), then the "best" way to handle it is to define the handler locally within the drawChart function, which means your chart variable will be in scope at the time.

I noticed a couple things here that you should be aware of:

1) I presume that "data" is a globally defined DataTable object; if so, you can't use something like "data[newValue]" to access it.  Also, in general, you should avoid globals when possible.

2) Your options will not work as written.  "hAxis.slantedTextAngle" sets the options property "hAxis.slantedTextAngle", not the slantedTextAngle property of the hAxis property.  What you want is this:

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
    }
};​