If I read what you want correctly, what you need to do is use the "site"
variable when the chart is redrawn in the "setScatterSelection" function:
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
}
},
title: 'Scatter Chart for ' + site
});
On Monday, June 25, 2012 5:15:33 PM UTC-4, es wrote:
>
> 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/-/J3N2fLGnwcIJ.
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.
