JSFiddle - React, Tailwind, and code Playground

by Andrew Walker

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JavaScript

var chart;

var data = [{
    "urDate": "2015-03-04",
    "MeterTime": "15.5343"
}, {
    "urDate": "2015-03-06",
    "MeterTime": "18.0197"
}]


var options = {
    chart: {
        backgroundColor: '#34495e',
        plotBackgroundColor: '#2b3c50',
        renderTo: 'container',
        type: 'line'
    },
    title: {
        text: '',
        x: -20 //center
    },
    subtitle: {
        text: '',
        x: -20
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            name: 'Seconds'
        },
        //type: 'datatime', //y-axis will be in milliseconds

        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },


    series: []
};

var dataXAxis = [],
    dataSeries = [{
        data: []
    }];
data.forEach(function (va) {
    dataXAxis.push(formatDate(va.urDate));
    console.log('t ' + va.MeterTime);
    dataSeries[0].data.push(parseInt(va.MeterTime));
})
// And assign the correct format to highcharts
options.xAxis.categories = dataXAxis;
options.series = dataSeries;
options.yAxis.title.text = 'Seconds';

// create the first chart
chart = new Highcharts.Chart(options);


function formatDate(d) {
    d = new Date(d);

    var month = d.getMonth();
    var day = d.getDate();
    month = month + 1;

    month = month + "";

    if (month.length == 1) {
        month = "0" + month;
    }

    day = day + "";

    if (day.length == 1) {
        day = "0" + day;
    }

    return (day + '-' + month + '-' + d.getFullYear());
}