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/-/ORRZHDykagMJ. 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.
