viewportMaximum – limit to 100 most recent values

[phillips321]

Hi there,

I use canvasJS to display a Spline chart of temperature/humidity logs pulled from a CSV file.

The CSV looks like this for example (timestamp,temp,humidity%:
2022-05-06 08:46,5.23,88.00
2022-05-06 08:47,5.20,70.87
2022-05-06 08:47,5.20,67.83
2022-05-06 08:48,5.14,65.44
2022-05-06 08:49,4.97,62.62
2022-05-06 08:50,4.84,75.28
2022-05-06 08:51,4.80,82.75
2022-05-06 08:52,4.91,86.93
2022-05-06 08:53,5.04,88.28
2022-05-06 08:54,5.06,73.45
2022-05-06 08:55,4.89,60.98
2022-05-06 08:56,4.75,69.43
2022-05-06 08:57,4.66,78.67

These readings are taken every 1 minute, so as you can imagine the file has thousands of lines, however when viewing the graph i would like to auto zoom to the most recent 100 values with the ability to scroll back if need be.

I dont think viewportMaximum allows me to do this as my X values (timestamps) are not integers. Does viewportMaximum or anything else in canvasJS allow me to only display the 100 most recent entries with an option to scroll back if need be?

Many thanks

[Thangaraj Raman]

@phillips321,

You can set the x-value as a date object instead of using labels.

To only display a certain number of recent dataPoints you can set the viewportMinimum according to the number of dataPoints you would like to view. Please find the code snippet for the same below.

chart.axisX[0].set("viewportMinimum", dps[0][dps[0].length - 1 - dpsInView].x)

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS