Animation not working when using a dataview instead of a datatable

[josemoO]

Hi, I found that when I pass a dataview to the draw function of the graph the animation stop working, when passing a datatable directly it works correctly. Here you have some code that I am using:

var options = { width: 825, vAxis: { textPosition: "none", gridlines: { color: 'transparent' }, textStyle: { color: '000', fontName: 'Lato', fontSize: '16' }, viewWindow: { min: 0, max: 100 } }, hAxis: { textPosition: "none" }, height: 250, bar: { groupWidth: '50%' }, legend: { position: 'none' }, animation: { duration: 2000, easing: 'linear', startup: true } };

    self._chart = new window.google.visualization.ColumnChart(document.getElementById('dataQuality_graph'));

    var dataView = new google.visualization.DataView(self._graphData);
    self._chart.draw(dataView, options);

    window.google.visualization.events.addListener(self._chart, 'ready', self.drawAverageLine);
}

I think that using a dataview for adding or removing columns is very common, so I think this issue is important. Could you take a look to it?

I am using the current version of the corecharts, just in case I tested the Material version of a Column chart and it didn't work with it as well. Here is how I am loading the chart:

window.google.charts.load('current', { 'packages': ['corechart'] });

I hope you can fix it, if you need more info just let me know.

Thanks, Jose

[dlaliberte]

There were problems with using startup animation with DataViews, especially for some datatables. But those problems should have been fixed in the latest version, which you appear to be using. If you could put together a complete example, say on jsfiddle, that would be great. Thanks.

[josemoO]

Hi, I worked an example in JSFiddle, as you said the issue is not with all the DataTables, unfortunately mine is not working, here you have an example that does not work:

• https://jsfiddle.net/josemoO/rxqttvns/

In the previews example you will see that the columns are not animated, after 2 seconds they just appear. Just in case it's relevant the json is generated from Server Side using a library called Google DataTable Net Wrapper.

Thanks, Jose

[dlaliberte]

OK thanks. Nothing obviously problematic in your data, so I'll have to dig into the details at some point. In the meantime, you could simulate the startup animation by drawing the chart once without animation using 0 values, and then draw it again with animation on and using your data values.

[rounak48]

Hi, I worked an example in JSFiddle, as you said the issue is not with all the DataTables, unfortunately mine is not working, here you have an example that does not work:

• https://jsfiddle.net/josemoO/rxqttvns/

In the previews example you will see that the columns are not animated, after 2 seconds they just appear. Just in case it's relevant the json is generated from Server Side using a library called Google DataTable Net Wrapper.

Thanks, Jose

Hey Jose,

I have the same problem while using GoogleCharts with flask and sending the data to the BarChart using jinja templating. The data in the Bar graph just appears after 1 second instead of a smooth animation which I am expecting. Do you know the solution for this?

[yumyo]

OK thanks. Nothing obviously problematic in your data, so I'll have to dig into the details at some point. In the meantime, you could simulate the startup animation by drawing the chart once without animation using 0 values, and then draw it again with animation on and using your data values.

We tried in different ways but given we are loading our data from a Google Sheet, it does not seem possible to recreate the startup animation as it would normally occur. Inline and remote data, even when following the same structure, seems to differ somehow. Are you aware of any similar example to look at but based on remote data?

Also in my tests, I have noticed that with inline data, DataView is still able to animate. For some reason, it just fails if querying data remotely from a Google Sheet as shown in many code examples around in the documentation.

[dlaliberte]

Querying with older Google Sheets has been having problems since the last release, because of increased security. We have a workaround that will be part of the next release, though it won't help for Edge users.

One additional workaround you could investigate is updating your spreadsheet. I'm not sure what is involved in doing that, but if you create a new spreadsheet, you should get the new version, and then you should be able to copy in the contents from the old spreadsheet.

DataViews have problems with startup animation for a completely different reason. The result of Query is always a DataTable, but maybe there is a complication involving the asynchronous aspect of getting the response to a Query. If you are using a ChartWrapper, that also creates DataViews internally.