How to catch the event of StockChart navigator range change

6 posts, 0 answers
  1. Jianxun
    Jianxun avatar
    28 posts
    Member since:
    Dec 2013

    Posted 22 May 2014 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 26 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jianxun
    Jianxun avatar
    28 posts
    Member since:
    Dec 2013

    Posted 27 May 2014 in reply to T. Tsonev Link to this post

    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?
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 29 May 2014 Link to this post

    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.

     
  6. Jianxun
    Jianxun avatar
    28 posts
    Member since:
    Dec 2013

    Posted 29 May 2014 in reply to T. Tsonev Link to this post

     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.
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 30 May 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready