Hi You are right one needs to reconstruct the chart and draw in order for the changes to take place. I agree that this is not as easy as just calling #draw() but I don't think that performance-wise this will make any difference. Are you seeing any other issues here ?
ChartMan On Fri, Apr 30, 2010 at 11:36 PM, Paulo Mendes <[email protected]>wrote: > Hi all, > I've been evaluating if Google Visualization's Motion Chart would > fulfill our requirements for a visualization tool in financial > analysis. > > I've been having a simple problem however: I'm filling a DataTable > through Javascript, creating the MotionChart and drawing it. I want to > allow the user to change values for a DataTable row's values, > dynamically using JavaScript, and then reflect the value changes in > the chart (where a point would move to a different position, based on > the new data). I've read that that could be done by simple altering > the values in the DataTable (through dataTable.setCell() or > dataTable.setValue()) and then simply calling "chart.draw()". However, > calling "draw()" does not update with the new values (drawing in the > new position). Only recreating the MotionChart object will draw the > object in a new position. > > What else is needed to update/refresh the MotionChar without > recreating the chart object? > > > Some code: > > var googleData = null; > var googleChart = null; > var googleOptions = {}; > var userDataTableRowIdx = -1; // will contain the index for the table > row to change > > google.load('visualization', '1', {'packages':['motionchart']}); > google.setOnLoadCallback(initChart); > > function initChart() > { > googleData = new google.visualization.DataTable(); > googleData.addColumn('string', 'Name); > googleData.addColumn('date', 'Date'); > googleData.addColumn('number', 'A'); > googleData.addColumn('number', 'B'); > } > > function fillAndDrawChart() > { > // in a cycle, call the function below to add values several > times, to populate the DataTable > for(/* ... */) > googleData.addRow([name,new Date (2007,12,31),varA, varB]); > > // save the table row to be altered with the user input values, > into variable "userDataTableRowIdx" > /* ... */ > > // setup the chart, create and draw it > googleOptions['width'] = chartWidth; > googleOptions['height'] = chartHeight; > googleOptions['showSidePanel'] = false; > googleOptions['showChartButtons'] = false; > googleOptions['showXScalePicker'] = false; > googleOptions['showYScalePicker'] = false; > googleOptions['showTrails'] = false; > > googleChart = new > google.visualization.MotionChart(document.getElementById('chart_div')); > googleChart.draw(googleData, googleOptions); > } > > /** > * Called when the user inputs new values, to update and redraw the > chart > */ > function ChartSetCellDetails(newValueA, newValueB) > { > googleData.setValue(userDataTableRowIdx, 2, newValueA); > googleData.setValue(userDataTableRowIdx, 3, newValueB); > > // googleChart = new > google.visualization.MotionChart(document.getElementById('chart_div')); > > googleChart.draw(googleData, googleOptions); > } > > > Thanks for any help, > Paulo Mendes > > -- > 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]<google-visualization-api%[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.
