Planned-vs-Actual 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-gantt.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/dark_blue.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 () {
	// set chart theme
anychart.theme('darkBlue');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/gantt-charts/planned-vs-actual-chart/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/gantt-charts/planned-vs-actual-chart/data.json',
        function (data) {
          // create data tree
          var treeData = anychart.data.tree(data, 'as-table');

          // create project gantt chart
          var chart = anychart.ganttProject();

          // set data for the chart
          chart.data(treeData);

          // set start splitter position settings
          chart.splitterPosition(460);

          // get chart data grid link to set column settings
          var dataGrid = chart.dataGrid();

          // set first column settings
          dataGrid.column(0).labels({ hAlign: 'center' });

          // set second column settings
          dataGrid
            .column(1)
            .width(200)
            .labelsOverrider(labelTextSettingsFormatter);

          // set third column settings
          dataGrid
            .column(2)
            .title('Baseline Start')
            .width(100)
            .labelsOverrider(labelTextSettingsFormatter)
            .labels()
            .format(thirdColumnTextFormatter);

          // set fourth column settings
          dataGrid
            .column(3)
            .title('Baseline End')
            .width(100)
            .labelsOverrider(labelTextSettingsFormatter)
            .labels()
            .format(fourthColumnTextFormatter);

          var timeline = chart.getTimeline();

          // place baseline on the top of row
          timeline.baselines().above(true);

          // enable milestones preview
          timeline.milestones().preview().enabled(true);
          timeline.baselineMilestones().preview().enabled(true);

          // set container id for the chart
          chart.container('container');

          // initiate chart drawing
          chart.draw();

          // zoom chart to specified date
          chart.zoomTo(Date.UTC(2010, 0, 8, 15), Date.UTC(2010, 3, 25, 20));
        }
      );
    });

    // add bold and italic text settings to all parent items
    function labelTextSettingsFormatter(label, dataItem) {
      if (dataItem.numChildren()) {
        label.fontWeight('bold').fontStyle('italic');
      }
    }

    // do pretty formatting for dates in third column
    function thirdColumnTextFormatter(data) {
      var field = data.baselineStart;

      // format base line text
      if (field) {
        var baselineStart = new Date(field);
        return (
          formatDate(baselineStart.getUTCMonth() + 1) +
          '/' +
          formatDate(baselineStart.getUTCDate()) +
          '/' +
          baselineStart.getUTCFullYear() +
          ' ' +
          formatDate(baselineStart.getUTCHours()) +
          ':' +
          formatDate(baselineStart.getUTCMinutes())
        );
      }
      // format milestone text
      var actualStart = data.item.get('actualStart');
      var actualEnd = data.item.get('actualEnd');
      if (actualStart === actualEnd || (actualStart && !actualEnd)) {
        var start = new Date(actualStart);
        return (
          formatDate(start.getUTCMonth() + 1) +
          '/' +
          formatDate(start.getUTCDate()) +
          '/' +
          start.getUTCFullYear() +
          ' ' +
          formatDate(start.getUTCHours()) +
          ':' +
          formatDate(start.getUTCMinutes())
        );
      }
      return '';
    }

    // do pretty formatting for dates in fourth column
    function fourthColumnTextFormatter(item) {
      var field = item.baselineEnd;
      if (field) {
        var baselineEnd = new Date(field);
        return (
          formatDate(baselineEnd.getUTCMonth() + 1) +
          '/' +
          formatDate(baselineEnd.getUTCDate()) +
          '/' +
          baselineEnd.getUTCFullYear() +
          ' ' +
          formatDate(baselineEnd.getUTCHours()) +
          ':' +
          formatDate(baselineEnd.getUTCMinutes())
        );
      }
      return '';
    }

    // do pretty formatting for passed date unit
    function formatDate(dateUnit) {
      if (dateUnit < 10) dateUnit = '0' + dateUnit;
      return dateUnit + '';
    }
  
</script>
</body>
</html>
Warning!

Planned-vs-Actual Chart

Planned-vs-Actual Chart
