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();

​

      // set the chart's title

      chart.title('Pfizer/BioNTech Vaccine 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

          ]

        ])

        .fill(function(d){

          if(d.name == "Pfizer/BioNTech Trial"){

            return "#FD8060"  

          }else if(d.name == "Review"){

            return "#FEE191"

          }

          return "#B0D8A4"

        })

        .stroke("none");

      }

​

      // 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);

      // customize the markers

      pfizerMappingSeries.normal().markers().fill("#007cc2");

​

      var modernaData = [],

          johnsonData =[],

          novavaxData =[];

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

        if(data.otherVaccines[i].title.startsWith("Moderna")){

          modernaData.push(data.otherVaccines[i]);

        }else if(data.otherVaccines[i].title.startsWith("Johnson")){

          johnsonData.push(data.otherVaccines[i]);

        }else{

          novavaxData.push(data.otherVaccines[i]);

        }

      }

      // create a data set for the bottom data points - Moderna

      var modernaDataset = anychart.data.set(modernaData);

​

      // map the bottom data set - Moderna

      var modernaDatasetMapping = modernaDataset.mapAs({

        x: 'date',

        value: 'title'

      });

​

      // create the bottom series - Moderna

      var modernaSeries = chart.moment(modernaDatasetMapping);

      // set the direction for the series

      modernaSeries.direction("down");

​

      // create a data set for the bottom data points - Johnson

      var johnsonDataset = anychart.data.set(johnsonData);

​

      // map the bottom data set - Johnson

      var johnsonDatasetMapping =johnsonDataset.mapAs({

        x: 'date',

        value: 'title'

      });

​

      // create the bottom series - Johnson

      var johnsonSeries = chart.moment(johnsonDatasetMapping);

      // set the direction for the series

      johnsonSeries.direction("down");

      // create a data set for the bottom data points - Novavax

      var novavaxDataset = anychart.data.set(novavaxData);

​

      // map the bottom data set - Novavax

      var novavaxDatasetMapping = novavaxDataset.mapAs({

        x: 'date',

        value: 'title'

      });

​

      // create the bottom series - Novavax

      var novavaxSeries = chart.moment(novavaxDatasetMapping);

      // set the direction for the series

     novavaxSeries.direction("down");

​

      // set the chart scale levels

      chart.scale().zoomLevels([

        [

          { unit: 'month', count: 1 }

        ]

      ]);

​

      // enable the chart scroller

      chart.scroller().enabled(true);

​

      // set the container id for the chart

      chart.container('container');

      // initiate the chart drawing

      chart.draw();

​

    }

  );

});