How to make a table editable dynamically in google charts?

Question

I have created a table using DataTable in google charts. and also creating a pie chart using the table data.

I need to update/modify the table data dynamically on the browser and need to update the chart accordingly.

Please let me know how to make a table editable in the browser using google charts ?

Thanks in advance

Answer 1

the data can be modified by using one of the available methods

such as setValue
data.setValue(rowIndex, columnIndex, newValue);

anytime the data is changed, the chart must be re-drawn

see following working snippet, after the initial draw,
the data values are doubled and drawn again...

 google.charts.load('current', { callback: function () { var container = document.getElementById('chart_div'); var chart = new google.visualization.PieChart(container); var data = google.visualization.arrayToDataTable([ ['Task', 'Hours'], ['A', 2], ['B', 4], ['C', 6], ['D', 8], ['E', 10], ['F', 12], ['G', 14] ]); var options = { height: 400, chartArea: { top: 24 }, legend: 'top', pieHole: 0.4, pieSliceText: 'value', width: 400 }; google.visualization.events.addOneTimeListener(chart, 'ready', function () { // edit data for (var i = 0; i < data.getNumberOfRows(); i++) { // double values data.setValue(i, 1, data.getValue(i, 1) * 2); } chart.draw(data, options); }); chart.draw(data, options); }, packages: ['corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>