hello, I have created two line charts using the google charts tool. Both charts work perfectly fine when adding the html to a post in blogger. However I would like to include both charts in the same post and I have not been able to figure out how to do that. When I copy and paste both html codes into the blogger post I can only see the first chart, the second one gets omitted. Any help on how to make both charts appear in a blogger post is much appreciated! Thanks!
The html code for both charts is below. chart 1: <!-- 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', {packages: ['corechart']}); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); data.addColumn('number', '1979-2000 Average'); data.addColumn('number', '2007'); data.addColumn('number', '2008'); data.addColumn('number', '2009'); data.addColumn('number', '2010'); data.addColumn('number', '2011'); data.addRows([ ['Jan', 14.86, 13.77, 14.05, 14.08, 13.80, 13.55], ['Feb', 15.64, 14.53, 15.01, 14.85, 14.59, 14.36], ['Mar', 15.75, 14.65, 15.22, 15.14, 15.11, 14.56], ['Apr', 15.00, 13.87, 14.42, 14.57, 14.70, 14.15], ['May', 13.60, 12.89, 13.19, 13.40, 13.11, 12.79], ['Jun', 12.16, 11.49, 11.36, 11.46, 10.82, 11.01], ['Jul', 10.10, 8.13, 8.99, 8.80, 8.36, 7.92], ['Aug', 7.67, 5.36, 6.05, 6.28, 6.01, 5.52], ['Sep', 7.04, 4.30, 4.73, 5.93, 4.93, 4.61], ['Oct', 9.29, 6.77, 8.42, 7.52, 7.71, 7.10], ['Nov', 11.31, 10.05, 10.62, 10.27, 9.88, 10.01], ['Dec', 13.36, 12.27, 12.39, 12.52, 12.51, 12.02,], ]); // Create and draw the visualization. new google.visualization.LineChart(document.getElementById('visualization')). draw(data, {curveType: "function", width: 1200, height: 800, vAxis: {maxValue: 10}, title: "Monthly Arctic Sea Ice Extent 1979-2000 Average and 2007-2011 in sq km"} ); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 500px; height: 400px;"></ div> </body> </html> chart 2: <!-- 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', {packages: ['corechart']}); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); data.addColumn('number', '1979-1990 Average'); data.addColumn('number', '1979-2000 Average'); data.addColumn('number', '2005'); data.addColumn('number', '2006'); data.addColumn('number', '2007'); data.addColumn('number', '2008'); data.addColumn('number', '2009'); data.addColumn('number', '2010'); data.addColumn('number', '2011'); data.addRows([ ['Jan', 25.26, 24.48, 20.30, 19.36, 18.38, 18.58, 18.85, 17.48, 15.93], ['Feb', 27.90, 27.14, 22.71, 22.08, 20.86, 21.58, 21.74, 20.11, 18.90], ['Mar', 29.87, 29.08, 24.85, 24.08, 23.03, 23.86, 23.83, 22.43, 20.84], ['Apr', 30.88, 30.06, 26.05, 25.11, 23.76, 25.00, 24.96, 23.24, 21.75], ['May', 30.28, 29.46, 25.32, 24.31, 23.08, 24.10, 23.87, 21.20, 20.17], ['Jun', 27.45, 26.50, 21.53, 20.82, 19.11, 20.50, 19.70, 16.33, 15.63], ['Jul', 21.22, 20.15, 15.13, 14.60, 12.04, 14.06, 12.81, 9.68, 8.90], ['Aug', 16.28, 15.22, 10.67, 10.37, 7.58, 9.15, 8.30, 5.63, 5.05], ['Sep', 14.92, 13.92, 9.28, 9.11, 6.53, 7.25, 6.98, 4.59, 4.20], ['Oct', 16.15, 15.19, 10.21, 9.84, 7.13, 8.31, 7.71, 6.10, 5.52], ['Nov', 18.69, 17.78, 12.89, 12.30, 10.47, 11.76, 10.86, 9.32, 9.03], ['Dec', 21.79, 20.92, 16.04, 15.09, 14.24, 15.20, 14.29, 12.72, 12.72], ]); // Create and draw the visualization. new google.visualization.LineChart(document.getElementById('visualization')). draw(data, {curveType: "function", width: 1300, height: 800, vAxis: {maxValue: 10}, title: "Monthly Arctic Sea Ice Volume 1979-1990 Average, 1979-2000 Average, and 2005-2011 in Thousand cu km"} ); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 500px; height: 400px;"></ div> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
