House Construction PERT Chart

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-pert.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/pert-charts/house-construction-pert-chart/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/pert-charts/house-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('11.65%')
            // set padding for chart
            .padding([25, 50, 0, 50]);

          // get duration project
          var duration = Math.ceil(chart.getStat('pertChartProjectDuration'));
          // get deviation project
          var deviation = Math.ceil(
            chart.getStat('pertChartCriticalPathStandardDeviation')
          );

          // set title text
          chart
            .title()
            .enabled(true)
            .useHtml(true)
            .padding([0, 0, 35, 0])
            .text(
              'House Construction PERT Chart' +
              '<br>Project duration: ' +
              duration +
              '&plusmn;' +
              deviation +
              ' days'
            );

          // set settings for tasks
          var tasks = chart.tasks();
          // format upper label tasks
          tasks.upperLabels().format(function () {
            return this.item.get('fullName');
          });
          // format lower label tasks
          tasks.lowerLabels().format(function () {
            // format time for tasks
            return timeTask(this.duration);
          });

          // 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 milestones
          var milestones = chart.milestones();
          // set milestones color
          milestones
            .color('#27959F')
            // set milestones item size
            .size('6.5%');
          // hover fill color for milestones item
          milestones.hovered().fill(function () {
            return anychart.color.lighten(this.sourceColor, 0.25);
          });
          milestones.tooltip().format(defuaultMilesoneTooltipTextFormatter);

          // set settings for critical milestones
          chart
            .criticalPath()
            .milestones()
            // set shape
            .shape('rhombus')
            // set color
            .color('#E24B26');

          // set container id for the chart
          chart.container('container');
          // initiate chart drawing
          chart.draw();
        }
      );
    });

    function timeTask(duration) {
      var weeks = 0;
      var days = 0;
      var hours = 0;

      if (duration >= 7) {
        weeks = Math.floor(duration / 7);
        days = Math.floor(duration - weeks * 7);
        hours = Math.ceil(24 * (duration - weeks * 7 - days));
      } else {
        days = Math.floor(duration - weeks * 7);
        hours = Math.ceil(24 * (duration - weeks * 7 - days));
      }

      var weeksPart = weeks !== 0 ? 'w:' + weeks + ' ' : '';
      var daysPart = days !== 0 ? 'd:' + days + ' ' : '';
      var hoursPart = hours !== 0 ? 'h:' + hours + ' ' : '';

      return weeksPart + daysPart + hoursPart;
    }

    function defuaultMilesoneTooltipTextFormatter() {
      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;
    }
  
</script>
</body>
</html>
Warning!

House Construction PERT Chart

House Construction PERT Chart
