Skip to content

how to enable auto-formatting for time axis on zoom events with custom date-time format? #1513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
juni-green opened this issue Mar 24, 2017 · 5 comments

Comments

@juni-green
Copy link

juni-green commented Mar 24, 2017

Hi,
Is there any way to keep the auto-formatting enabled for time axis in plotly.js graph even after applying customized formatting using "tickformat"?
Actually, I have customized the time format using:
tickformat: "%H:%M"
such that only Hour:Minutes appear on the time axis. But by doing so, I lost the default formatting functionality that works on zoom-in/zoom-out events. Now if I zoom-in, the tick format doesn't expand to seconds or milliseconds. Is it possible to make it work like default auto-formatting functionality on zooming-in/zooming-out with the above mentioned customization?

Any help will be appreciated.
Thanks!

@etpinard
Copy link
Contributor

Can you share a reproducible example using codePen / jsFiddle / jsBin?

Thank you.

@juni-green
Copy link
Author

juni-green commented Mar 29, 2017

@etpinard
Here I've created a working example for showing date-time auto-formatting functionality in plotly.js:
https://codepen.io/juni-green/pen/zZmJbE
We can see that on zoom-in/zoom-out the x-axis tick format changes automatically e.g. on zoom-in, the tick format expands to seconds and milliseconds level.
But if I customize the format using tickformat to hide the date (which is being displayed on first x-axis tick), then I lose the default auto-formatting on zoom-in/zoom-out. It can be checked by un-commenting the tickformat: "%H:%M:%S" in layout variable.

var trace1 = { x: ["2017-02-04 22:23:00.30", "2017-02-04 22:24:30.50", "2017-02-04 22:30:00.40", "2017-02-04 22:50:00.20", "2017-02-04 22:55:30.10", "2017-02-04 23:05:00.05"], y: [0, 2, 4, 5, 6, 7], mode: "lines", type: "scatter" };
var data = [trace1];
var layout = { xaxis: { rangeslider: {}, // tickformat: "%H:%M:%S" } };
Plotly.newPlot("myDiv", data, layout);

Actually, I want to hide the date on the first tick while keeping the default formatting functionality on zoom-in/zoom-out, which enables expansion/collapse to seconds/minutes levels.
I hope this clarifies my question.

@alexcjohnson
Copy link
Collaborator

If I understand your goal correctly, sounds like you don't want to ever see the date, but otherwise you like the automatic time formatting we do?

This seems like a somewhat generalizable situation: you have some data where only the time is important - maybe a result of merging together many days worth of data, to see some effect that depends only on time of day.

You could also imagine a similar situation where year is arbitrary. Or any other repeated interval such as weeks, months, hours... but those might be harder to handle in a consistent, meaningful way than time within a day - even year is tricky when you consider leap years.

Seems like a reasonable feature to consider, either in a weak form (just dropping the arbitrary portions of the time from display, that would be fairly easy) or a stronger form (actually wrapping data to that period, would be a bigger project).

@etpinard
Copy link
Contributor

etpinard commented Oct 26, 2017

I think #1965 essentially solves this ticket.

@juni-green can you confirm?

@etpinard
Copy link
Contributor

Closing due to lack of activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants