1248 lines
25 KiB
JavaScript
1248 lines
25 KiB
JavaScript
|
$(function () {
|
|||
|
|
"use strict";
|
|||
|
|
// chart 1
|
|||
|
|
Highcharts.chart('chart1', {
|
|||
|
|
chart: {
|
|||
|
|
plotBackgroundColor: null,
|
|||
|
|
plotBorderWidth: null,
|
|||
|
|
plotShadow: false,
|
|||
|
|
type: 'pie',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Browser market shares in January, 2018'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|||
|
|
},
|
|||
|
|
accessibility: {
|
|||
|
|
point: {
|
|||
|
|
valueSuffix: '%'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
pie: {
|
|||
|
|
allowPointSelect: true,
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: true,
|
|||
|
|
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Brands',
|
|||
|
|
colorByPoint: true,
|
|||
|
|
data: [{
|
|||
|
|
name: 'Chrome',
|
|||
|
|
y: 61.41,
|
|||
|
|
sliced: true,
|
|||
|
|
selected: true
|
|||
|
|
}, {
|
|||
|
|
name: 'Internet Explorer',
|
|||
|
|
y: 11.84
|
|||
|
|
}, {
|
|||
|
|
name: 'Firefox',
|
|||
|
|
y: 10.85
|
|||
|
|
}, {
|
|||
|
|
name: 'Edge',
|
|||
|
|
y: 4.67
|
|||
|
|
}, {
|
|||
|
|
name: 'Safari',
|
|||
|
|
y: 4.18
|
|||
|
|
}, {
|
|||
|
|
name: 'Sogou Explorer',
|
|||
|
|
y: 1.64
|
|||
|
|
}, {
|
|||
|
|
name: 'Opera',
|
|||
|
|
y: 1.6
|
|||
|
|
}, {
|
|||
|
|
name: 'QQ',
|
|||
|
|
y: 1.2
|
|||
|
|
}, {
|
|||
|
|
name: 'Other',
|
|||
|
|
y: 2.61
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 2
|
|||
|
|
// Build the chart
|
|||
|
|
Highcharts.chart('chart2', {
|
|||
|
|
chart: {
|
|||
|
|
plotBackgroundColor: null,
|
|||
|
|
plotBorderWidth: null,
|
|||
|
|
plotShadow: false,
|
|||
|
|
type: 'pie',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Browser market shares in January, 2018'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|||
|
|
},
|
|||
|
|
accessibility: {
|
|||
|
|
point: {
|
|||
|
|
valueSuffix: '%'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
pie: {
|
|||
|
|
allowPointSelect: true,
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
showInLegend: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Brands',
|
|||
|
|
colorByPoint: true,
|
|||
|
|
data: [{
|
|||
|
|
name: 'Chrome',
|
|||
|
|
y: 61.41,
|
|||
|
|
sliced: true,
|
|||
|
|
selected: true
|
|||
|
|
}, {
|
|||
|
|
name: 'Internet Explorer',
|
|||
|
|
y: 11.84
|
|||
|
|
}, {
|
|||
|
|
name: 'Firefox',
|
|||
|
|
y: 10.85
|
|||
|
|
}, {
|
|||
|
|
name: 'Edge',
|
|||
|
|
y: 4.67
|
|||
|
|
}, {
|
|||
|
|
name: 'Safari',
|
|||
|
|
y: 4.18
|
|||
|
|
}, {
|
|||
|
|
name: 'Other',
|
|||
|
|
y: 7.05
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 3
|
|||
|
|
Highcharts.chart('chart3', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'variablepie',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Countries compared by population density and total area.'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
headerFormat: '',
|
|||
|
|
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' + 'Area (square km): <b>{point.y}</b><br/>' + 'Population density (people per square km): <b>{point.z}</b><br/>'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
minPointSize: 10,
|
|||
|
|
innerSize: '20%',
|
|||
|
|
zMin: 0,
|
|||
|
|
name: 'countries',
|
|||
|
|
data: [{
|
|||
|
|
name: 'Spain',
|
|||
|
|
y: 505370,
|
|||
|
|
z: 92.9
|
|||
|
|
}, {
|
|||
|
|
name: 'France',
|
|||
|
|
y: 551500,
|
|||
|
|
z: 118.7
|
|||
|
|
}, {
|
|||
|
|
name: 'Poland',
|
|||
|
|
y: 312685,
|
|||
|
|
z: 124.6
|
|||
|
|
}, {
|
|||
|
|
name: 'Czech Republic',
|
|||
|
|
y: 78867,
|
|||
|
|
z: 137.5
|
|||
|
|
}, {
|
|||
|
|
name: 'Italy',
|
|||
|
|
y: 301340,
|
|||
|
|
z: 201.8
|
|||
|
|
}, {
|
|||
|
|
name: 'Switzerland',
|
|||
|
|
y: 41277,
|
|||
|
|
z: 214.5
|
|||
|
|
}, {
|
|||
|
|
name: 'Germany',
|
|||
|
|
y: 357022,
|
|||
|
|
z: 235.6
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart4
|
|||
|
|
// Make monochrome colors
|
|||
|
|
var pieColors = (function () {
|
|||
|
|
var colors = [],
|
|||
|
|
base = Highcharts.getOptions().colors[0],
|
|||
|
|
i;
|
|||
|
|
for (i = 0; i < 10; i += 1) {
|
|||
|
|
// Start out with a darkened base color (negative brighten), and end
|
|||
|
|
// up with a much brighter color
|
|||
|
|
colors.push(Highcharts.color(base).brighten((i - 3) / 7).get());
|
|||
|
|
}
|
|||
|
|
return colors;
|
|||
|
|
}());
|
|||
|
|
// Build the chart
|
|||
|
|
Highcharts.chart('chart4', {
|
|||
|
|
chart: {
|
|||
|
|
plotBackgroundColor: null,
|
|||
|
|
plotBorderWidth: null,
|
|||
|
|
plotShadow: false,
|
|||
|
|
styledMode: true,
|
|||
|
|
type: 'pie'
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Browser market shares at a specific website, 2014'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|||
|
|
},
|
|||
|
|
accessibility: {
|
|||
|
|
point: {
|
|||
|
|
valueSuffix: '%'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
pie: {
|
|||
|
|
allowPointSelect: true,
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
colors: pieColors,
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: true,
|
|||
|
|
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
|
|||
|
|
distance: -50,
|
|||
|
|
filter: {
|
|||
|
|
property: 'percentage',
|
|||
|
|
operator: '>',
|
|||
|
|
value: 4
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Share',
|
|||
|
|
data: [{
|
|||
|
|
name: 'Chrome',
|
|||
|
|
y: 61.41
|
|||
|
|
}, {
|
|||
|
|
name: 'Internet Explorer',
|
|||
|
|
y: 11.84
|
|||
|
|
}, {
|
|||
|
|
name: 'Firefox',
|
|||
|
|
y: 10.85
|
|||
|
|
}, {
|
|||
|
|
name: 'Edge',
|
|||
|
|
y: 4.67
|
|||
|
|
}, {
|
|||
|
|
name: 'Safari',
|
|||
|
|
y: 4.18
|
|||
|
|
}, {
|
|||
|
|
name: 'Other',
|
|||
|
|
y: 7.05
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 5
|
|||
|
|
var colors = Highcharts.getOptions().colors,
|
|||
|
|
categories = ['Chrome', 'Firefox', 'Internet Explorer', 'Safari', 'Edge', 'Opera', 'Other'],
|
|||
|
|
data = [{
|
|||
|
|
y: 62.74,
|
|||
|
|
color: colors[2],
|
|||
|
|
drilldown: {
|
|||
|
|
name: 'Chrome',
|
|||
|
|
categories: ['Chrome v65.0', 'Chrome v64.0', 'Chrome v63.0', 'Chrome v62.0', 'Chrome v61.0', 'Chrome v60.0', 'Chrome v59.0', 'Chrome v58.0', 'Chrome v57.0', 'Chrome v56.0', 'Chrome v55.0', 'Chrome v54.0', 'Chrome v51.0', 'Chrome v49.0', 'Chrome v48.0', 'Chrome v47.0', 'Chrome v43.0', 'Chrome v29.0'],
|
|||
|
|
data: [
|
|||
|
|
0.1,
|
|||
|
|
1.3,
|
|||
|
|
53.02,
|
|||
|
|
1.4,
|
|||
|
|
0.88,
|
|||
|
|
0.56,
|
|||
|
|
0.45,
|
|||
|
|
0.49,
|
|||
|
|
0.32,
|
|||
|
|
0.29,
|
|||
|
|
0.79,
|
|||
|
|
0.18,
|
|||
|
|
0.13,
|
|||
|
|
2.16,
|
|||
|
|
0.13,
|
|||
|
|
0.11,
|
|||
|
|
0.17,
|
|||
|
|
0.26
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
y: 10.57,
|
|||
|
|
color: colors[1],
|
|||
|
|
drilldown: {
|
|||
|
|
name: 'Firefox',
|
|||
|
|
categories: ['Firefox v58.0', 'Firefox v57.0', 'Firefox v56.0', 'Firefox v55.0', 'Firefox v54.0', 'Firefox v52.0', 'Firefox v51.0', 'Firefox v50.0', 'Firefox v48.0', 'Firefox v47.0'],
|
|||
|
|
data: [
|
|||
|
|
1.02,
|
|||
|
|
7.36,
|
|||
|
|
0.35,
|
|||
|
|
0.11,
|
|||
|
|
0.1,
|
|||
|
|
0.95,
|
|||
|
|
0.15,
|
|||
|
|
0.1,
|
|||
|
|
0.31,
|
|||
|
|
0.12
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
y: 7.23,
|
|||
|
|
color: colors[0],
|
|||
|
|
drilldown: {
|
|||
|
|
name: 'Internet Explorer',
|
|||
|
|
categories: ['Internet Explorer v11.0', 'Internet Explorer v10.0', 'Internet Explorer v9.0', 'Internet Explorer v8.0'],
|
|||
|
|
data: [
|
|||
|
|
6.2,
|
|||
|
|
0.29,
|
|||
|
|
0.27,
|
|||
|
|
0.47
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
y: 5.58,
|
|||
|
|
color: colors[3],
|
|||
|
|
drilldown: {
|
|||
|
|
name: 'Safari',
|
|||
|
|
categories: ['Safari v11.0', 'Safari v10.1', 'Safari v10.0', 'Safari v9.1', 'Safari v9.0', 'Safari v5.1'],
|
|||
|
|
data: [
|
|||
|
|
3.39,
|
|||
|
|
0.96,
|
|||
|
|
0.36,
|
|||
|
|
0.54,
|
|||
|
|
0.13,
|
|||
|
|
0.2
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
y: 4.02,
|
|||
|
|
color: colors[5],
|
|||
|
|
drilldown: {
|
|||
|
|
name: 'Edge',
|
|||
|
|
categories: ['Edge v16', 'Edge v15', 'Edge v14', 'Edge v13'],
|
|||
|
|
data: [
|
|||
|
|
2.6,
|
|||
|
|
0.92,
|
|||
|
|
0.4,
|
|||
|
|
0.1
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
y: 1.92,
|
|||
|
|
color: colors[4],
|
|||
|
|
drilldown: {
|
|||
|
|
name: 'Opera',
|
|||
|
|
categories: ['Opera v50.0', 'Opera v49.0', 'Opera v12.1'],
|
|||
|
|
data: [
|
|||
|
|
0.96,
|
|||
|
|
0.82,
|
|||
|
|
0.14
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
y: 7.62,
|
|||
|
|
color: colors[6],
|
|||
|
|
drilldown: {
|
|||
|
|
name: 'Other',
|
|||
|
|
categories: ['Other'],
|
|||
|
|
data: [
|
|||
|
|
7.62
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
browserData = [],
|
|||
|
|
versionsData = [],
|
|||
|
|
i,
|
|||
|
|
j,
|
|||
|
|
dataLen = data.length,
|
|||
|
|
drillDataLen,
|
|||
|
|
brightness;
|
|||
|
|
// Build the data arrays
|
|||
|
|
for (i = 0; i < dataLen; i += 1) {
|
|||
|
|
// add browser data
|
|||
|
|
browserData.push({
|
|||
|
|
name: categories[i],
|
|||
|
|
y: data[i].y,
|
|||
|
|
color: data[i].color
|
|||
|
|
});
|
|||
|
|
// add version data
|
|||
|
|
drillDataLen = data[i].drilldown.data.length;
|
|||
|
|
for (j = 0; j < drillDataLen; j += 1) {
|
|||
|
|
brightness = 0.2 - (j / drillDataLen) / 5;
|
|||
|
|
versionsData.push({
|
|||
|
|
name: data[i].drilldown.categories[j],
|
|||
|
|
y: data[i].drilldown.data[j],
|
|||
|
|
color: Highcharts.color(data[i].color).brighten(brightness).get()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Create the chart
|
|||
|
|
Highcharts.chart('chart5', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'pie',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Browser market share, January, 2018'
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
text: 'Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
pie: {
|
|||
|
|
shadow: false,
|
|||
|
|
center: ['50%', '50%']
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
valueSuffix: '%'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Browsers',
|
|||
|
|
data: browserData,
|
|||
|
|
size: '60%',
|
|||
|
|
dataLabels: {
|
|||
|
|
formatter: function () {
|
|||
|
|
return this.y > 5 ? this.point.name : null;
|
|||
|
|
},
|
|||
|
|
color: '#ffffff',
|
|||
|
|
distance: -30
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
name: 'Versions',
|
|||
|
|
data: versionsData,
|
|||
|
|
size: '80%',
|
|||
|
|
innerSize: '60%',
|
|||
|
|
dataLabels: {
|
|||
|
|
formatter: function () {
|
|||
|
|
// display only if larger than 1
|
|||
|
|
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
id: 'versions'
|
|||
|
|
}],
|
|||
|
|
responsive: {
|
|||
|
|
rules: [{
|
|||
|
|
condition: {
|
|||
|
|
maxWidth: 400
|
|||
|
|
},
|
|||
|
|
chartOptions: {
|
|||
|
|
series: [{}, {
|
|||
|
|
id: 'versions',
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: false
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// chart 6
|
|||
|
|
Highcharts.chart('chart6', {
|
|||
|
|
chart: {
|
|||
|
|
plotBackgroundColor: null,
|
|||
|
|
plotBorderWidth: 0,
|
|||
|
|
styledMode: true,
|
|||
|
|
plotShadow: false
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Browser<br>shares<br>2017',
|
|||
|
|
align: 'center',
|
|||
|
|
verticalAlign: 'middle',
|
|||
|
|
y: 60
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|||
|
|
},
|
|||
|
|
accessibility: {
|
|||
|
|
point: {
|
|||
|
|
valueSuffix: '%'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
pie: {
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: true,
|
|||
|
|
distance: -50,
|
|||
|
|
style: {
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: 'white'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
startAngle: -90,
|
|||
|
|
endAngle: 90,
|
|||
|
|
center: ['50%', '75%'],
|
|||
|
|
size: '110%'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'pie',
|
|||
|
|
name: 'Browser share',
|
|||
|
|
innerSize: '50%',
|
|||
|
|
data: [
|
|||
|
|
['Chrome', 58.9],
|
|||
|
|
['Firefox', 13.29],
|
|||
|
|
['Internet Explorer', 13],
|
|||
|
|
['Edge', 3.78],
|
|||
|
|
['Safari', 3.42], {
|
|||
|
|
name: 'Other',
|
|||
|
|
y: 7.61,
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart7
|
|||
|
|
Highcharts.chart('chart7', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'bar',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Historic World Population by Region'
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
|
|||
|
|
title: {
|
|||
|
|
text: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
min: 0,
|
|||
|
|
title: {
|
|||
|
|
text: 'Population (millions)',
|
|||
|
|
align: 'high'
|
|||
|
|
},
|
|||
|
|
labels: {
|
|||
|
|
overflow: 'justify'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
valueSuffix: ' millions'
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
bar: {
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
layout: 'vertical',
|
|||
|
|
align: 'right',
|
|||
|
|
verticalAlign: 'top',
|
|||
|
|
x: -40,
|
|||
|
|
y: 80,
|
|||
|
|
floating: true,
|
|||
|
|
borderWidth: 1,
|
|||
|
|
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
|
|||
|
|
shadow: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Year 1800',
|
|||
|
|
data: [107, 31, 635, 203, 2]
|
|||
|
|
}, {
|
|||
|
|
name: 'Year 1900',
|
|||
|
|
data: [133, 156, 947, 408, 6]
|
|||
|
|
}, {
|
|||
|
|
name: 'Year 2000',
|
|||
|
|
data: [814, 841, 3714, 727, 31]
|
|||
|
|
}, {
|
|||
|
|
name: 'Year 2016',
|
|||
|
|
data: [1216, 1001, 4436, 738, 40]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 8
|
|||
|
|
Highcharts.chart('chart8', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'column',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Monthly Average Rainfall'
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
text: 'Source: WorldClimate.com'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|||
|
|
crosshair: true
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
min: 0,
|
|||
|
|
title: {
|
|||
|
|
text: 'Rainfall (mm)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
|||
|
|
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
|
|||
|
|
footerFormat: '</table>',
|
|||
|
|
shared: true,
|
|||
|
|
useHTML: true
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
column: {
|
|||
|
|
pointPadding: 0.2,
|
|||
|
|
borderWidth: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Tokyo',
|
|||
|
|
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
|
|||
|
|
}, {
|
|||
|
|
name: 'New York',
|
|||
|
|
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
|
|||
|
|
}, {
|
|||
|
|
name: 'London',
|
|||
|
|
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
|
|||
|
|
}, {
|
|||
|
|
name: 'Berlin',
|
|||
|
|
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 9
|
|||
|
|
Highcharts.chart('chart9', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'bar',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Stacked bar chart'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
min: 0,
|
|||
|
|
title: {
|
|||
|
|
text: 'Total fruit consumption'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
reversed: true
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
series: {
|
|||
|
|
stacking: 'normal'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'John',
|
|||
|
|
data: [5, 3, 4, 7, 2]
|
|||
|
|
}, {
|
|||
|
|
name: 'Jane',
|
|||
|
|
data: [2, 2, 3, 2, 1]
|
|||
|
|
}, {
|
|||
|
|
name: 'Joe',
|
|||
|
|
data: [3, 4, 4, 2, 5]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 10
|
|||
|
|
// Create the chart
|
|||
|
|
Highcharts.chart('chart10', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'column',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Browser market shares. January, 2018'
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
|
|||
|
|
},
|
|||
|
|
accessibility: {
|
|||
|
|
announceNewData: {
|
|||
|
|
enabled: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
title: {
|
|||
|
|
text: 'Total percent market share'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
series: {
|
|||
|
|
borderWidth: 0,
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: true,
|
|||
|
|
format: '{point.y:.1f}%'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
|
|||
|
|
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: "Browsers",
|
|||
|
|
colorByPoint: true,
|
|||
|
|
data: [{
|
|||
|
|
name: "Chrome",
|
|||
|
|
y: 62.74,
|
|||
|
|
drilldown: "Chrome"
|
|||
|
|
}, {
|
|||
|
|
name: "Firefox",
|
|||
|
|
y: 10.57,
|
|||
|
|
drilldown: "Firefox"
|
|||
|
|
}, {
|
|||
|
|
name: "Internet Explorer",
|
|||
|
|
y: 7.23,
|
|||
|
|
drilldown: "Internet Explorer"
|
|||
|
|
}, {
|
|||
|
|
name: "Safari",
|
|||
|
|
y: 5.58,
|
|||
|
|
drilldown: "Safari"
|
|||
|
|
}, {
|
|||
|
|
name: "Edge",
|
|||
|
|
y: 4.02,
|
|||
|
|
drilldown: "Edge"
|
|||
|
|
}, {
|
|||
|
|
name: "Opera",
|
|||
|
|
y: 1.92,
|
|||
|
|
drilldown: "Opera"
|
|||
|
|
}, {
|
|||
|
|
name: "Other",
|
|||
|
|
y: 7.62,
|
|||
|
|
drilldown: null
|
|||
|
|
}]
|
|||
|
|
}],
|
|||
|
|
drilldown: {
|
|||
|
|
series: [{
|
|||
|
|
name: "Chrome",
|
|||
|
|
id: "Chrome",
|
|||
|
|
data: [
|
|||
|
|
["v65.0",
|
|||
|
|
0.1
|
|||
|
|
],
|
|||
|
|
["v64.0",
|
|||
|
|
1.3
|
|||
|
|
],
|
|||
|
|
["v63.0",
|
|||
|
|
53.02
|
|||
|
|
],
|
|||
|
|
["v62.0",
|
|||
|
|
1.4
|
|||
|
|
],
|
|||
|
|
["v61.0",
|
|||
|
|
0.88
|
|||
|
|
],
|
|||
|
|
["v60.0",
|
|||
|
|
0.56
|
|||
|
|
],
|
|||
|
|
["v59.0",
|
|||
|
|
0.45
|
|||
|
|
],
|
|||
|
|
["v58.0",
|
|||
|
|
0.49
|
|||
|
|
],
|
|||
|
|
["v57.0",
|
|||
|
|
0.32
|
|||
|
|
],
|
|||
|
|
["v56.0",
|
|||
|
|
0.29
|
|||
|
|
],
|
|||
|
|
["v55.0",
|
|||
|
|
0.79
|
|||
|
|
],
|
|||
|
|
["v54.0",
|
|||
|
|
0.18
|
|||
|
|
],
|
|||
|
|
["v51.0",
|
|||
|
|
0.13
|
|||
|
|
],
|
|||
|
|
["v49.0",
|
|||
|
|
2.16
|
|||
|
|
],
|
|||
|
|
["v48.0",
|
|||
|
|
0.13
|
|||
|
|
],
|
|||
|
|
["v47.0",
|
|||
|
|
0.11
|
|||
|
|
],
|
|||
|
|
["v43.0",
|
|||
|
|
0.17
|
|||
|
|
],
|
|||
|
|
["v29.0",
|
|||
|
|
0.26
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
}, {
|
|||
|
|
name: "Firefox",
|
|||
|
|
id: "Firefox",
|
|||
|
|
data: [
|
|||
|
|
["v58.0",
|
|||
|
|
1.02
|
|||
|
|
],
|
|||
|
|
["v57.0",
|
|||
|
|
7.36
|
|||
|
|
],
|
|||
|
|
["v56.0",
|
|||
|
|
0.35
|
|||
|
|
],
|
|||
|
|
["v55.0",
|
|||
|
|
0.11
|
|||
|
|
],
|
|||
|
|
["v54.0",
|
|||
|
|
0.1
|
|||
|
|
],
|
|||
|
|
["v52.0",
|
|||
|
|
0.95
|
|||
|
|
],
|
|||
|
|
["v51.0",
|
|||
|
|
0.15
|
|||
|
|
],
|
|||
|
|
["v50.0",
|
|||
|
|
0.1
|
|||
|
|
],
|
|||
|
|
["v48.0",
|
|||
|
|
0.31
|
|||
|
|
],
|
|||
|
|
["v47.0",
|
|||
|
|
0.12
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
}, {
|
|||
|
|
name: "Internet Explorer",
|
|||
|
|
id: "Internet Explorer",
|
|||
|
|
data: [
|
|||
|
|
["v11.0",
|
|||
|
|
6.2
|
|||
|
|
],
|
|||
|
|
["v10.0",
|
|||
|
|
0.29
|
|||
|
|
],
|
|||
|
|
["v9.0",
|
|||
|
|
0.27
|
|||
|
|
],
|
|||
|
|
["v8.0",
|
|||
|
|
0.47
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
}, {
|
|||
|
|
name: "Safari",
|
|||
|
|
id: "Safari",
|
|||
|
|
data: [
|
|||
|
|
["v11.0",
|
|||
|
|
3.39
|
|||
|
|
],
|
|||
|
|
["v10.1",
|
|||
|
|
0.96
|
|||
|
|
],
|
|||
|
|
["v10.0",
|
|||
|
|
0.36
|
|||
|
|
],
|
|||
|
|
["v9.1",
|
|||
|
|
0.54
|
|||
|
|
],
|
|||
|
|
["v9.0",
|
|||
|
|
0.13
|
|||
|
|
],
|
|||
|
|
["v5.1",
|
|||
|
|
0.2
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
}, {
|
|||
|
|
name: "Edge",
|
|||
|
|
id: "Edge",
|
|||
|
|
data: [
|
|||
|
|
["v16",
|
|||
|
|
2.6
|
|||
|
|
],
|
|||
|
|
["v15",
|
|||
|
|
0.92
|
|||
|
|
],
|
|||
|
|
["v14",
|
|||
|
|
0.4
|
|||
|
|
],
|
|||
|
|
["v13",
|
|||
|
|
0.1
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
}, {
|
|||
|
|
name: "Opera",
|
|||
|
|
id: "Opera",
|
|||
|
|
data: [
|
|||
|
|
["v50.0",
|
|||
|
|
0.96
|
|||
|
|
],
|
|||
|
|
["v49.0",
|
|||
|
|
0.82
|
|||
|
|
],
|
|||
|
|
["v12.1",
|
|||
|
|
0.14
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// chart 11
|
|||
|
|
Highcharts.chart('chart11', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'area',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
accessibility: {
|
|||
|
|
description: 'Image description: An area chart compares the nuclear stockpiles of the USA and the USSR/Russia between 1945 and 2017. The number of nuclear weapons is plotted on the Y-axis and the years on the X-axis. The chart is interactive, and the year-on-year stockpile levels can be traced for each country. The US has a stockpile of 6 nuclear weapons at the dawn of the nuclear age in 1945. This number has gradually increased to 369 by 1950 when the USSR enters the arms race with 6 weapons. At this point, the US starts to rapidly build its stockpile culminating in 32,040 warheads by 1966 compared to the USSR’s 7,089. From this peak in 1966, the US stockpile gradually decreases as the USSR’s stockpile expands. By 1978 the USSR has closed the nuclear gap at 25,393. The USSR stockpile continues to grow until it reaches a peak of 45,000 in 1986 compared to the US arsenal of 24,401. From 1986, the nuclear stockpiles of both countries start to fall. By 2000, the numbers have fallen to 10,577 and 21,000 for the US and Russia, respectively. The decreases continue until 2017 at which point the US holds 4,018 weapons compared to Russia’s 4,500.'
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'US and USSR nuclear stockpiles'
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
text: 'Sources: <a href="https://thebulletin.org/2006/july/global-nuclear-stockpiles-1945-2006">' + 'thebulletin.org</a> & <a href="https://www.armscontrol.org/factsheets/Nuclearweaponswhohaswhat">' + 'armscontrol.org</a>'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
allowDecimals: false,
|
|||
|
|
labels: {
|
|||
|
|
formatter: function () {
|
|||
|
|
return this.value; // clean, unformatted number for year
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
accessibility: {
|
|||
|
|
rangeDescription: 'Range: 1940 to 2017.'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
title: {
|
|||
|
|
text: 'Nuclear weapon states'
|
|||
|
|
},
|
|||
|
|
labels: {
|
|||
|
|
formatter: function () {
|
|||
|
|
return this.value / 1000 + 'k';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
area: {
|
|||
|
|
pointStart: 1940,
|
|||
|
|
marker: {
|
|||
|
|
enabled: false,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
radius: 2,
|
|||
|
|
states: {
|
|||
|
|
hover: {
|
|||
|
|
enabled: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'USA',
|
|||
|
|
data: [
|
|||
|
|
null, null, null, null, null, 6, 11, 32, 110, 235,
|
|||
|
|
369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468,
|
|||
|
|
20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342,
|
|||
|
|
26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
|
|||
|
|
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380,
|
|||
|
|
21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824,
|
|||
|
|
10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326,
|
|||
|
|
5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018
|
|||
|
|
]
|
|||
|
|
}, {
|
|||
|
|
name: 'USSR/Russia',
|
|||
|
|
data: [null, null, null, null, null, null, null, null, null, null,
|
|||
|
|
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
|
|||
|
|
1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
|
|||
|
|
11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
|
|||
|
|
30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
|
|||
|
|
37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
|
|||
|
|
21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
|
|||
|
|
12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
|
|||
|
|
]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 12
|
|||
|
|
Highcharts.chart('chart12', {
|
|||
|
|
chart: {
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Combination chart'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
|
|||
|
|
},
|
|||
|
|
labels: {
|
|||
|
|
items: [{
|
|||
|
|
html: 'Total fruit consumption',
|
|||
|
|
style: {
|
|||
|
|
left: '50px',
|
|||
|
|
top: '18px',
|
|||
|
|
color: ( // theme
|
|||
|
|
Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) || 'black'
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'column',
|
|||
|
|
name: 'Jane',
|
|||
|
|
data: [3, 2, 1, 3, 4]
|
|||
|
|
}, {
|
|||
|
|
type: 'column',
|
|||
|
|
name: 'John',
|
|||
|
|
data: [2, 3, 5, 7, 6]
|
|||
|
|
}, {
|
|||
|
|
type: 'column',
|
|||
|
|
name: 'Joe',
|
|||
|
|
data: [4, 3, 3, 9, 0]
|
|||
|
|
}, {
|
|||
|
|
type: 'spline',
|
|||
|
|
name: 'Average',
|
|||
|
|
data: [3, 2.67, 3, 6.33, 3.33],
|
|||
|
|
marker: {
|
|||
|
|
lineWidth: 2,
|
|||
|
|
lineColor: Highcharts.getOptions().colors[3],
|
|||
|
|
fillColor: 'white'
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'pie',
|
|||
|
|
name: 'Total consumption',
|
|||
|
|
data: [{
|
|||
|
|
name: 'Jane',
|
|||
|
|
y: 13,
|
|||
|
|
color: Highcharts.getOptions().colors[0] // Jane's color
|
|||
|
|
}, {
|
|||
|
|
name: 'John',
|
|||
|
|
y: 23,
|
|||
|
|
color: Highcharts.getOptions().colors[1] // John's color
|
|||
|
|
}, {
|
|||
|
|
name: 'Joe',
|
|||
|
|
y: 19,
|
|||
|
|
color: Highcharts.getOptions().colors[2] // Joe's color
|
|||
|
|
}],
|
|||
|
|
center: [100, 80],
|
|||
|
|
size: 100,
|
|||
|
|
showInLegend: false,
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: false
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 13
|
|||
|
|
Highcharts.chart('chart13', {
|
|||
|
|
chart: {
|
|||
|
|
zoomType: 'xy',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Average Monthly Temperature and Rainfall in Tokyo'
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
text: 'Source: WorldClimate.com'
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|||
|
|
crosshair: true
|
|||
|
|
}],
|
|||
|
|
yAxis: [{ // Primary yAxis
|
|||
|
|
labels: {
|
|||
|
|
format: '{value}°C',
|
|||
|
|
style: {
|
|||
|
|
color: Highcharts.getOptions().colors[1]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Temperature',
|
|||
|
|
style: {
|
|||
|
|
color: Highcharts.getOptions().colors[1]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, { // Secondary yAxis
|
|||
|
|
title: {
|
|||
|
|
text: 'Rainfall',
|
|||
|
|
style: {
|
|||
|
|
color: Highcharts.getOptions().colors[0]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labels: {
|
|||
|
|
format: '{value} mm',
|
|||
|
|
style: {
|
|||
|
|
color: Highcharts.getOptions().colors[0]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
opposite: true
|
|||
|
|
}],
|
|||
|
|
tooltip: {
|
|||
|
|
shared: true
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
layout: 'vertical',
|
|||
|
|
align: 'left',
|
|||
|
|
x: 120,
|
|||
|
|
verticalAlign: 'top',
|
|||
|
|
y: 100,
|
|||
|
|
floating: true,
|
|||
|
|
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || // theme
|
|||
|
|
'rgba(255,255,255,0.25)'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'Rainfall',
|
|||
|
|
type: 'column',
|
|||
|
|
yAxis: 1,
|
|||
|
|
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
|||
|
|
tooltip: {
|
|||
|
|
valueSuffix: ' mm'
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
name: 'Temperature',
|
|||
|
|
type: 'spline',
|
|||
|
|
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
|||
|
|
tooltip: {
|
|||
|
|
valueSuffix: '°C'
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 14
|
|||
|
|
Highcharts.chart('chart14', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'column',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Column chart with negative values'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'John',
|
|||
|
|
data: [5, 3, 4, 7, 2]
|
|||
|
|
}, {
|
|||
|
|
name: 'Jane',
|
|||
|
|
data: [2, -2, -3, 2, 1]
|
|||
|
|
}, {
|
|||
|
|
name: 'Joe',
|
|||
|
|
data: [3, 4, 4, -2, 5]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
// chart 15
|
|||
|
|
Highcharts.chart('chart15', {
|
|||
|
|
chart: {
|
|||
|
|
type: 'column',
|
|||
|
|
styledMode: true
|
|||
|
|
},
|
|||
|
|
credits: {
|
|||
|
|
enabled: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: 'Stacked column chart'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
min: 0,
|
|||
|
|
title: {
|
|||
|
|
text: 'Total fruit consumption'
|
|||
|
|
},
|
|||
|
|
stackLabels: {
|
|||
|
|
enabled: true,
|
|||
|
|
style: {
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: ( // theme
|
|||
|
|
Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) || 'gray'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
align: 'right',
|
|||
|
|
x: -30,
|
|||
|
|
verticalAlign: 'top',
|
|||
|
|
y: 25,
|
|||
|
|
floating: true,
|
|||
|
|
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
|
|||
|
|
borderColor: '#CCC',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
shadow: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
headerFormat: '<b>{point.x}</b><br/>',
|
|||
|
|
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
|
|||
|
|
},
|
|||
|
|
plotOptions: {
|
|||
|
|
column: {
|
|||
|
|
stacking: 'normal',
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'John',
|
|||
|
|
data: [5, 3, 4, 7, 2]
|
|||
|
|
}, {
|
|||
|
|
name: 'Jane',
|
|||
|
|
data: [2, 2, 3, 2, 1]
|
|||
|
|
}, {
|
|||
|
|
name: 'Joe',
|
|||
|
|
data: [3, 4, 4, 2, 5]
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
});
|