html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  var newData = getNewData();

​

  //create data tree on our data

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

​

  //create project gantt chart

  var chart = anychart.ganttProject();

  chart.title('Click on the row and change the title');

​

  //set container id for the chart

  chart.container('container');

​

  //set data for the chart

  chart.data(treeData);

​

  //set start splitter position settings

  chart.splitterPosition(200);

​

  //get chart data grid link to set column settings

  var dataGrid = chart.dataGrid();

​

  //set first column settings

  var firstColumn = dataGrid.column(1);

  firstColumn.title('System Engineering');

  firstColumn.width(140);

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

  firstColumn.format(function(item) {

    return item.get('name');

  });

  firstColumn.cellTextSettingsOverrider(labelTextSettingsOverrider);

​

​

  //initiate chart drawing

  chart.draw();

​

  chart.zoomTo(Date.UTC(2008, 0, 31, 1, 36), Date.UTC(2008, 1, 15, 10, 3));

​

  //--------------------------------------------------

  // External events

  //--------------------------------------------------

  chart.listen(anychart.enums.EventType.ROW_CLICK, function(e) {

    msg = anychart.enums.EventType.ROW_CLICK + ': ' + e['item'].get('name');   // create a string from the information got by using listeners that will be placed in the Chart Title

    chart.title(msg);

  });

​

});

​

​

​

function labelTextSettingsOverrider(label, item) {

  switch (item.get('type')) {

    case 'main':

      label.fontColor('red').fontWeight('bold');

      break;

    case 'first':

      label.fontColor('green').fontWeight('bold');

      break;

    case 'second':

      label.fontColor('orange').fontWeight('bold');

      break;

  }

}

​

​

function getNewData() {

  return [

    {

      'id': '1',

      'name': 'Project Management',

      'rowHeight': 22,

      'collapsed': false,

      'type': 'main'

    },

    {

      'id': '2',

      'name': 'Design and engineer',

      'parent': '1',

      'type': 'first',

      'rowHeight': 30,

      'progressValue': '80%',

      'actualStart': Date.UTC(2008, 0, 30, 16, 0),

      'actualEnd': Date.UTC(2008, 1, 4, 14, 18),

      'connectTo': '3',

      'connectorType': 'FinishStart'

    },

    {

      'id': '3',

      'name': 'Obtain permits',

      'parent': '1',

      'type': 'second',

      'rowHeight': 30,

      'progressValue': '20%',

      'actualStart': Date.UTC(2008, 0, 31, 0, 47),

      'actualEnd': Date.UTC(2008, 1, 5, 14, 18),

      'connectTo': '5',

      'connectorType': 'FinishStart'

    },

    {

      'id': '4',

      'name': 'Structural installation',

      'rowHeight': 22,

      'progressValue': '50%',

      'collapsed': true,

      'type': 'main'

    },

    {

      'id': '5',

      'name': 'Install roof attachments',

      'parent': '4',

      'type': 'first',

      'rowHeight': 30,

      'progressValue': '30%',

      'actualStart': Date.UTC(2008, 1, 5, 14, 18),

      'actualEnd': Date.UTC(2008, 1, 7, 14, 18),

      'connectTo': '6',

      'connectorType': 'FinishStart'

    },

    {

      'id': '6',

      'name': 'Assemble racking',

      'parent': '4',

      'type': 'second',

      'rowHeight': 30,

      'progressValue': '10%',

      'actualStart': Date.UTC(2008, 1, 6, 0, 47),

      'actualEnd': Date.UTC(2008, 1, 10, 14, 18)

    }

​

  ];

}