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-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 + '';

}