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.
