StockChart do not display last item from dataSource

10 posts, 0 answers
  1. Krzysztof
    Krzysztof avatar
    5 posts
    Member since:
    Feb 2018

    Posted 28 Mar Link to this post

    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);

     

  2. Stefan
    Admin
    Stefan avatar
    2024 posts

    Posted 29 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Krzysztof
    Krzysztof avatar
    5 posts
    Member since:
    Feb 2018

    Posted 29 Mar Link to this post

    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?
  4. Stefan
    Admin
    Stefan avatar
    2024 posts

    Posted 30 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Krzysztof
    Krzysztof avatar
    5 posts
    Member since:
    Feb 2018

    Posted 30 Mar Link to this post

    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.

  6. Stefan
    Admin
    Stefan avatar
    2024 posts

    Posted 02 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Krzysztof
    Krzysztof avatar
    5 posts
    Member since:
    Feb 2018

    Posted 03 Apr Link to this post

    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.
  8. Stefan
    Admin
    Stefan avatar
    2024 posts

    Posted 04 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Krzysztof
    Krzysztof avatar
    5 posts
    Member since:
    Feb 2018

    Posted 04 Apr Link to this post

    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?

  10. Stefan
    Admin
    Stefan avatar
    2024 posts

    Posted 05 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top