chart.js null values (to zero)

by beaver71

HTML

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

CSS

html,
body {
  height: 100%;
  width: 100%;
}

#chart {
  width: 100%;
  height: 100%;
}

JavaScript

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
});