HighChart isn't plotting data correctly

Question

Hi I'm using high chart and the data is coming through okay however the date is not coming through on the x axis, I have a parameter in Data with the correctly formatted date and I'd like to use that on the x axis and popup, however I understand I need to use UTC datetime for it to order properly

https://i.sstatic.net/kU4M6.jpg

function buildAndUpdateTempChart() {
  $.getJSON('server/getReadings.php', function (data) {
    $('#chartContainer').highcharts('StockChart', {
      chart:{
        events: {
          load: function(){
                      // set up the updating of the chart each second
                      //debugger;
                      // var series = this.series[0];
                      // //console.log('data is: ' + data);
                      // for(var i = 0; i < data.length - 1; i++){
                      //     this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
                      //     this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
                      // }


                      // setInterval(function () {
                      //   //get tick
                      //     var x = (new Date()).getTime(), // current time
                      //     y = Math.round(Math.random() * 100);
                      //     series.addPoint([x, y], true, true);

                      //   }, 1000);
                    }
                  }
                },

                title: {
                  text: 'Temperature Sensor Readings'
                },
                yAxis: {
                  title: {
                    text: 'Degrees Celcius'
                  },
                  plotLines: [{
                    value: -10,
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Minimum tolerated.'
                    }
                  }, {
                    value: 20,
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Maximum tolerated.'
                    }
                  }]},
                  plotOptions: {
                    series: {
                      compare: 'percent'
                    }
                  },

                  series: [{
                    name: 'Temp',
                    data: (function () {
                      var temp = [];
                      for (var i = 0; i < data.length; i++) {
                        temp.push([
                          data[i].timestamp,
                          parseFloat(data[i].temp)
                          ]);
                      }
                      return temp;
                    }()),
                    tooltip: {
                      valueDecimals: 2
                    }},
                    {
                      name: 'Ambient Temp',
                      data: (function () {
                        var aTemp = [];
                        for (var i = 0; i < data.length; i++) {
                          aTemp.push([
                            data[i].timestamp,
                            parseFloat(data[i].aTemp)
                            ]);
                        }
                        return aTemp;
                      }()),
                      tooltip: {
                        valueDecimals: 2
                      },
                    }]
                  });
  })
}
$(document).ready(function(){
    buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
  });

Answer 1

this could help you, you have to specify xAxis a datetime

function buildAndUpdateTempChart() {
  $.getJSON('server/getReadings.php', function (data) {
    $('#chartContainer').highcharts('StockChart', {
      chart:{
        events: {
          load: function(){
                      // set up the updating of the chart each second
                      //debugger;
                      // var series = this.series[0];
                      // //console.log('data is: ' + data);
                      // for(var i = 0; i < data.length - 1; i++){
                      //     this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
                      //     this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
                      // }


                      // setInterval(function () {
                      //   //get tick
                      //     var x = (new Date()).getTime(), // current time
                      //     y = Math.round(Math.random() * 100);
                      //     series.addPoint([x, y], true, true);

                      //   }, 1000);
                    }
                  }
                },

                title: {
                  text: 'Temperature Sensor Readings'
                },
                 xAxis: {
                   type: 'datetime'
                },
                yAxis: {
                  title: {
                    text: 'Degrees Celcius'
                  },
                  plotLines: [{
                    value: -10,
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Minimum tolerated.'
                    }
                  }, {
                    value: 20,
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Maximum tolerated.'
                    }
                  }]},
                  plotOptions: {
                    series: {
                      compare: 'percent'
                    }
                  },

                  series: [{
                    name: 'Temp',
                    data: (function () {
                      var temp = [];
                      for (var i = 0; i < data.length; i++) {
                        temp.push([
                          data[i].timestamp,
                          parseFloat(data[i].temp)
                          ]);
                      }
                      return temp;
                    }()),
                    tooltip: {
                      valueDecimals: 2
                    }},
                    {
                      name: 'Ambient Temp',
                      data: (function () {
                        var aTemp = [];
                        for (var i = 0; i < data.length; i++) {
                          aTemp.push([
                            data[i].timestamp,
                            parseFloat(data[i].aTemp)
                            ]);
                        }
                        return aTemp;
                      }()),
                      tooltip: {
                        valueDecimals: 2
                      },
                    }]
                  });
  })
}
$(document).ready(function(){
    buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
  });

Answer 2

My guess is you need

 xAxis: {
            type: 'datetime'
        },

in your code. Hope this helps.