CODEWITHSUNDEEP
javascriptjquerychartshighcharts
Nyxynyx
Nyxynyx

Reputation: 63717

Limiting the Number of Datapoints in HighCharts

When new points are added to an empty HighChart chart, the number of points on the chart increases indefinitely, with the chart compressing horizontally as the X-axis range gets larger.

myChart.series[1].addPoint([fields.timestamp, fields.score], true, true);

However when more data points are added to a non-empty chart, the chart scrolls to the left immediately to accommodate the new data points without changing the x-axis scale. An example will be http://www.highcharts.com/demo/dynamic-update. The number of datapoints displayed at any one time appears to be the original number of datapoints already on the chart when the chart was loaded.

Question: For both cases, how can we change/limit the number of data points on the chart (or limit the x-axis scale), such that a chart that starts off empty will increase in number of data points to N points before the addition of more data points cause the chart to scroll to the left.

Upvotes: 1

Views: 834

Answers (1)

wergeld
wergeld

Reputation: 14462

If you look at the docs you can see a properties can be added to series.addPoint. Extending this example you can modify the button code like so:

// the button action
var i = 0;
$('#button').click(function() {
    var chart = $('#container').highcharts();
    chart.series[0].addPoint(50 * (i % 3), true, chart.series[0].points.length > 15, true);
    i++;
});

I have added chart.series[0].points.length > 15 to it. This example starts of with 12 points already on chart (so length is 11). I am going to keep adding points until there are 16 on the chart, then any new points added are appended and the last one on the left is dropped.

Upvotes: 1

Related Questions