Simple Dashboard taking data from google sheets - One or more participants failed to draw

Gareth R

unread,

Jan 7, 2016, 8:31:35 AM1/7/16

to Google Visualization API

Hi, I'm new to this and trying to create a simple dashboard using taking a simple table from Google sheets, to enable me to create a template that i can them expand on for further learning. I can get the table to show as a simple table using charts but not in the form of a dashboard, I get the above error. Any help for a newbie appreciated.

Many thanks,

Gareth

Gareth R

unread,

Jan 7, 2016, 8:32:59 AM1/7/16

to Google Visualization API

Code I'm using..

<!DOCTYPE html>

<html>

<head>

google.load('visualization', '1.0', {'packages':['controls','bar']});

google.setOnLoadCallback(queryData);

function queryData(){

var queryString = encodeURIComponent('SELECT A,B,C');

var magicIncantation = '/gviz/tq?gid=0&headers=1&tq=';

var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1aZZuEu78G2ZU49Gq41yaWhzRJkvEbXRxoc8mnTWva2s/' + magicIncantation + queryString);

query.send(handleQueryResponse);

};

function handleQueryResponse(response){

var data = response.getDataTable();

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

ChartRangeFilter = new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'control_ div',

'options': {

'filterColumnIndex': 0,

},

});

BarChart = new google.visualization.ChartWrapper({

'chartType':'TableChart',

'containerID': 'chart_div',

});

dashboard.bind(ChartRangeFilter,BarChart);

dashboard.draw(data);

};

</script>

</head>

<body>

</div>

</body>

</html>

Daniel LaLiberte

unread,

Jan 7, 2016, 9:07:56 AM1/7/16

to Google Visualization API

Hi Gareth,

You should load the 'table' package as well, and the chart is called 'Table' not 'TableChart'. That should help.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3de8061c-016b-4700-8689-044f4414c798%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Gareth R

unread,

Jan 7, 2016, 11:54:45 AM1/7/16

to Google Visualization API

Daniel,

Many thanks for the quick response, I'm sure the code is now more complete but unfortunately I'm still getting the same end response, using the java debugged it is definitely picking up the data from sheets just not drawing the charts for some reason..

On Thursday, January 7, 2016 at 1:31:35 PM UTC, Gareth R wrote:

Daniel LaLiberte

unread,

Jan 7, 2016, 12:07:08 PM1/7/16

to Google Visualization API

Gareth,

There were several other errors in your code, most minor, but the primary problem is that you were using variables named ChartRangeFilter and BarChart, which replace the classes that you are trying to use to define those things. See the fixed example here: https://jsfiddle.net/dlaliberte/5bwa6xve/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3736d592-e318-4185-9c2d-401dc7812287%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

abhinav cherukuru

unread,

Jan 14, 2016, 1:37:53 AM1/14/16

to Google Visualization API

Hey, I'm having similar problem. Can anyone please help me out about why my code isn't working.

Here's my code.

google.load('visualization', '1.0', {'packages': ['table', 'controls', 'bar']});

google.setOnLoadCallback(queryData);

function queryData() {

var queryString = encodeURIComponent('SELECT A,B');

var magicIncantation = '/gviz/tq?gid=701198084&headers=1&tq=';

var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/12hTDGf-hHtLoqns1Tg63Dly2w7cEfkbqU_P6zVXyy28/' + magicIncantation + queryString);

query.send(handleQueryResponse);

};

function handleQueryResponse(response) {

var data = response.getDataTable();

var dashboard = new google.visualization.Dashboard(

document.getElementById('dashboard_div'));

var chartRangeFilter = new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'control_div',

'options': {

'filterColumnIndex': 1

}

});

var barChart = new google.visualization.ChartWrapper({

'chartType': 'Table',

'containerId': 'chart_div'

});

dashboard.bind(chartRangeFilter, barChart);

dashboard.draw(data);

};

</script>

I followed the JS Fiddle fixed example. But my dashboard doesn't populate the chart.

Please help me out.

Reply all

Reply to author

Forward