Stock Chart double selection problem

[Burak]

Hello,

I have one selection tool on my main chart, and another on the navigator... I want to use the one in main chart as a detailed zoom in tool, so I want to invoke the same selectEnd event as navigator selector. Currently I am rendering whole chart with each zoom select, so can I invoke the default selectEnd event of navigator's selector? I can't seem to find this native function... Please help me to find a way to implement this logic, with Kendo!

Thanks

[T. Tsonev]

Hello,

If I understand correctly, you'd like to sync the navigator selection with the one in the upper pane.
There's no public and documented API to do that, but it can be done:
    var chart = $("#stock-chart").data("kendoStockChart");
    chart._navigator.selection.set(new Date("2001/01/01"), new Date("2002/01/01"));

We're considering opening these APIs they have a good chance to remain stable.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Burak]

Hello again, about this issue;

With your code, the navigator syncs with the main chart's selector;
but what I desire is to have the same function of navigators zoom in with the main graph's selection...

After moving the selection of the navigator, I wish to invoke its native selectEnd operation, to have a smooth rendering,
If I implement my own function, I get to render the whole chart, thus have performance issues. Is there a way to trigger the 
native selectEnd event of the navigator with the new selection limits?

Thanks!

[T. Tsonev]

Hello,

I see what you mean. You can trick the navigator into filtering the data by triggering a selectEnd event on its selection:

var selection = chart._navigator.selection;
selection.set(new Date("2001/01/01"), new Date("2002/01/01"));
selection.trigger("selectEnd", { /* e */ });

Note that this will also trigger selectEnd on the chart. You can use the event arguments to differentiate between "real" events and this "synthetic" event.

Regards,
T. Tsonev
Telerik

 

 

[Burak]

Hello,

Thanks a lot for the trigger tip! I have managed to accomplish a lot with Kendo! But I have a lot of problems still... 

First, with each selectEnd trigger, artificial or natural; I have to readjust the main chart selection again for new chart and new ticks...
So I use the following code;

$("#main-selector").remove();  //I remove the original selector
chart.options.categoryAxis[0].select.from = chart.options.categoryAxis[0].min;  //give the new range values
chart.options.categoryAxis[0].select.to = chart.options.categoryAxis[0].max;
chart._setupSelection();  //and initialize the selection

But with this code, I have some problems, for example after native dragEnd & selectEnd & zoomEnd events of StockChart, 
the selection does not fit itself exactly on the edges of the new chart, but in the middle. I am troubled by this, and cannot figure out why?
When I check the values from chart object, I see the range values of select is correct, but somehow there is an error.
Are there a set function for the main chart's selection too?

My second problem is about the ranges of the data shown on the graph, we have discussed this on another ticket 
(http://www.telerik.com/forums/kendo-stock-chart-max-value-error) but with StockChart native navigation events, like zoomEnd, selecEnd
or dragEnd, I get this last month error. I found out the error is in the 
"chart._navigator.selection.set(from, to);" function,
when I give "2010-01-01" & "2012-12-31" as inputs to this func, I see "2010-01-01" & "2012-12-01" as the values on the chart._navigator object. So in the source code, it takes the ranges but fails to put the last day of given month on the last data point. Do native navigation events also use this function? If so a fix of this function can solve all my weird last data problem...

Thanks a lot, and please help me with these!

[T. Tsonev]

Hello,

I think the first problem is caused by timing issues. The axis is not yet updated with the new values in the moment you try to set the selection.
If all you want to do is to expand it from end to end then you can do:

chart._selections[0].set(0, 1000);

-- Live demo --

This will ignore the actual dates and will set the selection from the first to the last category. Assuming 1000 categories or less.

As for the second issue, the "to" date must be larger than or equal to the end date of the last category. In this case the category ends at 2012-01-01 00:00.

I'm a getting a bit worried about the stability of the solution so far.
Please, do test for breaking changes to the private APIs on major releases.

Regards,
T. Tsonev
Telerik

 

 

[Burak]

Hello again, 

Thanks a lot, first problem is completely solved! I put Number.MAX_VALUE as the max value to cover for any future problems :)

But for the second, the idea of putting the first day of the next month logic worked, but the problem is native navigation events such as dragEnd, selectEnd, and zoomEnd still uses the method I was using... I will have to override these to solve them, but still wish there was a cleaner native solution.

Thanks a lot again!

[Burak]

Hey again, 

I tried the fix for the second problem again. I get the previous error time to time... Now I always get the month I have put in as the limit. Sometimes it works and gets me the last day of the month I desire, sometimes it gets the next month and its first day as I have given as a temporary range limit. I am confused about this problem, and it looks really silly to have zero values in a very complex chart... I hope there will be a fix for this attitude...

[T. Tsonev]

Hello,

There's obviously a need for us to rethink the Navigator API and make it more usable.
In the meantime, you can use the kendo.dataviz.addDuration helper function to calculate the exact start date of the next period:

kendo.dataviz.addDuration(new Date("2014-01-15"), 1, "days")
> Thu Jan 16 2014 00:00:00 GMT+0200 (FLE Standard Time)
kendo.dataviz.addDuration(new Date("2014-01-15"), 1, "months")
> Sat Feb 01 2014 00:00:00 GMT+0200 (FLE Standard Time)

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Burak]

Hello again,

I couldn't make use of the addDuration functions... It works just the same with the regular functions of set date...
I am not sure how to fix this extra (or missing) data problem, I hope you can come up with a fix asap! Using the navigation events on Stock Chart, I get only the first day of the month and sometimes all the month... I am assuming that it is all about the current baseUnit, but I am using the "auto" option. Is there a way to determine the current baseUnit in terms of "weeks", "days" or "months", even though I am using the "auto" option?

[T. Tsonev]

Hi,

There is no convenient event that will fire when the automatic base unit has been determined. We'll address this, but for the moment you need to use the dataBound event with a setTimeout:

      dataBound: function(e) {
        setTimeout(function(){
          var axes = e.sender._plotArea.axes;
          var naviAxis = $.grep(axes, function(a) {
            return a.options.name === "_navigator";
          })[0];

          alert(naviAxis.options.baseUnit);
        });
      }

-- Live demo --

I know that this is less than ideal, but I hope that it will get you around this roadblock.

Regards,
T. Tsonev
Telerik