ChartJS show gaps in time data

Question

I have this graph:

which is built in ChartJS, however, between 1pm and 5:30pm, there was no data.

All I want the chart to do is display that there is no data, rather than joining the two points.

Can this be done? In theory I have a new value every 5 seconds, but this could reduce, so I guess I would need to be able to set a tolerance of gaps to join vs gaps to show?

ChartOptions shown below:

        myChart = new Chart(ctx, 
        {
            type: 'line',
            data: 
            {
                labels: timestamp,
                datasets: 
                [{data: speed,backgroundColor: ['rgba(0, 9, 132, 0.2)'],borderColor: ['rgba(0, 0, 192, 1)'],borderWidth: 1},
                {data: target,borderColor: "rgba(255,0,0,1)",backgroundColor: "rgba(255,0,0,0)",borderWidth: 1,tooltips: {enabled: false}}]
            },
            options: 
            {
                scales: {yAxes: [{ticks: {beginAtZero:true, min: 0, max: 300}}], xAxes: [{type: 'time',}]},
                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}},

            }
        });

Thanks in advance

Answer 1

Using spanGaps you can control behavior of line chart between points with no or null data:

var timestamp = [],
  speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
  target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k > 0) {
  timestamp.push(new Date().getTime() - 60 * 60 * 1000 * k);
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
  labels: timestamp,
  datasets: [{
      data: speed,
      backgroundColor: ['rgba(0, 9, 132, 0.2)'],
      borderColor: ['rgba(0, 0, 192, 1)'],
      borderWidth: 1,
      spanGaps: false,
    },
    {
      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',
    }]
  },
  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: 'line',
  data: data,
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

As alternative you can modify your data array and replace null with zero:

var timestamp = [],
    speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
    target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k>0) {
	timestamp.push(new Date().getTime()-60*60*1000*k);
}

function nullToZero(array) {
  return array.map(function(v) { 
    if (v==null) return 0; else return v;
  });
}

var ctx = document.getElementById('chart').getContext("2d");
var data = {
  labels: timestamp,
  datasets: [{
      data: nullToZero(speed),
      backgroundColor: ['rgba(0, 9, 132, 0.2)'],
      borderColor: ['rgba(0, 0, 192, 1)'],
      borderWidth: 1,
    },
    {
      data: nullToZero(target),
      borderColor: "rgba(255,0,0,1)",
      backgroundColor: "rgba(255,0,0,0)",
      borderWidth: 1,
      tooltips: {
        enabled: false
      }
    }
  ]
};
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 300
      }
    }],
    xAxes: [{
      type: 'time',
    }]
  },
  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: 'line',
  data: data,
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>