How to include two line charts in one Blogger Post
Malte
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>
