mplewis/phant-vis.css

## phant-vis.css
body {
  margin-top: 40px;
  margin-bottom: 40px;
}

.chart {
  width: 100%;
  height: 250px;
  margin-top: 10px;
  margin-bottom: 10px;
}

## phant-vis.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Phant Visualization</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="phant-vis.css">
</head>
<body>
  <a href="https://gist.github.com/mplewis/1981c411c3d00aab823c"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1><a class="sparkfun-link">Phant Stream</a></h1>
        <p class="loading">Loading...</p>
        <p class="done-loading" style="display: none;">Click and drag or pinch to zoom in on a time range.</p>
      </div>
    </div>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.3/highcharts.js"></script>
  <script src="phant-vis.js"></script>
</body>
</html>

## phant-vis.js
var public_key = '4JJyAzpz3vtw06EnDXnW';

var TIMESTAMP_KEY = 'timestamp';

$('.sparkfun-link').text('Phant Stream: ' + public_key);
$('.sparkfun-link').attr('href', 'https://data.sparkfun.com/streams/' + public_key);

$.ajax({
  url: 'http://data.sparkfun.com/output/' + public_key + '.json',
  jsonp: 'callback',
  dataType: 'jsonp',
  success: function(data) {
    $('.loading').hide();
    $('.done-loading').show();

    data = _.sortBy(data, function(point) { return new Date(point[TIMESTAMP_KEY]); });
    keys = _.keys(_.first(data));
    keys.pop();

    for (var i = 0; i < keys.length; i++) {
      var key = keys[i];

      var row = $('<div class="row">');
      var col = $('<div class="col-md-12">');
      var chartHolder = $('<div class="chart">');
      col.append(chartHolder);
      row.append(col);
      $('.container').append(row);

      var graphData = [];
      for (var j = 0; j < data.length; j++) {
        var val = parseInt(data[j][key]);
        // Catch NaN errors
        if (!val && val !== 0) {
          continue;
        }
        var dataPoint = [
          new Date(data[j][TIMESTAMP_KEY]).getTime(),
          val
        ];
        graphData.push(dataPoint);
      }

      var chart = chartHolder.highcharts({
        chart: {
          zoomType: 'x',
          type: 'line'
        },
        title: {
          text: key
        },
        xAxis: {
          type: 'datetime'
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        legend: {
          enabled: false
        },
        series: [{
          name: key,
          data: graphData
        }]
      });
    }
  }
});
	body {
	margin-top: 40px;
	margin-bottom: 40px;
	}

	.chart {
	width: 100%;
	height: 250px;
	margin-top: 10px;
	margin-bottom: 10px;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Phant Visualization</title>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="phant-vis.css">
	</head>
	<body>
	<a href="https://gist.github.com/mplewis/1981c411c3d00aab823c"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
	<div class="container">
	<div class="row">
	<div class="col-md-12">
	<h1><a class="sparkfun-link">Phant Stream</a></h1>
	<p class="loading">Loading...</p>
	<p class="done-loading" style="display: none;">Click and drag or pinch to zoom in on a time range.</p>
	</div>
	</div>
	</div>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.3/highcharts.js"></script>
	<script src="phant-vis.js"></script>
	</body>
	</html>
	var public_key = '4JJyAzpz3vtw06EnDXnW';

	var TIMESTAMP_KEY = 'timestamp';

	$('.sparkfun-link').text('Phant Stream: ' + public_key);
	$('.sparkfun-link').attr('href', 'https://data.sparkfun.com/streams/' + public_key);

	$.ajax({
	url: 'http://data.sparkfun.com/output/' + public_key + '.json',
	jsonp: 'callback',
	dataType: 'jsonp',
	success: function(data) {
	$('.loading').hide();
	$('.done-loading').show();

	data = _.sortBy(data, function(point) { return new Date(point[TIMESTAMP_KEY]); });
	keys = _.keys(_.first(data));
	keys.pop();

	for (var i = 0; i < keys.length; i++) {
	var key = keys[i];

	var row = $('<div class="row">');
	var col = $('<div class="col-md-12">');
	var chartHolder = $('<div class="chart">');
	col.append(chartHolder);
	row.append(col);
	$('.container').append(row);

	var graphData = [];
	for (var j = 0; j < data.length; j++) {
	var val = parseInt(data[j][key]);
	// Catch NaN errors
	if (!val && val !== 0) {
	continue;
	}
	var dataPoint = [
	new Date(data[j][TIMESTAMP_KEY]).getTime(),
	val
	];
	graphData.push(dataPoint);
	}

	var chart = chartHolder.highcharts({
	chart: {
	zoomType: 'x',
	type: 'line'
	},
	title: {
	text: key
	},
	xAxis: {
	type: 'datetime'
	},
	yAxis: {
	title: {
	text: ''
	}
	},
	legend: {
	enabled: false
	},
	series: [{
	name: key,
	data: graphData
	}]
	});
	}
	}
	});