dynamic load data on pan about chartjs-plugin-zoom HOT 21 CLOSED

@gcmestre My team and I encountered the same situation as you.

Our solution:
Step 1: Store all 10k data points in an array.
Step 2: After scroll, request data between first_x and last_x (these change by zoom / pan level)
Step 3: Take a sample of the data of size 1000.
Step 4: Draw this 1000 point sample.

Rinse repeat
You don't need to change the plugin to have this effect. You can hook up event listeners to mouse events or however you are handling your zoom / pan.

from chartjs-plugin-zoom.

tnx for your effort.

antoher rather cool things, will be the ability to specify a range for the pan on certain axes, using some sort of formatting.

ie: if on X i have a time OR a ordered number, will be nice to say "panDelta = 10"
means that i want to see N items, beween curr_pos to curr_pos+10

this will apply to time as well, considering that time it's expressed in ms, panDelta can be 1000_60_60*24
means that i want to see a whole day per "page".

this will be 'better' suited compared to "i want to see N items"

i imagine (but it's not my case of use) that people want to view a certain period rather than X items

hope that i was clear, as english it's not my main language 💃

from chartjs-plugin-zoom.

@ramarro123 this isn't currently possible, but I can add it.

How would you want to know that a pan occurred? Callback function in the config? Send an event from the canvas?

from chartjs-plugin-zoom.

callback will be great. also some config options for panning size and data-limit have to be added inorthet to make it work (ie: display 20 x series, send callbsck with current min max and r3quired frame)

sorry for typo... fat finger on mobile :)

from chartjs-plugin-zoom.

yeah, limits of pan are on my to-do.

I can make sure that the callback includes the necessary info about the axes.

from chartjs-plugin-zoom.

@ramarro123 this is all great feedback! Your English is great; I understand what you mean about 'paging'. I think I know how to build this into the plugin.

from chartjs-plugin-zoom.

hi there, any update on that side?

from chartjs-plugin-zoom.

@ramarro123 I haven't been able to get to this yet. If you want to take a look at implementing events when zoom and pan occur I am happy to look at a PR

from chartjs-plugin-zoom.

I have a question and I think that is kind of related to this topic.

I am trying to implement a maximum of points rendered per plot to avoid browser slowness.
If I have 10k data points would only render a max of 1k and when I would zoom would render again a maximum of 1k for the zoom area and so on.
The data points could be loaded from the back-end or the front-end.

Could some one tell me if this is possible and/or show me where to look to implement this

Regards,

from chartjs-plugin-zoom.

@AlexeiDarmin Thanks lot for your input I will try it.

from chartjs-plugin-zoom.

Hello, any news?
My solution was to store the min and max of the scale (in my case linear) with the afterUpdate callback of chart, then load new data on Hammer "panend" on the canvas depending on min and max.
Do you suggest better solutions? Or is there a plan to add as new feature in the future?

Thansk a lot.

from chartjs-plugin-zoom.

@oufresh would love to have you submit your changes as a PR.

from chartjs-plugin-zoom.

@compwright As soon as I can. I'm away from home now.

from chartjs-plugin-zoom.

Hello, I would like to create a fiddle with an example of what I tried. Where can I find a link to add the "chartjs-plugin-zoom.js" as external resource?

from chartjs-plugin-zoom.

There is a request in for this to be added to cdn.js, but until then you can use https://rawgit.com/ to load the latest release:

https://cdn.rawgit.com/chartjs/chartjs-plugin-zoom/v0.4.5/chartjs-plugin-zoom.min.js

from chartjs-plugin-zoom.

This sounds very interesting, is there some code somewhere that I can try out?

from chartjs-plugin-zoom.

Hello @compwright @oufresh - did you every write a fiddle for your dynamic loading idea?

from chartjs-plugin-zoom.

I'd also love to have a pan-Event (and maybe the same for zoom). How is the progress on that?

from chartjs-plugin-zoom.

Hello, sorry I didn't write a fiddle because I need a server side code that generates data.
I have an example with nodejs. Can I attach here?
At the moment it is only with a linear scale and the minRangeX doesn't work: when you continue to pan on the left it doens't stop and you see no graph ...

from chartjs-plugin-zoom.

Here you can find my example:

https://github.com/oufresh/chartjs-pan-dynamic-load

It is an example with a linear chart. For my purpose was ok but I would like to improve it with time based xAxe. Basically it use the beforeUpdate callback to load new data; it defines a cache to load data in memory.
This example use a maximum and a minimum possible value to stop loading new data.

In the option of the pan I set the minRange for the X axe not to show an empty chart if the minimum value is show but it doesn't work to me.
I you have improvement please let me know. I'm going to work on update the maximum X (newer values) and time based X.

from chartjs-plugin-zoom.

We have improved callback support now: #250

Let me know if there's something else specific that would be required to support your usecase

from chartjs-plugin-zoom.