Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<button id="zoomInButton" onclick="zoomIn()">+</button>2
<button id="zoomOutButton" onclick="zoomOut()">-</button>3
<label>zoom factor: 2</label>4
<br>5
<button id="zoomToDatesButton" onclick="zoomToDates()">Zoom To Dates</button>6
<label>start date:</label>7
<label id="dateLabel1">03 February 2018</label>8
<label>end date: </label>9
<label id="dateLabel2">06 February 2018</label>10
<br>11
<button id="zoomToUnitsButton" onclick="zoomToUnits()">Zoom To Units</button>12
<label for="unitSelect">unit: </label>13
<select id="unitSelect">14
<option value="millisecond">millisecond</option> 15
<option value="second">second</option> 16
<option value="minute">minute</option>17
<option value="hour">hour</option>18
<option value="day">day</option>19
<option value="week" selected>week</option>20
<option value="third-of-month">third-of-month</option>21
<option value="month">month</option>22
<option value="quarter">quarter</option>23
<option value="semester">semester</option>24
<option value="year">year</option></select> 25
<label>count: <input id="countInput" value="2"></label>26
<label for="anchorSelect">anchor: </label>27
<select id="anchorSelect"> 28
<option value="first-date" selected>first-date</option>29
<option value="first-visible-date">first-visible-date</option> 30
<option value="last-date">last-date</option>31
<option value="last-visible-date">last-visible-date</option> 32
</select>33
<br>34
<div id="container"></div>CSScopy
37
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
width: 120px;10
}11
label {12
display: inline-block;13
margin: 10px 0 0 10px;14
}15
input {16
width: 30px;17
}18
#zoomInButton {19
width: 53px;20
}21
#zoomOutButton {22
width: 53px;23
}24
#dateLabel1 {25
margin: 0;26
font-style: italic;27
}28
#dateLabel2 {29
margin: 0;30
font-style: italic;31
}32
#container {33
position: absolute;34
width: 100%;35
top: 105px;36
bottom: 0;37
}JavaScriptcopy
x
1
anychart.onDocumentReady(function () {2
3
// create data4
var data = [5
{6
id: "1",7
name: "Development",8
actualStart: "2018-01-15",9
actualEnd: "2018-03-10",10
children: [11
{12
id: "1_1",13
name: "Analysis",14
actualStart: "2018-01-15",15
actualEnd: "2018-01-25"16
},17
{18
id: "1_2",19
name: "Design",20
actualStart: "2018-01-20",21
actualEnd: "2018-02-04"22
},23
{24
id: "1_3",25
name: "Meeting",26
actualStart: "2018-02-05",27
actualEnd: "2018-02-05"28
},29
{30
id: "1_4",31
name: "Implementation",32
actualStart: "2018-02-05",33
actualEnd: "2018-02-24"34
},35
{36
id: "1_5",37
name: "Testing",38
actualStart: "2018-02-25",39
actualEnd: "2018-03-10"40
}41
]}42
];43
44
// create a data tree45
var treeData = anychart.data.tree(data, "as-tree");46
47
// create a chart48
chart = anychart.ganttProject();49
50
// set the data51
chart.data(treeData);52
53
// configure the scale54
chart.getTimeline().scale().maximum("2018-03-15");55
56
// set the container id57
chart.container("container");58
59
// initiate drawing the chart60
chart.draw();61
62
// fit elements to the width of the timeline63
chart.fitAll();64
});65
66
// zoom the timeline in67
function zoomIn() {68
chart.zoomIn(2);69
}70
71
// zoom the timeline out72
function zoomOut() {73
chart.zoomOut(2);74
}75
76
// zoom the timeline to the given dates77
function zoomToDates() {78
chart.zoomTo(Date.UTC(2018, 1, 3), Date.UTC(2018, 1, 6));79
}80
81
// zoom the timeline to the given units82
function zoomToUnits() {83
var unit = document.getElementById("unitSelect").value;84
var count = document.getElementById("countInput").value;85
var anchor = document.getElementById("anchorSelect").value;86
chart.zoomTo(unit, count, anchor);87
}