XY trajectory plot using Highcharts

Question

I am trying to plot a trajectory in real-time using Javascript and Highcharts. The data will come from external sensors but for the moment I was practicing with this example: http://jsfiddle.net/0fp1gzw8/1/

As you can see, the JS snippet tries to plot a circle using a cosine and a sine function:

load: function () {

  var series = this.series[0];

  setInterval(function () {

    a = a + 0.1;
    x = Math.sin(a),
    y = Math.cos(a);

    series.addPoint([x, y], true);

  }, 100);
}

The problem is that once the point has crossed the x axes, the line segment is no more drawn between two consecutive samples, instead it connects the new sample with one of the old ones already plotted before:

How can I solve this and get a clean x-y plot?

Thanks

Answer 1

Highcharts expects spline/line chart data to always be sorted by the x value. With this expectation, when you call addPoint it looks like it draws the line segment to the previous x-value not the previously added point.

If you switch your code to use setData:

var data = [];
var series = this.series[0];
setInterval(function () {
  a = a + 0.1;
  x = Math.sin(a),
  y = Math.cos(a);
  data.push([x,y]);
  series.setData(data, true);
}, 100);

it draws the line segments correctly but you get lots of these errors in the console:

Highcharts error #15: www.highcharts.com/errors/15 

You might have better luck switching to a scatter chart that doesn't have this limitation. If you need the line segments, you could add them yourself with the Renderer.