CODEWITHSUNDEEP
chartshighcharts
Far
Far

Reputation: 450

How to combine two bunch of data, into one chart in Highcharts?

I'm totally new to highcharts so excuse any mistake in advance.

I have one chart which illustrates amount of bandwidth used according to datetime. (somehow like this example.) I need to show more data to the user whenever the chart is zoomed on xAxis; means new data should be popped up when we are seeing a period of time in detail. fortunately, I have access to that new data, but the main problem is that I don't know how to combine this new data with my old chart.

To make my question more vivid, lets imagine this scenario: assume that I have bandwidth usage for last 2 years in scale of month (for every month on xAxis, I have one value on yAxis), then I zoom in some part of my chart and the chart gets wider and new points pop up on xAxis (what automatically happens in highcharts when we set zoomtype: 'x'), for some of these points, I have some values corresponded to them on yAxis, which I want these new points to be considered in my chart. what shall I do to do this for large scale of data? (e.g. when I have the data for 2 years and I wanna zoom by accuracy of one minute, it is not feasible to include new points manually in between of old series.)

since my code is too large and makes it more complicated to put it here, I try to illustrate my desired result via pictures:

1) this is my chart before zoom: The period which I'm gonna zoom, is shown on the picture with red pen.

2) after zoom: new points which are gonna be included into the chart, are shown on the picture(A, B, C)

3) and the final result which I do not know how to make it: the desired chart, is shown with purple pen

Any help would be very appreciated.

Upvotes: 0

Views: 926

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Take a look at this live demo: http://jsfiddle.net/kkulig/6gyfx6n7/

I used afterSetExtremes event to check the currently displayed time span and set the appropriate data. If it's shorter than 30 days then I add additional points. Otherwise I restore the default data. pointsAdded helps me to to control whether these operations are actually needed or not.

events: {
  afterSetExtremes: function(e) {
    var series = this.series[0];

    if (pointsAdded && e.max - e.min > 30 * day) {
      console.log('Set default data');
      series.setData(data.slice());
      pointsAdded = false;
    } else if (!pointsAdded) {
      console.log('Add points');
      additionalData.forEach(function(p) {
        series.addPoint(p, false);
        series.chart.redraw();
        pointsAdded = true;
      });
    }
  }
}

To see it working select the last 20 days or so. Then return to the default view by clicking All button.

API references:

Upvotes: 1

Related Questions