Обновить Chart Programmaticly с помощью Google Chart Api

Question

Возможно, он дубликат, но не может найти решение из предыдущих тем. Я хочу добавить/удалить некоторые данные в свои множественные диаграммы. Но я объявляю dataTable var глобально и устанавливаю его onCallBack, без проблем. Но я хочу добавить/удалить данные после обратного вызова с помощью 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/

Answer 1

Вы просто манипулировать DataTable, а затем вызвать draw() для каждой из таблиц. Как это:

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); 
} 

скрипка выше раздвоенный, чтобы продемонстрировать это ->http://jsfiddle.net/Hw9U5/ Я изменил drawChart -функции, а также следить за экземплярами диаграммы.