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/pert-charts/garage-construction-pert-chart/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/pert-charts/garage-construction-pert-chart/data.json',

    function (data) {

      // set filling method for tree

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

​

      // create PERT chart

      var chart = anychart.pert();

      // set data

      chart

        .data(treeData)

        // set spacing between milestones

        .horizontalSpacing('13.37%')

        // set padding for chart

        .padding([25, 50, 0, 50]);

​

      // get duration project

      var duration = Math.round(

        chart.getStat('pertChartProjectDuration')

      );

      // get deviation project

      var deviation = Math.round(

        chart.getStat('pertChartCriticalPathStandardDeviation')

      );

​

      // set title text

      chart

        .title()

        .enabled(true)

        .useHtml(true)

        .padding([0, 0, 35, 0])

        .text(

          'Garage Construction PERT Chart' +

          '<br>Project duration: ' +

          duration +

          '±' +

          deviation +

          ' days'

        );

​

      // set settings for tasks

      var tasks = chart.tasks();

      tasks

        .stroke('1.5 #93CBF9')

        .dummyFill('#A0B1BA')

        // set dummy settings for tasks

        .dummyStroke('#60727B', 1.5, '10');

      // format upper label tasks

      tasks.upperLabels().format(function () {

        return this.item.get('fullName');

      });

​

      // create tasks tooltip

      var tasksTooltip = tasks.tooltip();

      // tooltip settings

      tasksTooltip.separator(true).titleFormat(function () {

        // return fullName from data

        return this.item.get('fullName');

      });

​

      // set settings for critical tasks

      chart.criticalPath().tasks().stroke('1.5 #FF835C');

​

      // english alphabet array

      var alphabet = genCharArray('A', 'Z');

​

      // set settings for milestones

      var milestones = chart.milestones();

      // set milestones item size

      milestones.size('6.5%');

      milestones.labels().format(function () {

        if (this.creator) {

          return alphabet[--this.index];

        }

        return this.isStart ? 'Start' : 'Finish';

      });

      milestones

        .tooltip()

        .titleFormat(function () {

          return 'Milestone - ' + alphabet[--this.index];

        })

        .format(defaultMilestoneTooltipTextFormatter);

​

      // set settings for critical milestones

      var critMilestones = chart.criticalPath().milestones();

      critMilestones.color('#F18126');

      critMilestones.tooltip().titleFormat(function () {

        if (this.creator) {

          return 'Milestone - ' + alphabet[--this.index];

        }

        return this.isStart ? 'Milestone - Start' : 'Milestone - Finish';

      });

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});

​

function genCharArray(charA, charZ) {

  var alphabetArr = [];

  var i = charA.charCodeAt(0);

  var j = charZ.charCodeAt(0);

  for (; i <= j; ++i) {

    alphabetArr.push(String.fromCharCode(i));

  }

  return alphabetArr;

}

​

function defaultMilestoneTooltipTextFormatter() {

  var result = '';

  var i = 0;

  if (this.successors && this.successors.length) {

    result += 'Successors:';

    for (i = 0; i < this.successors.length; i++) {

      result += '\n - ' + this.successors[i].get('fullName');

    }

    if (this.predecessors && this.predecessors.length) result += '\n\n';

  }

  if (this.predecessors && this.predecessors.length) {

    result += 'Predecessors:';

    for (i = 0; i < this.predecessors.length; i++) {

      result += '\n - ' + this.predecessors[i].get('fullName');

    }

  }

  return result;

}