function onChartLoad() {
var centerX = 140,
centerY = 110,
path = [],
angle,
radius,
badgeColor = Highcharts.color(Highcharts.getOptions().colors[0])
.brighten(-0.2)
.get(),
spike,
empImage,
big5,
label,
left,
right,
years,
renderer;
if (this.chartWidth < 530) {
return;
}
for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
radius = spike ? 80 : 70;
path.push(
'L',
centerX + radius * Math.cos(angle),
centerY + radius * Math.sin(angle)
);
spike = !spike;
}
path[0] = 'M';
path.push('z');
this.renderer
.path(path)
.attr({
fill: badgeColor,
zIndex: 6
})
.add();
empImage = this.renderer
.path(path)
.attr({
zIndex: 7,
opacity: 0,
stroke: badgeColor,
'stroke-width': 1
})
.add();
var diff = (new Date().getTime() - new Date(2009, 10, 27).getTime()) / 1000;
diff /= 60 * 60 * 24;
var yearsSince = Math.abs(Math.round(diff / 365.25));
big5 = this.renderer
.text(yearsSince)
.attr({
zIndex: 6
})
.css({
color: 'white',
fontSize: '100px',
fontStyle: 'italic',
fontFamily: '"Brush Script MT", sans-serif'
})
.add();
big5.attr({
x: centerX - big5.getBBox().width / 2,
y: centerY + 14
});
label = this.renderer
.text('years and counting')
.attr({
zIndex: 6
})
.css({
color: '#FFFFFF',
fontSize: '12px'
})
.add();
left = centerX - label.getBBox().width / 2;
right = centerX + label.getBBox().width / 2;
label.attr({
x: left,
y: centerY + 44
});
left = centerX - 90;
right = centerX + 90;
this.renderer
.path([
'M',
left,
centerY + 30,
'L',
right,
centerY + 30,
right,
centerY + 50,
left,
centerY + 50,
'z',
'M',
left,
centerY + 40,
'L',
left - 20,
centerY + 40,
left - 10,
centerY + 50,
left - 20,
centerY + 60,
left + 10,
centerY + 60,
left,
centerY + 50,
left + 10,
centerY + 60,
left + 10,
centerY + 50,
left,
centerY + 50,
'z',
'M',
right,
centerY + 40,
'L',
right + 20,
centerY + 40,
right + 10,
centerY + 50,
right + 20,
centerY + 60,
right - 10,
centerY + 60,
right,
centerY + 50,
right - 10,
centerY + 60,
right - 10,
centerY + 50,
right,
centerY + 50,
'z'
])
.attr({
fill: badgeColor,
stroke: '#FFFFFF',
'stroke-width': 1,
zIndex: 5
})
.add();
years = this.renderer
.text('2009-' + new Date().getFullYear())
.attr({
zIndex: 6
})
.css({
color: '#FFFFFF',
fontStyle: 'italic',
fontSize: '10px'
})
.add();
years.attr({
x: centerX - years.getBBox().width / 2,
y: centerY + 62
});
renderer = this.renderer;
if (renderer.defs) {
this.get('employees').points.forEach(point => {
let pattern;
if (point.image) {
pattern = renderer
.createElement('pattern')
.attr({
id: 'pattern-' + point.image,
patternUnits: 'userSpaceOnUse',
width: 400,
height: 400
})
.add(renderer.defs);
renderer
.image(
'https://www.highcharts.com/images/employees2014/' +
point.image +
'.jpg',
centerX - 80,
centerY - 80,
160,
213
)
.add(pattern);
Highcharts.addEvent(point, 'mouseOver', function () {
empImage
.attr({
fill: 'url(#pattern-' + point.image + ')'
})
.animate({ opacity: 1 }, { duration: 500 });
});
Highcharts.addEvent(point, 'mouseOut', function () {
empImage.animate({ opacity: 0 }, { duration: 500 });
});
}
});
}
}
const employees = [
{ x: Date.UTC(2009, 10, 1), y: 1 },
{ x: Date.UTC(2010, 10, 20), y: 2 },
{ x: Date.UTC(2011, 3, 1), y: 3 },
{ x: Date.UTC(2011, 7, 1), y: 4 },
{ x: Date.UTC(2011, 7, 5), y: 5 },
{ x: Date.UTC(2012, 5, 1), y: 6 },
{ x: Date.UTC(2012, 8, 10), y: 5 },
{ x: Date.UTC(2012, 8, 15), y: 6 },
{ x: Date.UTC(2013, 7, 1), y: 7 },
{ x: Date.UTC(2013, 7, 20), y: 8 },
{ x: Date.UTC(2013, 9, 1), y: 9 },
{ x: Date.UTC(2014, 7, 8), y: 10 },
{ x: Date.UTC(2014, 10, 1), y: 11 },
{ x: Date.UTC(2015, 1, 1), y: 12 },
{ x: Date.UTC(2015, 4, 1), y: 13 },
{ x: Date.UTC(2015, 7, 1), y: 15 },
{ x: Date.UTC(2016, 0, 1), y: 16 },
{ x: Date.UTC(2016, 1, 1), y: 18 },
{ x: Date.UTC(2016, 4, 1), y: 17 },
{ x: Date.UTC(2016, 6, 1), y: 16 },
{ x: Date.UTC(2016, 7, 1), y: 19 },
{ x: Date.UTC(2016, 8, 1), y: 20 },
{ x: Date.UTC(2017, 0, 1), y: 21 },
{ x: Date.UTC(2017, 2, 1), y: 20 },
{ x: Date.UTC(2017, 7, 1), y: 19 },
{ x: Date.UTC(2017, 8, 1), y: 21 },
{ x: Date.UTC(2017, 10, 1), y: 20 },
{ x: Date.UTC(2018, 0, 1), y: 23 },
{ x: Date.UTC(2018, 7, 1), y: 26 },
{ x: Date.UTC(2019, 1, 1), y: 27 },
{ x: Date.UTC(2019, 2, 1), y: 28 },
{ x: Date.UTC(2019, 5, 1), y: 29 },
{ x: Date.UTC(2019, 7, 1), y: 31 },
{ x: Date.UTC(2020, 0, 1), y: 29 },
{ x: Date.UTC(2020, 1, 1), y: 28 },
{ x: Date.UTC(2020, 5, 1), y: 27 },
{ x: Date.UTC(2020, 6, 1), y: 26 },
{ x: Date.UTC(2020, 8, 1), y: 28 },
{ x: Date.UTC(2020, 9, 1), y: 29 },
{ x: Date.UTC(2020, 10, 1), y: 30 },
{ x: Date.UTC(2021, 0, 1), y: 31 },
{ x: Date.UTC(2021, 1, 1), y: 32 },
{ x: Date.UTC(2021, 2, 1), y: 33 },
{ x: Date.UTC(2021, 3, 1), y: 34 },
{ x: Date.UTC(2021, 5, 1), y: 33 },
{ x: Date.UTC(2021, 6, 1), y: 34 },
{ x: Date.UTC(2021, 8, 1), y: 33 },
{ x: Date.UTC(2021, 9, 1), y: 32 },
{ x: Date.UTC(2021, 10, 1), y: 33 },
{ x: Date.UTC(2021, 11, 1), y: 34 },
{ x: Date.UTC(2022, 1, 1), y: 35 },
{ x: Date.UTC(2022, 2, 1), y: 34 },
{ x: Date.UTC(2022, 4, 1), y: 36 },
{ x: Date.UTC(2022, 5, 1), y: 37 },
{ x: Date.UTC(2022, 6, 1), y: 36 },
{ x: Date.UTC(2022, 7, 1), y: 39 },
{ x: Date.UTC(2022, 8, 1), y: 38 },
{ x: Date.UTC(2022, 10, 1), y: 39 }
];
const options = {
chart: {
events: {
load: onChartLoad
}
},
xAxis: {
type: 'datetime',
minTickInterval: 365 * 24 * 36e5,
labels: {
align: 'left'
},
plotBands: [
{
from: Date.UTC(2009, 10, 27),
to: Date.UTC(2010, 11, 1),
color: '#EFFFFF',
label: {
text: '<em>Offices:</em><br>Torstein´s<br>basement',
style: {
color: '#999999'
},
y: 180
}
},
{
from: Date.UTC(2010, 11, 1),
to: Date.UTC(2013, 9, 1),
color: '#FFFFEF',
label: {
text: '<em>Offices:</em><br> Tomtebu',
style: {
color: '#999999'
},
y: 30
}
},
{
from: Date.UTC(2013, 9, 1),
to: Date.UTC(2016, 2, 1),
color: '#FFEFFF',
label: {
text: '<em>Offices:</em><br> VikØrsta',
style: {
color: '#999999'
},
y: 30
}
},
{
from: Date.UTC(2016, 2, 10),
to: Date.UTC(2022, 11, 30),
color: '#dff9e7',
label: {
text: '<em>Offices</em>:<br>Blix Hotel',
style: {
color: '#000'
},
y: 20
}
}
]
},
title: {
text: 'Highcharts and Highsoft timeline'
},
caption: {
text: 'An advanced demo showing a combination of various Highcharts features, including flags and plot bands. The chart shows how Highcharts and Highsoft has evolved over time, with number of employees, revenue, search popularity, office locations, and various events of interest.'
},
credits: {
enabled: false
},
tooltip: {
style: {
width: '250px'
}
},
yAxis: [
{
max: 100,
labels: {
enabled: false
},
title: {
text: ''
},
gridLineColor: 'rgba(0, 0, 0, 0.07)'
},
{
allowDecimals: false,
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Employees',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
gridLineWidth: 0
}
],
plotOptions: {
series: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2
},
fillOpacity: 0.5
},
flags: {
tooltip: {
xDateFormat: '%B %e, %Y'
},
accessibility: {
point: {
valueDescriptionFormat:
'{xDescription}. {point.title}: {point.text}.'
}
}
}
},
series: [
{
name: 'Revenue',
id: 'revenue',
type: 'area',
data: [
[1259622000000, 20],
[1262300400000, 18],
[1264978800000, 15],
[1267398000000, 19],
[1270072800000, 16],
[1272664800000, 16],
[1275343200000, 18],
[1277935200000, 16],
[1280613600000, 17],
[1283292000000, 20],
[1285884000000, 24],
[1288566000000, 19],
[1291158000000, 22],
[1293836400000, 20],
[1296514800000, 17],
[1298934000000, 21],
[1301608800000, 17],
[1304200800000, 17],
[1306879200000, 20],
[1309471200000, 18],
[1312149600000, 19],
[1314828000000, 22],
[1317420000000, 26],
[1320102000000, 21],
[1322694000000, 24],
[1325372400000, 23],
[1328050800000, 19],
[1330556400000, 23],
[1333231200000, 19],
[1335823200000, 19],
[1338501600000, 22],
[1341093600000, 19],
[1343772000000, 21],
[1346450400000, 24],
[1349042400000, 29],
[1351724400000, 24],
[1354316400000, 27],
[1356994800000, 25],
[1359673200000, 23],
[1362092400000, 22],
[1364767200000, 28],
[1367359200000, 29],
[1370037600000, 30],
[1372629600000, 33],
[1375308000000, 36],
[1377986400000, 34],
[1380578400000, 37],
[1383260400000, 36],
[1385852400000, 33],
[1388530800000, 31],
[1391209200000, 35],
[1393628400000, 29],
[1396303200000, 38],
[1398895200000, 31],
[1401573600000, 38],
[1404165600000, 33],
[1406844000000, 35],
[1409522400000, 35],
[1412114400000, 48],
[1414796400000, 54],
[1417388400000, 46],
[1420066800000, 65],
[1422745200000, 48],
[1425164400000, 47],
[1427839200000, 70],
[1430431200000, 53],
[1433109600000, 43],
[1435701600000, 60],
[1438380000000, 58],
[1441058400000, 53],
[1443650400000, 67],
[1446332400000, 81],
[1448924400000, 63],
[1451602800000, 65],
[1454281200000, 56],
[1456786800000, 58],
[1459461600000, 71],
[1462053600000, 57],
[1464732000000, 59],
[1467324000000, 59],
[1470002400000, 60],
[1472680800000, 72],
[1475272800000, 63],
[1477954800000, 69],
[1480546800000, 70],
[1483225200000, 68],
[1485903600000, 43],
[1488322800000, 51],
[1490997600000, 70],
[1493589600000, 56],
[1496268000000, 53],
[1498860000000, 65],
[1501538400000, 48],
[1504216800000, 80],
[1506808800000, 44],
[1509490800000, 70],
[1512082800000, 62],
[1514761200000, 72],
[1517439600000, 56],
[1519858800000, 46],
[1522533600000, 77],
[1525125600000, 61],
[1527804000000, 72],
[1530396000000, 65],
[1533074400000, 48],
[1535752800000, 51],
[1538344800000, 59],
[1541026800000, 71],
[1543618800000, 77],
[1546297200000, 64],
[1548975600000, 67],
[1551394800000, 62],
[1554069600000, 78],
[1556661600000, 63],
[1559340000000, 82],
[1561932000000, 62],
[1564610400000, 77],
[1567288800000, 67],
[1569880800000, 56],
[1572480000000, 78],
[1575072000000, 72],
[1577750400000, 68],
[1580428800000, 69],
[1582848000000, 65],
[1585612800000, 59],
[1588204800000, 84],
[1590883200000, 68],
[1593475200000, 58],
[1596153600000, 72],
[1598832000000, 55],
[1601424000000, 72],
[1604102400000, 77],
[1606694400000, 55],
[1609372800000, 60],
[1612051200000, 63],
[1614470400000, 55],
[1617148800000, 76],
[1619740800000, 53],
[1622419200000, 71],
[1625011200000, 62],
[1627689600000, 72],
[1630368000000, 56],
[1632960000000, 66],
[1635638400000, 72],
[1638230400000, 61],
[1640908800000, 60],
[1643587200000, 100],
[1646006400000, 64],
[1648684800000, 91],
[1651276800000, 47],
[1653955200000, 66],
[1656547200000, 79],
[1659225600000, 70],
[1661904000000, 61],
[1664496000000, 55],
[1667174400000, 73],
[1669766400000, 74],
[1672444800000, null]
],
tooltip: {
xDateFormat: '%B %Y',
valueSuffix: ' % of best month'
}
},
{
yAxis: 1,
name: 'Highsoft employees',
id: 'employees',
type: 'area',
step: 'left',
tooltip: {
headerFormat:
'<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
pointFormat: '{point.name}<br><b>{point.y}</b>',
valueSuffix: ' employees'
},
data: employees
}
]
};
if (Highcharts.Series.types.flags) {
options.series.push(
{
type: 'flags',
name: 'Cloud',
color: '#333333',
shape: 'squarepin',
y: -80,
data: [
{
x: Date.UTC(2014, 4, 1),
text: 'Highcharts Cloud Beta',
title: 'Cloud',
shape: 'squarepin'
}
],
showInLegend: false
},
{
type: 'flags',
name: 'Highmaps',
color: '#333333',
shape: 'squarepin',
y: -55,
data: [
{
x: Date.UTC(2014, 5, 13),
text: 'Highmaps version 1.0 released',
title: 'Maps'
}
],
showInLegend: false
},
{
type: 'flags',
name: 'Gantt',
color: '#333333',
shape: 'squarepin',
y: -55,
data: [
{
x: Date.UTC(2018, 9, 17),
text: 'Highcharts Gantt version 1.0 released',
title: 'Gantt'
}
],
showInLegend: false
},
{
type: 'flags',
name: 'Highcharts',
color: '#333333',
shape: 'circlepin',
data: [
{
x: Date.UTC(2009, 10, 27),
text: 'Highcharts version 1.0 released',
title: '1.0'
},
{
x: Date.UTC(2010, 6, 13),
text: 'Ported from canvas to SVG rendering',
title: '2.0'
},
{
x: Date.UTC(2010, 10, 23),
text: 'Dynamically resize and scale to text labels',
title: '2.1'
},
{
x: Date.UTC(2011, 9, 18),
text: 'Highcharts Stock version 1.0 released',
title: 'Stock',
shape: 'squarepin'
},
{
x: Date.UTC(2012, 7, 24),
text: 'Gauges, polar charts and range series',
title: '2.3'
},
{
x: Date.UTC(2013, 2, 22),
text: 'Multitouch support, more series types',
title: '3.0'
},
{
x: Date.UTC(2014, 3, 22),
text: '3D charts, heatmaps',
title: '4.0'
},
{
x: Date.UTC(2016, 8, 29),
text: 'Styled mode, responsive options, accessibility, chart.update',
title: '5.0'
},
{
x: Date.UTC(2017, 9, 4),
text: 'Annotations, Boost, Series labels, new series types',
title: '6.0'
},
{
x: Date.UTC(2018, 11, 11),
text: 'Sonification, TypeScript (beta), new series types',
title: '7.0'
},
{
x: Date.UTC(2019, 11, 10),
text: 'Accessibility, data sorting, marker clusters',
title: '8.0'
},
{
x: Date.UTC(2021, 1, 2),
text: 'Improved security, accessibility options, zoom by single touch',
title: '9.0'
},
{
x: Date.UTC(2022, 2, 7),
text: 'Bread crumbs, improved Boost pixel ratio, threshold alignment in charts with multiple axes',
title: '10.0'
}
],
showInLegend: false
},
{
type: 'flags',
name: 'Events',
color: '#333333',
fillColor: 'rgba(255,255,255,0.8)',
data: [
{
x: Date.UTC(2012, 10, 1),
text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway',
title: 'Award'
},
{
x: Date.UTC(2012, 11, 25),
text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.',
title: 'First book'
},
{
x: Date.UTC(2013, 4, 25),
text: 'Highsoft nominated Norway`s Startup of the Year',
title: 'Award'
},
{
x: Date.UTC(2014, 4, 25),
text: 'Highsoft nominated Best Startup in Nordic Startup Awards',
title: 'Award'
},
{
x: Date.UTC(2018, 11, 13),
text: 'Highsoft nominated Best Startup in Nordic Startup Awards',
title: 'Award'
},
{
x: Date.UTC(2017, 9, 20),
text: 'Highsoft nominated Best Startup in Nordic Startup Awards',
title: 'Award'
}
],
onSeries: 'revenue',
showInLegend: false
}
);
}
Highcharts.chart('container', options);