GANTT Basic Sample | 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(){
​
    var rawData = [
      {
"name": "Activities",
"actualStart": Date.UTC(2007, 0, 25),
"actualEnd": Date.UTC(2007, 2, 14),
"children": [
  {
    "name": "Draft plan",
    "actualStart": Date.UTC(2007, 0, 25),
    "actualEnd": Date.UTC(2007, 1, 3)
  },
  {
    "name": "Board meeting",
    "actualStart": Date.UTC(2007, 1, 4),
    "actualEnd": Date.UTC(2007, 1, 4)
  },
  {
    "name": "Research option",
    "actualStart": Date.UTC(2007, 1, 4),
    "actualEnd": Date.UTC(2007, 1, 24)
  },
  {
    "name": "Final plan",
    "actualStart": Date.UTC(2007, 1, 24),
    "actualEnd": Date.UTC(2007, 2, 14)
  }
]
      }];
​
  // tree data settings
  var treeData = anychart.data.tree(rawData, anychart.enums.TreeFillingMethod.AS_TREE);
​
  // chart type
  var chart = anychart.ganttProject();
​
  // chart container
  chart.container("container");
​
  // set chart data
  chart.data(treeData);
​
  // initiate drawing
  chart.draw();
  
  // show all items 
  chart.fitAll();
​
});

Sample meta

AnyChart Documentation