Awesome - thank you so much! You must eat, sleep, and play javascript because you are so quick at coming up with a solution. I very much appreciate your help!! I'll get started on the check boxes/add/remove kmz layers and post you again if I run into troubles with it. Happy Friday!
On Friday, July 6, 2012 12:18:34 PM UTC-7, asgallant wrote: > Yes, you probably could use a single query for both the Pie and Scatter > charts. Your query would have to include all of the necessary columns for > both charts, and use DataViews to hide the appropriate columns from each. > The view for the Pie charts would also have to be filtered by site before > transforming the view into the final DataTable. None of this is > particularly difficult to do. The major trade-off is that users will > essentially be downloading the entire data set on page load (which could > potentially slow things down to start) instead of downloading only the data > they need when they need it. > > Defaulting to "Bear Branch" is easy: > http://jsfiddle.net/asgallant/G5Bga/15/. I moved the location of the > setScatterSelection function one step back and replaced the scatter.draw() > call with a setScatterSelection call to make it work. > > As far as the map stuff goes, I can help with generic javascript stuff, > but I'm not very familiar with the API, so I can't give you any specifics. > > On Friday, July 6, 2012 3:03:21 PM UTC-4, es wrote: >> >> Hi, >> Yes, you helped me with building the scatter so I could make the selected >> point "pop" out (yeah!). I pasted all of your code into my web and it >> works wonderfully... even in IE (which originally the map wouldn't even >> display). And, that infinite loop made sense as to why it performed so >> poorly! Thanks for figuring that out!! It was interesting how you changed >> the scatter.draw(baseView) versus the scatter.draw(view). They appear to >> be in just one container id now, and yet I can still get the highlighted >> point effect! Is it possible to have the "base view" also show Bear Branch >> highlighted on the scatter, when the user first goes to the site? Would >> this code be included in the base view area of the scatter or would I place >> it outside the container id, like it is for the pie chart: >> drawVisualization('Bear Branch');? After this, my next task will be to >> add check boxes so boundary layers/polygons and the points on the map can >> be turned off and on - hopefully these will be compatible with the >> scatter/pie since these elements are functioning from a fusion table - the >> boundary layers would be stand-alone kmz files. I may need to tap your >> expert brain when I get to that point! :) >> >> On Friday, July 6, 2012 9:46:52 AM UTC-7, asgallant wrote: >> >>> 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/-/fcZ_02bktp8J. 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.
