GANTT Chart 04 | samples | Documentation | AnyChart Playground

HTMLcopy

 
<div id="container"></div>

CSScopy

 
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScriptAutocompletecopy

​x
 
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, 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)
    },
  ];
}

Sample meta

AnyChart Documentation