ChartJS missing time series data

Question

I am trying to use ChartJS to display some data from remote sensors. The sensors upload data (ie push) to a database periodically (e.g. every hour), but sometimes due to network issues the connection is not available and they miss a poll. Sometimes due to power issues they may miss several days of polling.

The data is stored in a simple table with 2 main columns:

• Unix timestamp in seconds (of the sensor unit, sent with the polling data)
• Data value

Problem:

• As far as the database server is concerned, it does not know if the sensor has missed a poll (so doesn't add 'zero' values).
• When I plot the data using ChartJS, I want to plot missing values as zero.

In other words I am trying to show a fixed view of the ticks, and just populate the "Y" values where there is data.

I've played around with this for a few hours to no avail

My code is below (you can see the data for 23:00, 01:00, and 08:00-14:00 is missing). I want to show these values as 'zero' on the chart even though there is no corresponding "value".

Any help is appreciated.

timestamp =['15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','0:00','2:00','3:00','4:00','5:00','6:00','7:00','14:00',];
target = [17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,];

var ctx = document.getElementById('chart').getContext("2d");

var data = {
  labels: timestamp,
  datasets: [{
      data: target,
      borderColor: "rgba(255,0,0,1)",
      backgroundColor: "rgba(255,0,0,0)",
      borderWidth: 1,
      spanGaps: false,
      tooltips: {
        enabled: false
      }
    }
  ]
};

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 300
      }
    }],
    xAxes: [{
        type: 'time',
                time: {
            unit: 'day'
        },
        ticks: {
      count: 24,
          stepSize: 1,
          autoSkip: false,
        }
    }]
  },
  elements: {
    point: {
      radius: 0,
      hitRadius: 5,
      hoverRadius: 5
    },
    line: {
      tension: 0
    }
  },
  legend: {
    display: false
  },
  pan: {
    enabled: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
  zoom: {
    enabled: true,
    drag: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
};

var chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

Answer 1

You can set distribution: 'series'

xAxes: [{
  type: 'time',
  distribution: 'series'
}]