Yes, thank you, that is what I am looking for. Your code worked in the
"scatter.draw(view, {" of the code (after a user clicks a point, the title
comes up), but when I put the code in the "scatter.draw(baseView, {"
section, the scatter disappears. This is how I placed it:
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
});
};
});
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}},
title: 'Scatter Chart for ' + site
});
});
}
On Monday, June 25, 2012 2:37:50 PM UTC-7, asgallant wrote:
> 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/-/GhOXwIUqgQoJ.
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.
