samples | Documentation | AnyChart Playground

HTMLcopy

 
<button id="collapseAllButton" onclick="collapseAll()">Collapse All</button>
<button id="expandAllButton" onclick="expandAll()">Expand All</button>
<button id="collapseTaskButton" onclick="collapseTask()">Collapse Task</button>
<button id="expandTaskButton" onclick="expandTask()">Expand Task</button>
<label for="idSelect">id: </label>
<select id="idSelect" onchange="updateNameLabel()">
    <option value="1">1</option>  
    <option value="2" selected>2</option>
</select>
<label id="nameLabel">(PR Campaign)</label>
<div id="container"></div>

CSScopy

 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
button {
    margin: 10px 0 0 10px;
}
label {
    display: inline-block;
    margin: 10px 0 0 10px;
}
#container {
    position: absolute;
    width: 100%;
    top: 40px;
    bottom: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
    // create data
    var data = [
      {
        id: "1",
        name: "Development",
        actualStart: "2018-01-25",
        actualEnd: "2018-03-10",
        children: [
          {
            id: "1_2",
            name: "Analysis",
            actualStart: "2018-01-25",
            actualEnd: "2018-02-08"
          },
          {
            id: "1_3",
            name: "Design",
            actualStart: "2018-02-04",
            actualEnd: "2018-02-14"
          },
          {
            id: "1_4",
            name: "Meeting",
            actualStart: "2018-02-15",
            actualEnd: "2018-02-15"
          },
          {
            id: "1_5",
            name: "Implementation",
            actualStart: "2018-02-15",
            actualEnd: "2018-02-27"
          },
          {
            id: "1_6",
            name: "Testing",
            actualStart: "2018-02-28",
            actualEnd: "2018-03-10"
          }
      ]},
      { 
        id: "2",
        name: "PR Campaign",
        actualStart: "2018-02-15",
        actualEnd: "2018-03-22",
        children: [
          {
            id: "2_1",
            name: "Planning",
            actualStart: "2018-02-15",
            actualEnd: "2018-03-10"
          },
          {
            id: "2_2",
            name: "Promoting",
            actualStart: "2018-03-11",
            actualEnd: "2018-03-22"
          }
      ]}
    ];
        
    // create a data tree
    treeData = anychart.data.tree(data, "as-tree");
​
    // create a chart
    chart = anychart.ganttProject();
    
    // set the data
    chart.data(treeData);
​
    // configure the scale
    chart.getTimeline().scale().maximum("2018-03-27");
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
​
    // fit elements to the width of the timeline
    chart.fitAll();
});
​
// collapse all tasks
function collapseAll() {
  chart.collapseAll();  
}
​
// expand all tasks
function expandAll() {
  chart.expandAll();  
}
​
// collapse the given task
function collapseTask() {
  var id = document.getElementById("idSelect").value;
  chart.collapseTask(id);  
}
​
// collapse the given task
function expandTask() {
  var id = document.getElementById("idSelect").value;
  chart.expandTask(id);  
}
​
// update the text of the label
function updateNameLabel() {
  var label = document.getElementById("nameLabel");
  var id = document.getElementById("idSelect").value;
  var item = treeData.search("id", id);
  var itemName = item.get("name");
  label.innerHTML = "(" + itemName + ")";
}

Sample meta

AnyChart Documentation