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
// set the range series data
2
function rangeData() {
3
return [
4
{
5
name: "Childhood and Education",
6
start: "1971/06/28",
7
end: "1995/09/01",
8
fill: "#00a8e0 0.5",
9
stroke: "#00a8e0"
10
},
11
{
12
name: "Entrepreneur Journey",
13
start: "1983/06/28",
14
end: "2002/03/13",
15
fill: "#1c4598 0.5",
16
stroke: "#1c4598"
17
},
18
{
19
name: "Making of Tycoon",
20
start: "2002/03/14",
21
end: "2010/06/28",
22
fill: "#a05e9c 0.6",
23
stroke: "#a05e9c"
24
},
25
{
26
name: "Rise of Tycoon",
27
start: "2010/06/29",
28
end: "2030/01/01",
29
fill: "#6e4c82 0.65",
30
stroke: "#6e4c82"
31
}
32
];
33
}
34
35
// set the moment series data
36
function momentData() {
37
return [
38
["1971/06/28", "Elon Musk was born in South Africa"],
39
["1981/06/28", "Began to learn computer programming on his own"],
40
["1983/06/28", "Sold the code of his game Blastar for $500"],
41
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
42
["1992/09/01", "Transferred to the University of Pennsylvania"],
43
["1995/06/01", "Received bachelor's degrees in physics and economics"],
44
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
45
["1995/11/06", "Founded Zip2 with his brother"],
46
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
47
["1999/03/01", "Co-founded X.com"],
48
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
49
["2001/01/01", "Started conceptualizing Mars Oasis"],
50
["2002/03/14", "Founded SpaceX & became its CEO"],
51
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
52
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
53
["2006/01/01", "SpaceX started to get NASA contracts"],
54
["2008/10/01", "Became CEO at Tesla"],
55
["2010/06/29", "Tesla's first IPO"],
56
["2015/12/11", "Co-founded OpenAI"],
57
["2016/07/01", "Co-founded Neuralink"],
58
["2018/02/21", "Resigned his board seat at OpenAI"],
59
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
60
["2022/04/13", "Made an offer to buy Twitter"],
61
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
62
];
63
}
64
65
anychart.onDocumentReady(function () {
66
67
// create a timeline chart
68
let chart = anychart.timeline();
69
70
// create a range series
71
let rangeSeries = chart.range(rangeData());
72
73
// create a moment series
74
let momentSeries = chart.moment(momentData());
75
76
// configure the range series label settings
77
rangeSeries
78
.labels()
79
.useHtml(true)
80
.fontColor("#fff")
81
.format(
82
'{%name}<br><span style="font-size: 85%">{%start}{dateTimeFormat:YYYY}–{%end}{dateTimeFormat:YYYY}</span>'
83
);
84
85
// customize the moment series marker
86
momentSeries.normal().markers().fill("#ffdd0e");
87
momentSeries.normal().markers().stroke("#e9ae0b");
88
89
// set the range series bar height
90
rangeSeries.height(50);
91
92
// format the range series tooltip
93
let rangeTooltipFormat =
94
"<span style='font-weight:600;font-size:10pt'>" +
95
"{%name}</span><br><br>From " +
96
"{%start}{dateTimeFormat:YYYY} to " +
97
"{%end}{dateTimeFormat:YYYY}";
98
rangeSeries.tooltip().useHtml(true);
99
rangeSeries.tooltip().format(rangeTooltipFormat);
100
rangeSeries.tooltip().title().enabled(false);
101
rangeSeries.tooltip().separator().enabled(false);
102
103
// format the moment series tooltip
104
let momentTooltipFormat =
105
"<span>{%x}{dateTimeFormat: MMMM YYYY}</span>";
106
momentSeries.tooltip().useHtml(true);
107
momentSeries.tooltip().format(momentTooltipFormat);
108
momentSeries.tooltip().title().enabled(false);
109
momentSeries.tooltip().separator().enabled(false);
110
111
// set the chart title
112
chart
113
.title()
114
.enabled(true)
115
.useHtml(true)
116
.text(
117
'<span style = "color: #e12026; font-size:20px;">Timeline of Elon Musk</span><br/>' +
118
'<span style="font-size: 16px;">Marking some of the most important professional milestones from 1971 to 2022</span>'
119
);
120
121
// enable the scroller
122
chart.scroller().enabled(true);
123
124
// set the chart container id
125
chart.container("container");
126
127
// draw the chart
128
chart.draw();
129
130
});