Highcharts Demo

author(s): Torstein Hønsi

by Richard Houltz

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

var data = [[1388538000000, 1.1, 4.7],
[1388624400000, 1.8, 6.4],
[1388710800000, 1.7, 6.9],
[1388797200000, 2.6, 7.4],
[1388883600000, 3.3, 9.3],
[1388970000000, 3.0, 7.9],
[1389056400000, 3.9, 6.0],
[1389142800000, 3.9, 5.5],
[1389229200000, -0.6, 4.5],
[1389315600000, -0.5, 5.3],
[1389402000000, -0.3, 2.4],
[1389488400000, -6.5, -0.4],
[1389574800000, -7.3, -3.4],
[1389661200000, -7.3, -2.3],
[1389747600000, -7.9, -4.2],
[1389834000000, -4.7, 0.9],
[1389920400000, -1.2, 0.4],
[1390006800000, -2.3, -0.1],
[1390093200000, -2.0, 0.3]];

    Highcharts.chart('container', {

        chart: {
            type: 'arearange',
            zoomType: 'x'
        },

        title: {
            text: 'Temperature variation by day'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: data
        }]

    });