Skip to content

Instantly share code, notes, and snippets.

@stijnvanbael

stijnvanbael/data-visualization.html

Last active December 21, 2015 12:28
Show Gist options
  • Save stijnvanbael/6305651 to your computer and use it in GitHub Desktop.
Save stijnvanbael/6305651 to your computer and use it in GitHub Desktop.
Download ZIP
Data visualization
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment