HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
5
var rangeData = [
6
["Task 1", Date.UTC(2004,0,4), Date.UTC(2004,7,1)],
7
["Task 2", Date.UTC(2004,7,1), Date.UTC(2005,8,10)]
8
];
9
10
var momentData1 = [
11
[Date.UTC(2004,2,21), "Meeting 1"],
12
[Date.UTC(2005,3,19), "Meeting 2"]
13
];
14
15
var momentData2 = [
16
[Date.UTC(2004,5,12), "Training 1"],
17
[Date.UTC(2005,5,1), "Training 2"]
18
];
19
20
// create a chart
21
var chart = anychart.timeline();
22
23
// create a range series, set the data and name
24
var rangeSeries = chart.range(rangeData);
25
rangeSeries.name("Tasks");
26
27
// create the first moment series, set the data and name
28
var momentSeries1 = chart.moment(momentData1);
29
momentSeries1.name("Meetings");
30
31
// create the second moment series, set the data and name
32
var momentSeries2 = chart.moment(momentData2);
33
momentSeries2.name("Trainings");
34
35
chart.scale().zoomLevels([
36
[
37
{"unit": "week", count: 1},
38
{"unit": "month", count: 1},
39
{"unit": "quarter", count: 1}
40
]
41
]);
42
43
// set the chart title
44
chart.title("Timeline Chart: Scale (Zoom Levels)");
45
46
// set the container id
47
chart.container("container");
48
49
// initiate drawing the chart
50
chart.draw();
51
});