Quick question here. I've been trying to figure it out for about an hour now but haven't gotten anywhere (and getting a bit frustrated since I thought this was going to be the easy part). I finished making my first visualization using Google's API, and I am trying to figure out how to insert the javascript into the html. I've been looking into examples, and it all matches up, but mine still doesn't want to display.
Here is my code.. and thank you for any and all help! <!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['controls']}); </script> <script type="text/javascript"> function drawVisualization() { // Prepare the data var data = google.visualization.arrayToDataTable([ ['GDPvsMilitary', 'Country', 'Year', 'Amount'], ['United States', '2006', 42227.110, 1909.37], ['United States', '2007', 46467.480, 1940.19], ['United States', '2008', 46900.910, 2064.52], ['United States', '2009', 45348.400, 2210.9], ['United States', '2010', 46860.290, 2252.54], ['China', '2006', 4747.750, 57.87], ['China', '2007', 5550.450, 66.4], ['China', '2008', 6186.670, 72.79], ['China', '2009', 6793.970, 87.41], ['China', '2010', 7544.200, 90.25], ['Russia', '2006', 13321.870, 332.38], ['Russia', '2007', 14899.380, 361.09], ['Russia', '2008', 16040.350, 400.93], ['Russia', '2009', 14830.300, 416.54], ['Russia', '2010', 15611.990, 410.39], ['United Kingdom', '2006', 33847.670, 891.68], ['United Kingdom', '2007', 35537.340, 913.98], ['United Kingdom', '2008', 36066.400, 948.58], ['United Kingdom', '2009', 34431.840, 960.39], ['United Kingdom', '2010', 35059.240, 933.74], ['Turkey', '2006', 12116.070, 260.86], ['Turkey', '2007', 12891.520, 240.25], ['Turkey', '2008', 13107.500, 240.48], ['Turkey', '2009', 12460.750, 254.7], ['Turkey', '2010', 13577.100, 247.39], ['Germany', '2006', 32491.510, 520.73], ['Germany', '2007', 34603.340, 521.76], ['Germany', '2008', 35728.210, 537.81], ['Germany', '2009', 34374.940, 559.75], ['Germany', '2010', 36081.420, 552.37], ['India', '2006', 2441.320, 30.16], ['India', '2007', 2724.440, 30.1], ['India', '2008', 2916.290, 33.67], ['India', '2009', 3103.730, 39.1], ['India', '2010', 3408.400, 38.71], ['Japan', '2006', 31934.65, 427.7], ['Japan', '2007', 33634.800, 421.78], ['Japan', '2008', 33997.440, 416.31], ['Japan', '2009', 32233.030, 426.02], ['Japan', '2010', 33884.850, 428.24], ['Australia', '2006', 35266.220, 929.39], ['Australia', '2007', 37253.630, 968.4], ['Australia', '2008', 38222.860, 982.05], ['Australia', '2009', 38762.710, 1044.92], ['Australia', '2010', 39764.560, 1044.77], ['Italy', '2006', 29289.230, 646.46], ['Italy', '2007', 30389.780, 622.87], ['Italy', '2008', 30401.820, 639.91], ['Italy', '2009', 28913.100, 617.65], ['Italy', '2010', 29480.150, 588.86], ]); // Define a category picker control for the Gender column var CountryDropdown = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control1', 'options': { 'filterColumnLabel': 'Country', 'ui': { 'labelStacking': 'vertical', 'allowTyping': false, 'allowMultiple': false } } }); // Define a category picker control for the Gender column var YearDropdown= new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control2', 'options': { 'filterColumnLabel': 'Year', 'ui': { 'labelStacking': 'vertical', 'allowTyping': false, 'allowMultiple': false } } }); // Define a Pie chart var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart1', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'title': 'GDP per Capita vs Military Spending per Capita', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'label' }, // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten) // from the 'data' DataTable. 'view': {'columns': [0, 2, 3]} }); // Create a dashboard var chart = new google.visualization.Dashboard(document.getElementById('dashboard')). // Establish bindings, declaring the both the slider and the category // picker will drive both charts. bind([CountryDropdown], [pie]). bind([YearDropdown], [pie]). // Draw the entire dashboard. draw(data); } google.setOnLoadCallback(drawVisualization); </script> </head> <body> <div id="dashboard"> <div id="control1"></div> <div id="control2"></div> <div id="chart1"></div> </div> </body> </html> -- 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/-/jOnVMzy873YJ. 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.
