Selection zoom with multiple x axes

[Potatoswatter]

Hello, thanks for the great software!

The documentation for the chart select event says

Information on the selected area can be found through event.xAxis and event.yAxis, which are arrays containing the axes of each dimension and each axis' min and max values. The primary axes are event.xAxis[0]…

I'm seeing a problem when dragging over multiple overlaid x axes. Nothing happens when the user releases the mouse button; mouse movement still drags the shaded selection rectangle. Clicking several times without releasing the mouse finally exits selection mode, but the event doesn't fire and no selection happens. HighStock throws an error

TypeError: Result of expression 'F.lin2val' [undefined] is not a function. (highstock.js:33)

The above quote is just intended to illustrate that the behavior is supported — the event callback in question never happens. However, the way we've been using it is to modify the parameter to strip out axes besides xAxis[0], since we only want to zoom the primary axis anyway. So the function is

Code: Select all

selection: function( event ) { event.xAxis = event.xAxis.slice( 0, 1 ); }

. Then other axes zoom as a reaction to the setExtremes event handler of the primary axis.

It would be really nice if you could support this use case, in addition to fixing the bug. We can work around by manually re-implementing zoom on select for the primary axis. But this is the cleanest way to link several independent x axes together. If the primary axis changes for any reason besides user selection, for example the navigator or range selector, the other axes still adjust properly.

Here is a fiddle: http://jsfiddle.net/EYBXa/

[hfrntt]

Looks like an issue with ordinal axes (I reported it here: https://github.com/highslide-software/h ... issues/786) if you switch to non-ordinal axes everything works again, see: http://jsfiddle.net/EYBXa/1

[Potatoswatter]

Thanks, that worked perfectly. Didn't intend to be using ordinal axes anyway!

[lanbo]

Thanks guys for the great work in highcharts & highstock.

I also found the same error:

Code: Select all

Uncaught TypeError: Object #<Object> has no method 'lin2val' highstock.js:108
Xa.translate highstock.js:108
vb.getMouseCoordinates highstock.js:138
T.HighchartsAdapter.T.HighchartsAdapter.a.each highstock.js:26
vb.getMouseCoordinates highstock.js:137
vb.setDOMEvents.d.onclick

I get this when I change the zoom value in a highstock graph using two data sets: a line + column data type with:

Code: Select all

ordinal: true

Is it there any way to circumvent this issue?
Many thanks for you help.

[Fusher]

Yes, right now only by setting ordinal: false.

[lanbo]

Yes, right now only by setting ordinal: false.

OK. The problem is I really need ordinal true. But thanks for the reply. I'm not sure what to do.
In any case, is it possible to catch the error somehow so that it does not show as an error in the console? Maybe defining the lin2val method as an empty function or something like this? The error appears but, apart from that, everything works correctly. Thanks again for your help.

[hfrntt]

I think that you have to modify the source code to do this. Another option could be creating a fake "lin2val" method for each axis that doesn't have it.

[lanbo]

I think that you have to modify the source code to do this. Another option could be creating a fake "lin2val" method for each axis that doesn't have it.

Thanks Slawek. Could you please give some hints how to create this fake lin2val method? I'm trying to understand how could this be done. Some basic pseudo-code will do it Slawek.

This is a typical structure for creating a chart

Code: Select all

new Highcharts.StockChart
         ({
             chart:
             {
                 renderTo: 'container'
             },
             xAxis: <- **What should I put here?**
             yAxis: <- **What should I put here?**


How can I create these axes with a lin2val fake method?
I already tried the following (which did not work):

Code: Select all

    xAxis:
    {
        ...
        lin2val: function(){}
    },
    yAxis:
    {
        ...
        lin2val: function(){}
    },


I still get the error message:

Code: Select all

Uncaught TypeError: Object #<Object> has no method 'lin2val'


The good thing is it works OK. The bad thing is the console shows an error which would make the Web look bad...

Of course there's the possibility of using window.onerror and return true but I would not like to use it just for this minor thing.

Thanks!

[lanbo]

I found out how to remove these lin2val errors.

It's possible to create a fake method as shown below:

Code: Select all

<script src="highstock/js/highstock.js" type="text/javascript"></script>

<script type="text/javascript">
Highcharts.Axis.prototype.lin2val = function(){}
</script>