Phant Server Google Chart

This script takes parses data.sparkfun.com phant server and generates a google chart.

by Ron Hudson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 100%;"></div>
<div id="debug" style="width: 100%;"></div>

JavaScript

function writeToDom(title, content) {
    $("#results").append("<div class='header'>" + title + ":</div><div><pre>" + content + "</pre></div>");
}




function drawChart() {

    var public_key = 'JxDAyjDWXMCJWRX53yA4';

    // JSONP request
    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', 'Celsius Outside');
        data.addColumn('number', 'Fahrenheit Outside');
        data.addColumn('number', 'Celsius Inside');
        data.addColumn('number', 'Fahrenheit Inside');
        data.addColumn('number', 'Humidity Inside');

        $.each(results, function (i, row) {
            data.addRow([
            (new Date(row.timestamp)),
            parseFloat(row.outside_celsius),
            parseFloat(row.outside_fahrenheit),
            parseFloat(row.inside_celsius),
            parseFloat(row.inside_fahrenheit),
            parseFloat(row.inside_humidity)]);
        });
        document.getElementById("debug").innerHTML = JSON.stringify(results);
     
        var chart = new google.visualization.LineChart($('#chart').get(0));
        
 
        chart.draw(data, {
            title: 'Rons Arduino Weather Station'
        });

    });
}


// load chart lib
google.load('visualization', '1', {
    packages: ['corechart']
});



// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);