CODEWITHSUNDEEP
highcharts
Nick Swan
Nick Swan

Reputation: 822

Overlay 2 series of data of different length with highcharts

I have 2 series of data, where the x-axis is dates - 1 period after another eg 2 weeks and then 2 weeks.

I want to overlay the 2 series, although the second series has not completed yet. At the moment the second series is stretching the entire length of the x-axis rather than plotting at the same intervals and matching up the day count to series 1.

    $(function() {
  $('#clicks').highcharts({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Clicks'
    },
    yAxis: {
      title: {
        text: 'Clicks'
      },
      min: 0
    },
    xAxis: [{
      type: 'datetime',
      tickInterval: 30 * 24 * 3600 * 1000
    }, {
      type: 'datetime',
      tickInterval: 30 * 24 * 3600 * 1000
    }],
    series: [{
        name: 'Control Clicks',
        data: [
          [Date.UTC(2018, 2, 22), 2],
          [Date.UTC(2018, 2, 23), 0],
          [Date.UTC(2018, 2, 24), 0],
          [Date.UTC(2018, 2, 25), 1],
          [Date.UTC(2018, 2, 26), 1],
          [Date.UTC(2018, 2, 27), 2],
          [Date.UTC(2018, 2, 28), 0],
          [Date.UTC(2018, 2, 29), 0],
          [Date.UTC(2018, 2, 30), 1],
          [Date.UTC(2018, 2, 31), 2],
          [Date.UTC(2018, 3, 1), 0],
          [Date.UTC(2018, 3, 2), 0],
          [Date.UTC(2018, 3, 3), 0],
          [Date.UTC(2018, 3, 4), 0],
          [Date.UTC(2018, 3, 5), 2],
        ]
      },
      {
        name: 'Test Clicks',
        data: [
          [Date.UTC(2018, 3, 6), 0],
          [Date.UTC(2018, 3, 7), 0],
          [Date.UTC(2018, 3, 8), 0],
          [Date.UTC(2018, 3, 9), 2],
          [Date.UTC(2018, 3, 10), 2],
          [Date.UTC(2018, 3, 11), 0],
          [Date.UTC(2018, 3, 12), 1],
          [Date.UTC(2018, 3, 13), 1],
          [Date.UTC(2018, 3, 14), 0],
        ],
        xAxis: 1
      }
    ]
  });
});

https://jsfiddle.net/0yd6hucc/

How can I get these to plot at the same x-axis intervals?

Upvotes: 1

Views: 1472

Answers (2)

Kamil Kulig
Kamil Kulig

Reputation: 5826

The solution here is to manually set maximum on the second axis:

  events: {
    render: function() {
      if (renderEnabled) { // setExtremes() calls render event too - prevent infinite recursive loop
        var xAxes = this.xAxis,
          extremes = xAxes[0].getExtremes(),
          range = extremes.max - extremes.min;

        renderEnabled = false;
        xAxes[1].setExtremes(null, xAxes[1].getExtremes().min + range);
        renderEnabled = true;
      }

    }
  }

Live demo: https://jsfiddle.net/BlackLabel/fuzspcva/

API references:

Upvotes: 1

rhavelka
rhavelka

Reputation: 2386

Do you know the max of your dataset? you could add something in like this [Date.UTC(2018,3,15),null] to offset the values that haven't been filled yet. It's not the most elegant solution but it works.

EDIT: or you can do this

xAxis:[{
    type:'datetime',
    max: Date.UTC(2018,3,4),
    tickInterval: 30 * 24 * 3600 * 1000
 }, {
    type: 'datetime',
    max: Date.UTC(2018,3,18),
    tickInterval: 30 * 24 * 3600 * 1000
}],

here is the stackoverflow for both examples Highcharts max interval for dateTime in x-axis?

Upvotes: 1

Related Questions