This is a migrated thread and some comments may be shown as answers.

How to catch the event of StockChart navigator range change

5 Answers 125 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Jianxun
Top achievements
Rank 1
Jianxun asked on 22 May 2014, 12:54 PM
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.

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 26 May 2014, 07:11 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jianxun
Top achievements
Rank 1
answered on 28 May 2014, 02:27 AM
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?
0
T. Tsonev
Telerik team
answered on 29 May 2014, 07:16 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jianxun
Top achievements
Rank 1
answered on 30 May 2014, 02:27 AM
 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.
0
T. Tsonev
Telerik team
answered on 30 May 2014, 08:42 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Jianxun
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Jianxun
Top achievements
Rank 1
Share this question
or