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

        .enabled(true)

        .useHtml(true)

        .text(

          '<span style = "color: #007cc2; font-size:20px;">Pfizer/BioNTech Vaccine Timeline</span>' +

          '<br/><span style="font-size: 16px;">(Comparing with other vaccines approved in USA)</span>'

        );

​

      // create the 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");

        // set the tooltip settings for the main timeline series

        series

          .tooltip()

          .useHtml(true)

          .titleFormat('{%x}')

          .format(

            data.pfizerTimeline[i].description

            + '<br/><br/>Start: <b>{%start}{type:date}</b><br/>End: <b>{%end}{type:date}</b>'

          );

      }

​

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

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

      // set the tooltip settings for the main timeline series

      pfizerMappingSeries

          .tooltip()

          .useHtml(true)

          .titleFormat('{%title}')

          .format(

            '{%description}'

            + '<br/><br/>Date: <b>{%date}{type:date}</b><br/>'

          );

​

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

      // set the tooltip settings for the Moderna series

      modernaSeries

        .tooltip()

        .useHtml(true)

        .titleFormat('{%title}')

        .format(

          '{%description}'

          + '<br/><br/>Date: <b>{%date}{type:date}</b><br/>'

        );

​

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

      // set the tooltip settings for the Johnson series

      johnsonSeries

        .tooltip()

        .useHtml(true)

        .titleFormat('{%title}')

        .format(

          '{%description}'

          + '<br/><br/>Date: <b>{%date}{type:date}</b><br/>'

        );

      // 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 tooltip settings for the Novavax series

      novavaxSeries

        .tooltip()

        .useHtml(true)

        .titleFormat('{%title}')

        .format(

          '{%description}'

          + '<br/><br/>Date: <b>{%date}{type:date}</b><br/>'

        );

​

      // set the chart scale levels

      chart.scale().zoomLevels([

        [

          { unit: 'month', count: 1 }

        ]

      ]);

​

      // enable the chart scroller

      chart.scroller().enabled(true);

      // create two text markers

      var textMarker1 = chart.textMarker(0);

      var textMarker2 = chart.textMarker(1);

​

      // set the values of the markers

      textMarker1.value(data.pfizerTimeline[0].start);

      textMarker2.value(data.pfizerTimeline[0].start);

​

      // set the text of the markers

      textMarker1.useHtml(true);

      textMarker1.text(

        "Facts about Pfizer");

      textMarker2.text(

        "Facts about other vaccines in USA");

      // configure the position of the markers

      textMarker1.anchor("leftcenter");

      textMarker2.anchor("leftcenter");

      textMarker1.rotation(0);

      textMarker2.rotation(0);

      textMarker1.offsetY('35%');

      textMarker2.offsetY('60%');

      // configure the font of the markers

      textMarker1.fontColor("#007cc2");

      textMarker1.fontWeight(600);

      textMarker2.fontWeight(600);

​

      // set the container id for the chart

      chart.container('container');

      // initiate the chart drawing

      chart.draw();

​

    }

  );

});