Woops, I forgot to ask... are the chart options for the scatter somewhat similar to the options for the pie? I'd like to change the "highlighted" point so it popped out more and is larger, and make the other points smaller because when the graph is small it's hard to see the selected point. Thanks!
On Fri, Jun 8, 2012 at 12:00 PM, asgallant <[email protected]>wrote: > There are a couple ways to approach this. The first (with a few minor > modifications to your code): http://jsfiddle.net/asgallant/G5Bga/ > > The second way is a rather dramatic departure from the approach you took; > it uses the Visualization API wrapper for Google Maps, which is less > flexible than the base Maps API (as it doesn't expose the Map object to > work with), but has the benefit of being able to run directly off of the > Visualization API's DataTables. You could likely make a single query to > drive the map and both charts, using DataViews to hide columns and filter > out rows. I got a start on it here (driving map and scatter off one > query): http://jsfiddle.net/asgallant/rSRzE/ but there is an error being > thrown by the map that I haven't been able to track down just yet (and > likely won't until next week, if I have the time). > > > On Friday, June 8, 2012 12:42:34 PM UTC-4, es wrote: >> >> 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('ht**tp://www.google.com/* >> *fusiontables/gvizdata?tq='<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/-/0TzwGRkvZFAJ. > > 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. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
