Highcharts Demo

author(s): Chris Halcrow

by chalcrow

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Kinglake bush fires'
    },
    subtitle: {
        text: 'Real-time data - temp (°C) against mass concentration (µg/m³) and CO2 (ppb)'
    },
    xAxis: [{
        min: Date.UTC(2010, 0, 1, 17, 00, 0),
        max: Date.UTC(2010, 0, 1, 17, 30, 0),
        type: 'datetime',
        /*categories: ['13:05', '13:10', '13:15', '13:20', '13:25', '13:30',
            '13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05'],*/
        crosshair: true,
        title: {
          text: 'Time'
        }
    }],
    yAxis: [{ // Primary yAxis
        min: -5,
        max: 50,
        alignTicks: false,
				labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Temperature (°C)',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: false

    }, { // Tertiary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Mass concentration (µg/m³) / CO2 (ppb)',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 55,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'Temperature',
        type: 'spline',
        yAxis: 0,
        data: [
        				[Date.UTC(2010, 0, 1, 17, 0, 0), -5],
        				[Date.UTC(2010, 0, 1, 17, 05, 0), 5],
        				[Date.UTC(2010, 0, 1, 17, 10,...