Refresh time doesn't seems to be accurate and varies based on duration

[joicetm]

Hi,

I am trying to plot some sensor data at rate 128 points per second, ie.. alomost every 8 ms a new point is added to the plot. As per my understanding, the function 'Onrefresh' should be called every 8ms regardless of the value of 'duration'. but in my plot as i increase the duration value, refresh time also increases. it takes much more time between each refresh function calls. I am not sure this is the write way of doing it, correct me if i am wrong(this is my first javascript/html code).

i am reading the data as an array buffer of size of around 64(it varies little bit based on the time between each http request ) and plot with the below shown config,

var config = {
	type: 'line',
	data: {
  datasets: [{
    label: 'SPO2',
    backgroundColor: 'rgba(251, 85, 85, 0.4)',
    borderColor: '#FA566F',
    fill: false,
	cubicInterpolationMode: 'monotone',
    data: [],
    pointRadius: 0,
  }]
},
	options: {
		title: {
			display: true,
			text: 'SPO2'
		},
		scales: {
			xAxes: [{
				type: 'realtime',
				realtime: {
					duration: 500,
					refresh: 8,
					delay: 0,
					onRefresh: onRefresh
				}
			}],
			yAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'value'
				}
			}]
		},
		tooltips: {
			mode: 'nearest',
			intersect: false
		},
		chartArea: {
                       backgroundColor: '#59616C'
                },
		hover: {
			mode: 'nearest',
			intersect: false
		}
	}
};

[nagix]

You shouldn't set the refresh interval to a too small value, in particular, less than the display refresh interval (1000/60ms) because the chart update is a bit heavy process. If you increase the duration, this update takes more time, so refresh time also increases.

The solution would be to set the refresh interval to a longer value like 250ms and insert multiple data points in the buffer in a single onRefresh call.