samples | Documentation | AnyChart Playground

HTMLcopy

 
<label for="monthSelect">Fiscal Year - Starting Month: </label>
<select id="monthSelect" onchange="fiscalYear()">
    <option value="1" selected>1 / January</option>
    <option value="2">2 / February</option>
    <option value="3">3 / March</option>  
    <option value="4">4 / April</option>
    <option value="5">5 / May</option> 
    <option value="6">6 / June</option> 
    <option value="7">7 / July</option> 
    <option value="8">8 / August</option> 
    <option value="9">9 / September</option> 
    <option value="10">10 / October</option> 
    <option value="11">11 / November</option>
    <option value="12">12 / December</option>   
</select>
<div id="container"></div>

CSScopy

 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
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-10",
        actualEnd: "2018-12-05",
        children: [
          {
            id: "1_1",
            name: "Analysis",
            actualStart: "2018-01-10",
            actualEnd: "2018-04-01"
          },
          {
            id: "1_2",
            name: "Design",
            actualStart: "2018-04-02",
            actualEnd: "2018-07-01"
          },
          {
            id: "1_3",
            name: "Meeting",
            actualStart: "2018-07-02",
            actualEnd: "2018-07-02"
          },
          {
            id: "1_4",
            name: "Implementation",
            actualStart: "2018-07-03",
            actualEnd: "2018-10-01"
          },
          {
            id: "1_5",
            name: "Testing",
            actualStart: "2018-10-02",
            actualEnd: "2018-12-05"
          }
      ]}
    ];
    
    // 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 maximum value of the scale
    chart.getTimeline().scale().maximum("2018-12-31");
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
​
    // fit elements to the width of the timeline
    chart.fitAll();
});
​
// set the starting month of the fiscal year
function fiscalYear() {
  var month = document.getElementById("monthSelect").value;
  chart.getTimeline().scale().fiscalYearStartMonth(month);
}

Sample meta

AnyChart Documentation