Skip to content

Instantly share code, notes, and snippets.

@mplewis

mplewis/phant-vis.css

Last active December 6, 2017 14:21
Download ZIP

Revisions

  1. mplewis revised this gist Jul 31, 2014. 1 changed file with 3 additions and 13 deletions.
    16 changes: 3 additions & 13 deletions phant-vis.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,9 +4,10 @@
    <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="vis.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">
    @@ -19,17 +20,6 @@ <h1><a class="sparkfun-link">Phant Stream</a></h1>
    <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="vis.js"></script>
    <script src="phant-vis.js"></script>
    </body>
    </html>
    body {
    margin-top: 40px;
    margin-bottom: 40px;
    }

    .chart {
    width: 100%;
    height: 250px;
    margin-top: 10px;
    margin-bottom: 10px;
    }
  2. mplewis revised this gist Jul 31, 2014. 3 changed files with 0 additions and 0 deletions.
    0 vis.css → phant-vis.css
    View file
    File renamed without changes.
    0 vis.html → phant-vis.html
    View file
    File renamed without changes.
    0 vis.js → phant-vis.js
    View file
    File renamed without changes.
  3. mplewis created this gist Jul 31, 2014.
    11 changes: 11 additions & 0 deletions vis.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    body {
    margin-top: 40px;
    margin-bottom: 40px;
    }

    .chart {
    width: 100%;
    height: 250px;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    35 changes: 35 additions & 0 deletions vis.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <!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="vis.css">
    </head>
    <body>
    <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="vis.js"></script>
    </body>
    </html>
    body {
    margin-top: 40px;
    margin-bottom: 40px;
    }

    .chart {
    width: 100%;
    height: 250px;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    70 changes: 70 additions & 0 deletions vis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    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
    }]
    });
    }
    }
    });