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');
On Monday, June 25, 2012 6:22:08 PM UTC-4, es wrote:
>
> 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/-/n6C8cz-b-94J.
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.
