Google Visualization ChartWrapper set cell value programmatically

Question

When I click on a line item a Google visualization ChartWrapper table, I want to programmatically update the product value in the row that was clicked.

I'm getting stuck here: dataTable.setValue(row, col, valNew);

According to the documentation I should be able to use setValue to update a value in the datable. I'm getting error "setValue is not a function".

Hoping that someone can point me in the right direction...

Here is my code so far. The problem is in the selectHandler_table_db function.

 google.charts.load('current', { packages: ['table', 'controls'] }).then(function() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('string', 'Product'); data.addColumn('number', 'Quantity'); var dt1 = new Date(moment().endOf('month').subtract(3, 'month')); var dt2 = new Date(moment().endOf('month').subtract(2, 'month')); var dt3 = new Date(moment().endOf('month').subtract(1, 'month')); var dt4 = new Date(moment().startOf('month')); var dt5 = new Date(moment().startOf('month').add(1, 'day')); var dt6 = new Date(moment().startOf('month').add(2, 'day')); data.addRows([ [dt1, 'a', 100], [dt2, 'b', 200], [dt3, 'a', 300], [dt4, 'b', 400], [dt5, 'a', 500], [dt6, 'b', 600], ]); var view = new google.visualization.DataView(data); example_dashboard(view); }); function example_dashboard(view) { var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard')); var categoryPicker1 = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'div_categoryPicker1', options: { filterColumnIndex: view.getColumnIndex('Product'), matchType: 'any', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false, allowNone: true } } }); var table_db = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'div_table', options: { width: '100%', height: 'auto', } }); dashboard.bind(categoryPicker1, table_db); dashboard.draw(view); google.visualization.events.addListener(table_db, 'select', selectHandler_table_db); function selectHandler_table_db() { let chartWrapper = table_db.getChart(); let dataTable = table_db.getDataTable(); let row = chartWrapper.getSelection()[0].row; let col = 1; let valNew = "c"; //This errors dataTable.setValue is not a function dataTable.setValue(row, col, valNew); chartWrapper.draw(); } //END selectHandler_table } //END example_dashboard(){

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id='div_dashboard'> <div id='div_categoryPicker1'></div> <div id="div_table"></div> </div>

Answer 1

the error occurs because you are using a DataView to draw the Dashboard,
which is the object returned from the ChartWrapper, and not a DataTable.

you could resolve by passing the DataTable instead,

example_dashboard(data);  // use data table here

it doesn't appear you are modifying the data using the view.
or if that code just isn't included here,
you can convert the DataView to a DataTable, before drawing the dashboard...

example_dashboard(view.toDataTable());  // convert view to DataTable