Comments (21)
@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.
Related Issues (20)
- Zooming in breaks scrolling on mobile device
- Accept ratio of XY while zoom in mobile device horizontally or vertically
- Want to implement rectangle selection without zoom.
- LineChart disappears while zooming in if spanGaps: true and non-null datapoints are out of bounds
- minRange for Category HOT 3
- After zooming in too much, straight line shifts upwards HOT 1
- Zooming in over axis does not reset y-axis ticks back to initial limits HOT 1
- import zoomPlugin from 'chartjs-plugin-zoom' causing GET 500 Error but still working HOT 2
- Some ticks disappear when the X axis is moved.
- Zoom reset for scales built with suggestedMin and suggestedMax
- Graph grid and axes jittering when panning on one axis
- getZoomLevel doesn't appear to be exported HOT 1
- Overlap the axis
- Chartjs-plugin-zoom drag issue
- Reduce the number of dependencies HOT 2
- Inconsistent behavior when using limits and new data points
- Changing zoom mode (drag) resets the zoom level
- Pan function does not work properly when there are many points HOT 1
- Zooming in on a line chart on the category axis makes the line disappear
- Disable auto zoom-out after toggling datasets, when clicking on the legend.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartjs-plugin-zoom.