This is the planned behavior. The chart is trying to keep the identity of the different series of data (identified by the column id) during the transition animation. If you change the data of the same series everything works well (when you don't have any ids the chart thinks it is the same series).
If you switch between different series, generally speaking, it doesn't make a lot of sense to animate the transition. For example, try to animate between [0,1,2] view and [0,2,1] view in your example. You will see that the animation takes advantage of the fact that it identifies the series by their ids, and visually switches between the two series. So, the best suggestion I can think for you, is to create two different data tables with the same column ids and switch between them. Good luck! On Tue, Mar 13, 2012 at 4:33 AM, Brandon <[email protected]> wrote: > Hello, > > I am encountering incomplete animated chart transition behavior when > using a DataTable created from a JSON string and adjusting the columns > of the DataView. The chart itself resizes with animation, but the > bars disappear and then reappear at the end of the animation duration. > > This only seems to happen when the JSON string includes the 'id' > property for the columns. If the id's are left empty, the animated > transition performs normally. > > The chart also animates normally when adjusting the DataTable itself, > as opposed to using the DataView, even when the column id's are filled > out. > > The following code demonstrates the described behavior: > > <html> > <script src="https://www.google.com/jsapi"; type="text/javascript"></ > script> > <script> > google.load('visualization', '1', {packages:['corechart']}); > google.setOnLoadCallback(drawTable); > > function drawTable() { > var chart = new > google.visualization.BarChart(document.getElementById('chart_div')); > // Note the column 'id' properties. > var json_data = new google.visualization.DataTable({ > cols: [{id: 'a', label: 'NEW A', type: 'string'}, > {id: 'b', label: 'B-label', type: 'number'}, > {id: 'c', label: 'C-label', type: 'number'} > ], > rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: 6.0, f: > 'Six'}]}, > {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: 5.0, f: > 'Five'}]}, > {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: 4.0, f: > 'Four'}]} > ], > p: {foo: 'hello', bar: 'world!'} > }, 0.6); > var options = { > animation:{ > duration: 1000, > easing: 'out', > }, > } > view = new google.visualization.DataView(json_data); > view.setColumns([0,1]); > chart.draw(view, options); > var current_col = 0 > var button = document.getElementById('b1'); > button.onclick = function() { > current_col = 1 - current_col; > // Adjusting the DataView's view columns. > view.setColumns([0,1+current_col]); > chart.draw(view, options); > } > } > </script> > <body> > <form> > <input id="b1" type="button" value="Adjust DataView columns and > redraw chart" onclick="transitionChart()" /> > </form> > <div id="chart_div"></div> > </body> > </html> > > Is this a known limitation of the animated transition functionality? > > I am attempting to use the Python Data Source Library, which requires > column id's to create the JSON string. I am hoping to avoid having to > manually remove the id's after creating the string. > > Thanks, > Brandon > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > 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. > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
