score:2

Accepted answer

Also you can use Highcharts with plotBands functionality (which should be more elastic). There is the algorithm implemented on chart.events.load which checks whether the nulls are in data, and adds the plot bands to your chart dynamically basing on your current data. Take a look at this code:

load() {
    var axis = this.xAxis[0]
    var boundaries = []
    var color = '#55f'

    // Check there are nulls in data. If yes, save the boundaries.
    data.forEach((elem, i) => {
        if (elem === null) {
          if (data[i-1]) { boundaries.push(data[i-1][0]) }
          if (data[i+1]) { boundaries.push(data[i+1][0]) }
        }
    })

    // Create plotBands basing on current boundaries.
    boundaries.forEach((range, i) => {
        if (i % 2) {
          axis.addPlotBand({
            from: boundaries[i-1],
            to: range,
            color: color
          })
        }
    })
 }

Additionally, you can add another series to your chart (fake one, with empty data), which will serve to toggling visibility of plot bands. Here is the code:

  {
    // Fake series to add toggling visibility of plotbands functionality.
    name: "Zone of Unavailability",
    data: [],
    events: {
      legendItemClick() {
        var bandsGroup = this.chart.xAxis[0].plotLinesAndBandsGroups['bands-0']
        var bandsVisibility = bandsGroup.attr('opacity')
        bandsGroup.attr({
            opacity: bandsVisibility ? 0 : 1
        })
      }
    }
  }

Live example: http://jsfiddle.net/dzj8bwLm/

API Reference:

https://api.highcharts.com/highcharts/xAxis.plotBands https://api.highcharts.com/highcharts/series.line.events.legendItemClick

score:1

You can use Highcharts/Highstock for this. You can put line and column series into one chart and manipulate them however you like.

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>

and

var data = [];

for (let i = 0; i < 100; i++) {
  if (i == 10 || i == 11 || i == 12 || i == 13 || i == 14 || i == 15 || i == 16 || i == 17 || i == 18 || i == 27 || i == 28 || i == 29) {
    data.push(null)
  } else {
    data.push([i, Math.floor((Math.random() * 100) + 1)])
  }
}

Highcharts.stockChart('container', {

  xAxis: {
    ordinal: false,
    labels: {
      format: '{value}'
    }
  },

  series: [{
    data: data,
    connectNulls: false,
    dataGrouping: {
      enabled: false
    }
  }, {
    type: 'column',
    pointWidth: 9,
    dataGrouping: {
      enabled: false
    },
    data: [
      [10, 100],
      [11, 100],
      [12, 100],
      [13, 100],
      [14, 100],
      [15, 100],
      [16, 100],
      [17, 100],
      [18, 100],
      [27, 100],
      [28, 100],
      [29, 100]
    ]
  }]

});

See this online demo: jsFiddle


Related Query