Hi everyone.
I searched how to handle graphics events in Google Sites and have not been
successful. I'm at a point where I need your help.
Specifically my problem is that the function that handles the "addListener"
does not recognize the object of the graphics created therefore can not get
the selected value.
//The Problem Is Here
google.visualization.events.addListener(barChart, 'select', function() {
pieChart.setSelection(barChart.getSelection());
});
The object "pieChart" it is not recognizing. I guess it's a problem of
visibility but not how to solve. The Dashboard, Charts and Controls works
fine.
Here is my code Index.HTML GAS.
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Consulta SQL
var queryString = encodeURIComponent('SELECT A, Sum(B) group by A label
Sum(B) "SIRN"');
// ID de la Hoja de Calculo
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/17xb3u58jPpEPqEB9_w6nIawNECvgNVpVR1knQvGLaJU/gviz/tq?gid=0&headers=1&tq='
+ queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Contacte al Administrador. Error en query: ' +
response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// Cargar los datos
var data = response.getDataTable();
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var rangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'SIRN'
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 400,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
// Create a range slider, passing some options
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter2_div',
'options': {
'filterColumnLabel': 'Vicepresidencia'
}
});
// Create a bar chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart2_div',
'options': {
'width': 400,
'height': 250,
'pieSliceText': 'value',
'legend': 'right'
}
});
dashboard.bind ([rangeSlider, stringFilter], [pieChart, barChart]);
dashboard.draw(data);
//THE PROBLEM IS HERE
google.visualization.events.addListener(barChart, 'select', function() {
pieChart.setSelection(barChart.getSelection());
});
}
</script>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<table>
<tr>
<td><div id="filter_div"></div></td>
<td><div id="filter2_div"></div></td>
</tr>
<tr>
<td><div id="chart_div"></div></td>
<td><div id="chart2_div"></div></td>
</tr>
</table>
</div>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
