Highchart UTC date always set to January, 1 1970

Question

From an external service I am receiving a date already converted to UTC. The Highcharts tooltip is displaying Jan 01, 1970 I am not sure why it is not interpreting the date correctly. If I manually convert the UTC times to strings then user the Date.UTC JavaScript method, it works fine. I not sure why the UTC formatted date does not work.

    var weightChart;
    var weightData = [];
    var minWeight;
    var maxWeight;
    $(function () {

        var json = {"ibw":175,"max_weight":300,
"min_weight":175,
"weights":[{"date":1232521200,"weight":300},
{"date":1245218400,"weight":300},
{"date":1313042400,"weight":290},
{"date":1319522400,"weight":270},
{"date":1330498800,"weight":200},
{"date":1342591200,"weight":250},
{"date":1365141600,"weight":235}]};


                    minWeight = json.min_weight;
                    maxWeight = json.max_weight;
                    $.each(json.weights, function(i, item) {
                        weightData.push([item.date, item.weight]);
                    });

                    displayGraph();


    });

    function displayGraph() {
                //graph
                weightChart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'spline',
                        zoomType: 'xy',
                        height: 113
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {
                        xDateFormat: '%b %d, %Y',
                        headerFormat: 'Date: <b>{point.key}</b><br />',
                        pointFormat: 'Weight: <b>{point.y}</b>'
                    },
                    xAxis: {
                        type: 'datetime',                   
                        labels: {
                            enabled: false
                        }
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        plotLines: [{
                            color: '#FF0000',
                            width: 2,
                            value: 125
                        }],
                        min: minWeight,
                        max: maxWeight
                    },
                    series: [{
                        name: ['Weight'],
                        data: weightData

                    }],
                    exporting: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            colorByPoint: false,
                            pointWidth: 12,
                            shadow: true
                        }
                    }
                });
            }

Here is the fiddle for it

Answer 1

I would recommend you to convert the date on the server side in string and supply the correct date format and then return the data as string and the highchart will display it in correct format.

For instance on the server side I have DateTime object

DateTime date=DateTime.Now

I convert the date in the correct format and return it as string date.ToString("dd.MM.yyyy")

Answer 2

It looks like your data is coming from your back-end in a UNIX time stamp. Highcharts is expecting a javascript time which is UNIX time in milliseconds. It is showing Jan 01, 1970 be cause that is what "1232521200" is the date for. Multiply your datestamp by 1000 and you will get the appropriate time. Live demo.

var json = {
    "ibw": 175,
    "max_weight": 300,
    "min_weight": 175,
    "weights": [{
        "date": 1232521200000,
        "weight": 300
    }, {
        "date": 1245218400000,
        "weight": 300
    }, {
        "date": 1313042400000,
        "weight": 290
    }, {
        "date": 1319522400000,
        "weight": 270
    }, {
        "date": 1330498800000,
        "weight": 200
    }, {
        "date": 1342591200000,
        "weight": 250
    }, {
        "date": 1365141600000,
        "weight": 235
    }]
};