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
var chart = anychart.timeline();
3
4
var rangesData = [
5
['Spirit Mars rover', Date.UTC(2004,0,4), Date.UTC(2010,2,22)],
6
['Opportunity Mars rover', Date.UTC(2004,0,25), Date.UTC(2018,5,10)],
7
['Mars Science Laboratory (Curiosity rover)', Date.UTC(2012,7,6)]
8
];
9
10
var spiritMoments = [
11
[Date.UTC(2004,1,6), 'First intentional grinding of a rock'],
12
[Date.UTC(2005,2,9), 'Dust devil cleaned solar panels'],
13
[Date.UTC(2009,4,1), 'Stuck in the sand trap']
14
];
15
16
var oppyMoments = [
17
[Date.UTC(2004,1,17), 'Digs hole with his wheel'],
18
[Date.UTC(2005,0,14), 'Found meteorite'],
19
[Date.UTC(2006,8,26), 'Reached Victoria crater'],
20
[Date.UTC(2009,9,10), 'Found vulcanic rock'],
21
[Date.UTC(2014,6,28), 'Drove more than 40 kilometers'],
22
[Date.UTC(2018,5,1), 'Got caught in global sand storm']
23
];
24
25
var curiosityMoments = [
26
[Date.UTC(2012, 7, 22), 'Started driving'],
27
[Date.UTC(2014, 8, 1), 'Reached Mount Sharp'],
28
[Date.UTC(2018, 10, 26), 'Spotted shiny object']
29
];
30
31
var rangesSeriesRovers = chart.range(rangesData).name('Mars rovers');
32
var spiritMomentsSeries = chart.moment(spiritMoments).name('Spirit rover');
33
var oppyMomentsSeries = chart.moment(oppyMoments).name('Opportunity rover');
34
var curiosityMomentsSeries = chart.moment(curiosityMoments).name('Curiosity rover');
35
36
//set scale
37
chart.scale({maximum: '2025/05/23'});
38
39
chart.container('container').draw();
40
});