Reputation: 3
To properly format your heatExchangerSurveyCalculationsDataSource and ensure that dates are correctly handled as UTC, here's the full implementation:
Define the toDate function to parse and return dates as UTC.
Use Kendo's timezone.convertUTC to ensure dates are treated as UTC in the schema's parse function.
toDate Function: The toDate function parses the date from the provided string and returns a JavaScript Date object.
Schema Parse Function: Each timestamp in the response is converted to UTC using kendo.timezone.convertUTC.
Chart Configuration:
The categoryAxis labels and tooltips use new Date(value) to ensure the date is correctly interpreted as a UTC date.
The tooltip template correctly formats the date as MM/dd/yyyy.
This ensures that dates are correctly handled as UTC throughout your data processing and chart rendering, preventing any time zone-related issues.
/*********************************code *********************************/
function toDate(value) {
var dateRegExp = /^\/Date\((.*?)\)\/$/;
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1], 10)); // Directly parse the timestamp
}
/************* Datasource ******************************************/
var heatExchangerSurveyCalculationsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function () {
return '@Url.Action("GetHeatExchangerSurveyCalculations", "Dashboard")';
},
dataType: "json",
cache: false,
sort: { field: "year", dir: "asc" },
type: "POST"
},
parameterMap: dataSourceParameterMap
},
requestStart: function () {
heatExchangerSurveyCalculationsLoading = true;
requestStart();
},
requestEnd: function () {
heatExchangerSurveyCalculationsLoading = false;
onRequestEnd();
},
group: {
field: "Name"
},
schema: {
parse: function (response) {
$.each(response, function (i, v) {
v.TimeStamp = kendo.timezone.convertUTC(toDate(v.TimeStamp));
});
return response;
}
},
error: function(e) {
onError("#skinTempChart");
onError("#WaterVelocityChart");
onError("#HeatFluxChart");
onError("#WaterFlowDataChart");
onError("#UCoefficientChart");
}
});
/**************************Chart Binding*************************/
function onContentLoad(e) {
var skinTempChart = $("#skinTempChart").kendoChart({
title: {
text: "Skin Temp",
visible: false
},
legend: {
position: "top"
},
dataBound: function (e) {
setColors("#skinTempChart");
onNoData(e, "#skinTempChart");
},
dataSource: heatExchangerSurveyCalculationsDataSource,
sortable: true,
autoBind: false,
series: [
{
type: "line",
categoryField: "TimeStamp",
field: "SkinTemp",
name: "#= group.value #",
axis: "temp",
tooltip: {
visible: true,
template: "${ kendo.toString(value, 'n0')}" + "</br>" + " ${ kendo.toString(new Date(category), 'MM/dd/yyyy')}"
},
}
],
enter image description here
enter image description here
toDate Function: The toDate function parses the date from the provided string and returns a JavaScript Date object.
Schema Parse Function: Each timestamp in the response is converted to UTC using kendo.timezone.convertUTC.
Chart Configuration:
The categoryAxis labels and tooltips use new Date(value) to ensure the date is correctly interpreted as a UTC date.
The tooltip template correctly formats the date as MM/dd/yyyy.
This ensures that dates are correctly handled as UTC throughout your data processing and chart rendering, preventing any time zone-related issues.
Error while date conversion its show GMT not UTC
Upvotes: 0
Views: 29