javascripthighchartsvisualizationgaps-in-data

Highstock with boost and broken-axis: gaps are only displayed when the dataset is small, is there any way to fix this?


I'm a developer for a web app that helps analysts to monitor environmental variables such as airborne NO2 or Particulate Matter.

For this we use Highstock, with boost and broken-axis (no data grouping, since that obfuscates local minimums or maximum values).

An important thing to look out in this context, is gaps in the data. The problem is, gaps are not always displayed, even when the configuration seems to be OK.

Does anyone know if / how this can be sorted out?

In the image below the same dataset is ploted 2 times, but using a smaller time window the second time, which seems to be the deciding factor for the gap displaying feature, at least in my PC.

enter image description here

Here is the code for the plotting function (see the working jsfiddle):

function seriesPlot(container, minDate, maxDate, title, subtitle) {

  function filterDates(tupla) {
      return tupla[0] >= minDate && tupla[0] < maxDate;
  }
  
  let values = y.filter(filterDates);

  $('#' + container).highcharts('StockChart', {

    global: {
      useUTC: false
    },
    chart: {
      type: 'line'
    },
    title: {
      text: title
    },
    subtitle: {
      text: subtitle
    },
    xAxis: {
      type: 'datetime',
      ordinal: false,
      min: minDate,
      max: maxDate,
    },
    yAxis: {
      min: -58.401,
      max: 133.332
    },

    scrollbar: {
      enabled: false
    },
    tooltip: {
      xDateFormat: '%Y-%m-%d %H:%M:%S',
      valueDecimals: 2

    },
    boost: {
      enabled: true,
      seriesThreshold: 0
    },
    series: [{
      name: 'Example',
      gapSize: 1.5,
      dataGrouping: {
        enabled: false,
      },
      marker: {
        enabled: true,
        radius: 1.5,
        symbol: 'circle'
      },
      data: values
    }]
  });
}

Solution

  • Thanks to the comment from @ppotaczek I could solve the issue:

    Hi @Juan, please check the gapUnit option, setting it to value seems to resolve the problem. Example: jsfiddle.net/BlackLabel/5wz6qxds API: api.highcharts.com/highstock/series.line.gapUnit

    I can manage to adjust the gapSize dynamically with the metadata* for each case. E.g.: if the data comes once every 10 minutes, then:

    ...
    gapSize: 1.3 * 10 * 60000,
    gapUnit: 'value',
    ...
    

    I added the 1.3 to allow for a small transmission errors.

    *: I know the expected frequency for which the data is reported, or at least that should be the case.