Hi,
I have the following issue using the kendo line chart when the baseUnit is set to "fit". Please open this example: http://jsbin.com/geyeqi/edit?output
Selecting the second point under June 2013, I'm expecting the following value: 4650. However, the tooltip is showing the wrong value (4850).
Could you help me to resolve this ASAP?
Many thanks.
window.minimumDate =
new
Date(Date.parse(
'03/01/2013'
));
window.maximumDate =
new
Date(Date.parse(
'03/01/2015'
));
$(document).ready(
function
() {
var
createLineChart =
function
(minDate, maxDate) {
$(
"#plan-line-chart"
).kendoChart({
dataSource: {
data: getPrices(minDate, maxDate)
},
dataBound:
function
() {
if
(
this
.dataSource.view().length <= 12) {
this
.options.categoryAxis.baseUnit =
"months"
;
}
},
legend: {
position:
"top"
},
seriesDefaults: {
type:
"line"
,
style:
"smooth"
},
seriesColors: [
"rgba(178, 44, 27, 1)"
],
series:
[
{
field:
"CurrentPrice"
,
name:
"Contributions"
,
categoryField:
"Date"
}
],
valueAxis: {
majorGridLines: {
visible:
true
},
line: {
visible:
false
},
labels: {
template:
"#= formatAmount(value) #"
},
},
categoryAxis: {
field:
"Date"
,
type:
"Date"
,
baseUnit:
"fit"
,
labels: {
rotation: 45
},
majorGridLines: {
visible:
false
}
},
tooltip: {
visible:
true
,
format:
"{0}%"
,
template:
"#= formatAmount(value) #"
}
});
};
var
rangeSliderOnChange =
function
(element) {
var
minDate =
new
Date(element.value[0]);
var
maxDate =
new
Date(element.value[1]);
var
linechart = $(
"#plan-line-chart"
).data(
"kendoChart"
);
if
(linechart != undefined) {
linechart.destroy();
createLineChart(minDate, maxDate);
}
};
var
templateString =
"#= formatToMonthYear(selectionStart) # - #= formatToMonthYear(selectionEnd) #"
;
$(
"#plan-range-slider"
).kendoRangeSlider({
change: rangeSliderOnChange,
min: window.minimumDate.getTime(),
max: window.maximumDate.getTime(),
smallStep: 86400000,
largeStep: 86400000,
tickPlacement:
"none"
,
tooltip: {
template: kendo.template(templateString)
}
});
createLineChart(window.minimumDate, window.maximumDate);
});
function
formatAmount(amount) {
return
kendo.toString(amount,
"#,##0.00"
);
}
function
formatToMonthYear(val) {
return
kendo.toString(
new
Date(val),
'MMM yyyy'
);
}
function
getPrices(min, max) {
var
prices = [
{
"Date"
:
new
Date(Date.parse(
'03/01/2015'
)),
"CurrentPrice"
: 8250.00
},
{
"Date"
:
new
Date(Date.parse(
'02/01/2015'
)),
"CurrentPrice"
: 8000.00
},
{
"Date"
:
new
Date(Date.parse(
'01/01/2015'
)),
"CurrentPrice"
: 7750.00
},
{
"Date"
:
new
Date(Date.parse(
'12/01/2014'
)),
"CurrentPrice"
: 7500.00
},
{
"Date"
:
new
Date(Date.parse(
'11/01/2014'
)),
"CurrentPrice"
: 7250.00
},
{
"Date"
:
new
Date(Date.parse(
'10/01/2014'
)),
"CurrentPrice"
: 7000.00
},
{
"Date"
:
new
Date(Date.parse(
'09/01/2014'
)),
"CurrentPrice"
: 6750.00
},
{
"Date"
:
new
Date(Date.parse(
'08/01/2014'
)),
"CurrentPrice"
: 6550.00
},
{
"Date"
:
new
Date(Date.parse(
'07/01/2014'
)),
"CurrentPrice"
: 6350.00
},
{
"Date"
:
new
Date(Date.parse(
'06/01/2014'
)),
"CurrentPrice"
: 6150.00
},
{
"Date"
:
new
Date(Date.parse(
'05/01/2014'
)),
"CurrentPrice"
: 5950.00
},
{
"Date"
:
new
Date(Date.parse(
'04/01/2014'
)),
"CurrentPrice"
: 5750.00
},
{
"Date"
:
new
Date(Date.parse(
'03/01/2014'
)),
"CurrentPrice"
: 5550.00
},
{
"Date"
:
new
Date(Date.parse(
'02/01/2014'
)),
"CurrentPrice"
: 5450.00
},
{
"Date"
:
new
Date(Date.parse(
'01/01/2014'
)),
"CurrentPrice"
: 5350.00
},
{
"Date"
:
new
Date(Date.parse(
'12/01/2013'
)),
"CurrentPrice"
: 5250.00
},
{
"Date"
:
new
Date(Date.parse(
'11/01/2013'
)),
"CurrentPrice"
: 5150.00
},
{
"Date"
:
new
Date(Date.parse(
'10/01/2013'
)),
"CurrentPrice"
: 4950.00
},
{
"Date"
:
new
Date(Date.parse(
'09/01/2013'
)),
"CurrentPrice"
: 4950.00
},
{
"Date"
:
new
Date(Date.parse(
'08/01/2013'
)),
"CurrentPrice"
: 4850.00
},
{
"Date"
:
new
Date(Date.parse(
'07/01/2013'
)),
"CurrentPrice"
: 4750.00
},
{
"Date"
:
new
Date(Date.parse(
'06/01/2013'
)),
"CurrentPrice"
: 4650.00
},
{
"Date"
:
new
Date(Date.parse(
'05/01/2013'
)),
"CurrentPrice"
: 4550.00
},
{
"Date"
:
new
Date(Date.parse(
'04/01/2013'
)),
"CurrentPrice"
: 4450.00
},
{
"Date"
:
new
Date(Date.parse(
'03/01/2013'
)),
"CurrentPrice"
: 4350.00
}
];
var
currentPrices = [];
$(
"#currentPrices"
).text(
''
);
var
minDate =
new
Date((min.getMonth() + 1) +
'/01/'
+ min.getFullYear());
var
maxDate =
new
Date((max.getMonth() + 1) +
'/01/'
+ max.getFullYear());
for
(
var
i = prices.length - 1; i >= 0; i--) {
if
(prices[i].Date >= minDate && prices[i].Date <= maxDate) {
currentPrices.push(prices[i]);
$(
"#currentPrices"
).append(
"<li>"
+ kendo.toString(prices[i].Date,
'MMM yyyy'
) +
" :: "
+ prices[i].CurrentPrice +
"</li>"
);
}
}
return
currentPrices;
}