<html>
<head>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'controls']});
google.load("visualization", "1.0", {packages:["corechart"]});
google.load("visualization", "1", {packages:["columnchart"]});
google.charts.setOnLoadCallback(drawVisualization1);
google.charts.setOnLoadCallback(drawVisualization2);
function drawVisualization1()
{
var opts = {sendMethod: 'auto'};
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1tNWnpOh5wx8OFPgRjVklh5NF6d4lwIB082Xmx_9wLc4/edit#gid=0', opts);
query.setQuery('select B,count(A) group by B pivot D');
query.send(handleQueryResponse);
}
function drawVisualization2()
{
var opts = {sendMethod: 'auto'};
var query = new google.visualization.Query('https://docs.google.com/a/jaguarlandrover.com/spreadsheets/d/1IshZHO_02l8HgUjltE7Txw200KjQioYehlllora17yA/edit?usp=sharing', opts);
query.setQuery('select C, count(A) group by C pivot E');
query.send(handleQueryResponse1);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
3,
{ calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation" },
]);
var options = {
title: "Heavy deck report (Month-Year Vs Incident Count)",
width: 900,
height: 300,
bar: {groupWidth: "100%"}
};
var chart = new google.visualization.ColumnChart(document.getElementById("vis_div1"));
chart.draw(view, options);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
3,
{ calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation" },
]);
var options = {
title: "Heavy deck report",
width: 900,
height: 300,
bar: {groupWidth: "100%"}
};
var chart = new google.visualization.LineChart(document.getElementById("vis_div2"));
chart.draw(view, options);
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<div id="vis_div1" style="width: 900px; height: 300px;"></div>
</td>
</tr>
<tr>
<td>
<div id="vis_div2" style="width: 900px; height: 300px;"></div>
</td>
</tr>
</table>
</body>
</html>
What I have tried:
**strong text**
I wanted to add google filters with my following query.Metioned below :-
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'piechart-div',
// The pie chart will use the columns 'Name' and 'Donuts eaten'
// out of all the available ones.
'view': {'columns': [0, 3]}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table-div'
});
var donutSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'slider-div',
'options': {
'filterColumnLabel': 'Age'
}
});
var genderPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'selector-div',
'options': {
'filterColumnLabel': 'Gender'
}
});
// Set up dependencies between controls and charts
dashboard.bind(donutSlider, [pieChart,table]);
dashboard.bind(genderPicker, [pieChart,table]);
// Draw all visualization components of the dashboard
Please help me for the same !!!
I have tried to use filter with the query but failed to do it.