Here's some example code that reuses chart objects instead of recreating them:
function drawCharts () {
var data = [], charts = [], xhrs = [], options = {
displayAnnotations: true
};
for (var i = 0; i < ${size}; ++i) {
if(window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhrs.push(new XMLHttpRequest());
}
else {
// code for IE6, IE5
// you probably want to throw an error here, since the visualization API does not support IE 5, 6 anyway
xhrs.push(new ActiveXObject("Microsoft.XMLHTTP"));
}
charts.push(new google.visualization.AnnotationChart(document.getElementById('chart_div'+id));
xhrs[i].open("GET", '/${conf["name"]}/submit_data?idx=' + i, true);
xhrs[i].onreadystatechange = function(idx) {
return function() {
if(xhrs[idx].readyState == 4 && xhrs[idx].status == 200) {
var myData = JSON.parse(xhrs[idx].responseText);
data[idx] = new google.visualization.DataTable();
var params = myData[0];
for(var i = 0; i < params.length; i++) {
data[idx].addColumn(params[i][0], params[i][1]); //type and name pair
}
var q_result = myData[1];
var rows = new Array(q_result.length);
for(var i = 0; i < q_result.length; i++) {
tmp_array = [];
for(var j = 0; j < q_result[0].length; j++) {
var tobeadded = params[j][0]=='date' ? new Date(q_result[i][j]) : q_result[i][j];
tmp_array.push(tobeadded);
}
rows[i] = tmp_array;
}
data[idx].addRows(rows);
charts[idx].draw(data[idx], options);
}
};
}(i);
xhrs[i].send();
}
}