mxlian mxlian - 4 days ago 5
Javascript Question

Show gap of missing data with Highstock

Using Highstock to chart a sorted time serie:

[[timestamp, value], ...]


The datasource is sampled at irregular intervals. As result the distances between two points (in the time axis) varies.

If two adjacent points are separated for more than 5 minutes I want to show a gap in the chart.

Using the
gapSize
option doesn't work, because it doesn't allows to specify the 'size' of the gap as a function of time.

Showing gaps is already a part of Highstock, I just need a way to specify it as a fixed amount of time (5 minutes). Ideas?

Btw, beside that the plot works great.

Answer

Here's a slightly unclean way to "manipulate" gapSize to work so that it's value is the amount of milliseconds required to create a gap.

(function (H) {
    // Wrap getSegments to change gapSize functionality to work based on time (milliseconds)
    H.wrap(H.Series.prototype, 'getSegments', function (proceed) {
        var cPR = this.xAxis.closestPointRange;
        this.xAxis.closestPointRange = 1;

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.xAxis.closestPointRange = cPR;
    });
}(Highcharts));

This utilizes that gapSize is only used within the getSegments function (see source), and it works based on the closestPointRange of the axis. It wraps the getSegments, sets closestPointRange to 1, calls the original method and then resets closestPointRange to its original value.

With the code above you could do gaps for 5 minutes like this:

plotOptions: {
    line: {
        gapSize: 300000 // 5 minutes in milliseconds
    }
}

See this JSFiddle demonstration of how it may work.

Comments