Stock chart - change categoryaxis labels while using navigator

[Kevin]

Hi,

How can I change the labels on category axis while moving stock chart navigator without refresh/redrawing the chart please?

When the user narrows the date range selection to 1 day, I want to display the times on category axis, else display days.

I'm not able to achieve this without refreshing the chart. Refreshing the chart is a performance barrier. 

function onSelectEnd(e) {
               var categoryAxis = this.options.categoryAxis[0];
               categoryAxis.labels.step = 4;
               categoryAxis.majorGridLines.step = 2;
               categoryAxis.minorGridLines.step = 2;
               categoryAxis.majorTicks.step = 2;

              //make this effective on chart right away

}
 If I don't refresh the chart, above the changes to categoryaxis are not getting applied right away, rather are getting applied when I use the navigator next time.

Please help. Thanks!

[T. Tsonev]

Hi,

You can limit the refresh to the upper pane by naming it and using the redraw(paneName) overload:
      panes: [{
        name: "default"
      }],
      selectEnd: function(e) {
        var categoryAxis = this.options.categoryAxis[0];
        ...

        this.redraw("default");
      }

-- Live demo --

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Kevin]

Thank you!

I was also able to archive this without calling .redraw(). The code is a bit ugly though.

Code looks like this:

function onSelectEnd(e) {
     if (flgSelectEnd == 0)   //to avoid calling this function from refreshchart - _selectEnd()
                  refreshChart();
}
function refreshChart()
{
   //do chart label changes
   flgSelectEnd = 1;
   $("#linechart").getKendoStockChart()._navigator._selectEnd();
   flgSelectEnd = 0;
}