Hi,
I'm referencing a google fusions table as the datasource for my scatter
plot. It functions with google maps in that when a point on the map is
clicked, the data point chages color to indicate what site is clicked. I
would like to know if I can reference a column heading in my google fusion
table (column heading is "site") so that the title of the scatter plot
chages when the user clicks the map. I have a pie chart which will
dynamically change the title name based on user-clicked map points, but am
having problems applying the same method to the scatter plot. Any help
would be appreciated.
Here is the code for the map and scatter plot:
google.load('visualization', '1', {packages: ['corechart']});
google.load('maps', '3.9', {other_params: "sensor=false"});
google.setOnLoadCallback(initialize);
function initialize() {
var myOptions = {
center: new google.maps.LatLng(38.099983, -80.683594),
zoom: 7,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var layer = new google.maps.FusionTablesLayer();
updateLayerQuery(layer);
layer.setMap(map);
drawVisualization('Bear Branch');
var query = new
google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=');
query.setQuery('SELECT Site, CALK, MAGIC_CL50 FROM 3235688');
query.send(function (response) {
var data = response.getDataTable();
var baseView = new google.visualization.DataView(data);
baseView.setColumns([1, 2]);
var scatter = new
google.visualization.ScatterChart(document.getElementById('scatter'));
google.visualization.events.addListener(scatter, 'ready', function
() {
google.maps.event.addListener(layer, 'click', function(e) {
var Site = e.row['Site'].value;
setScatterSelection(Site);
drawVisualization(Site);
});
google.maps.event.addDomListener(document.getElementById('Site'), 'change',
function() {
var Site = this.value;
updateLayerQuery(layer, Site);
setScatterSelection(Site);
drawVisualization(Site);
});
function setScatterSelection (site) {
var row = data.getFilteredRows([{column: 0, value:
site}])[0];
var view = new google.visualization.DataView(baseView);
view.setColumns([0, 1, {
type: 'number',
label: baseView.getColumnLabel(1),
calc: function (dt, index) {
if (row == index) {
return dt.getValue(index, 1);
}
else {
return null;
}
}
}]);
var ready =
google.visualization.events.addListener(scatter, 'ready', function () {
scatter.setSelection([{row: row, column: 2}]);
google.visualization.events.removeListener(ready);
});
scatter.draw(view, {
width: 350,
height: 300,
titleX: 'ANC (ueq/L)', title: 'Site', titleY: 'CL for ANC=50
(meq/m2/yr)',
series: [{
pointSize: 5
}, {
visibleInLegend: false,
pointSize: 10,
color: 'red'
}],
legend: {position: 'top', textStyle: {color: 'blue', fontSize: 12}}
});
};
});
scatter.draw(baseView, {
width: 350,
height: 300,
titleX: 'ANC (ueq/L)', title: 'Site', titleY: 'CL for ANC=50
(meq/m2/yr)',
series: [{pointSize: 5}],
legend: {position: 'top', textStyle: {color: 'blue', fontSize: 12}}
});
});
}
function updateLayerQuery(layer) {
layer.setOptions({
query: {
select: 'Site',
from: '3235688'
}
});
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/PJVQPFikcIQJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
