1

I need to plot a chart using Highcharts, and I have to sort of round down data not to plot very little variations around small values.

Eg. I have yAxis data that moves between 0 and 10, and the plot is ok. Eg. I have yAxis data that moves between 0.0003 and 0.00031 and the plot will show too much detailed info.

I need to find a way to make the chart plot data so that I can appreciate variations of +- 0.01, and nothing more, without imposing max and min parameters, so that the chart will auto define its bounds. Also, I do not want to round down each data point, since I want to be able to zoom in the chart freely.

Do you know how to achieve this using Highcharts? Thank you!

marzapower
  • 5,531
  • 7
  • 38
  • 76
  • does setting the yAxis tickInterval to 0.01 help any? I've tried it with a data set over [here](http://jsfiddle.net/W9xKR/4/) – mmcnickle Sep 27 '11 at 11:32
  • Almost ... but if you add `20` as last value, the y axis in the chart will appear all messed up. – marzapower Sep 27 '11 at 11:59
  • Yes, if you add `20` as a value it will try to plot `20/0.01 = 2000` tick marks, which will cause the browser to slow down a lot at the plot to look bad. See below for my solution. – mmcnickle Sep 27 '11 at 12:28

2 Answers2

6

The solution is to calculate the tickInterval based on how many ticks you want to see in the y-axis.

Say you want to see only 10 ticks (to keep the chart neat) you could do something like this http://jsfiddle.net/W9xKR/9/

The code example also sets a minimum tick interval of 0.01, so you will never see grid lines below this number, which will give you your desired level of detail.

If you fiddle with the data array in that example you will see that 

var data = [ 0.0001, 0.0003, 0.000305, 0.000306, 0.000307, 0.000309, 0.00031, 0.01, 0.035, 0.07, 0.15, 3];

will give you 10 ticks set 0.3 apart. However, if you remove the larger values from the data set:

var data = [ 0.0001, 0.0003, 0.000305, 0.000306, 0.000307, 0.000309, 0.00031, 0.01, 0.035];

you will get only 6 ticks set 0.01 apart.

Note that you will have to recalculate this on zoom if you want to maintain the same number of ticks at each zoom level.

mmcnickle
  • 1,599
  • 10
  • 13
  • The problem is that for each y axis I have multiple data sets to plot. It would be a little annoying to compute the `tickInterval` parameter by hand. Also, since Highcharts lets you enable and disable data sets dynamically, does this solution work if, once the chart has been plot, I disable a data set? – marzapower Sep 27 '11 at 12:34
  • Just like with the zoom levels, if you were switching series on and off you would have to recalculate after each [`redraw`](http://www.highcharts.com/ref/#chart-events--redraw) event. The only difference with multiple series, is that you want `max` to the biggest value present in all the series and `min` to be the lowest value present in all the series. Something like [http://jsfiddle.net/W9xKR/10/](http://jsfiddle.net/W9xKR/10/) – mmcnickle Sep 27 '11 at 12:50
  • Actually, I've just checked: it's not possible to update `tickInterval` at runtime [http://highslide.com/forum/viewtopic.php?f=9&t=12248](http://highslide.com/forum/viewtopic.php?f=9&t=12248) so you'll have to choose a `tickInterval` that you are comfortable with for all series and zoom levels. – mmcnickle Sep 27 '11 at 13:04
  • 1
    It's fine selecting a `tickInterval` at the beginning, but the behaviour will turn back to the default when selecting/deselecting the data sets. This will be just a quasi-complete solution. Thank you again. – marzapower Sep 27 '11 at 13:34
1

See if this helps you:

alignTicks: false

See here http://jsfiddle.net/highcharts/ebuTs/3735/. Delete the alignTicks from the code to see the difference.

petko_stankoski
  • 10,459
  • 41
  • 127
  • 231