score:10

Accepted answer

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>


Related Query