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 j = 0; j < data.otherVaccines.length; j++) {

        if(data.otherVaccines[j].title.startsWith('Moderna')) {

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

        }else if(data.otherVaccines[j].title.startsWith('Johnson')) {

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

        }else{

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

        }

      }

​

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

​

    }

  );

});