StockChart do not display last item from dataSource

[Krzysztof]

StockChart do not display last item from dataSource when changing selection of navigation in javascript code. Currently I'm using 2016.1.412 but this is the same problem with latest version. After setting navi.selection.set function chart navigation is expanding but not displaying last element from the array.

My code is working fine with kendo 2014.2.1008 but not with 2016.1.412

var lastItem = {"Date":"2018-03-20T00:00:00.000Z","Open":99.95,"High":109.9,"Low":92.7,"Close":92.7,"value":92.7,"volume":828222,"oi":0};
      var chartModel = [        
{"Date":"2018-03-18T00:00:00.000Z","Open":90.15,"High":94,"Low":90.15,"Close":90.95,"value":90.95,"volume":200082,"oi":0},
{"Date":"2018-03-19T00:00:00.000Z","Open":90.2,"High":100,"Low":90.2,"Close":100,"value":100,"volume":281,"oi":0},
{"Date":"2018-03-20T00:00:00.000Z","Open":99.95,"High":109.9,"Low":92.7,"Close":92.7,"value":92.7,"volume":828222,"oi":0}
      ];
      
      $("#stock-chart").kendoStockChart({
        dataSource: {
          data: chartModel
        },
        title: {
          text: "The Boeing Company \n (NYSE:BA)"
        },
        dateField: "Date",
        series: [{
          type: "candlestick",
          openField: "Open",
          highField: "High",
          lowField: "Low",
          closeField: "Close"
        }],
        navigator: {
          series: {
            type: "area",
            field: "Close"
          }
        }
      });

      $("#set").click(function setSelection() {
        var chart = $("#stock-chart").getKendoStockChart();
        var navi = chart._navigator;
        
        chart.dataSource.data(chartModel);
        
        if (navi) {
          navi.selection.set(
            new Date(chartModel[0].Date),
            new Date(chartModel[chartModel.length - 1].Date)
          );

          if (navi._selectEnd) {
            navi._selectEnd();
          }
          
          chart.dataSource.data(chartModel);
        }
      });
      
      setInterval(function(){ 
        lastItem.Date = new Date(lastItem.Date).setDate(new Date(lastItem.Date).getDate() + 1);
        chartModel.push(Object.assign({},lastItem));
      }, 3000);

 

[Stefan]

Hello, Krzysztof,

Thank you for the code.

Based on that I can assume that the issue occurs because the new max range which is set is at the same time as the item and it is not showing it.

I can suggest adding one more hour to ensure that all of the items will be visible.

I made an example demonstrating this:

https://dojo.telerik.com/UtufoTeW

Also, please have in mind that using private properties and methods is not recommended as can lead to unexpected issues and using them should be avoided when possible.

Regards,
Stefan
Progress Telerik

[Krzysztof]

Hello Stefan,

thank you for your reply. Your solution works fine withe the latest version "2018.1.221" but unfortunately not with 2016.1.412 which I am using right now. Upgrading is not possible now.

Is there any way to acheive the goal with 2016.1.412 version? How can I change the code to not using private properties and methods. Could you describe that solution?

[Stefan]

Hello, Krzysztof,

I updated the example to use the mentioned version 2016.1.412 and it is will work as expected on my end:

As for not using the private method, if you provide more details on why this approach is used, we may be able to provide an alternative?

I made some modification to the provided example to use only public variables and it is still working. Please advise if I missed an important detail:

https://dojo.telerik.com/UtufoTeW/5

Regards,
Stefan
Progress Telerik

[Krzysztof]

Hello Stefan,

could you plase add to your example function that will force chart to change navigation, something like "navi._selectEnd ();" from my example. Somewhere at the end of "$("#set").click(function setSelection()"

I would like to build a dynamic stock chart that will automatically change the navigator selection and display all elements including latest added.

[Stefan]

Hello, Krzysztof,

The following code is setting the mix and max values of the navigator range using the public properties:

navigator.select.from = new Date(chartModel[0].Date)
navigator.select.to = new Date(newMax)

Please advise if this approach is not applicable to the real application and why.

Regards,
Stefan
Progress Telerik

[Krzysztof]

I wrote in a first message that I would like to display all items from dataSource on a stock chart. Your example sets min and max of navigator and expands the date range of navigator but not refresh stock chart. To refresh stock chart after changing selection I use "navi._selectEnd ();". Your example does not contains that code.

[Stefan]

Hello, Krzysztof,

The Chart will be automatically refreshed(re-rendered) when the new data is set using the data function of the dataSource:

chart.dataSource.data(chartModel);

To check thank add the render event of the Chart to observe that it is indeed refreshed after this:

https://dojo.telerik.com/UtufoTeW/10 

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/render

Let me know if I missed something.

Regards,
Stefan
Progress Telerik

[Krzysztof]

Hello Stefan,

I have attached you screen from Google Chrome  65.0.3325.181 which display your example. After clicking "Set" function StockChart displays only 3 items when navigator displays 8. Setting dataSource and navigator from/to properties do not refresh main StockChart for me which is my intention. I have tested it on latest firefox as well. How does it works for you?

[Stefan]

Hello, Krzysztof,

Apologies for the misleading information indeed the range selection is not affected only the navigator range.

We do have a public select method but it is introduced from version 2016.2.517 which is a little bit after the used one "2016.1.412 ":

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/navigator/methods/select

If updating is not an option then the old approach using the private method has to be used.

If updating is possible, this is how it can be achieved with the built-in the method:

https://dojo.telerik.com/UtufoTeW/12

Regards,
Stefan
Progress Telerik