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();

​

  // set data for the chart

  chart.data(treeData);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

​

  chart.fitAll();

});

function getData() {

  return [

    {"id": "1", "name": "Phase 1 - Strategic Plan", "progressValue": "14%", "actualStart": Date.UTC(2000, 1, 23), "actualEnd": Date.UTC(2000, 2, 27),

      'markers': [

{'value': Date.UTC(2000, 2, 1), 'type': "diagonalCross"},

{'value': Date.UTC(2000, 3, 1), 'type': "star4"}

      ]},

    {"id": "2", "name": "Self-Assessment", parent:"1", "progressValue": "25%", "actualStart": Date.UTC(2000, 1, 23), "actualEnd": Date.UTC(2000, 2, 1),

      'markers': [

{'value': Date.UTC(2000, 2, 10), 'type': "diagonalCross"}

    ]},

    {"id": "3", "name": "Define business vision", parent:"2", "progressValue": "0%", "actualStart": Date.UTC(2000, 1, 23), "actualEnd": Date.UTC(2000, 1, 24), "connectTo": "4", "connectorType": "FinishStart"},

    {"id": "4", "name": "Identify available skills, information and support", parent:"2", "progressValue": "0%", "actualStart": Date.UTC(2000, 1, 24), "actualEnd": Date.UTC(2000, 1, 25), "connectTo": "5", "connectorType": "FinishStart"},

    {"id": "5", "name": "Decide whether to proceed", parent:"2", "progressValue": "0%", "actualStart": Date.UTC(2000, 1, 27), "actualEnd": Date.UTC(2000, 1, 28), "connectTo": "7", "connectorType": "FinishStart"}

  ];

}