Kendo StockChart incorrect extrapolation with stepped line chart

9 posts, 0 answers
  1. Piran
    Piran avatar
    1 posts
    Member since:
    Nov 2012

    Posted 19 Jan 2014 Link to this post

    We are trying to emulate a stepped area chart with Kendo UI to denote the direction/position in which an actuator travels over a period of time (+1 denoting clockwise, -1 denoting a counter-clockwise direction) during the course of a day. The period of time over which the actuator completes its transition is not constant.

    The code is included below (alternatively please feel free to use the following jsfiddle athttp://jsfiddle.net/pirahawk/XT6CZ/15/ to avoid any setup). We have used the Kendo Stockchart because it provides a complementary navigator component which allows the user to restrict the graph to a desired time period. However we are finding oddities in the chart api especially when the data set has large time lapses. As shown in the example below, we started off with receiving inputs that have 1 second intervals between them. Plotting these on the chart achieves the shape that we expect to see. However adding additional datapoints that are now apart by a few hours (please uncomment the data points shown), we are finding that the chart api seems to somehow incorrectly extrapolate the earlier data points.

    When using the navigator to restrict the chart to the earlier period (between 2am - 2:30am), we do once again achieve the original shape. However we would like to have the same shape shown without having to do this (i.e. stop the api from extrapolating data points with large intervals between data points). Any help, advise on this issue would be greatly appreciated

    var dataForSource = [{
     
         date: new Date("December 16, 2013 02:06:00 AM"),
         Count: 0
     }, {
         date: new Date("December 16, 2013 02:07:00 AM"),
         Count: 1
     },
     
     {
         date: new Date("December 16, 2013 02:09:00 AM"),
         Count: 0
     }, {
         date: new Date("December 16, 2013 02:09:15 AM"),
         Count: -1
     },
     
     {
         date: new Date("December 16, 2013 02:09:45 AM"),
         Count: 0
     },
     
     
     {
         date: new Date("December 16, 2013 02:10:00 AM"),
         Count: -1
     }, {
         date: new Date("December 16, 2013 02:15:00 AM"),
         Count: 0
     }
     
     
     //Uncomment these out to see issue
     /*                   
     , {
        date: new Date("December 16, 2013 04:10:01 PM"),
      Count: -1
     }
     
     , {
         date: new Date("December 16, 2013 11:55:00 PM"),
         Count: 0
     } */
     ];
     
     
     var staticDataSource = new kendo.data.DataSource({
         type: "line",
         data: dataForSource
     });
     
     function createChart() {
         $("#chart").kendoStockChart({
             dataSource: staticDataSource,
     
             dateField: "date",
     
             series: [{
                 type: "line",
                 style: 'step',
                 //missingValues: "interpolate",
                 field: "Count",
                 categoryField: "date"
             }],
     
             xAxis: {
                 baseUnit: "seconds"
             },
     
     
             navigator: {
                 series: {
                     type: "line",
                     style: 'step',
                     field: "Count"
                 },
     
                 xAxis: {
                     baseUnit: "hours"
                 },
             }
     
         });
     };
     
     $(document).ready(createChart);
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 21 Jan 2014 Link to this post

    Hello Piran,

    The behavior you are observing is expected because the values per minutes for the particular hour (i.e., 2:00AM) are automatically aggregated, so that the maximum value for this hour is returned. This aggregation is needed, in order to handle the high distribution density at 2:00 AM and the long time interval between 2:00AM - 11:55AM.

    You can disable the aggregate function by setting the type of the categoryAxis to "category". Such an example is illustrated here. This in turn, however, would prevent the navigator pane from working. In order to handle that you can attach to the selectEnd event, get the selected time interval and filter the data source based on it. Such an example with filtering the data source on dragging is available in this online demo.

    If you have further questions on this regard I can suggest that you put your questions in the corresponding place:
    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike
    Mike avatar
    10 posts
    Member since:
    Aug 2015

    Posted 24 Aug 2015 in reply to Danail Vasilev Link to this post

    Do RadHtmlChart has properties to turn off extrapolation especially for Stock-charts needed (as on attached pic).

    Cause the User often need to see the fallen edges rather then common chartview - thus making descision to zoom on user's interested in periods.

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 25 Aug 2015 Link to this post

    Hi Mike,

    Could you please elaborate more about the extrapolation of the chart? What is the actual and the expected behavior of the control?

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Mike
    Mike avatar
    10 posts
    Member since:
    Aug 2015

    Posted 25 Aug 2015 in reply to Danail Vasilev Link to this post

    We've showed data in HtmlChart to our user - to check do components suitable to him. But user couldn't find data on chart until x-zooming. But how to deside at what part of the chart to pay attention cause data extrapolated? We thought that Navigation panel can show data as is and thus the user can make descision where to zoom. If a user will work with such stock layot - he'll make incorrect decision.
  7. Mike
    Mike avatar
    10 posts
    Member since:
    Aug 2015

    Posted 27 Aug 2015 Link to this post

    Here's another examp. from our working App since 2009 with zooming but witch we wonna upgrade with newer components from RadLib. But we need to do smth. with RadHtmlChart extrapolation witch makes user to interpret data incorrect.
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 28 Aug 2015 Link to this post

    Hi Mike,

    This behavior is expected - in order for the chart to display data for the particular base unit it aggregates the data. You may find useful a feature request regarding changing the aggregate function - http://feedback.telerik.com/Project/108/Feedback/Details/130140

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Mike
    Mike avatar
    10 posts
    Member since:
    Aug 2015

    Posted 28 Aug 2015 in reply to Danail Vasilev Link to this post

    Do i understand you right that you recommend to turn off the aggregation func by JS-programming?

    Plz see on pic. what's the difference between same data, same timeperiod but different components - and here is the problem :(((.

  10. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 02 Sep 2015 Link to this post

    Hello Mike,

    Here is how the stock chart works:
        - The navigator displays the trend line of all the data.
        - The main chart displays the data for the selected range from the navigator.
        - The main chart always aggregates the data to a particular base unit (e.g., years, month, weeks, days, etc.). This is so because the stock chart utilizes only series that display discrete data (e.g., area, line, column and candlestick). If the data is not aggregate by the chart there will be too many categories on the x-axis and the data will look cluttered.
         - The image you are referring to is related to numeric series (e.g., scatter, scatterline and bubble) but the stock chart doesn't support them.

    I hope the above sheds more light on the matter. Let me know if you need any assistance on this regard.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017