JSFiddle - React, Tailwind, and code Playground

by Ron Hudson

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 100%;"></div>

JavaScript

// onload callback
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)]);
        });

        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);