not able ot show date in x axis in highcharts

Question

i want to show date in x asis but not able to show. showing values like this 00.00.00.100 in the graph.unable to convert 1577844000000 to proper date,month,year in javascript to show in the x axis using dateTimeLabelFormats in highcharts.how to use ticks and how to show it in graphs. ticks values are printing in the console like this. sample tick data

    1577844000000
    1577843100000
    1577842200000
    1577841300000
    15778404000

sample data from the response

DeviceTimeStamp: "2020-01-10T00:30:00"

code

  getalldata();

                    function getalldata() {
                        var xhttp_roomlogs = new XMLHttpRequest();
                        xhttp_roomlogs.onreadystatechange = function () {
                            if (this.readyState == 4 && this.status == 200) {
                                var response = JSON.parse(xhttp_roomlogs.responseText);

                                 var Ch1Temp = [];
                                 var Ch2Temp = [];

                        $(response).each(function (i, item) {
                            var date = UtcToIst(item.DeviceTimeStamp);
                            var ticks = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
                            Ch1Temp.push([ticks, item.Ch1Temp])
                            Ch2Temp.push([ticks, item.Ch2Temp])//
                        });

                        $('#container').empty();
                                var labels = response.map(function (e) {
                                    var roomtempdata = e.Ch1Temp;
                                    return parseFloat(roomtempdata);
                                })
                                var ch2temp = response.map(function (e) {
                                    var roomtempdata = e.Ch2Temp;
                                    return parseFloat(roomtempdata);
                                })

                                Highcharts.chart('container', {
                                    credits: {
                                        enabled: false
                                    },
                                    title: {
                                        text: 'Chamber 1 & 2 Temp'
                                    },

                                    subtitle: {
                                        text: 'in Degree Celcius'
                                    },
                                    xAxis: {
                                        type: 'datetime',
                                        dateTimeLabelFormats: { // don't display the dummy year
                                        month: '%e. %b',
                                        year: '%b'
                                },
                                title: {
                                    text: 'Date'
                                }
                                    },
                                    yAxis: {
                                        title: {
                                            text: 'Temperature'
                                        }
                                    },
                                    legend: {
                                        layout: 'vertical',
                                        align: 'right',
                                        verticalAlign: 'middle'
                                    },

                                    //y co-ordinates
                                    series: [{
                                        name: 'Chamber 1 Temp',
                                        data: labels
                                    },
                                    {
                                        name: 'Chamber 2 Temp',
                                        data: ch2temp
                                    }


                                    ],
                                    responsive: {
                                        rules: [{
                                            condition: {
                                                maxWidth: 500
                                            },
                                            chartOptions: {
                                                legend: {
                                                    layout: 'horizontal',
                                                    align: 'center',
                                                    verticalAlign: 'bottom'
                                                }
                                            }
                                        }]
                                    }

                                });

                                //highcharts end
                            }
                        };

                        xhttp_roomlogs.open("GET", "/api/data", true);

                     xhttp_roomlogs.send();
                    }

                    function UtcToIst(data) {
                        var dt = new Date(data);
                        return dt;
                    }

Answer 1

You can convert the json date using:

var jsonDate = "\/Date(1577844000000)\/".substr(6);
var dateObject = new Date(parseInt(jsonDate ));
var stringDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
console.log("Dat Object:" + dateObject);
console.log("String Date:" + stringDate);

sample hightchart code:

Highcharts.chart('container', {
    chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['1/1/2020', '1/2/2020', '1/3/2020', '1/4/2020', '1/5/2020']
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        legend: {
            labelFormatter: function () {
                if(this.data.length > 0) {
			        return this.data[0].category;
                } else {
                    return this.name;
                }
		    }
        },
        series: [{
            data: [{x:0,y:1}],
            name: '1/1/2020'
        },{
            data: [{x:1,y:1}],
            name: '1/2/2020'
        },{
            data: [{x:2,y:1}],
            name: '1/3/2020'
        },{
            data: [{x:3,y:1}],
            name: '1/4/2020'
        },{
            data: [{x:4,y:1}],
            name: '1/5/2020'
        }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>