Well I certainly had that royally screwed up. Thanks again good sir! On Wednesday, May 1, 2013 11:33:26 AM UTC-4, asgallant wrote: > > Ok, there are a few things that need to be fixed here. First, you have a > handful of syntax errors in your code, primarily in the ChartWrapper (you > need to remove the ";"s inside the wrapper and remove an extra "}". > Second, if you plan to use a Dashboard, you have to have a control to bind > to the chart. Since you don't yet have one, you should specify the > DataTable in the ChartWrapper's "dataTable" parameter and call the > wrapper's #draw method instead of the the Dashboard's. Third, there is no > metro level map of the whole US (though this is available at the state > level; note that the metros are DMA's [designated market areas], not > cities/towns), so you should change this to "provinces" to get a state > level resolution (or something else of your choice). Fourth, the order of > the label and value columns is reversed, so that has to be corrected - this > can be done either in the query or in the chart's "view" parameter. Fifth, > if you intend on using a Dashboard for this, you need to load the > "controls" package. The ChartWrapper takes care of loading the geochart > package for you, so you don't need to load that explicitly. Sixth (and > finally), by absolutely positioning your title, it ends up getting drawn > underneath the chart; you can fix this by setting the z-index on the title > to something higher than the z-index of the chart. See a working example > here: http://jsfiddle.net/asgallant/eaKyu/ > > On Wednesday, May 1, 2013 10:56:34 AM UTC-4, Nathan Slemmons wrote: >> >> Hey All. >> >> This may be a simple issue I'm missing here but I can't render the >> geochart in this page. I'm not seeing the problem. >> >> Here's the page html. And and example of the data table. >> >> <html><head> >> <title></title> >> >> <!--Load the AJAX API--> >> <script type="text/javascript" src="https://www.google.com/jsapi >> "></script> >> <script type="text/javascript"> >> >> // Load the Visualization API and the controls package. >> // Packages for all the other charts you need will be loaded >> // automatically by the system. >> google.load('visualization', '1.0', {'packages':['geochart']}); >> >> // Set a callback to run when the Google Visualization API is loaded. >> google.setOnLoadCallback(initialize); >> >> function initialize() { >> // Replace the data source URL on next line with your data source URL. >> var query = new google.visualization.Query(' >> https://docs.google.com/spreadsheet/tq?key=0AiLed_zknLyedDBQSlJzaWpXeFNtbENSZG4tOEVFdmc&usp=sharing' >> ); >> query.setQuery('SELECT *'); >> // Send the query with a callback function. >> query.send(drawDashboard); >> } >> >> >> function drawDashboard(response) { >> >> var data = response.getDataTable(); >> >> var speedMap = new google.visualization.ChartWrapper({ >> 'chartType': 'GeoChart', >> 'containerId': 'chart_divSpeed', >> 'options':{ >> 'displayMode':'markers', >> 'region':'US', >> 'resolution':'metros'}; >> }; >> }); >> >> var dashboard = new >> google.visualization.Dashboard(document.getElementById('dashboard_div')).draw(data) >> >> } >> >> </script> >> >> </head> >> <body> >> >> <div id='header' style='position:absolute; left:0px; top:0px; >> background-color:#CACADC; width:1500px; height:75px'> >> <div id="title" style="position:absolute; left:175px; top:5px; >> font-size:200%; font-family:arial; color:#0066FF">Speed</div> >> >> >> <div id="dashboard_div"> >> <div id="chart_divSpeed"></div> >> </div> >> </div> >> >> <body> >> </html> >> >> >> Lat Long Speeding Count Facility >> 40.576855 -74.216251 1 CARTERET >> >> 35.249972 -80.886371 10 CHARLOTTE >> >> 40.176611 -74.773174 6 MORRISVILLE >> >> >
-- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
