[Chartjs]-Charts.js and timestamp as readable date

by

4👍

✅

The main problem is that your timestamps are Unix timestamp (number of seconds since the 1 January 1970 UTC). JavaScript Date object however uses milliseconds since 1 January 1970 UTC. Therefore you should multiply your timestamps by 1000 prior to assign the data to the chart configuration.

data.forEach((o) => o.x *= 1000);

I also slightly changed the definition of xAxes as follows:

xAxes: [{
    type: 'time',        
    time: {
      unit: 'minute',
      displayFormats: {
        minute: 'HH:mm'
      },
      tooltipFormat: 'HH:mm'
    },
    scaleLabel: {
      labelString: 'Timestamp'
    }
  }],

Please have a look at your amended code below.

const data = [
  {x:1588353429.6027,y:400},
  {x:1588353430.6634,y:0},
  {x:1588353431.7241,y:0},
  {x:1588353432.7848,y:0},
  {x:1588353433.8455,y:400},
  {x:1588353434.9062,y:400},
  {x:1588353435.9668,y:400},
  {x:1588353437.0274,y:400},
  {x:1588353438.0881,y:400},
  {x:1588353439.1487,y:400},
  {x:1588353440.2093,y:400},
  {x:1588353441.27,y:400},
  {x:1588353442.3307,y:400},
  {x:1588353443.3929,y:400},
  {x:1588353444.4537,y:400},
  {x:1588353445.5142,y:400},
  {x:1588353723.1543,y:415},
  {x:1588353724.216,y:0},
  {x:1588353725.2782,y:0},
  {x:1588353726.3402,y:0},
  {x:1588353727.402,y:400},
  {x:1588353728.463,y:400},
  {x:1588353793.2418,y:415},
  {x:1588353794.304,y:0},
  {x:1588353795.3658,y:0},
  {x:1588353796.4265,y:0},
  {x:1588353797.4882,y:400},
  {x:1588353798.5495,y:400},
  {x:1588353799.6102,y:400},
  {x:1588353800.6715,y:400},
  {x:1588353801.7327,y:405},
  {x:1588353802.7933,y:400},
  {x:1588353803.8564,y:405},
  {x:1588353804.9154,y:405},
  {x:1588353805.9779,y:405},
  {x:1588353807.0411,y:411}
];
data.forEach((o) => o.x *= 1000); 

new Chart(document.getElementById("hum1"), {
  type: 'scatter',
  data: {
    datasets: [{
      label: "Humidity 1",
      pointStyle: 'line',
      showLine: true,
      fill: false,
      borderColor: '#0000FF',
      pointRadius: 0,
      data: data 
    }]
  },
  options: {
    responsive: false,
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true
      }
    },
    scales: {
      xAxes: [{
        type: 'time',        
        time: {
          unit: 'minute',
          displayFormats: {
            minute: 'HH:mm'
          },
          tooltipFormat: 'HH:mm'
        },
        scaleLabel: {
          display: true,
          labelString: 'Timestamp'
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
          steps: 10,
          stepValue: 5,
          min: 0
        },
        scaleLabel: {
          display: true,
          labelString: 'Humidity [%]'
        }
      }]
    },
    title: {
      display: true,
      text: 'Filament hub 1'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="hum1" style="width:600px; height:230px;"></canvas>

Leave a comment