samples | Documentation | AnyChart Playground

HTMLcopy

 
<button id="scrollToValue" onclick="scrollToValue()">Scroll to Value</button>
<label>value: <input id="valueInput" value="110"></label>
<button id="scrollToRowButton" onclick="scrollToRow()">Scroll To Row</button>
<button id="scrollToRowButton" onclick="scrollToRowEnd()">Scroll to Row (End)</button>
<label>index: <input id="indexInput" type="number" min="0" max="8" value="6"></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;
}
input {
    width: 30px;
}
#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
    var treeData = anychart.data.tree(data, "as-tree");
​
    // create a chart
    chart = anychart.ganttProject();
    
    // set the data
    chart.data(treeData);
​
    // set the row height
    chart.defaultRowHeight(35);
​
    // set the header height
    chart.headerHeight(105);
​
    // 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();
});
​
// scroll the chart to the given value
function scrollToValue() {
  var value = document.getElementById("valueInput").value;
  chart.scrollTo(value);
}
​
// scroll the chart to the given row
function scrollToRow() {
  var index = document.getElementById("indexInput").value;
  chart.scrollToRow(index);
}
​
// scroll the chart to the given row
function scrollToRowEnd() {
  var index = document.getElementById("indexInput").value;
  chart.scrollToEnd(index);
}

Sample meta

AnyChart Documentation