JSFiddle - React, Tailwind, and code Playground

by Ian Brown

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chartOptions = {
        chart: {
            type: 'spline'
        },
        title: {},
        subtitle: {},
        xAxis: {
            type: 'datetime',
            title: {}  
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
            lineWidth: 1
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%I:%M %p}: {point.y:.1f} °C'
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled: false
                }
            },
            series: {
                lineWidth: 2
            }
        },
        series: []
    };
    function formatChartSeries(logs){
                var seriesData = [];
        _.forEach(logs, function(log){
            seriesData.push([moment(log.created).valueOf(), parseFloat(log.ambientTemperature)]);
        });
        return _.sortBy(seriesData, function(s){ return s[0];});
    }
    $.getJSON('http://api.ian-b.com/sensors', function(sensors) {
        $.getJSON('http://api.ian-b.com/daytempdemo',  function(log) {
        chartOptions.title.text = 'Room Temperatures';
            chartOptions.subtitle.text = 'Range: ' + new moment(log.data[log.data.length-1].created).format('HH:mm') + ' - ' + new moment(log.data[0].created).format('HH:mm');
        _.forEach(sensors.data, function(sensor){
            var chartSeries = {
                name: sensor.name,
                data: formatChartSeries(_.where(log.data, {sensorId: sensor.id}))
            };
            
            chartOptions.series.push(chartSeries);
        });
        
        $('#container').highcharts(chartOptions);
    });
    });
    
});