D'oh, you're right! The scatter.draw() call was missing. After adding
that back in, I discovered that this was not the culprit. Further
investigation revealed that it is a rather dumb error that is likely my
fault (IIRC, I helped you write the scatter chart code, right?): the
'ready' event handler for the scatter chart should only run once. As it is
now, the code inside gets run every time the scatter chart updates, so all
of the event listeners get added again. Since some of these event
listeners force the scatter chart to redraw, the number of listeners grows
exponentially with each click (so on click 9 there are 512 'select' event
listeners for the map). No wonder there are performance problems! The
only thing that surprises me is that other browsers *didn't* have
performance problems. Anyway, I have an example fix here:
http://jsfiddle.net/asgallant/G5Bga/14/
Note that I changed a whole bunch of other stuff in the quest for the
culprit, so there are probably things you technically don't need to copy
there. The important parts you need are the lines:
var runOnce = google.visualization.events.addListener(scatter, 'ready',
function() {
and
google.visualization.events.removeListener(runOnce);
add the "var runOnce = " to the first event listener (after the scatter
chart is created) and the removeListener call to the very end of the same
event listener. That *should* take care of the problem for you.
On Friday, July 6, 2012 11:54:37 AM UTC-4, es wrote:
>
> Hi,
> I checked your link and I'm not seeing the pie chart change when a map
> point is clicked. The dropdown menu also isn't operating the pie chart.
> Were these functioning on your end?
> Thanks
> On Friday, July 6, 2012 7:40:34 AM UTC-7, asgallant wrote:
>
>> At a guess, I'd say there is a memory leak in regards to the PieChart.
>> Every time you click a point, you draw a new PieChart, but the old one is
>> still resident in memory. I rearranged your code and made a couple tweaks
>> so that you don't have this problem any more:
>> http://jsfiddle.net/asgallant/G5Bga/11/
>>
>> Basically, the pie chart is now created (but not drawn) in the initialize
>> function, and the drawVisualization function has been moved inside the
>> initialize function so the pie chart will be in scope.
>>
>> On Thursday, July 5, 2012 5:40:29 PM UTC-4, es wrote:
>>>
>>> Hi,
>>> I'm finally back to try and figure out what is causing the browser
>>> (Firefox) to crash after clicking on 9 points. When I initially click a map
>>> point, everything works wonderful. The pie chart changes to show the data,
>>> the scatter chart's point highlights, the title's change, and even the drop
>>> down menu works to function both the pie and the scatter. However, the
>>> webpage gets progressively slower with each click, and by the time I have
>>> clicked 9 points, it basically crashes. It's as though it is going on an
>>> infinite loop and when the data has been requested (a pie and a scatter),
>>> it doesn't stop the request. I'm not sure what to do about your suggestion
>>> to comment out the event handlers. They all seem necessary in order for
>>> these features to function. Is there some way to "end" this loop after
>>> clicking a point and getting the action requested (the pie and the
>>> scatter), and then start fresh again with a new click? It worked to just
>>> show the scatter and the pie, but when I got fancy and wanted the scatter
>>> point to highlight, and have the dropdown menu also operate the scatter,
>>> things became unstable. Here is a link to the map/charts: *
>>> http://www.esenvironmental.com/projects_multiagency_cl_googlemap_scatterwork.htm
>>> *<http://www.esenvironmental.com/projects_multiagency_cl_googlemap_scatterwork.htm>And,
>>> if this helps, here is all the code (again!) for the map and the
>>> charts. Thanks in advance for your help!
>>> <script type="text/javascript">
>>> google.load('visualization', '1', { packages: ['corechart'] });
>>> // below is new from google help for the 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',
>>> titleTextStyle: {
>>> color: '#006600',
>>> fontSize: '12'
>>> },
>>> titleY: 'CL for ANC=50 (meq/m2/yr)',
>>>
>>> series: [{
>>> pointSize: 5
>>> }, {
>>> visibleInLegend: false,
>>> pointSize: 10,
>>> color: 'red'
>>> }],
>>> legend: {position: 'none', textStyle: {color: 'blue', fontSize: 12}},
>>> title: '' + site
>>> });
>>> };
>>> });
>>>
>>>
>>> });
>>> }
>>> function updateLayerQuery(layer) {
>>> layer.setOptions({
>>> query: {
>>> select: 'Site',
>>> from: '3235688'
>>> }
>>> });
>>> }
>>> function drawVisualization(Site) {
>>> var query = new google.visualization.Query('
>>> http://www.google.com/fusiontables/gvizdata?tq=');
>>> query.setQuery("SELECT Site, BCw, BCdep, Nup, Nimm, ANClimit, BCup " +
>>> "FROM 3235688 WHERE Site = '" + Site + "'");
>>> query.send(function(response) {
>>> var baseData = response.getDataTable();
>>> var data = new google.visualization.DataTable();
>>> data.addColumn('string', baseData.getColumnLabel(0));
>>> data.addColumn('number', 'Value');
>>> for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
>>> data.addRow([baseData.getColumnLabel(i), baseData.getValue(0, i)]);
>>> }
>>> google.visualization.drawChart({
>>> containerId: "visualization",
>>> dataTable: data,
>>> chartType: "PieChart",
>>> options: {
>>> title: Site,
>>> colors: ['#0000CC', '#3399FF', '#66CC00', '#FFFF00', '#FF9933',
>>> '#FF0033'],
>>> legendTextStyle: {
>>> color: '#666666',
>>> fontSize: '11'
>>> },
>>> titleTextStyle: {
>>> color: '#006600',
>>> fontSize: '12'
>>> },
>>> titlePosition: 'out',
>>> legend: 'left',
>>> is3D: true,
>>> height: 150,
>>> width: 350,
>>> backgroundColor: 'none',
>>> tooltip: {
>>> textStyle: {
>>> color: 'black'
>>> },
>>> showColorCode: true
>>> },
>>> pieSliceText: 'percentage',
>>> pieSliceTextStyle: {
>>> color: 'white',
>>> fontSize: '11'
>>> },
>>> chartArea: {
>>> top: '30',
>>> left: '5',
>>> height: "80%",
>>> width: "70%"
>>> }
>>> }
>>> });
>>> });
>>> }
>>>
>>>
>>> On Monday, June 11, 2012 2:34:17 PM UTC-7, asgallant wrote:
>>>
>>>> Comment out all of the event handlers, and test. Add stuff back in and
>>>> test until you make it break; then you'll have some idea of what is not
>>>> working right.
>>>>
>>>> On Monday, June 11, 2012 4:10:01 PM UTC-4, es wrote:
>>>>>
>>>>> Yes, that’s what happened to me – when I clicked a point on the map it
>>>>> got stuck in a loop and then I had to force shutdown after a while.
>>>>> However, it is at least “showing up” in IE… before you made the changes,
>>>>> the map and the charts wouldn’t display. Having the point on the scatter
>>>>> plot to highlight is great… however having it crash in IE isn’t so great.
>>>>>
>>>>> Any other suggestions?
>>>>>
>>>>>
>>>>>
>>>>> *From:* [email protected] [mailto:
>>>>> [email protected]] *On Behalf Of *asgallant
>>>>> *Sent:* Monday, June 11, 2012 12:10 PM
>>>>> *To:* [email protected]
>>>>> *Subject:* Re: [visualization-api] Re: Include a scatter plot and pie
>>>>> chart referencing same fusion table data
>>>>>
>>>>>
>>>>>
>>>>> I didn't see any problems in IE9, so I ran it in an IE7 instance in
>>>>> IETester (a buggy, crashy way to test your pages in versions of IE that
>>>>> you
>>>>> don't have installed), and it seemed to get stuck in an infinite loop
>>>>> when
>>>>> I selected things in the map. When I used the dropdown or clicked in the
>>>>> scatter chart/pie chart, everything worked fine.
>>>>>
>>>>> On Monday, June 11, 2012 2:23:40 PM UTC-4, es wrote:
>>>>>
>>>>> Hi,
>>>>>
>>>>> Thank you for the help! It appears to run in Chrome, but crashes IE
>>>>> (says the script is running too long). Any idea why?
>>>>>
>>>>> Thanks!
>>>>>
>>>>> On Mon, Jun 11, 2012 at 8:06 AM, asgallant <[email protected]>
>>>>> wrote:
>>>>>
>>>>> Ooops, sorry - the link there is the wrong one, use this:
>>>>> http://jsfiddle.net/asgallant/G5Bga/9/
>>>>>
>>>>> --
>>>>> 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/-/sNOPJlnTyLYJ
>>>>> .
>>>>>
>>>>>
>>>>> 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.
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> 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/-/XYYxYP1V198J
>>>>> .
>>>>> 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.
>>>>>
>>>>> No virus found in this message.
>>>>> Checked by AVG - www.avg.com
>>>>> Version: 2012.0.2180 / Virus Database: 2433/5062 - Release Date:
>>>>> 06/11/12
>>>>> ------------------------------
>>>>>
>>>>> No virus found in this message.
>>>>> Checked by AVG - www.avg.com
>>>>> Version: 2012.0.2180 / Virus Database: 2433/5062 - Release Date:
>>>>> 06/11/12
>>>>>
>>>>
--
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/-/1f2AU7PIxMAJ.
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.
