adamrunner/graph_temp_data.html Secret

## graph_temp_data.html
<!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>
	<!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>