Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<button id="scrollToValue" onclick="scrollToValue()">Scroll to Value</button>2
<label>value: <input id="valueInput" value="110"></label>3
<button id="scrollToRowButton" onclick="scrollToRow()">Scroll To Row</button>4
<button id="scrollToRowButton" onclick="scrollToRowEnd()">Scroll to Row (End)</button>5
<label>index: <input id="indexInput" type="number" min="0" max="8" value="6"></label>6
<div id="container"></div>CSScopy
22
1
html, body {2
width: 100%;3
height: 100%;4
margin: 0;5
padding: 0;6
}7
button {8
margin: 10px 0 0 10px;9
}10
label {11
display: inline-block;12
margin: 10px 0 0 10px;13
}14
input {15
width: 30px;16
}17
#container {18
position: absolute;19
width: 100%;20
top: 40px;21
bottom: 0;22
}JavaScriptcopy
x
1
anychart.onDocumentReady(function () {2
3
// create data4
var data = [5
{6
id: "1",7
name: "Development",8
actualStart: "2018-01-25",9
actualEnd: "2018-03-10",10
children: [11
{12
id: "1_2",13
name: "Analysis",14
actualStart: "2018-01-25",15
actualEnd: "2018-02-08"16
},17
{18
id: "1_3",19
name: "Design",20
actualStart: "2018-02-04",21
actualEnd: "2018-02-14"22
},23
{24
id: "1_4",25
name: "Meeting",26
actualStart: "2018-02-15",27
actualEnd: "2018-02-15"28
},29
{30
id: "1_5",31
name: "Implementation",32
actualStart: "2018-02-15",33
actualEnd: "2018-02-27"34
},35
{36
id: "1_6",37
name: "Testing",38
actualStart: "2018-02-28",39
actualEnd: "2018-03-10"40
}41
]},42
{ 43
id: "2",44
name: "PR Campaign",45
actualStart: "2018-02-15",46
actualEnd: "2018-03-22",47
children: [48
{49
id: "2_1",50
name: "Planning",51
actualStart: "2018-02-15",52
actualEnd: "2018-03-10"53
},54
{55
id: "2_2",56
name: "Promoting",57
actualStart: "2018-03-11",58
actualEnd: "2018-03-22"59
}60
]}61
];62
63
// create a data tree64
var treeData = anychart.data.tree(data, "as-tree");65
66
// create a chart67
chart = anychart.ganttProject();68
69
// set the data70
chart.data(treeData);71
72
// set the row height73
chart.defaultRowHeight(35);74
75
// set the header height76
chart.headerHeight(105);77
78
// configure the scale79
chart.getTimeline().scale().maximum("2018-03-27");80
81
// set the container id82
chart.container("container");83
84
// initiate drawing the chart85
chart.draw();86
87
// fit elements to the width of the timeline88
chart.fitAll();89
});90
91
// scroll the chart to the given value92
function scrollToValue() {93
var value = document.getElementById("valueInput").value;94
chart.scrollTo(value);95
}96
97
// scroll the chart to the given row98
function scrollToRow() {99
var index = document.getElementById("indexInput").value;100
chart.scrollToRow(index);101
}102
103
// scroll the chart to the given row104
function scrollToRowEnd() {105
var index = document.getElementById("indexInput").value;106
chart.scrollToEnd(index);107
}