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