samples | Documentation | AnyChart Playground

HTMLcopy

 
<label id="titleLabel">Enable Live Edit For:</label>
<label for="dataGridCheckbox">Data Grid</label>
<input type="checkbox" id="dataGridCheckbox" onchange="editDataGrid()">
<label for="timelineCheckbox">Timeline</label>
<input type="checkbox" id="timelineCheckbox" onchange="editTimeline()">
<label for="periodsCheckbox">Periods</label>
<input type="checkbox" id="periodsCheckbox" onchange="editPeriods()">
<div id="container"></div>

CSScopy

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

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
    // create data
    var data = [
      {
        id: "1",
        name: "Server 1",
        periods: [
          {id:"1_1", start: "2018-01-05", end: "2018-01-25"},
          {id:"1_2", start: "2018-01-28", end: "2018-02-22"},
          {id:"1_3", start: "2018-03-03", end: "2018-03-25"}
      ]},
      {
        id: "2",
        name: "Server 2",
        periods: [
          {id: "2_1", start: "2018-01-07", end: "2018-02-15"},
          {id: "2_2", start: "2018-02-26", end: "2018-03-20"}
      ]},
      {
        id: "3",
        name: "Server 3",
        periods: [
          {id: "3_1", start: "2018-01-04", end: "2018-03-25"}
      ]}
    ];
​
    // create a data tree
    var treeData = anychart.data.tree(data, "as-tree");
​
    // create a chart
    chart = anychart.ganttResource(); 
    
    // set the data
    chart.data(treeData);  
​
    // configure the scale
    chart.getTimeline().scale().minimum("2018-01-01");
    chart.getTimeline().scale().maximum("2018-03-28");
    
    // disable timeline tooltips
    chart.getTimeline().tooltip(false);
​
    // disable labels of timeline elements
    chart.getTimeline().elements().labels(false);
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
​
    // fit elements to the width of the timeline
    chart.fitAll();
});
​
// allow / forbid editing the data grid
function editDataGrid() {
  if (document.getElementById("dataGridCheckbox").checked) { 
    chart.dataGrid().edit(true);
  } else {
    chart.dataGrid().edit(false);
  }
}
​
// allow / forbid editing the timeline
function editTimeline() {
  if (document.getElementById("timelineCheckbox").checked) { 
    chart.getTimeline().edit(true);
    chart.getTimeline().periods().edit(true);
    document.getElementById("periodsCheckbox").checked = true;
  } else {
    chart.getTimeline().edit(false);
    chart.getTimeline().periods().edit(false);
    document.getElementById("periodsCheckbox").checked = false;
​
  }
}
​
// allow / forbid editing periods
function editPeriods() {
  if (document.getElementById("periodsCheckbox").checked) { 
    chart.getTimeline().periods().edit(true);
  } else {
    chart.getTimeline().periods().edit(false);
  }
}

Sample meta

AnyChart Documentation