[Chartjs]-Chart.js Timeseries chart – formatting and missing data values

by

7👍

✅

You need to sort the values before you pass them to labels / data.

Example:

let timeData ={
  "2019-08-10T06:27": 12,
  "2019-08-10T06:26": 10,
  "2019-08-10T06:25": 8,
  "2019-08-10T06:24": 2,
  "2019-08-10T06:28": 1
};

let entries = Object.entries(timeData);
entries.sort((a,b) => {
  let aDate = moment(a[0]);
  let bDate = moment(b[0]);
  return aDate.toDate() - bDate.toDate();
});

let labels = entries.map(e => e[0]);
let data = entries.map(e => e[1]);
console.log(labels);
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

See JSFiddle for a working example.

If you want a zero line when there is no data, you need to add the zeroes to the data.
Example:

let timeData ={
  "2019-08-10T06:27": 12,
  "2019-08-10T06:26": 10,
  "2019-08-10T06:25": 8,
  "2019-08-10T06:24": 2,
  "2019-08-10T06:28": 1
};

let labels = [];
let data = [];

let date = moment('2019-08-10T06:00');
let endDate = moment('2019-08-10T07:00');
do {
  let dateStr = date.format("YYYY-MM-DDTHH:mm");
  labels.push(dateStr);

  if(timeData.hasOwnProperty(dateStr))
    data.push(timeData[dateStr]);
  else
    data.push(0);

  date.add(1, 'minute');
} while(date.isBefore(endDate));

console.log(labels);
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js">

See JSFiddle with Zero Line for an example with zero line

Leave a comment