Drag on X axis somehow...
zekageri opened this issue · 8 comments
Hi! Thanks for this library. I have somehow managed to be able to drag the points on the X axis with previous chart js version.
Now i want to upgrade to the newsest chart js and still try to drag the X axis.
The problem is that i have a time axis on X, and i know it does not possible to compute this but still i need some workaround for this because i was able to do that with prev versions.
My case is that the graph is a shutter/blinder graph. The user has to be able to set a specific time point in a day from 00:00 to 23:50 to a specific % from 0 to 100. It will be a dataset on an MCU, this MCU will loop trought this dataset and if the time matches with the actual time it will turn the shutter/blinder on the windows to the specified % value.
Here is a jsfiddle from what i try to do
So the user should be able to drag a point to the Y and the X axes as well. A point represents the shutter percentage in a day on the window.
If the problem is the x axes label format like "13:00" it would be ok for it to be a timestamp in millis or something else if the user sees the correct time in string.
Any suggestion? Sorry if it was not clear enough.
Hey @zekageri 👋
Sorry, I didn't have the time to fix your specific example, but here's a smaller workaround showcasing how one may "disguise" a linear axis as a time axis, with both x/y dragging enabled:
https://jsfiddle.net/f72kz348/9/
The main difference to your example is that the x-axis values are numeric timestamps (milliseconds) instead of strings. By slightly altering the tooltips and scales ticks the difference to a "real" time scale is almost non-existent (at least in this example).
The fiddle you send still had the "v2" style axis configuration, which caused the Chart to use a categorial axis for the time string (thus disabling dragging along the x-axis). You may want to have a look at the migration guide, regarding scales again, as quite a lot of the settings changed between v2 and v3!
Best
Chris
Thank you! I will look at your example.
Meanwhile i updated mine on the fiddle.
Just some comments and console logs i would appreciate it if you would look at it!
I see your example. Thank you it is really clever that you convert the labels from the timestamps to readable strings when initing the chart.
Somehow I need a fixed x axis label from 00:00 to 23:50 with 10 mins steps.
Currently this x axes is depends on the data, but the data will be dynamic. The user pushes custom datas to the chart meanwhile. I will create a fiddle from it, sorry i was not clear but i really appreciate your example.
Okay.
X axis steps should be 10 min. I set the steps on the axis to 600 ( ms ) but it isn't working
Alright, so you'd like 10 minute x-axis steps while dragging (I assume?), and ideally also ticks formatted to 10 min steps. Having a tick for each 10 minute mark between 0:00 - 24:00 would result in 120 ticks, which I would highly recommend to avoid in your chart.
Regarding the "fixed" 10 minute dragging steps, you can always do this (as any custom behaviour) in the onDrag callback.
https://jsfiddle.net/93Lmxz0w/5/
Does this solve your issue?
P.S.: I noticed that sometimes the tooltip does not update while dragging. However, this not an issue in this plugin, but rather due to the new rendering behaviour in Chart.js v3. You can follow the status of this issue over here in the official Chart.js repo: chartjs/Chart.js#8826
Oh thank you this is really really cool. It seems to me that the tooltip data update fail when the chart is too big. If i reduce its size the labels are updating nicely.
Why don't you recommend 120 ticks? Becuse readability? Maybe i can set the grid lines to 120 tick and not the labels to let the user see where he is.
EDIT: NOP, it is working if the console is open, not when the chart size is smaller. :'D
Yes, readability, plus also it drastically reduces the performance of the chart. I'm also unsure about the benefits that users would have if they had this many ticks in the chart. 1) They see the current timestamp in the tooltip while dragging, 2) if you want them to easily observe the timestamps of the other datapoints as a reference, I'd rather put labels on them using chartjs-plugin-datalabels.
Anyways, I'm closing this as answered, as the discussion is more drifting towards questions of implementation rather than an issue with the actual library!
Thank you! Really solved my problem.