CODEWITHSUNDEEP
javascriptjqueryhighcharts
we bendthetrend
we bendthetrend

Reputation: 59

How to plot against time on x-axis Highcharts.js

Here is my fiddle : DEMO

Click on add to array button to add objects to the data array. The payload object has time, temperature and humidity.

$("#addToArray").click(function() {
  if(myChartTemperature) {
    myChartTemperature.series[0].addPoint(payload.temperature);
  }
  if(myChartHumidity){
    myChartHumidity.series[0].addPoint(payload.humidity);
  }
 dataArray.push((payload));
  console.log(dataArray);
})

How can I plot temperature/humidity against time on the x-axis (assuming time data will be sent through an api call to the sensor data and will change)?

Upvotes: 0

Views: 91

Answers (1)

ewolden
ewolden

Reputation: 5803

By setting xAxis.type to datetime, and series.line.data.x to the timestamp of the event in milliseconds you can achieve what you are asking.

That is:

xAxis: {
  type: 'datetime',
  ...
}

And

$("#addToArray").click(function() {
  if(myChartTemperature) {
    myChartTemperature.series[0].addPoint({
       x: new Date().getTime(), 
       y: payload.temperature
    });
  }
  if(myChartHumidity){
    myChartHumidity.series[0].addPoint({
      x: new Date().getTime(), 
      y: payload.humidity
    });
  }
  dataArray.push((payload));
  console.log(dataArray);
})

Working example: https://jsfiddle.net/ewolden/ms91r4pr/6/

(note that I only did this for the points added after 5 seconds, so you need to adjust the function that adds before 5 seconds as well)

Upvotes: 2

Related Questions