Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
       title: {
                text: 'Consumption & Temperature monitoring'
        },

        subtitle: {
                text: 'Heating experiment - LTU, Summer 2017'
        },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
        yAxis: {
                title: {
                        text: 'Measured values (°C or kW)'
                        }
        },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Wall plug consumption',
        // Define the data points. All series have a dummy year
        // of 1970/71 in order to be compared on the same x axis. Note
        // that in JavaScript, months start at 0 for January, 1 for February etc.
        //Array ( [0] => 1501771394000 [1] => 1501771426000 [2] => 1501771458000 [3] => 1501771490000 [4] => 1501771521000 [5] => 1501771553000
        data: [
            [1501771394000, 130],
            [1501865664000, 120],
            [1501978921000, 130]
        ]
    }, {
        name: 'Inside temperature',
        data: [
            [1501771394000, 19],
            [1501865664000, 20],
            [1501978921000, 24],
        ]
    }, {
        name: 'Thermostat setpoint',
        data: [
            [1501771394000, 21],
            [1501865664000, 20],
            [1501978921000, 21],
        ]
    }, {
        name: 'Outside temperature',
        data: [
            [1501771394000, 30],
            [1501865664000, 22],
            [1501978921000, 34],
        ]
    }]
});