I found lots of example using animation but mostly static data. They dont
cover how to animate using data coming from JSON. I want to create
animation like this example *http://jsfiddle.net/h7mSQ/163/*
<http://jsfiddle.net/h7mSQ/163/>
I am creating chart using zero values and then setting the required values.
However it is not animating. it does load on page load. Here is my code for
drawChart(),
'queryObject' is the JSON object.
How can I make the chart animate? Thanks for the help.
>
> function drawChart() {
> //creating empty chart
> var options = {
> animation:{
> duration: 1000,
> easing: 'out',
> }
> };
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'mdn');
> data.addColumn('string', 'category');
> data.addColumn('number', 'kbUsage');
>
>
> for(var i=0;i<queryObjectLen;i++)
> {
> var category = queryObject.empdetails[i].category;
> //alert(category);
> var kbUsage = queryObject.empdetails[i].kbUsage;
> //alert(kbUsage);
> var mdn = queryObject.empdetails[i].mdn;
> //alert(mdn);
> data.addRows([
> [mdn,category,parseInt(0)]
> ]);
> }
> var chart = new
> google.visualization.BarChart(document.getElementById('chart1'));
> chart.draw(data, options);
>
> //Creating actual chart
> var data = new google.visualization.DataTable();
>
> data.addColumn('string', 'mdn');
> data.addColumn('string', 'category');
> data.addColumn('number', 'kbUsage');
>
> //alert("inside drawChart");
> for(var i=0;i<queryObjectLen;i++)
> {
> var category = queryObject.empdetails[i].category;
> //alert(category);
> var kbUsage = queryObject.empdetails[i].kbUsage;
> //alert(kbUsage);
> var mdn = queryObject.empdetails[i].mdn;
> //alert(mdn);
> data.addRows([
> [mdn,category,parseInt(kbUsage)]
> ]);
> }
> var options = {
>
> title:"Category Information",
> width:600, height:400,
> animation: {duration: 1000, easing: 'out'},
> vAxis: {title: "Category lists", minValue:0, maxValue:500},
> hAxis: {title: "KB used"}
>
> };
>
>
> var categoryPicker = new google.visualization.ControlWrapper({
> controlType: 'CategoryFilter',
> containerId: 'control3',
> options: {
> filterColumnLabel: 'mdn',
> ui: {
> labelStacking: 'vertical',
> allowTyping: false,
> allowMultiple: false,
> caption : 'All MDNs'
> }
> }
> });
>
> // Define a table
> var table = new google.visualization.ChartWrapper({
> chartType: 'Table',
> containerId: 'chart2',
> options: {
> width: '500px'
> }
> });
>
> // Define a Pie chart
> var bar = new google.visualization.ChartWrapper({
> chartType: 'BarChart',
> containerId: 'chart1',
> options: options
> // Instruct the piechart to use colums 1 (Category) and 2 (KB)
> // from the 'data' DataTable.
> /*view: {
> columns: [1, 2]
> }*/
> });
>
> //var chart = new
> google.visualization.PieChart(document.getElementById('chart_div'));
> var chart = new
> google.visualization.Dashboard(document.getElementById('dashboard')).
> bind([categoryPicker], [table]);
> google.visualization.events.addListener(chart, 'error', function (err) {
> google.visualization.errors.removeError(err.id);
> });
> //Adding listener to draw sub-categories
> google.visualization.events.addListener(chart, 'select', function(){
> var selection=chart.getSelection();
> alert(selection);
>
> });
>
> // get average values
> google.visualization.events.addListener( table, 'ready', function () {
> var newData = table.getDataTable();
> var group = google.visualization.data.group(newData ,[{
> // we need a key column to group on, but since we want all rows
> grouped into 1,
> // then it needs a constant value
> column: 0,
> aggregation: google.visualization.data.sum,
> type: 'number',
> modifier: function () {
> return 1;
> }
> }], [{
> // get the geometric mean of age
> column: 2,
> label: 'Total Byte',
> type: 'number',
> aggregation: function (values) {
> var product = 0;
> var n = values.length;
> for (i = 0; i < n; i++) {
> product = product + values[i];
> }
> product = (product/1024)/1024;
> return product.toFixed(3);
> }
> }]);
> document.getElementById('avg').innerHTML = group.getValue(0, 1);
> var pieData = google.visualization.data.group(newData, [1], [{
> column:2,
> aggregation: google.visualization.data.sum,
> type:'number'
> }]);
> google.visualization.events.addListener(bar, 'ready', function() {
> // grab a few details before redirecting
> google.visualization.events.addListener(bar.getChart(), 'select',
> function() {
> chartObject = bar.getChart();
> alert(data.getValue(chartObject.getSelection()[0].row, 1));
> var selection = data.getValue(chartObject.getSelection()[0].row, 1);
> alert(selection.length);
> if(selection.length > 1)
> drawSubChart(selection);
>
> });
> //location.href = 'http://www.google.com?row=' + row + '&col=' +
> col + '&year=' + year;
> });
> bar.setDataTable(pieData);
> bar.draw();
> //document.getElementById('geomean').innerHTML = group.getValue(0, 2);
> });
> //alert(data.getFormattedValue(1,1));
> chart.draw(data);
> }
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
