HTMLcopy
1
<button id="limit">Limit characters count</button>
2
<button id="showAll">Show all characters</button>
3
<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 limitBtn = document.getElementById('limit');
3
var showAllBtn = document.getElementById('showAll');
4
5
var chart = anychart.timeline();
6
7
var rangesData = [
8
['Spirit Mars rover', Date.UTC(2004,0,4), Date.UTC(2010,2,22)],
9
['Opportunity Mars rover', Date.UTC(2004,0,25), Date.UTC(2018,5,10)],
10
['Mars Science Laboratory (Curiosity rover)', Date.UTC(2012,7,6)]
11
];
12
13
var spiritMoments = [
14
[Date.UTC(2004,1,6), 'First intentional grinding of a rock'],
15
[Date.UTC(2005,2,9), 'Dust devil cleaned solar panels'],
16
[Date.UTC(2009,4,1), 'Stuck in the sand trap']
17
];
18
19
var oppyMoments = [
20
[Date.UTC(2004,1,17), 'Digs hole with his wheel'],
21
[Date.UTC(2005,0,14), 'Found meteorite'],
22
[Date.UTC(2006,8,26), 'Reached Victoria crater'],
23
[Date.UTC(2009,9,10), 'Found vulcanic rock'],
24
[Date.UTC(2014,6,28), 'Drove more than 40 kilometers'],
25
[Date.UTC(2018,5,1), 'Got caught in global sand storm']
26
];
27
28
var curiosityMoments = [
29
[Date.UTC(2012, 7, 22), 'Started driving'],
30
[Date.UTC(2014, 8, 1), 'Reached Mount Sharp'],
31
[Date.UTC(2018, 10, 26), 'Spotted shiny object']
32
];
33
34
var rangesSeriesRovers = chart.range(rangesData).name('Mars rovers');
35
var spiritMomentsSeries = chart.moment(spiritMoments).name('Spirit rover');
36
var oppyMomentsSeries = chart.moment(oppyMoments).name('Opportunity rover');
37
var curiosityMomentsSeries = chart.moment(curiosityMoments).name('Curiosity rover');
38
39
chart.container('container').draw();
40
41
limitBtn.addEventListener('click', function () {
42
// Limit characters count for series.
43
oppyMomentsSeries.labels().maxLength(10);
44
var value = oppyMomentsSeries.labels().maxLength();
45
chart.title('Max length property set as: ' + value);
46
});
47
48
showAllBtn.addEventListener('click', function () {
49
// Show all characters.
50
oppyMomentsSeries.labels().maxLength(null);
51
var value = oppyMomentsSeries.labels().maxLength();
52
chart.title('Max length property set as: ' + value);
53
});
54
});