Highcharts Demo

author(s): Pawel Potaczek

by Black Label

HTML

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

JavaScript

let globalData = [];
let chart;

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

function parseData(data) {
  Highcharts.objectEach(
    data,
    // Prepare Highcharts data-format:
    // series: [{
    //   data: [ [x, y], [x, y], ..., [x, y]]
    // }]
    (countryData, country) => globalData.push({
      name: country,
      data: countryData.map(p => [Date.parse(p.date), p.confirmed])
    })
  );


  // Sort and limit dataset:
  globalData = globalData
    .sort((countryA, countryB) => {
      let countryALen,
        countryBLen;

      if (!countryA || !countryA.data || countryA.data.length === 0) {
        return 1;
      }

      if (!countryB || !countryB.data || countryB.data.length === 0) {
        return -1;
      }

      return countryB.data[countryB.data.length - 1][1] - countryA.data[countryA.data.length - 1][1];
    })
    .splice(0, 8)
}


function createChart() {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'line',
      marginLeft: 100
    },

    legend: {
      layout: 'proximate',
      align: 'right'
    },


    title: {
      floating: true,
      align: 'left',
      x: 93,
      y: 20,
      text: 'Confirmed cases per country'
    },
    subtitle: {
      floating: true,
      align: 'left',
      y: 60,
      x: 90,
      text: Highcharts.dateFormat('%d-%m-%Y', globalData[0].data[globalData[0].data.length - 1][0]),
      style: {
        fontSize: '40px'
      }
    },
    tooltip: {
      split: true
    },

    yAxis: {
      title: {
        text: ''
      },
      maxPadding: 0.2,
      softMax: 200
    },

    xAxis: {
      gridLineWidth: 2,
			type: 'datetime'
    },


    plotOptions: {
      series: {
        marker: {
          symbol: 'circle'
        }
      }
    },
    series: globalData
  });
}