samples | Documentation | AnyChart Playground

HTMLcopy

 
<button id="zoomInButton" onclick="zoomIn()">+</button>
<button id="zoomOutButton" onclick="zoomOut()">-</button>
<label>zoom factor: 2</label>
<br>
<button id="zoomToDatesButton" onclick="zoomToDates()">Zoom To Dates</button>
<label>start date:</label>
<label id="dateLabel1">03 February 2018</label>
<label>end date: </label>
<label id="dateLabel2">06 February 2018</label>
<br>
<button id="zoomToUnitsButton" onclick="zoomToUnits()">Zoom To Units</button>
<label for="unitSelect">unit: </label>
<select id="unitSelect">
    <option value="millisecond">millisecond</option> 
    <option value="second">second</option> 
    <option value="minute">minute</option>
    <option value="hour">hour</option>
    <option value="day">day</option>
    <option value="week" selected>week</option>
    <option value="third-of-month">third-of-month</option>
    <option value="month">month</option>
    <option value="quarter">quarter</option>
    <option value="semester">semester</option>
    <option value="year">year</option></select>     
<label>count: <input id="countInput" value="2"></label>
<label for="anchorSelect">anchor: </label>
<select id="anchorSelect">  
    <option value="first-date" selected>first-date</option>
    <option value="first-visible-date">first-visible-date</option> 
    <option value="last-date">last-date</option>
    <option value="last-visible-date">last-visible-date</option>     
</select>
<br>
<div id="container"></div>

CSScopy

 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
button {
    margin: 10px 0 0 10px;
    width: 120px;
}
label {
    display: inline-block;
    margin: 10px 0 0 10px;
}
input {
    width: 30px;
}
#zoomInButton {
    width: 53px;
}
#zoomOutButton {
    width: 53px;
}
#dateLabel1 {
  margin: 0;
  font-style: italic;
}
#dateLabel2 {
  margin: 0;
  font-style: italic;
}
#container {
    position: absolute;
    width: 100%;
    top: 105px;
    bottom: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
    // create data
    var data = [
      {
        id: "1",
        name: "Development",
        actualStart: "2018-01-15",
        actualEnd: "2018-03-10",
        children: [
          {
            id: "1_1",
            name: "Analysis",
            actualStart: "2018-01-15",
            actualEnd: "2018-01-25"
          },
          {
            id: "1_2",
            name: "Design",
            actualStart: "2018-01-20",
            actualEnd: "2018-02-04"
          },
          {
            id: "1_3",
            name: "Meeting",
            actualStart: "2018-02-05",
            actualEnd: "2018-02-05"
          },
          {
            id: "1_4",
            name: "Implementation",
            actualStart: "2018-02-05",
            actualEnd: "2018-02-24"
          },
          {
            id: "1_5",
            name: "Testing",
            actualStart: "2018-02-25",
            actualEnd: "2018-03-10"
          }
      ]}
    ];
    
    // create a data tree
    var 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-15");
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
​
    // fit elements to the width of the timeline
    chart.fitAll();
});
​
// zoom the timeline in
function zoomIn() {
  chart.zoomIn(2);
}
​
// zoom the timeline out
function zoomOut() {
  chart.zoomOut(2);
}
​
// zoom the timeline to the given dates
function zoomToDates() {
  chart.zoomTo(Date.UTC(2018, 1, 3), Date.UTC(2018, 1, 6));
}
​
// zoom the timeline to the given units
function zoomToUnits() {
  var unit = document.getElementById("unitSelect").value;
  var count = document.getElementById("countInput").value;
  var anchor = document.getElementById("anchorSelect").value;
  chart.zoomTo(unit, count, anchor);
}