ashwini patil
ashwini patil

Reputation: 3

Kendo Chart date not converted correctly its in GMT which needs to be UTC

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

Answers (0)

Related Questions