javascript - Show gap of missing data with Highstock - Stack Overflow

admin管理员组

文章数量:1426491

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.

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.

• javascript
• highcharts

Share Improve this question Follow asked May 8, 2015 at 8:28 Maximiliano PaduloMaximiliano Padulo 1,5221111 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

Halvor Strand function wrapper did not work for me as long as getSegments is not part of highstock source code anymore to calculate that gap. Anyway, you can find an approximation to solve the problem bining this other topic and the previows answer like this:

(function(H) {
  H.wrap(H.Series.prototype, 'gappedPath', function(proceed) {
    var gapSize = this.options.gapSize,
      xAxis = this.xAxis,
      points = this.points.slice(),
      i = points.length - 1;

    if (gapSize && i > 0) { // #5008

      while (i--) {
        if (points[i + 1].x - points[i].x > gapSize) { // gapSize redefinition to be the real threshold instead of using this.closestPointRange * gapSize
          points.splice( // insert after this one
            i + 1,
            0, {
              isNull: true
            }
          );
        }
      }
    }
    return this.getGraphPath(points);
  });
}(Highcharts))

setting gapSize in plotOptions to the desired size (in ms) like Halvor said:

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

In case anyone es across this and is spending hours trying to figure out why gapSize is not working like me. Make sure your time series data is sorted, only then will the gaps appear in the graph.

Another issue I ran into was my data series was in this format

[
      {x: 1643967900000, y: 72},
      {x: 1643967600000, y: 72},
      {x: 1643967300000, y: 72}
]

However this does not seem to work with gapSize and needs to be in the format below

[
      [1643967900000, 72],
      [1643967600000, 91],
      [1643967300000, 241]
]

本文标签： javascriptShow gap of missing data with HighstockStack Overflow