XY trajectory using Highcharts
I am trying to plot a trajectory in real time using Javascript and Highcharts. The data will come from external sensors, but at the time I was practicing this example: http://jsfiddle.net/0fp1gzw8/1/
As you can see, the JS snippet is trying to plot a circle using the cosine and 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-axis, the line segment is no longer drawn between two successive samples, instead it connects the new sample to one of the old ones already drawn earlier:
How can I solve this problem and get a clean xy plot?
thank
source to share
Highcharts expects spline / line chart data to always be sorted by x value. With this expectation, when you call addPoint
it looks like it is pulling the line segment to the previous x-value, not to the previously added point.
If you switch your code 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 line segments correctly, but you get a lot of errors like this in the console:
Highcharts error #15: www.highcharts.com/errors/15
You may be able to switch to a scatter plot that does not have this limitation. If you need line segments, you can add them yourself using the Renderer .
source to share