Highcharts - How do I track/follow a live updated chart without using a navigator?

Question

I have a graph which has live data feeding in, but the chart only tracks or follows the data line if the navigator is enabled.

I am unsure if this is a feature or is it a bug.

On the JSFiddle, notice how it doesn't track, but as soon as you change enabled: false to enabled: true, on line 43, it instantly starts tracking.

http://jsfiddle.net/6eso1hgy/1/

Is it possible to make it have the tracking behavior without a navigator?

score 0 · Answer 1 · answered Jun 04 '19 at 13:37

0

I don't know if you really need Highstock. If not then you can change the code to just Highcharts and then remove all unnecessary code and add the following:

series: [{
  marker: {
    radius: 0
  },
...

Fiddle

answered Jun 04 '19 at 13:37

Core972

4,065
3
31
45

Yup, I require highstock, working on a financial tool – Dolan Jun 04 '19 at 14:02
@Dolan, Then navigator is required. – Core972 Jun 04 '19 at 14:03

score 0 · Answer 2 · answered Jun 05 '19 at 08:30

You can achieve it using xAxis.setExtremes() method:

Code:

events: {
  load: function() {
    // set up the updating of the chart each second
    var series = this.series[0];
    var chart = this;
    setInterval(function() {
      NewTime = (new Date()).getTime(); // current time
      var x = NewTime,
        y = Math.round(Math.random() * 10);

      series.addPoint([x, y], false, false, false); //redraw shift animation

      chart.xAxis[0].setExtremes(
        chart.xAxis[0].min + 1000,
        chart.xAxis[0].max + 1000,
        true,
        false
      );
    }, 1000);
  }
}

Demo:

http://jsfiddle.net/BlackLabel/z1mu0Lgh/

API reference:

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

This is a little bit of a hack with `setInterval` so I am not too happy with this answer. Ideally I wan't it to just work without any faffing about, but I will try it! — Dolan, Jun 07 '19 at 17:51

Highcharts - How do I track/follow a live updated chart without using a navigator?

2 Answers2