Highcharts's x - axis (datetime) format

Question

I am making graphs using js. The data is fetched using php, The x-axis is the timestamp (ex 2018.01.22.18 (the format is year.month.day.hour.minute)), and the y-axis is the temperature.

I am plotting several lines rather than a single line. However, the corresponding timestamp must fit the x-axis, which is not the case. (The timestamp of each data is different.)

It is also expected that the highcharts do not match this format, so the graphs are output in the order in which they are placed in the array. I want the timestamp of the data to be exactly on the x-axis.

Screenshots:

Answer 1

As you said you have to convert it to timestamp, you can do this in PHP or in Javascript :

Javascript example :

 // you date var myDate="2018.01.22.18.00"; myDate=myDate.split("."); // build new js date object var newDate=myDate[1]+"-"+myDate[2]+"-"+myDate[0]+" "+myDate[3]+":"+myDate[4]; // return the timestamp console.log(new Date(newDate).getTime()); //will display 1516633200000 

The complete code will be something like this :

 // your initiale data array var data = [ ["2018.01.01.18.00", 1.1, 4.7], ["2018.01.02.18.00", 1.8, 6.4], ["2018.01.03.18.00", 1.7, 6.9], ["2018.01.04.18.00", 2.6, 7.4], ["2018.01.05.18.00", 3.3, 9.3], ["2018.01.06.18.00", 3.0, 7.9], ["2018.01.07.18.00", 3.9, 6.0] ] // convert to timestamp var timestampData = new Array(data.length); for (var i = 0; i < data.length; i++) { // your date myDate=data[i][0].split("."); // build new js date object var myNewDate = new Date(myDate[1]+"-"+myDate[2]+"-"+myDate[0]+" "+myDate[3]+":"+myDate[4]); timestampData[i] = new Array(myNewDate.getTime() , data[i][1] , data[i][2]); } // Create the chart Highcharts.chart('container', { chart: { type: 'arearange', zoomType: 'x' }, xAxis: { type: 'datetime' }, series: [{ name: 'Temperatures', data: timestampData }] }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>