redraw chart
Bill Patton
http://www.logsitall.com/jswrite.asp
The problem arises when the user clicks a second value after the first instance of the chart has been drawn. I've tried moving the call back function to a separate script block and a few other solutions to no avail. Can you advise?
-bill
c2billp
when i call the function that is attempting to draw the chart on table
select:
// When the table is selected, update the chart.
google.visualization.events.addListener(table2, 'select', function
(event) {
view.setRows(view.getFilteredRows([{column: 1, value: data.getValue
(item.row, 1)}]));
var chart = new google.visualization.LineChart
(document.getElementById('chart'));
chart.draw(view, {width: 500, height: 250, sortColumn: 1});
});
It works the first time - then on subsequent calls - it leaves the
first instance of the chart in place - then adds another "no data"
null chart object below the first one - leaving the first in place. If
I insert the entire data.setcell() bit into the event function - then
it still draws new chart objects - but this time each chart is
connected to data.
Code
<script type='text/javascript' src='http://www.google.com/jsapi'>
</script>
<script type='text/javascript'>
google.load('visualization', '1.0', {packages:
['table','linechart']});
</script>
<script>
function drawTable() {
var options = {'width': 690, 'allowHtml': true, 'pageSize': 10,
'page': 'enable', 'sortColumn': 0, 'sortAscending':false}
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date Done');
data.addColumn('number', 'Meters');
data.addColumn('timeofday', 'Total Time (time of day)');
data.addColumn('string', 'Weight Class');
data.addColumn('date', 'Date Entered (date)');
data.addColumn('string', 'Comments');
data.addColumn('string', 'ranked');
data.addRows(5);
data.setCell(0,0,new Date(2009,9,5));
data.setCell(0,1,520);
data.setCell(0,2,[0,8,35,0]);
data.setCell(0,3,'H');
data.setCell(0,4,new Date(2009,9,5));
data.setCell(0,5,'0');
data.setCell(0,6,'Y');
data.setCell(1,0,new Date(2009,9,3));
data.setCell(1,1,500);
data.setCell(1,2,[0,8,15,0]);
data.setCell(1,3,'H');
data.setCell(1,4,new Date(2009,9,5));
data.setCell(1,5,'0');
data.setCell(1,6,'Y');
// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType:
'short'});
// Reformat our data.
formatter.format(data, 0);
var table = new google.visualization.Table(document.getElementById
('table_div_3'));
table.draw(data,options,null);
//create a new view that will have the filter applied
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
var table2 = new google.visualization.Table(document.getElementById
('modified_data_table'));
//draw the table using the view
table2.draw(view,options,null);
// When the table is selected, update the chart.
google.visualization.events.addListener(table2, 'select', function
(event) {
view.setRows(view.getFilteredRows([{column: 1, value: data.getValue
(item.row, 1)}]));
var chart = new google.visualization.LineChart
(document.getElementById('chart'));
chart.draw(view, {width: 500, height: 250, sortColumn: 1});
});
}
google.setOnLoadCallback(drawTable);
</script>
</head>
<body>
<div id='table_div_3'>loading...</div>
<hr>
<div id='modified_data_table'>loading...</div>
<hr>
<div id='chart'></div>
</body>
</html>
ChartMan
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.