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].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
