Actually, I just realized that it won't work because a map point HAS to be
selected in order for the name to appear in the scatter. My pie chart
defaults to display data for "Bear Branch", so if there is a way to default
the scatter chart to display "Bear Branch" data, that would be great. If
not, I'm happy that I at least am able to have the name change! Here is a
live link which displays the Pie Chart showing Bear Branch as the default:
http://www.esenvironmental.com/projects_multiagency_cl_googlemap_scatterwork.htm
This is the snippet of code which sets the pie chart to default to the
"Bear Branch" site:
var layer = new google.maps.FusionTablesLayer();
updateLayerQuery(layer);
layer.setMap(map);
drawVisualization('Bear Branch');
On Monday, June 25, 2012 3:05:42 PM UTC-7, es wrote:
> 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/-/-pU6vinVR_UJ.
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.
