It is currently Fri Oct 31, 2014 8:34 pm Advanced search

Selection zoom with multiple x axes

Technical support for the Highcharts Stock package

Selection zoom with multiple x axes

Postby Potatoswatter » Thu Feb 23, 2012 4:45 am

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/
Potatoswatter
 
Posts: 12
Joined: Thu Feb 23, 2012 3:48 am

Re: Selection zoom with multiple x axes

Postby hfrntt » Mon Feb 27, 2012 2:46 pm

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
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Selection zoom with multiple x axes

Postby Potatoswatter » Thu May 17, 2012 8:20 am

Thanks, that worked perfectly. Didn't intend to be using ordinal axes anyway!
Potatoswatter
 
Posts: 12
Joined: Thu Feb 23, 2012 3:48 am

Re: Selection zoom with multiple x axes

Postby lanbo » Tue Sep 04, 2012 11:24 pm

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.
lanbo
 
Posts: 34
Joined: Tue Sep 04, 2012 6:02 pm

Re: Selection zoom with multiple x axes

Postby Fusher » Thu Sep 06, 2012 1:38 pm

Yes, right now only by setting ordinal: false.
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7440
Joined: Mon Jan 30, 2012 12:16 pm

Re: Selection zoom with multiple x axes

Postby lanbo » Thu Sep 13, 2012 10:19 am

Fusher wrote: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.
lanbo
 
Posts: 34
Joined: Tue Sep 04, 2012 6:02 pm

Re: Selection zoom with multiple x axes

Postby hfrntt » Tue Sep 18, 2012 10:34 am

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.
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Selection zoom with multiple x axes

Postby lanbo » Tue Sep 18, 2012 5:56 pm

hfrntt wrote: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
 
Posts: 34
Joined: Tue Sep 04, 2012 6:02 pm

Re: Selection zoom with multiple x axes

Postby lanbo » Wed Sep 19, 2012 8:33 am

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>
lanbo
 
Posts: 34
Joined: Tue Sep 04, 2012 6:02 pm


Return to Highstock Usage

Who is online

Users browsing this forum: Bing [Bot] and 2 guests