jjackson2004
asked on
problems with google dashboard
I am trying to modify some code for a google dashboard: Here is the code:
function drawVisualization() {
// Prepare the data
var data = google.visualization.array ToDataTabl e([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.Contr olWrapper( {
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.Contr olWrapper( {
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.Chart Wrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.Chart Wrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashb oard(docum ent.getEle mentById(' dashboard' )).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
my problem is that I want to replace the inputted data with a query from a google spreadsheet.
The code I need to put into the above code is listed below. I keep getting errors when I put it in. Please help, about to pull my hair out.
function drawVisualization() {
// To see the data that this visualization uses, browse to
// http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
var query = new google.visualization.Query (
'https://docs.google.com/spreadsheet/ccc?key=0As-rWerCrohAdHlhQ05qVzhoclliR0dZbFBfa2cwQmc&hl=en_US#gid=0');
// Apply query language.
query.setQuery('select C, E, F, G, H ');
// Send the query with a callback function.
query.send(handleQueryResp onse);
}
function handleQueryResponse(respon se) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessag e());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineC hart(docum ent.getEle mentById(' visualizat ion'));
visualization.draw(data, {legend: 'bottom'});
}
function drawVisualization() {
// Prepare the data
var data = google.visualization.array
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.Contr
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.Contr
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.Chart
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.Chart
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashb
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
my problem is that I want to replace the inputted data with a query from a google spreadsheet.
The code I need to put into the above code is listed below. I keep getting errors when I put it in. Please help, about to pull my hair out.
function drawVisualization() {
// To see the data that this visualization uses, browse to
// http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
var query = new google.visualization.Query
'https://docs.google.com/spreadsheet/ccc?key=0As-rWerCrohAdHlhQ05qVzhoclliR0dZbFBfa2cwQmc&hl=en_US#gid=0');
// Apply query language.
query.setQuery('select C, E, F, G, H ');
// Send the query with a callback function.
query.send(handleQueryResp
}
function handleQueryResponse(respon
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessag
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineC
visualization.draw(data, {legend: 'bottom'});
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER