chart.js 2.7.1 live update

by lsubirana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

JavaScript

function newDate(days) {
  return moment().add(days, 's');
}
function randomScalingFactor(max) {
  min = 0;
  //max = 10;
  return Math.round(Math.random() * (max - min + 1));
}
callerData = {
    labels: [newDate(-35), newDate(-30), newDate(-25), newDate(-20), newDate(-15), newDate(-5), newDate(0)],
    datasets: [{
      id: 0,
      label: "Total calls",
      data: [{
        x: newDate(-35),
        y: randomScalingFactor(10)
      }, {
        x: newDate(-30),
        y: randomScalingFactor(10)
      }, {
        x: newDate(-25),
        y: randomScalingFactor(10)
      }, {
        x: newDate(-20),
        y: randomScalingFactor(10)
      }, {
        x: newDate(-15),
        y: randomScalingFactor(10)
      },  {
        x: newDate(-10),
        y: randomScalingFactor(10)
      },  {
        x: newDate(-5),
        y: randomScalingFactor(10)
      },  {
        x: newDate(0),
        y: randomScalingFactor(10)
      }],
      fill: false,
      borderColor: '#4bc0c0',
    },
    {
      id: 1,
      label: "Un-Happy calls",
      data: [{
        x: newDate(-35),
        y: randomScalingFactor(4)
      }, {
        x: newDate(-30),
        y: randomScalingFactor(4)
      }, {
        x: newDate(-25),
        y: randomScalingFactor(4)
      }, {
        x: newDate(-20),
        y: randomScalingFactor(4)
      }, {
        x: newDate(-15),
        y: randomScalingFactor(4)
      },  {
        x: newDate(-10),
        y: randomScalingFactor(4)
      },  {
        x: newDate(-5),
        y: randomScalingFactor(4)
      },  {
        x: newDate(0),
        y: randomScalingFactor(4)
      }],
      fill: false,
      borderColor: 'red',
    }]
  }
  
var config = {
  type: 'line',
  data: callerData,
  options: {
  	responsive: true,
    scales: {
      xAxes: [{
        type: 'time',
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Time'
        },
        time: {
          displayFormats: {
         ...