html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile(

  'https://gist.githubusercontent.com/shacheeswadia/c65106bb00db4236140b4f6052fde55a/raw/9ec2af927a8bb81433f2236b41c161260aa4950d/pfizer-comparison-timeline',   

    function (data) {

​

      // create a timeline chart

      var chart = anychart.timeline();

​

      // create main timeline data points

      for (var i = 0; i < data.pfizerTimeline.length; i++) {    

        // create a range series

        var series = chart.range([

          [

            data.pfizerTimeline[i].title,

            data.pfizerTimeline[i].start,

            data.pfizerTimeline[i].end

          ]

        ]);

      }

​

      // create a data set for the top data points

      var pfizerDataSet = anychart.data.set(data.pfizerFacts);

​

      // map the top data points

      var pfizerMapping = pfizerDataSet.mapAs({

        x: 'date',

        value: 'title'

      });

​

      // create the top series with moments

      var pfizerMappingSeries = chart.moment(pfizerMapping);

​

      // create a data set for the bottom data points

      var otherVaccinesDataset = anychart.data.set(data.otherVaccines);

​

      // map the bottom data set

      var otherVaccinesDatasetMapping = otherVaccinesDataset.mapAs({

        x: 'date',

        value: 'title'

      });

​

      // create the bottom series with moments

      var otherVaccinesSeries = chart.moment(otherVaccinesDatasetMapping);

​

      // set the chart scale levels

      chart.scale().zoomLevels([

        [

          { unit: 'month', count: 1 }

        ]

      ]);

​

      // enable the chart scroller

      chart.scroller().enabled(true);

      // set the chart's title

      chart.title('Pfizer/BioNTech Vaccine Timeline');

​

      // set the container id for the chart

      chart.container('container');

      // initiate the chart drawing

      chart.draw();

​

    }

  );

});