Mise à jour Graphique Programmaticly avec Api Google Chart

C'est peut-être en double, mais ne peut pas trouver la solution à partir de les rubriques précédentes. Je tiens à ajouter/supprimer certaines données à mes multiples tableaux. Mais je déclare dataTable var à l'échelle mondiale et de définir onCallBack, pas de problème. Mais je tiens à ajouter/supprimer des données après un rappel avec Ajax.

var testRows = [
['Test-A', 4, 3],
['Test-B', 1, 2],
['Test-C', 3, 4],
['Test-D', 2, 0],
['Test-E', 2, 5]
];
var testRow = ['Test-F', 8, 1];
var data = null;
google.load("visualization", "1", {
packages: ["corechart", 'table']
});
google.setOnLoadCallback(function () {
data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addColumn('number', 'How Sexy');
data.addRows(testRows);
drawChart('tablechart', 'div_id_1', testRow, null);
drawChart('columnChart', 'div_id_2', null, null);
});
function drawChart(chartType, containerID, row, options) {
data.addRow(row);
var containerDiv = document.getElementById(containerID);
var chart = false;
if (chartType.toUpperCase() == 'BARCHART') {
chart = new google.visualization.BarChart(containerDiv);
} else if (chartType.toUpperCase() == 'COLUMNCHART') {
chart = new google.visualization.ColumnChart(containerDiv);
} else if (chartType.toUpperCase() == 'PIECHART') {
chart = new google.visualization.PieChart(containerDiv);
} else if (chartType.toUpperCase() == 'TABLECHART') {
chart = new google.visualization.Table(containerDiv);
}
if (chart == false) {
return false;
}
chart.draw(data, options);
}
drawChart('tablechart', 'div_id_1', ['abiz',5,2], null);
drawChart('columnChart', 'div_id_2', ['cabiz',5,2], null);

http://jsfiddle.net/eron/gD7KL/1/

OriginalL'auteur eiki | 2013-11-12

  1. 10

    Il vous suffit de manipuler votre DataTable et ensuite appeler draw() pour chacune de vos tables. Comme ceci :

    var columnChart, tableChart;
document.getElementById('change-btn').onclick=function() {
data.removeRow(0);
data.insertRows(0, [['Test-A-changed', 14, 13]]);
columnChart.draw(data);
tableChart.draw(data);
}

    le violon au-dessus de fourche pour démontrer this -> http://jsfiddle.net/Hw9U5/
    J'ai changé le drawChart-fonction ainsi suivre le tableau des instances.

    OriginalL'auteur davidkonrad