html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/gantt-general-features/event-markers/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/gantt-general-features/event-markers/data.json',

    function (data) {

      // create data tree on raw data

      var treeData = anychart.data.tree(data, 'as-table');

​

      // create resource gantt chart

      var chart = anychart.ganttResource();

​

      // set data for the chart

      chart.data(treeData);

​

      // set the spliter position

      chart.splitterPosition(200);

​

      // getting chart's timeline

      var timeline = chart.getTimeline();

​

      // create range maker with text

      timeline

        .rangeMarker(0)

        .from(Date.UTC(2014, 3, 6))

        .to(Date.UTC(2014, 3, 10))

        .fill('#ffd54f 0.2');

      timeline

        .textMarker(0)

        .value(Date.UTC(2014, 3, 8))

        .text(

          '<span style="">Conference</span><br/><b>"Robotics Courses"</b>'

        )

        .align('center')

        .hAlign('center')

        .rotation(0)

        .useHtml(true)

        .fontSize(18)

        .fontColor('#997400')

        .fontOpacity(1)

        .zIndex(50);

​

      // create line maker with text

      timeline

        .lineMarker(0)

        .value(Date.UTC(2014, 3, 22))

        .stroke('2 #212121')

        .zIndex(50);

      timeline

        .textMarker(1)

        .value(Date.UTC(2014, 3, 22))

        .text(

          '<span style="">Robotics Exhibition</span><br/><b>"The Opening Night"</b>'

        )

        .align('center')

        .hAlign('left')

        .offsetX(110)

        .rotation(0)

        .useHtml(true)

        .fontSize(18)

        .fontColor('#212121')

        .fontOpacity(1)

        .zIndex(50);

​

      // create line maker with text

      timeline

        .lineMarker(1)

        .value(Date.UTC(2014, 3, 29))

        .stroke('2 #ef6c00')

        .zIndex(50);

      timeline

        .textMarker(2)

        .value(Date.UTC(2014, 3, 29))

        .text(

          '<span style="">Robotics Competition</span><br/><b>"Choice of Path"</b>'

        )

        .align('center')

        .offsetX(-105)

        .offsetY(45)

        .hAlign('right')

        .rotation(0)

        .useHtml(true)

        .fontSize(18)

        .fontColor('#994500')

        .fontOpacity(1)

        .zIndex(50);

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // zoom chart all dates range

      chart.fitAll();

    }

  );

});