# Fetch Data

const zoomOptions = {
  limits: {
    x: {min: 'original', max: 'original', minRange: 60 * 1000},
  },
  pan: {
    enabled: true,
    mode: 'x',
    modifierKey: 'ctrl',
    onPanComplete: startFetch
  },
  zoom: {
    wheel: {
      enabled: true,
    },
    drag: {
      enabled: true,
    },
    pinch: {
      enabled: true
    },
    mode: 'x',
    onZoomComplete: startFetch
  }
};

let timer;
function startFetch({chart}) {
  const {min, max} = chart.scales.x;
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log('Fetched data between ' + min + ' and ' + max);
    chart.data.datasets[0].data = fetchData(min, max);
    chart.stop(); // make sure animations are not running
    chart.update('none');
  }, 500);
}

const config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'My First dataset',
      borderColor: Utils.randomColor(0.4),
      backgroundColor: Utils.randomColor(0.1),
      pointBorderColor: Utils.randomColor(0.7),
      pointBackgroundColor: Utils.randomColor(0.5),
      pointBorderWidth: 1,
      data: fetchData(start, end),
    }]
  },
  options: {
    scales: scales,
    plugins: {
      zoom: zoomOptions,
      title: {
        display: true,
        position: 'bottom',
        text: (ctx) => zoomStatus(ctx.chart)
      }
    },
    transitions: {
      zoom: {
        animation: {
          duration: 100
        }
      }
    }
  }
};

const start = new Date().valueOf();
const end = start + 1000 * 60 * 60 * 24 * 2;
const allData = [];
let y = 100;
for (let x = start; x <= end; x += 1000) {
  y += 5 - Math.random() * 10;
  allData.push({x, y});
}

function fetchData(x1, x2) {
  const step = Math.max(1, Math.round((x2 - x1) / 100000));
  const data = [];
  let i = 0;
  while (i < allData.length && allData[i].x < x1) {
    i++;
  }
  while (i < allData.length && allData[i].x <= x2) {
    data.push(allData[i]);
    i += step;
  }
  return data;
}

const scales = {
  x: {
    position: 'bottom',
    min: start,
    max: end,
    type: 'time',
    ticks: {
      autoSkip: true,
      autoSkipPadding: 50,
      maxRotation: 0
    },
    time: {
      displayFormats: {
        hour: 'HH:mm',
        minute: 'HH:mm',
        second: 'HH:mm:ss'
      }
    }
  },
  y: {
    type: 'linear',
    position: 'left',
  },
};