Kendo StockChart incorrect extrapolation with stepped line chart

[Piran]

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

[Danail Vasilev]

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:

• Kendo UI forum - which is actually available for trial and commercial support license holders.
• Ask the community in this StackOverflow category.

Regards,
Danail Vasilev
Telerik

[Mike]

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.

[Danail Vasilev]

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

[Mike]

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.

[Mike]

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.

[Danail Vasilev]

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

[Mike]

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 :(((.

[Danail Vasilev]

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