How to catch the event of StockChart navigator range change

[Jianxun]

I love the navigator of storkchart.  Now I want to catch the event when user change the navigator's selected range.  Can anyone tell me what is the api?

$("#stock-chart").kendoStockChart({
navigator: {
series: {
type: "line",
field: "volume"
},
select: {
from: "2012/01/01",
to: "2012/03/01"
}
},
...
})

take this for example, I want do do something when user change the select range.

[T. Tsonev]

Hello,

This should really be a simple task, but it's complicated by the lack of a dedicated event.
The notification for a range change has to be gathered from three event handlers:
    - zoomEnd, dragEnd - triggered when manipulating the upper portion of the chart
    - selectEnd - triggered when manipulating the navigator selection directly

Given that these events have different event arguments it's best to read the selected range from the axis directly:
      function navigate(e) {
        var axis = e.sender.options.categoryAxis[0];
        var from = axis.min;
        var to = axis.max;
        
        console.log(from + " - " + to);
      }

-- Live demo --

We'll consider improving the current situation. Adding a dedicated event sounds like a good idea, but we'll also consider other options.

Regards,
T. Tsonev
Telerik

 

 

[Jianxun]

Thanks Tsonev.
I didn't notice that  I have successfully post the thread, because I posted it and retried many times, the system always responsed "post failed".

​using e.sender.options.categoryAxis[0] is a little dangerous, I think.    Anyway, i  use it since these three events have different event arguments.  

Or another question,  how could we hide and disable "zoomEnd" "dragEnd" events?

[T. Tsonev]

Hello,

Our support system experienced some issues at that time. Sorry for the trouble.

The categoryAxis[0] access might seem unsafe, but its actually part of the public API.
The property is an array as the chart may have many category axes.

The zooming and panning can be disabled by calling e.preventDefault() in the respective zoomStart and dragStart events.

Regards,
T. Tsonev
Telerik

 

 

[Jianxun]

 Thanks Tsonev.
I do some x-axis label update in the zoom event ,
​function onZooming(e) { 
    var axisArray = e.sender.options.categoryAxis;
    for (var idx = 0; idx < axisArray.length; idx++) {
        if (axisArray[idx].name === "xAxis") {           
           var start = axisArray[idx].min;
            var end = axisArray[idx].max;
            var smartLabel = getSkipLevel();           
            axisArray[idx].labels.step = smartLabel.step;
            axisArray[idx].labels.skip = smartLabel.skip;
            break;
        }
    } 
    //e.sender.refresh();
}

however, i found that the the chart didn't use the new axis configuration after zooming.  Actually after zooming, the chart always use the  previous one configuration. That is one time delay.   So at the end of my zoom function, I have to use "e.sender.refresh();" for a workaround.
Any idea that the configuration update can take effect immediately? Because I think my manually refresh is inefficient.

[T. Tsonev]

Hi,

The chart indeed does overwrite the options on update. We hope to eliminate the need for this in future versions.

In order to make settings permanent you need to pass the new settings through the setOptions method.
Since arrays are replaced entirely you need to pass back the entire array:
e.sender.setOptions({
    categoryAxis: axisArray
}) 

I hope this helps.

Regards,
T. Tsonev
Telerik