Change title of scatter plot dynamically

[es]

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'
        }
    });
}

 

[asgallant]

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
});​

[es]

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
        });
    });
}

[es]

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:

[asgallant]

You can do so fairly easily by doing two things:

1) move the definition of the "setScatterSelection" function outside the "ready" event handler for the scatter chart (stick it at the end of [but still inside] the query.send callback function), and

2) replace the scatter.draw(baseView...); call with setScatterSelection('Bear Branch');