Understanding Highcharts – Regular/Discrete Series Data with missing data | Highcharts @ A Humble Opinion

ahumbleopinion.com/understanding-highcharts-regular-discrete-series-data Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

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

CSS

#container {
    min-width:500px;
}

JavaScript

(function ($) {
    var chart;
    var chartingOptions = {
        title: {
            text: 'Bombay to Goa'
        },
        subtitle: {
            text: '<a href="http://ahumbleopinion.com/category/highcharts/">Highcharts @ A Humble Opinion</a>',
            useHTML: true
        },
        credits: {
            text: "Jugal Thakkar",
            href: "http://jugal.me/"
        },
        yAxis: [{
            title: {
                text: 'Fuel Consumed (ltrs.)'
            }
        }, {
            title: {
                text: 'Time Taken (mins.)'
            },
            opposite: true
        }],
        series: [{
            name: 'Fuel Consumed',
            pointStart: 10000,
            pointInterval: 100,
            tooltip: {
                valueSuffix: ' ltrs.'
            },
            data: [0, 7.2, 7.76, null, 3.92, 7.76, 8.4]
        }, {
            name: 'Time Taken',
            pointStart: 10000,
            pointInterval: 100,
            data: [0, 110, 120, null, 89, 122.6, 117],
            tooltip: {
                valueSuffix: ' mins.'
            },
            yAxis: 1
        }]

    };
    chart = $('#container').highcharts(chartingOptions).highcharts();
})(jQuery);