Skip to content

Instantly share code, notes, and snippets.

Created Mar 27, 2016
What would you like to do?
<!DOCTYPE html>
<link rel="stylesheet" href="//">
<div id="chart" style="width: 100%; min-height:400px;">
<div class='loader'>
<i class="fa fa-spin fa-refresh fa-4x"></i>
<script src=""></script>
<script src="/js/moment.min.js"></script>
// onload callback
function drawChart() {
var public_key = 'ZGRYvQ5b3gHl5rwqbKoj';
var yesterday = moment().subtract(1, 'days').format()
// JSONP request
//TODO: Add Controls for date range
var jsonData = $.ajax({
url: '' + 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) {
(new Date(row.timestamp)),
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},
chart.draw(data, options);
// load chart lib
google.load('visualization', '1', {
packages: ['corechart']
// call drawChart once google charts is loaded
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment