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 rangeData1 = [
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 rangeData2 = [
11
["New Task 1", Date.UTC(2005,10,1), Date.UTC(2006,5,1)],
12
["New Task 2", Date.UTC(2006,5,15), Date.UTC(2006,11,1)]
13
];
14
15
var momentData1 = [
16
[Date.UTC(2004,2,21), "Meeting 1"],
17
[Date.UTC(2005,3,19), "Meeting 2"],
18
[Date.UTC(2006,1,1), "Meeting 3"]
19
];
20
21
var momentData2 = [
22
[Date.UTC(2004,5,12), "Training 1"],
23
[Date.UTC(2005,5,1), "Training 2"],
24
[Date.UTC(2006,1,26), "Training 3"]
25
];
26
27
// create a chart
28
var chart = anychart.timeline();
29
30
// prevent zooming the chart with the mouse wheel
31
chart.interactivity().zoomOnMouseWheel(false);
32
33
// create the first range series, set the data and name
34
var rangeSeries1 = chart.range(rangeData1);
35
rangeSeries1.name("Tasks");
36
37
// create the second range series, set the data and name
38
var rangeSeries2 = chart.range(rangeData2);
39
rangeSeries2.name("New Tasks");
40
41
// create the first moment series, set the data and name
42
var momentSeries1 = chart.moment(momentData1);
43
momentSeries1.name("Meetings");
44
45
// create the second moment series, set the data and name
46
var momentSeries2 = chart.moment(momentData2);
47
momentSeries2.name("Trainings");
48
49
// set the chart title
50
chart.title("Timeline Chart: Basic Sample");
51
52
// set the container id
53
chart.container("container");
54
55
// initiate drawing the chart
56
chart.draw();
57
});