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 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, 9),

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

    },

    {

      "id": "2",

      "name": "Task 2",

      "parent": "1",

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

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

      "connectorType": "FinishStart",

      "connectTo": "3",

       "connector": {

    "stroke":

    {

       "keys": [".1 red", ".5 green", ".9 blue"],

       "dash": "3 2"

    }

}

    },

    {

      "id": "3",

      "name": "Task 3",

      "parent": "1",

      "actualStart": Date.UTC(2008, 7, 14),

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

      "connectorType": "StartStart",

      "connectTo": "4",

      "connector": {

    "stroke": {color: "red"},

    "fill": {"color": "#FF0000"}

}

    },

    {

      "id": "4",

      "name": "Task 4",

      "parent": "1",

      "actualStart": Date.UTC(2008, 7, 15),

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

      "connectorType": "FinishFinish",

      "connectTo": "3",

      "connector": {

    "stroke": {color: "#3300CC .2"},

    "fill": {"color": "6600CC .5"}

}

    }

    ]

}