We Keep Coding

Google Visualization ChartWrapper set cell value programmatically

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>

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

Slow Google Charts control: Possible causes?

I have created a Google Charts linechart with a scrolling control, but the redraw performance is abysmal when I try to use the control. It literally locks up, moving fractionally when I try to scroll the horizontal scroller.
It wouldn't be the amount of data, I wouldn't think, as it is just two columns in JSON -- date and a measurement -- and only one year worth of daily data.
What am I missing? What could be causing this to be slow when I attempt to manipulate the linechart using a ChartRangeFilter?
Here is a subset of the code, just the Javascript for data loading and manipulation:
google.charts.setOnLoadCallback(drawChartRangeFilter);
function drawChartRangeFilter() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('chartRangeFilter_dashboard_div'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'chartRangeFilter_control_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
}
},
// Initial range
'state': {'range': {'start': new Date(2015, 5, 6), 'end': new Date()}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chartRangeFilter_chart_div',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
//'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
'legend': {'position': 'none'}
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type': 'string'
}, 1]
}
});
var data2 = $.ajax({
url: "the url",
dataType: "JSON",
async: false,
}).responseText;
var data = new google.visualization.DataTable($.parseJSON(data2));
dashboard.bind(control, chart);
dashboard.draw(data);
}

Google Charts API change color based on control selection

I have a google chart where I am trying to change the color based on the category control.
My chart is a histogram which should change color based on the selection in the programmaticDropdown. Part of my code is shown below:
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
programmaticDropdown = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Type',
'ui': {'allowMultiple': false},
}
});
programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'Histogram',
'containerId': 'programmatic_chart_div',
'options': {
'title': 'Issues by Month',
'legend': 'none',
'height':400,
'hAxis': {
'viewWindowMode':'explicit',
'viewWindow':{
'max':13,
'min':0
}
}
},
'view': { 'columns': [0, 1] }
});
dashboard.bind(programmaticDropdown, programmaticChart);
dashboard.draw(data);
}
Also, here is a link to the google chart controls documentation that has some UI information... can anyone help?
Thanks!!!
https://developers.google.com/chart/interactive/docs/gallery/controls?hl=en#controls-gallery

Solved it!!! To do this, I had to add an event listener and function to my code. See below.
google.visualization.events.addListener(programmaticDropdown, 'statechange', changeTitle);
function changeTitle () {
var location = programmaticDropdown.getState().selectedValues[0];
if (location == "CLOSED") {
programmaticChart.setOption('colors', ['#e7711c']);
} else if (location == "OPEN") {
programmaticChart.setOption('colors', ['#ff0000']);
}
programmaticChart.draw();
}

Google visualisation errors

I have google vis datatable and dashboard (control filters, string control, datatable, charts). All element is bind.
So I get from database JSON and send to gViz api to draw table, chart and control.
When I use contols to filter some data and if there is no data for that string then I get error from google visualisation like this:
One or more participants failed to draw()×
Table has no rows.×
and similar messages. So in my app this is so ugly so is there any way to not showing it?
So if there is no data to not show the error...
I try with CSS option:
#google-visualization-errors-all-3 {
display:none;
}
but its not good solution for me.
Is there any other way, maybe in google visualusation api for dashboard?
UPDATE:
var slider;
var ajdi = '';
function drawVisualization() {
var cssClassNames = {
'headerRow': 'zaglavlje',
'tableRow': 'red',
'oddTableRow': 'red1',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': 'prekoreda',
'headerCell': 'gold-border',
'tableCell': 'cell',
'rowNumberCell': 'underline-blue-font'
};
var json = $.ajax({
url: 'getzadaci.php', // make this url point to the data file
dataType: 'json',
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
//dodajemo kolonu sa kontrolama
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Status',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true,
'caption': 'Status'
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnIndex': 8,
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true,
'caption': 'Parcela'
}
}
});
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control4',
'options': {
'filterColumnIndex': 2,
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true,
'caption': 'Vrsta zadatka'
}
}
});
var stringFilter1 = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control3',
'options': {
'matchType': 'any',
'filterColumnIndex': 1,
'ui': {'labelStacking': 'vertical'}
}
});
var slider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'control5',
'options': {
'filterColumnLabel': 'Pocetak',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a Pie chart
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'cssClassNames': 'cssClassNames',
'view': { 'columns': [1,2,12,5,6,8,11] },
'options': {
cssClassNames: cssClassNames,
allowHtml: true
}
});
var timeline = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart5',
options: {
height: '350',
timeline: { colorByRowLabel: true,
backgroundColor: '#ffd' },
//timeline.barLabelStyle: {color: '#000', fontName: 'Arial', fontSize: '13px'},
//backgroundColor: '#fff',
colors: ['#55c2a2', '#89d168', '#d3eb87','#8ec63e', '#FFF0BA','#FF542E', '#CFD6DE', '#ADC1D6', '#7297BA']
//timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
// barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
},
view: {
// as an example, use columns "Naziv", "Vrsta", "Pocetak", and "Zavrsetak" for the timeline
columns: [8, 2, 5, 6]
},
});
var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
formatter_short.format(data, 5);
formatter_short.format(data, 6);
new google.visualization.events.addListener(table, 'ready', function () {
google.visualization.events.addListener(table.getChart(), 'select', function () {
var selection = table.getChart().getSelection();
// iterate over all selected rows
for (var i = 0; i < selection.length; i++) {
//$("#edit").removeClass("edit btn btn-success")
//$('#edit').addClass('edit btn btn-success');
ajdi = table.getDataTable().getValue(selection[i].row,0);
$("#vrednostid").val(table.getDataTable().getValue(selection[i].row,0));
$("#naziv1").val(table.getDataTable().getValue(selection[i].row,1));
$("#vrsta_rada1").val(table.getDataTable().getValue(selection[i].row,2));
$("#status1").val(table.getDataTable().getValue(selection[i].row,3));
$("#opis1").val(table.getDataTable().getValue(selection[i].row,4));
$("#usluzno1").val(table.getDataTable().getValue(selection[i].row,9));
var p = new Date(table.getDataTable().getValue(selection[i].row,5));
$("#dp31").datepicker("setDate", p);
var z = new Date(table.getDataTable().getValue(selection[i].row,6));
$("#dp41").datepicker("setDate", z);
//$("#parcele1").val(table.getDataTable().getValue(selection[i].row,8));
//$("#parcele1").select2("val", ["3","19"]);
var id = table.getDataTable().getValue(selection[i].row,10);
var naziv = table.getDataTable().getValue(selection[i].row,8);
var idArr = (id.lastIndexOf(',') == (id.length - 1) ? id.substr(0, id.length - 1) : id).split(', ');
var nazivArr = (naziv.lastIndexOf(',') == (naziv.length - 1) ? naziv.substr(0, naziv.length - 1) : naziv).split(', ');
var objHold = [];
for(var j=0,length=idArr.length;j<length;j++)
{
if(idArr[j] && nazivArr[j]) // make sure both arrays have a value
objHold.push({id: idArr[j], naziv: nazivArr[j]});
}
$("#parcele1").select2("data", objHold);
}
});
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([categoryPicker, categoryPicker1, categoryPicker2, slider, stringFilter1], [table, timeline]).
// Draw the entire dashboard.
draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'}); }
//table.draw(data, {'allowHtml':true, 'cssClassNames': cssClassNames}); }
function dashboardReady() {
// The dashboard is ready to accept interaction. Configure the buttons to
// programmatically affect the dashboard when clicked.
// Change the slider selected range when clicked.
document.getElementById('rangeButton').onclick = function() {
slider.setState({'lowValue': 2, 'highValue': 5});
slider.draw();
};
// Change the pie chart rendering options when clicked.
document.getElementById('optionsButton').onclick = function() {
piechart.setOption('is3D', true);
piechart.draw();
};
}
google.setOnLoadCallback(drawVisualization);// JavaScript Document
This is my code, so the important part is .ajac function, so how I can here integrate if row>0 to show charts ???

I had the same problem using the Google Charts API. To get around it I simply had to check the number of rows that made it through the filters. If it's >= 1, draw the chart. else do whatever you need to; don't draw the chart, display error, etc.

I've seen a solution to your code in someone else's fork of a GitHub project I've done a bit of work on. Since I didn't write this I'll link to it in this repository:
leonardean/angular-google-charts
Here's to code in case this link breaks:
google.visualization.events.addListener(chartWrapper, 'error', function (err) {
google.visualization.errors.removeError(err.id);
});
If you click the link above it will show you the lines I'm refering to highlighted. Basically, the author of this code is passing an event listener to the google charts api that listens for the error event, and then in the error handler removes the error. Not exactly a best practice, but I believe this would still log to console. If it doesn't you can just log the error to console yourself from the handler, but it does get rid of the ugly red box.

This function will get rid of all google chart error messages. Call it in a script tag after your DOM and charts have loaded.
// Gets rid of all Google's error messages
function removeGoogleErrors() {
var id_root = "google-visualization-errors-all-";
var index = 1;
while (document.getElementById(id_root + index.toString()) != null) {
document.getElementById(id_root + index.toString()).style.display = 'none';
index += 2;
}
}

Adding pagination (table paging) to Google visualization table

I am looking to add pagination to my Google visualization table. I have followed the guide and have the code below. I can't figure out why it's not working... can anyone see anything wrong? The pagination part is at the bottom.
Also, as a longer term project, if possible, I'd be looking to have each page as a separate webpage rather than all on the same URL... anyone know a why to implement this?
Javascript code:
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'Age');
data.addColumn('string', 'Foot');
data.addColumn('string', 'Position');
data.addColumn('number', 'Attack');
data.addColumn('number', 'Control');
data.addColumn('number', 'Dribbling');
data.addColumn('number', 'Low Pass');
data.addColumn('number', 'Lofted Pass');
data.addColumn('number', 'Finishing');
data.addColumn('number', 'Place Kicking');
data.addColumn('number', 'Controlled Spin');
data.addColumn('number', 'Heading');
data.addColumn('number', 'Defence');
data.addColumn('number', 'Ball Winning');
data.addColumn('number', 'Kicking Power');
data.addColumn('number', 'Speed');
data.addColumn('number', 'Explosive Power');
data.addColumn('number', 'Body Balance');
data.addColumn('number', 'Jump');
data.addColumn('number', 'Goalkeeping');
data.addColumn('number', 'Saving');
data.addColumn('number', 'Tenacity');
data.addColumn('number', 'Stamina');
data.addColumn('number', 'Form');
data.addColumn('number', 'Injury Resistance');
data.addColumn('number', 'Weak Foot Usage');
data.addColumn('number', 'Weak Foot Accuracy');
data.addColumn('number', 'Overall Rating');
data.addRows([
['RONALDO','REAL MADRID','PORTUGAL',187,80,28,'Right','LWF',94,90,95,83,87,92,93,85,97,48,49,96,87,87,90,89,50,50,74,78,5,3,5,7,99],
['MESSI','BARCELONA','ARGENTINA',169,67,26,'Left','SS',94,93,98,84,81,99,87,86,74,53,48,80,82,98,83,74,50,50,76,76,6,3,4,6,99],
['INIESTA','BARCELONA','SPAIN',170,65,29,'Right','CMF',86,98,97,94,86,83,72,82,64,67,49,77,78,87,75,63,50,50,78,88,6,2,6,8,98],
['BUFFON','JUVENTUS F.C.','ITALY',191,83,35,'Right','GK',42,60,62,62,63,45,45,45,55,41,45,78,73,75,87,86,96,98,82,62,7,2,4,4,97],
['XAVI','BARCELONA','SPAIN',170,68,33,'Right','CMF',82,95,89,98,90,73,80,82,67,71,58,76,74,83,74,72,50,50,80,88,8,2,4,5,97],
['PIRLO','JUVENTUS F.C.','ITALY',177,68,34,'Right','DMF',83,93,88,92,97,76,96,95,66,72,58,80,74,76,74,65,50,50,79,82,7,2,7,7,96],
['AGUERO','MAN BLUE','ARGENTINA',175,70,25,'Right','CF',90,88,90,77,73,92,73,72,82,49,47,83,90,90,85,94,50,50,74,83,7,3,5,5,96],
['IBRAHIMOVIC','PARIS SAINT-GERMAIN','SWEDEN',194,94,31,'Right','CF',91,93,96,88,87,87,81,79,76,47,52,93,78,73,98,78,50,50,78,76,5,2,5,6,95],
['VAN PERSIE','MANCHESTER UNITED','NETHERLANDS',183,71,30,'Left','CF',91,89,87,85,84,95,80,90,75,52,46,89,82,82,82,74,50,50,75,77,6,2,5,7,95],
['CAVANI','PARIS SAINT-GERMAIN','URUGUAY',184,74,26,'Right','CF',94,83,83,76,76,94,84,78,90,66,52,85,85,81,86,90,50,50,86,93,7,3,6,4,95],
['FALCAO','AS MONACO FC','COLOMBIA',177,72,27,'Right','CF',94,82,81,79,77,98,75,74,97,55,44,81,80,84,76,86,50,50,77,78,6,3,5,6,95],
['CASILLAS','REAL MADRID','SPAIN',185,84,32,'Left','GK',40,47,56,58,59,45,45,45,55,45,44,75,75,79,81,85,97,95,90,60,7,3,4,4,95],
['NEUER','BAYERN MÜNCHEN','GERMANY',193,92,27,'Right','GK',40,62,62,63,66,45,45,45,55,45,42,86,72,75,86,79,97,94,85,60,7,3,3,4,94],
['ROONEY','MANCHESTER UNITED','ENGLAND',176,86,27,'Right','CF',90,86,84,85,84,93,76,80,78,63,55,89,83,83,91,76,50,50,90,90,6,3,5,6,94],
['SUÁREZ','MERSEYSIDE RED','URUGUAY',181,81,26,'Right','CF',93,83,88,82,78,93,78,77,68,57,49,85,83,85,84,74,50,50,65,81,4,3,4,5,94],
['JÚLIO CÉSAR','FREE','BRAZIL',186,79,34,'Left','GK',47,67,66,64,66,50,54,56,55,41,45,78,72,75,83,82,94,96,75,60,6,3,4,4,94],
['CESC FABREGAS','FC BARCELONA','SPAIN',179,75,26,'Right','CMF',84,91,87,92,85,85,77,80,70,73,51,80,76,82,75,73,50,50,82,92,6,2,6,7,93],
['RONALDINHO','ATLÉTICO MINEIRO','BRAZIL',182,80,33,'Right','AMF',81,92,94,92,88,84,86,89,78,47,46,81,80,76,81,82,50,50,75,74,4,2,5,6,93],
['SILVA','MAN BLUE','SPAIN',170,67,27,'Left','AMF',85,92,91,93,85,81,76,77,62,60,46,77,80,90,74,75,50,50,72,80,6,2,3,3,93],
['VIDIC','MANCHESTER UNITED','SERBIA',189,84,31,'Right','CB',65,71,69,72,70,61,62,61,92,91,87,75,74,71,92,86,50,50,86,79,6,2,4,4,93],
['HANDANOVIC','INTER','SLOVENIA',193,89,29,'Right','GK',40,45,48,46,49,45,45,45,55,43,41,76,70,73,86,70,95,95,75,65,7,3,5,5,93],
['VALDÉS','FBARCELONA','SPAIN',183,78,31,'Right','GK',41,62,60,63,64,45,50,50,55,45,40,81,75,82,84,84,95,92,83,60,7,3,3,4,92],
['CECH','LONDON FC','CZECH REPUBLIC',197,92,31,'Left','GK',40,63,52,56,57,45,45,45,55,45,43,85,67,70,88,80,92,95,78,60,7,2,4,4,92],
['FREY','GENOA CFC','FRANCE',189,85,33,'Right','GK',41,48,52,55,52,45,45,45,55,40,46,75,67,68,86,82,95,92,76,60,7,2,3,3,92],
['NEYMAR','FBARCELONA','BRAZIL',174,64,21,'Right','SS',82,93,98,81,80,84,85,82,65,50,43,75,83,93,73,83,50,50,65,78,5,2,5,6,92],
['THIAGO SILVA','PARIS SAINT-GERMAIN','BRAZIL',183,79,29,'Right','CB',73,78,83,82,84,65,75,66,81,94,85,85,83,83,87,92,50,50,83,81,6,3,5,5,92],
['DI NATALE','UDINESE CALCIO','ITALY',170,70,35,'Right','CF',88,87,84,83,85,95,82,85,71,50,41,75,79,87,72,72,50,50,84,75,7,2,5,6,92],
['MILITO','INTER','ARGENTINA',183,78,34,'Right','CF',91,85,83,77,74,92,70,72,78,57,47,78,77,79,81,78,50,50,80,79,6,2,6,7,92],
['TERRY','LONDON FC','ENGLAND',187,90,32,'Right','CB',67,72,72,78,77,64,58,56,90,90,93,80,71,67,91,82,50,55,91,77,4,2,6,7,92],
['KOMPANY','MAN BLUE','BELGIUM',191,91,27,'Right','CB',71,78,78,78,81,63,63,63,82,90,92,81,79,74,92,84,50,50,87,80,7,1,5,5,92],
['CHIELLINI','JUVENTUS F.C.','ITALY',186,76,29,'Left','CB',71,73,73,70,72,66,65,70,79,91,90,83,83,76,89,87,50,50,86,82,7,2,4,4,92],
['ROBBEN','BAYERN MÜNCHEN','NETHERLANDS',180,80,29,'Left','RMF',84,87,94,80,83,84,78,80,70,54,46,85,92,88,78,73,50,50,65,76,4,1,4,4,92]
]);
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter1 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var stringFilter2 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'position',
options: {
filterColumnIndex: 7
}
});
var numberRangeFilter1 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var numberRangeFilter2 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'height',
options: {
filterColumnIndex: 3,
minValue: 160,
maxValue: 210,
ui: {
label: 'Height'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter1, stringFilter2, numberRangeFilter1, numberRangeFilter2], [table]);
dashboard.draw(data);
options['page'] = 'enable';
options['pageSize'] = 20;
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'auto';
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});

You are setting the options to enable paging after drawing the table, which is why it doesn't work. Set those options in the table's ChartWrapper instead, and it will work:
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true,
page: 'enable',
pageSize: 20,
pagingSymbols: {
prev: 'prev',
next: 'next'
},
pagingButtonsConfiguration: 'auto'
}
});
IMO< forcing a page reload or forcing the user to navigate to a new page is not a good idea for handing table pagination, but you can do it if you really want to. You just need to keep track of where your user is in the data set and serve up the appropriate data when the page is refreshed or the new page is visited.
I would suggest, however, that you investigate implementing server-side paging via AJAX calls. Set up a script or servlet that hands out data in pieces, and an AJAX function on the client-side that calls the server for the next piece of data (it could be one page, 5 pages, 100 pages, whatever is most convenient for your application), and fills in the table piece-by-piece.

D3 table with pagination. Check this fiddle below.
var tableChartWithPagination = function(inputData, divName) {
var wd = 700;
var ht = 550;
var keys = new Array();
// no. of rows per page
var pageSize = 4;
var currentPage = 1;
var totalPages = getTotalPages();
...
D3 table with pagination.
cheers.