Highcharts Demo

author(s): Pawel Potaczek

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="outer-container">

  <div class="controls">
    <button id="start">
      Start
    </button>
  </div>
  
  <div id="container"></div>
</div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  margin: 0 auto;
}

#outer-container {
  max-width: 800px;
  min-width: 300px;
  margin: 0 auto;
}

#outer-container .controls {
  display: table;
  margin: 0 auto;
}


#outer-container button {
    margin: 0 auto;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
}

JavaScript

let globalData = [];
let chart;

let duration = 500; // Determines how long the animation between new points should be take
let startIterator = 1; // Determines how many points will be rendered on chart's init
let currentIterator = startIterator;
let maxIterator = 1;

let guiButton = document.getElementById('start');
let guiButtonState = 'Start';
let intervalId;

// Fetch data:
fetch('https://pomber.github.io/covid19/timeseries.json')
  .then(response => response.json())
  .then(data => {
    parseData(data);
    createChart();
    initEvents();
  });

function initEvents() {
  guiButton.addEventListener('click', function() {
    if (guiButtonState === 'Stop') {
      // User clicked "Stop" -> stop animation and allow to resume
      intervalId = clearInterval(intervalId);
      guiButton.innerText = guiButtonState = 'Resume';
    } else {
      // If animation has finished, recreate chart
      if (guiButtonState === 'Restart') {
        createChart();
      }
      guiButton.innerText = guiButtonState = 'Stop';
      // Start animation:
      redrawChart(currentIterator += 1);
      intervalId = setInterval(function() {
        // If we reached last available point, stop animation:
        if (currentIterator === maxIterator) {
          intervalId = clearInterval(intervalId);
          currentIterator = startIterator;
          guiButton.innerText = guiButtonState = 'Restart';
        } else {
          redrawChart(currentIterator += 1);
        }
      }, duration);
    }
  });
}

function redrawChart(index) {
  // Set new subtitle on every redraw
  chart.setTitle(null, {
    text: Highcharts.dateFormat('%d-%m-%Y', globalData[0].data[index][0])
  }, false);

  // To each series, add a point:
  chart.series.forEach(
    (series, seriesIndex) =>
    series.addPoint(
      globalData[seriesIndex].data[index],
      false,
      false,
      false
    )
  );

  // Now, once everything is updated, redraw chart:
  chart.redraw({
    duration
  });
}

function...