Hi,
I would like to add a second chart (scatter plot) to my webpage which
references the same fusion table as my pie chart. The pie chart is
interactive, so that when a user clicks a point on the map, the pie chart
changes to show stats about that site. I'd like to also have an
interactive scatter plot so that when a user clicks a point on the map, the
scatter plot also represents data from that site. Since the scatter will
show data from all sites, I'd just like to have the selected point to
highlight on the scatter plot. For example, when a user clicks on site 10,
the pie charts shows stats for site 10, and the scatter WOULD show all
sites with site 10 a different color so it stands out. Is this possible?
Here is my functioning script code for the pie and map:
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
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');
google.maps.event.addListener(layer, 'click', function(e) {
var Site = e.row['Site'].value;
drawVisualization(Site);
});
google.maps.event.addDomListener(document.getElementById('Site'),'change',
function() {
var Site = this.value;
updateLayerQuery(layer, Site);
drawVisualization(Site);
});
}
function updateLayerQuery(layer) {
layer.setOptions({
query: {
select: 'Site',
from: '3235688',
}
});
}
function drawVisualization(Site) {
var query = new
google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=');
query.setQuery("SELECT Site, BCw, BCdep, Nup, Nimm, ANClimit, BCup " +
"FROM 3235688 WHERE Site = '" + Site + "'");
query.send(function (response) {
var baseData = response.getDataTable();
var data = new google.visualization.DataTable();
data.addColumn('string', baseData.getColumnLabel(0));
data.addColumn('number', 'Value');
for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
data.addRow([baseData.getColumnLabel(i), baseData.getValue(0,
i)]);
}
google.visualization.drawChart({
containerId: "visualization",
dataTable: data,
chartType: "PieChart",
options: {
title: Site,
colors: ['#0000CC', '#3399FF','#66CC00', '#FFFF00', '#FF9933',
'#FF0033',],
legendTextStyle: {color:'#666666', fontSize: '11'},
titleTextStyle: {color: '#006600',fontSize: '12'},
titlePosition: 'out',
legend:'left',
is3D:true,
height: 150,
width: 350,
backgroundColor: 'none',
tooltip: {textStyle: {color: 'black'}, showColorCode: true},
pieSliceText: 'percentage',
pieSliceTextStyle: {color: 'white', fontSize: '11'},
chartArea: {top:'30', left:'5', height:"80%", width:"70%"}
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
--
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/-/9ERKP0W1RhcJ.
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.
