Skip to content

Instantly share code, notes, and snippets.

@adamrunner
Created Mar 27, 2016
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div id="chart" style="width: 100%; min-height:400px;">
<div class='loader'>
<i class="fa fa-spin fa-refresh fa-4x"></i>
</div>
</div>
<script src="https://www.google.com/jsapi"></script>
<script src="/js/moment.min.js"></script>
<script>
// onload callback
function drawChart() {
var public_key = 'ZGRYvQ5b3gHl5rwqbKoj';
var yesterday = moment().subtract(1, 'days').format()
// JSONP request
//TODO: Add Controls for date range
//https://data.sparkfun.com/output/ZGRYvQ5b3gHl5rwqbKoj.json?gte[timestamp]=11-30-2014&gte[temp]=100.0
// https://data.sparkfun.com/output/ZGRYvQ5b3gHl5rwqbKoj.json
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {page: 1},
dataType: 'jsonp',
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Indoor °F');
data.addColumn('number', 'Outdoor °F');
$.each(results, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.indoor_temp),
parseFloat(row.outside_temp)
]);
});
var chart = new google.visualization.LineChart($('#chart').get(0));
var options = {
title: 'Apartment temperature over time',
legend:{position: 'top'},
axisTitlesPosition: 'in',
animation: {startup : true, duration: 500},
chartArea:{left:"5%",top:"10%",width:'95%',height:'75%'}
}
chart.draw(data, options);
});
}
// load chart lib
google.load('visualization', '1', {
packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment