CODEWITHSUNDEEP
javascripthighcharts
William
William

Reputation: 555

Highcharts - selection error with live data and different time intervals

I'm using highcharts and am I trying to develop a chart, which can handle live data.

Here is my first try: 

var data = [],
  chart_interval = undefined;

Highcharts.setOptions({
  global: {
    useUTC: false
  }
});

function addRandomData(dataSet, frequency, yMax, count) {
  for (var i = 1; i <= count; i++) {
    var x = new Date((new Date()).getTime() + i * frequency),
      y = Math.random() * yMax;

    dataSet.push({
      x: x,
      y: y
    });
  }

  return dataSet;
}

function addDataInterval(dataSet, frequency, yMax) {
  return setInterval(function() {
    var x = new Date(dataSet[dataSet.length - 1].x.getTime() + frequency),
      y = Math.random() * yMax;

    dataSet.push({
      x: x,
      y: y
    });
  }, frequency);
}

// Parameters: dataSet, frequency, yMax, count
addRandomData(data, 1000, 10000, 60);
//  Parameters: dataSet, frequency, yMax
addDataInterval(data, 500, 10000);

// Create the chart
Highcharts.stockChart('container', {
  chart: {
    zoomType: 'x',
    events: {
      load: function() {

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function() {
          series.update({
            data: data
          }, true);
        }, 1000);
      }
    }
  },

  rangeSelector: {
    buttons: [{
      count: 1,
      type: 'minute',
      text: '1M'
    }, {
      count: 5,
      type: 'minute',
      text: '5M'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: false,
    selected: 0
  },

  title: {
    text: 'Live random data'
  },

  exporting: {
    enabled: false
  },

  series: [{
    name: 'Random data',
    data: data
  }]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

Problem: If already existing data has different time intervals, such as the newly generated data, the freely selectable zoom don't work.

Have I somewhere make mistake or is this a bug of highcharts?

Upvotes: 1

Views: 85

Answers (1)

Sphinxxx
Sphinxxx

Reputation: 13017

Highcharts wants time values as timestamps in milliseconds instead of Date objects:

What format does the highcharts js library accept for dates?
Highcharts X-Axis time from JS date

Change how you generate your x values, and the zooming magically starts working again:

var x = (new Date()).getTime() + i * frequency,

...

var x = dataSet[dataSet.length - 1].x + frequency,

https://jsfiddle.net/74zdsvbo/

Upvotes: 2

Related Questions