stijnvanbael/data-visualization.html

## data-visualization.html
<html>
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ["Month",       "Carbon emissions"],
                ["April '13",   7.2],
                ["May '13",     7.3],
                ["June '13",    7.0],
                ["July '13",    6.9]
            ]);

            var options = {
                title: "Collective carbon emissions",
                curveType: "function",
                vAxis: { title: "tonnes", titleTextStyle: { italic: false, bold: true }, minValue: 0 }
            };

            var chart = new google.visualization.LineChart(document.getElementById("collective-carbon-chart"));
            chart.draw(data, options);


            data = google.visualization.arrayToDataTable([
                ["Month",       "Car",  "Public transit", "Bicycle"],
                ["April '13",   63,     1.2,              2.4],
                ["May '13",     64.5,   0.9,              2.5],
                ["June '13",    59.5,   1.3,              4.1],
                ["July '13",    59,     1.2,              5.3]
            ]);

            options = {
                title: "Collective distance per travel mode",
                curveType: "function",
                vAxis: { title: "1000 km", titleTextStyle: { italic: false, bold: true }, minValue: 0 }
            };

            chart = new google.visualization.LineChart(document.getElementById("collective-distance-chart"));
            chart.draw(data, options);


			data = google.visualization.arrayToDataTable([
                ["Month",       "Carbon emissions", "Carbon em. (avg)"],
                ["April '13",   69.23,				72.00],
                ["May '13",     62.87,				73.00],
                ["June '13",    61.06,				70.00],
                ["July '13",    61.27,				69.00]
            ]);

            options = {
                title: "Personal carbon emissions",
                vAxis: { title: "kg", titleTextStyle: { italic: false, bold: true }, minValue: 0 },
				colors: ['#cc0000', '#ff8888']
            };

            chart = new google.visualization.ColumnChart(document.getElementById("personal-carbon-chart"));
            chart.draw(data, options);


            data = google.visualization.arrayToDataTable([
                ["Month",       "Car",  "Car (avg)",  "Public transit", "Pub. trans. (avg)",	"Bicycle", 	"Bicycle (avg)"],
                ["April '13",   253,    290,		   60,              16,					   	89,		 	28],
                ["May '13",     240,   	287,		   69,              17,					   	95,		 	29],
                ["June '13",    235,   	286,           63,              16,					   	103,	 	31],
                ["July '13",    216,    287,           72,              18,				       	102,     	31]
            ]);

            options = {
                title: "Personal distance per travel mode",
                vAxis: { title: "km", titleTextStyle: { italic: false, bold: true }, minValue: 0 },
				colors: ['#cc0000', '#ff8888', '#0000cc', '#8888ff', '#00cc00', '#88ff88']
            };

            chart = new google.visualization.ColumnChart(document.getElementById("personal-distance-chart"));
            chart.draw(data, options);
        }
    </script>
</head>
<body>
<div id="collective-carbon-chart" style="width: 900px; height: 500px;"></div>
<div id="collective-distance-chart" style="width: 900px; height: 500px;"></div>
<div id="personal-carbon-chart" style="width: 900px; height: 500px;"></div>
<div id="personal-distance-chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
	<html>
	<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
	var data = google.visualization.arrayToDataTable([
	["Month", "Carbon emissions"],
	["April '13", 7.2],
	["May '13", 7.3],
	["June '13", 7.0],
	["July '13", 6.9]
	]);

	var options = {
	title: "Collective carbon emissions",
	curveType: "function",
	vAxis: { title: "tonnes", titleTextStyle: { italic: false, bold: true }, minValue: 0 }
	};

	var chart = new google.visualization.LineChart(document.getElementById("collective-carbon-chart"));
	chart.draw(data, options);


	data = google.visualization.arrayToDataTable([
	["Month", "Car", "Public transit", "Bicycle"],
	["April '13", 63, 1.2, 2.4],
	["May '13", 64.5, 0.9, 2.5],
	["June '13", 59.5, 1.3, 4.1],
	["July '13", 59, 1.2, 5.3]
	]);

	options = {
	title: "Collective distance per travel mode",
	curveType: "function",
	vAxis: { title: "1000 km", titleTextStyle: { italic: false, bold: true }, minValue: 0 }
	};

	chart = new google.visualization.LineChart(document.getElementById("collective-distance-chart"));
	chart.draw(data, options);


	data = google.visualization.arrayToDataTable([
	["Month", "Carbon emissions", "Carbon em. (avg)"],
	["April '13", 69.23, 72.00],
	["May '13", 62.87, 73.00],
	["June '13", 61.06, 70.00],
	["July '13", 61.27, 69.00]
	]);

	options = {
	title: "Personal carbon emissions",
	vAxis: { title: "kg", titleTextStyle: { italic: false, bold: true }, minValue: 0 },
	colors: ['#cc0000', '#ff8888']
	};

	chart = new google.visualization.ColumnChart(document.getElementById("personal-carbon-chart"));
	chart.draw(data, options);


	data = google.visualization.arrayToDataTable([
	["Month", "Car", "Car (avg)", "Public transit", "Pub. trans. (avg)", "Bicycle", "Bicycle (avg)"],
	["April '13", 253, 290, 60, 16, 89, 28],
	["May '13", 240, 287, 69, 17, 95, 29],
	["June '13", 235, 286, 63, 16, 103, 31],
	["July '13", 216, 287, 72, 18, 102, 31]
	]);

	options = {
	title: "Personal distance per travel mode",
	vAxis: { title: "km", titleTextStyle: { italic: false, bold: true }, minValue: 0 },
	colors: ['#cc0000', '#ff8888', '#0000cc', '#8888ff', '#00cc00', '#88ff88']
	};

	chart = new google.visualization.ColumnChart(document.getElementById("personal-distance-chart"));
	chart.draw(data, options);
	}
	</script>
	</head>
	<body>
	<div id="collective-carbon-chart" style="width: 900px; height: 500px;"></div>
	<div id="collective-distance-chart" style="width: 900px; height: 500px;"></div>
	<div id="personal-carbon-chart" style="width: 900px; height: 500px;"></div>
	<div id="personal-distance-chart" style="width: 900px; height: 500px;"></div>
	</body>
	</html>