Y-axis scaling when plotting "small" values

#1

Hi,

I was playing around with

http://jsfiddle.net/gh/get/jquery/1.7.2/forio/contour/tree/master/src/documentation/fiddle/config.yAxis.ticks/

When using e.g. [0, 0.01, 0.02, 0.05, 0.08, 0.2] as the argument of .line, the figure is displayed as expected.

However, when using e.g. [0, 0.01, 0.02, 0.05, 0.08, 0.1], nothing is displayed, and I do not understand how the scaling of the y-axis works.

I know that I could simply use e.g. yAxis: { tickValues: [0, 0.05, 0.1, 0.15]}, but is there a way to obtain something similar without (a) defining the tickValues manually, or (b) using the smartAxisoption ?

Thanks a lot!

#2

Hi Thibault,

We are looking into your Epicenter issue where if there’s a way to set y-axis to use 0.1 without defining the tickValues manually or using smartAxisoption.

We will let you know our findings.

Regards,
Geromel

#3

Hi and thanks for your answer,

However, note that the issue is not strictly about “0.1”…

If you use e.g. [0, 0.001, 0.01, 0.02], the line is not displayed either. In fact, the issue seems to be about the scaling for “small” values.

Best,
Thibault

#4

Hi Thibault,

After looking further into the issue, we found that Contour internally uses an algorithm to calculate “nice” (readable) y-axis values based on input-data. Unfortunately your dataset seems to have exposed a case where this algorithm completely fails and you get a blank chart.

We plan to make an update to the library to resolve this, but the fix is very involved and it will take time to roll out.
We want to ensure that improving one use case does not impact another.

Some of the other inputs to the algorithm are the “no. of ticks” and the “y-axis max/min”.

In the short-term, besides the two workarounds you mentioned, you can try finding some combination of these which may solve your issue. For example, here’s a working chart for the same data-set you had trouble with http://jsfiddle.net/5fs8efrr/

Another suggested workaround would be setting yAxis: { ticks: 2 } which may help with your chart.

Thank you for bringing this to our attention and supporting Epicenter!

Regards,
Geromel Grate

#5

Hi,

Unfortunately, your answer confirm what I was suspecting.

Note that this is extremely annoying when plotting percentages (i.e., numbers between 0 and 1 and using the option “labels: {format: ‘%’}”), because I often find myself in the “small” limit where the algorithm fails. In fact, it seems that the algorithm has been designed without thinking about plotting percentages or values smaller than 1…

Can you please let me know when the issue is fixed?

#6

Hi Thibault,

Absolutely. We can alert you when this issue gets resolved.
Again, it may take time to roll out due to how involved it takes to fix.

You can also contact support@forio.com to ask for status.

Regards,
Geromel

#7

Hi,

I wondered if you had any news on this issue ?

Best regards,
Thibault

#8

Hi Thibault,

It’s still under our development review and it will require testing to ensure it doesn’t cause additional impact.

Were you able to look into our suggested workaround of setting yAxis: { ticks: 2 } and the provided example http://jsfiddle.net/5fs8efrr/

Regards,
Geromel

#9

Hi,

Yes, I have.

However, I think that using only 2 ticks (even when there are many points on a curve) for the reason that the algorithm does not work properly for small values is a rather bad solution.

Another solution that I have is multiply every value by 10 (i.e., use [0, 0.1, 0.2, 0.5, 0.8, 1]). Then the axis are displayed properly (e.g. with 4 ticks) butI am not sure how to automatically divide back by 10 the values displayed as label…

Any idea?

Best,
Thibault

#10

Hi Thibault,

From what we could tell the actual issue was around the ‘domain’ of values rather than just the small numbers, so if you do multiply everything by the same amount you’ll likely hit the same issue - but in case you don’t, and it does fix your scaling you can just divide back in the x-axis label formatter http://forio.com/contour/documentation.html#core_config/config.yAxis.labels.formatter