When plotting a trend line in a Kendo UI line chart within an MVC application, the specified date is not displayed correctly; instead, it only shows the first date of that month.
function return value (miliseconds in date)
function toDate(value) {
var dateRegExp = /^\/Date\((.*?)\)\/$/;
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}
testSurveyCalculationsDataSource bind data by Api using todate function
var testSurveyCalculationsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function () {
return '@Url.Action("GetCalculations", "Dashboard")';
},
dataType: "json",
cache: false,
sort: { field: "year", dir: "asc" },
type: "POST"
},
parameterMap: dataSourceParameterMap
},
requestStart: function () {
calculationsLoading = true;
requestStart();
},
requestEnd: function () {
calculationsLoading = false;
onRequestEnd();
},
group: {
field: "Name"
},
schema: {
parse: function (response) {
$.each(response, function (i, v) {
v.TimeStamp = toDate(v.TimeStamp);
});
return response;
}
},
error: function(e) {
onError("#tempChart ");
}
});
var tempChart = $("#tempChart ").kendoChart({
title: {
text: "Temp",
visible: false
},
legend: {
position: "top"
},
dataBound: function (e) {
setColors("#tempChart");
onNoData(e, "#tempChart");
},
dataSource: testSurveyCalculationsDataSource ,
sort: { field: "TimeStamp", dir: "desc" },
autoBind: false,
series: [
{
type: "line",
categoryField: "TimeStamp",
field: "Temp",
name: "#= group.value #",
axis: "temp",
tooltip: {
visible: true,
template: "${ kendo.toString(value, 'n0')}" + "</br>" + " ${ kendo.toString(category, 'MM/dd/yyyy')}"
}
}
],
categoryAxis: [{
baseUnit: "months",
baseUnitStep: 1,
type:"date",
labels: {
step: 3,
template: '#= kendo.toString(value, "MMM yy" ) #',
dateFormats: {
months: "MMM yy"
},
visible: true
}
}],
valueAxis: [
{
name: "temp",
autoScale: true,
min: 0,
plotBands: [
{
color: "#ff0",
opacity: 0.2
},
{
color: "#ff0000",
opacity: 0.2
}
]
}
],
tooltip: { visible: true }
}).data('tempChart ');
Needs to show date passed in value /Date(1712730600000)/ it needs to be return April 10, 2024. But it returns April 1, 2024.
Do you mean in the labels or the tooltip template? Anyways, when the baseUnit is set to months the date displayed will always be the first date of the month. Same with years or weeks used as baseUnit - first date of the year or for the week. You can check here how the dates in the label and tooltip will change depending on the selected base unit.