html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

.anychart-tooltip {

  background: #fff;

  padding: 15px;

  color: #333;

  box-shadow: 1px 1px 3px #333;

}

​

.anychart-tooltip h4 {

  margin-bottom: 0;

}

​

.anychart-tooltip ul {

  margin: 0;

}

var scale;

var timeline;

​

anychart.onDocumentReady(function () {

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

  // https://cdn.anychart.com/samples-data/gantt-general-features/custom-drawing/gantt-custom-drawing.js

  var treeData = anychart.data.tree(getData(), 'as-table'); // eslint-disable-line no-undef

​

  // map loaded data for the gantt project chart

  var mapping = treeData.mapAs({

    actualStart: 'mostLikelyStart',

    actualEnd: 'mostLikelyEnd'

  });

​

  // create gantt project chart

  var chart = anychart.ganttProject();

​

  // set data for the chart

  chart.data(mapping);

​

  // set chart row's height

  chart.defaultRowHeight(60);

​

  // get data grid

  var dataGrid = chart.dataGrid();

​

  // set data grid tooltip's formatter

  dataGrid.tooltip().useHtml(true);

  dataGrid.tooltip().format(tooltipFormatter);

​

  // get timeline

  timeline = chart.getTimeline();

​

  // set timeline tooltip's formatter

  timeline.tooltip().useHtml(true);

  timeline.tooltip().format(tooltipFormatter);

​

  // set default task bar and progress fill settings

  timeline.tasks().selected().fill('#45738B');

  timeline.tasks().progress().selected().fill('#47B7F2');

​

  timeline

    .groupingTasks()

    .labels()

    .padding(0, 0, 5, 0)

    .position('center')

    .anchor('center');

​

  timeline

    .groupingTasks()

    .labels()

    .format(function () {

      return (

        'Duration: ' +

        Math.round(

          (this.autoEnd - this.autoStart) / (24 * 60 * 60 * 1000)

        ) +

        ' days'

      );

    });

​

  // set shapes for timeline tasks rendering

  timeline

    .tasks()

    .rendering()

    .shapes([

      {

        name: 'pessimisticTask',

        shapeType: 'path',

        disablePointerEvents: false

      },

      {

        name: 'mostLikelyTask',

        shapeType: 'path',

        disablePointerEvents: false

      },

      {

        name: 'optimisticTask',

        shapeType: 'path',

        disablePointerEvents: false

      }

    ]);

​

  timeline

    .groupingTasks()

    .rendering()

    .shapes([

      {

        name: 'mostLikelyTask',

        shapeType: 'path',

        disablePointerEvents: false

      }

    ]);

​

  // get timeline's scale

  scale = timeline.scale();

​

  // setup custom drawer for timeline tasks

  timeline.tasks().rendering().drawer(taskDrawer);

​

  // setup custom drawer for timeline grouping tasks

  timeline.groupingTasks().rendering().drawer(groupingTasksDrawer);

​

  // set task progress' settings

  timeline.tasks().progress().height('15%').selected().stroke('#666 .6');

​

  // set grouping task progress' settings

  timeline

    .groupingTasks()

    .progress()

    .height('50%')

    .fill('#0078CD .7')

    .offset('50%')

    .selected()

    .fill('#47B7F1 .7');

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

​

  // Set scale maximum and minimum.

  scale.minimumGap(0.08);

  scale.maximumGap(0.15);

​

  // zoom chart all dates range

  chart.fitAll();

});

​

// custom drawer for the tasks

function taskDrawer() {

  var path;

  var shift;

  var left;

  var top;

  var width;

  var height;

  var itemBounds;

  var startRatio;

  var endRatio;

​

  // get timeline width and left border coordinates

  var tlBounds = timeline.getPixelBounds();

  var tlWidth = tlBounds.width;

  var tlLeft = tlBounds.left;

​

  // get recommended bounds for drawing

  var bounds = this.predictedBounds;

​

  // get bar height

  var barHeight = Math.round(bounds.height / 3);

​

  /* OPTIMISTIC BAR */

  // get path from shapes

  path = this.shapes.optimisticTask;

​

  // set path's fill and stroke settings

  path.fill('#90D6C1 .6');

  path.stroke('#80A291 .8');

​

  // get shift value

  shift = halfShift(path.strokeThickness());

​

  // calculate start and end ratio for the optimistic bar using it's data

  startRatio = scale.transform(this.item.get('optimisticStart'));

  endRatio = scale.transform(this.item.get('optimisticEnd'));

​

  // calculate X coordinate for the optimistic bar

  left = Math.round(tlWidth * startRatio + tlLeft) + shift;

​

  // calculate Y coordinate for the optimistic bar

  top = Math.round(bounds.top) - 4 + shift;

​

  // calculate optimistic bar's width

  width = Math.round(tlWidth * (endRatio - startRatio));

​

  // set optimistic bar's height

  height = barHeight;

​

  // set optimistic bar's bounds

  itemBounds = anychart.math.rect(left, top, width, height);

​

  // draw rounded rectangle on the path

  anychart.graphics.vector.primitives.roundedRect(path, itemBounds, 3);

​

  /* MOST LIKELY BAR */

  // get path prom shapes

  path = this.shapes.mostLikelyTask;

​

  // set stroke color and opacity

  path.stroke('#666 .6');

​

  // get shift value

  shift = halfShift(path.strokeThickness());

​

  // calculate start and end ratio for the most-likely bar using it's data

  startRatio = scale.transform(this.item.get('mostLikelyStart'));

  endRatio = scale.transform(this.item.get('mostLikelyEnd'));

​

  // calculate X coordinate for the most-likely bar

  left = Math.round(tlWidth * startRatio + tlLeft) + shift;

​

  // calculate Y coordinate for the most-likely bar

  top =

    Math.round(bounds.top + (bounds.height - barHeight) / 2) - 1 + shift;

​

  // calculate most-likely bar's width

  width = Math.round(tlWidth * (endRatio - startRatio));

​

  // set most-likely bar's height

  height = barHeight;

​

  // set most-likely bar's bounds

  itemBounds = anychart.math.rect(left, top, width, height);

​

  // draw rounded rectangle on the path

  anychart.graphics.vector.primitives.roundedRect(path, itemBounds, 3);

​

  /* PESSIMISTIC BAR */

  // get path from shapes

  path = this.shapes.pessimisticTask;

​

  // set path's fill and stroke settings

  path.fill('#FF4B12 .4');

  path.stroke('#6F5264 .6');

​

  // get shift value

  shift = halfShift(path.strokeThickness());

​

  // calculate start and end ratio for the pessimistic bar using it's data

  startRatio = scale.transform(this.item.get('pessimisticStart'));

  endRatio = scale.transform(this.item.get('pessimisticEnd'));

​

  // calculate X coordinate for the pessimistic bar

  left = Math.round(tlWidth * startRatio + tlLeft) + shift;

​

  // calculate Y coordinate for the pessimistic bar

  top = Math.round(bounds.top + bounds.height - barHeight + 2) + shift;

​

  // calculate pessimistic bar's width

  width = Math.round(tlWidth * (endRatio - startRatio)) + shift;

​

  // set pessimistic bar's height

  height = barHeight;

​

  // set pessimistic bar's bounds

  itemBounds = anychart.math.rect(left, top, width, height);

​

  // draw rounded rectangle on the path

  anychart.graphics.vector.primitives.roundedRect(path, itemBounds, 3);

}

​

// custom drawer for the grouping tasks

function groupingTasksDrawer() {

  // get path prom shapes

  var path = this.shapes.mostLikelyTask;

​

  // set path stroke settings

  path.stroke({

    dash: '3 7 2',

    thickness: 5,

    color: '#385960'

  });

​

  // get shift value

  var shift = halfShift(path.strokeThickness());

​

  // get recommended bounds for drawing

  var bounds = this.predictedBounds;

​

  // get parameters for the element drawer

  var left = Math.round(bounds.left) + shift;

  var height = Math.round(bounds.height);

  var center = Math.round(height / 2);

  var top = Math.round(bounds.top + center - 2) + shift;

  var width = Math.round(bounds.width);

  var right = left + width;

​

  // draw grouping task

  path

    .moveTo(left, top + center)

    .lineTo(right, top + center)

    .close();

}

​

// formatter function for the tooltips

function tooltipFormatter() {

  if (!this.item.numChildren()) {

    // formatter for the timeline task

    return (

      '<h4 style="color: #80A291">Optimistic (' +

      Math.round(

        (this.item.get('optimisticEnd') -

          this.item.get('optimisticStart')) /

        (24 * 60 * 60 * 1000)

      ) +

      ' days):</h4><ul><li>Start - ' +

      anychart.format.dateTime(

        this.item.get('optimisticStart'),

        'dd.MM.yyyy'

      ) +

      '</li><li>End - ' +

      anychart.format.dateTime(

        this.item.get('optimisticEnd'),

        'dd.MM.yyyy'

      ) +

      '</li></ul><hr>' +

      '<h4 style="color: #00A6DA">Most Likely (' +

      Math.round(

        (this.item.get('mostLikelyEnd') -

          this.item.get('mostLikelyStart')) /

        (24 * 60 * 60 * 1000)

      ) +

      ' days):</h4><ul><li>Start - ' +

      anychart.format.dateTime(

        this.item.get('mostLikelyStart'),

        'dd.MM.yyyy'

      ) +

      '</li><li>End - ' +

      anychart.format.dateTime(

        this.item.get('mostLikelyEnd'),

        'dd.MM.yyyy'

      ) +

      '</li></ul><hr>' +

      '<h4 style="color: #E24B26">Pessimistic (' +

      Math.round(

        (this.item.get('pessimisticEnd') -

          this.item.get('pessimisticStart')) /

        (24 * 60 * 60 * 1000)

      ) +

      ' days):</h4><ul><li>Start - ' +

      anychart.format.dateTime(

        this.item.get('pessimisticStart'),

        'dd.MM.yyyy'

      ) +

      '</li><li>End - ' +

      anychart.format.dateTime(

        this.item.get('pessimisticEnd'),

        'dd.MM.yyyy'

      ) +

      '</li></ul>'

    );

  } // formatter for the grouping task

  return (

    'Duration: ' +

    Math.round((this.autoEnd - this.autoStart) / (24 * 60 * 60 * 1000)) +

    ' days'

  );

}

​

function halfShift(strokeThickness) {

  return strokeThickness % 2 ? 0.5 : 0;

}