Zoom to fetch data

[ace-han]

Hello there,
I have been looking for a functionality of fetching data onZoom in this plugin. However, I could not find a good example to implement it. Any suggestion?

#235 says this plugin will review the signature but no more updates
#345 onZoom or onZoomComplete for the time of writing this issue, just triggering too many times in React

I just want to know how to achieve below functionality, thx in advance

[pgp80]

If I may piggyback, would love to echo this. I've been trying to find a way to zoom in on my scatter plot to get an average of data, and there is apparently no easy way (for me) to do this. I've been following this topic https://stackoverflow.com/questions/58609850/chart-js-get-array-of-currently-visible-points-on-graph which kind of gets me there, except my x-axis doesn't appear to have a minIndex or maxIndex like the response indicates (I'm using time data in seconds).

Anyhow, would love to see increased functionality on pulling data from the zoomed area to do things like averaging selections. For those familiar with the fitness app Strava, I'm essentially trying to track cycling power over time and want to see average power over, say, a 3 min period of the entire ride.

[jledentu]

@ace-han Here is how I implemented this feature on my side (Chart.js 2):

async onZoom({chart}) {
  // Get axis
  const xScale = chart.scales['x-axis-0'];
  
  // Replace data in a dataset
  chart.data.datasets[0].data = await loadData(xScale.min, xScale.max);
  chart.update();
}

In the 1.0.0-beta version of the plugin, we retrieve the x scale a bit differently:

const xScale = chart.scales.x;

If you have animations enabled, it looks like better if you wait for the end of the animation before replacing the data.

[pgp80]

@ace-han Here is how I implemented this feature on my side (Chart.js 2):

async onZoom({chart}) {
  // Get axis
  const xScale = chart.scales['x-axis-0'];
  
  // Replace data in a dataset
  chart.data.datasets[0].data = await loadData(xScale.min, xScale.max);
  chart.update();
}

In the 1.0.0-beta version of the plugin, we retrieve the x scale a bit differently:

const xScale = chart.scales.x;

If you have animations enabled, it looks like better if you wait for the end of the animation before replacing the data.

Curious if you could put up an example on jfiddle, would love to see this in action!

[strixy]

When I try to use the above approaches I get the lowest and the highest Y axis values for min and max. Nothing to do with the x axis at all (which is a time series).

I found something at

onZoom: ({ chart }) => {
  const min = chart.options.scales.xAxes[0].ticks.min
  const max = chart.options.scales.xAxes[0].ticks.max
}

They're timestamp values, not the indexes of the data so the later part doesn't work at all. Converting those to the data indexes means more gymnastics, but you can get there.

[pgp80]

I was actually able to make this stuff work, this is what I'm using to get the average on a selection of data that I drag select. In my situation I have two datasets, one for cycling power and one for HR, hence the two arrays, the bottom portion is just rounding and stringify puts the data into a field on the webpage:

   `function getVisibleValues(){
    let x = chart.scales.x;

    array2 = chart.data.datasets[0].data.slice(x.min, x.max)
    array3 = chart.data.datasets[1].data.slice(x.min, x.max)

    let average = (array) => array.reduce((a, b) => a + b) / array.length;
    avpw=Math.round(average(array2))
    avhr=Math.round(average(array3))
    document.getElementById("pwr").innerText = JSON.stringify(avpw);
    document.getElementById("hr").innerText = JSON.stringify(avhr);
    }`