html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  //create data tree on our data

  var treeData = anychart.data.tree(getData(), anychart.enums.TreeFillingMethod.AS_TABLE);

​

  //create project gantt chart

  var chart = anychart.ganttProject();

​

  //swap actual and planned

  chart.getTimeline().baselineAbove(true);

  //set container id for the chart

  chart.container('container');

​

  //set data for the chart

  chart.data(treeData);

​

  //get chart data grid link to set column settings

  var dataGrid = chart.dataGrid();

​

  chart.splitterPosition(150);

​

  //set first column settings

  var firstColumn = dataGrid.column(0);

  firstColumn.cellTextSettings().hAlign('center');

  firstColumn.width(35);

​

​

  var secondColumn = dataGrid.column(1);

  secondColumn.cellTextSettings().hAlign('left');

  secondColumn.format(function(item) {

    return item.get('name');

  });

​

  //initiate chart drawing

  chart.draw();

​

  chart.fitAll();

​

});

​

function getData() {

  return [

    {

      'id': '1',

      'name': 'Task 1',

      'actualStart': Date.UTC(2008, 7, 5),

      'actualEnd': Date.UTC(2008, 7, 12),

      'baselineStart': Date.UTC(2008, 7, 6),

      'baselineEnd': Date.UTC(2008, 7, 10),

    },

    {

      'id': '2',

      'name': 'Task 2',

      'actualStart': Date.UTC(2008, 7, 9),

      'actualEnd': Date.UTC(2008, 7, 13),

      'baselineStart': Date.UTC(2008, 7, 6),

      'baselineEnd': Date.UTC(2008, 7, 10),

    },

    {

      'id': '3',

      'name': 'Task 3',

      'actualStart': Date.UTC(2008, 7, 11),

      'actualEnd': Date.UTC(2008, 7, 20),

      'baselineStart': Date.UTC(2008, 7, 9),

      'baselineEnd': Date.UTC(2008, 7, 19),

    },

    {

      'id': '4',

      'name': 'Task 4',

      'actualStart': Date.UTC(2008, 7, 8),

      'actualEnd': Date.UTC(2008, 7, 15),

      'baselineStart': Date.UTC(2008, 7, 6),

      'baselineEnd': Date.UTC(2008, 7, 12),

    },

    {

      'id': '5',

      'name': 'Task 5',

      'actualStart': Date.UTC(2008, 7, 7),

      'actualEnd': Date.UTC(2008, 7, 16),

      'baselineStart': Date.UTC(2008, 7, 5),

      'baselineEnd': Date.UTC(2008, 7, 13),

    },

    {

      'id': '6',

      'name': 'Task 6',

      'actualStart': Date.UTC(2008, 7, 13),

      'actualEnd': Date.UTC(2008, 7, 19),

      'baselineStart': Date.UTC(2008, 7, 11),

      'baselineEnd': Date.UTC(2008, 7, 16),

    }

  ];

}