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
}
};
On Sunday, April 22, 2012 10:51:13 AM UTC-4, solobos wrote:
>
> 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();
>> }
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/SH0ujjTs2b8J.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
