Be able to draw ticks in a non-linear way

[dereklin]

Hi,

Thanks for this great library. Everything is working so well so far except for ticks.

Here is my plunker: https://plnkr.co/edit/mdlI5HiUWxJ3rbNlBb4g?p=preview

There are two problem:

1. My left handle says 2007 at the bottom, but my date is 2016-12-31
2. The last tick doesn't have legend.

Now, in app.js, if I uncomment line 13, the ticks work as expected.

But that's not my true date range. My true date range is with line 13 commented out.

How can I have accurate ticks with my existing data points?

Can I supply my own ticks? Like:

[
...
{legend: '2011', showTick: true}, 
{legend: '', showTick: false},
{legend: '2013', showTick: true},
...
]

Or, as a compromise, can I uncomment line 13, showing a few "fake" quarters, but have the slider not go into the "fake" quarters -- setting up a boundary?

[ValentinH]

Indeed, the range of your slider should be divisible by the number of ticks.

Currently, there is no way to supply your own ticks but this could actually be a good solution, and quite easy to be done. But this would be for expert users since all the ticks logic should be handle manually (this part). Plus, we could add a getTickVisibility() option to hide a specific tick.

For now, you can use the minLimit and/or maxLimit option to have virtual boundaries.

[dereklin]

@ValentinH
The minLimit is not a good solution the more I think of it. Let's say I want to show a label every 16 ticks, I need to pad up to 15 "fake" data points; if 32 ticks, 31 "fake" data points and so forth.

Moreover, it doesn't really work with range sliding. Here is my plunker: https://plnkr.co/edit/oCYPzK32rrpf8RP1Q4PM?p=preview

If you drag and left handle, the boundary is set correctly.

But if you move the range to the left, it goes all the way to the left, passing the boundary (limit)

[ValentinH]

Actually, the minLimit/maxLimit is bugged for draggableRange! :D I'll fix that asap.

[dereklin]

@ValentinH
I am trying to supply my own ticks. Here is my plunker: https://plnkr.co/edit/8U5gCdNtBvW9w9XY2zR8?p=preview

In rz-slider-decorator.js, I have overridden the updateTicksScale function and use my own ticks when it's there.

In app.js, line 31 to 36, I am just setting up very simple ticks based on my data points.

But the ticks and the actually values are not aligning up towards the end when it gets closer to 2016.

Do you see anything obvious here regarding to the tick alignment?

[dereklin]

@ValentinH
OK. This time I am using opacity instead of display in css. And I am looping from the end to beginning when setting up the ticks. It seems to work as expected. Could you see if this is the right approach? Thanks.

https://plnkr.co/edit/Zqf8hJti5vfPIMS726vP?p=preview

[dereklin]

@ValentinH
Alright. I think this looks nicer: https://plnkr.co/edit/Y6rUhTDdNkGrY13fupn5?p=preview
I am supplier my own ticks with simple settings, then I set the showTicks and showTickValues to 1, then in the decorator, I merge the ticks.

Do you see any issues?

[ValentinH]

You should use visibility: hidden|visible instead of opacity I think. Thus, the hidden ticks are not clickable. Then, I think the custom ticks option should be implemented directly in the library! :)

[dereklin]

@ValentinH
Using visibility is much better: https://plnkr.co/edit/eE6yMIZ1xdCFrESfjyyn?p=preview

However, in my situation, I can no longer click on quarters that are hidden. So I can't go to a particular quarter conveniently.

And for the ticks that ARE visible in between the range, the tooltips are still showing up to block the view. And when I slide the range around, the tooltips in the middle are popping up.

It would be nice to have an option to disable them totally within the range. And then I can use opacity and be able to click on every available tick outside of the range

[ValentinH]

Since you are using a custom ticks array, you can rebuild it at runtime and remove the tooltips that are in the middle of the range...

[dereklin]

@ValentinH

This doesn't look good. What I am looking for is to have the ticks showing and have the tooltips disabled. I need to look deeper into this later...

[ValentinH]

I was not saying to remove ticks but only their tooltip. But for this, you should not use the default updateTicksScale at all but build your custom one.