394 lines
10 KiB
JavaScript
394 lines
10 KiB
JavaScript
|
|
|
|
$(function () {
|
|
Highcharts.chart('basic-line', {
|
|
chart:{
|
|
backgroundColor: 'transparent',
|
|
},
|
|
title: {
|
|
text: 'Monthly Average Temperature',
|
|
x: -20 //center
|
|
},
|
|
subtitle: {
|
|
text: 'Source: WorldClimate.com',
|
|
x: -20
|
|
},
|
|
xAxis: {
|
|
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
},
|
|
yAxis: {
|
|
gridLineColor:'transparent',
|
|
title: {
|
|
text: 'Temperature (°C)'
|
|
},
|
|
plotLines: [{
|
|
value: 0,
|
|
width: 1,
|
|
color: '#808080'
|
|
}]
|
|
},
|
|
tooltip: {
|
|
valueSuffix: '°C'
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'right',
|
|
verticalAlign: 'middle',
|
|
borderWidth: 0,
|
|
},
|
|
series: [{
|
|
name: 'Tokyo',
|
|
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],
|
|
color: '#00A2FF'
|
|
}, {
|
|
name: 'New York',
|
|
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
|
|
color: '#0000FF'
|
|
}, {
|
|
name: 'Berlin',
|
|
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
|
|
color: '#F44336'
|
|
}, {
|
|
name: 'London',
|
|
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
|
|
color: '#34C73B'
|
|
}]
|
|
});
|
|
});
|
|
|
|
// area inverted
|
|
|
|
$(function () {
|
|
Highcharts.chart('area-inverted', {
|
|
chart: {
|
|
type: 'area',
|
|
backgroundColor: 'transparent',
|
|
inverted: true
|
|
},
|
|
title: {
|
|
text: 'Average fruit consumption during one week'
|
|
},
|
|
subtitle: {
|
|
style: {
|
|
position: 'absolute',
|
|
right: '0px',
|
|
bottom: '10px'
|
|
}
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'right',
|
|
verticalAlign: 'top',
|
|
x: -150,
|
|
y: 100,
|
|
floating: true,
|
|
borderWidth: 1,
|
|
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
'Monday',
|
|
'Tuesday',
|
|
'Wednesday',
|
|
'Thursday',
|
|
'Friday',
|
|
'Saturday',
|
|
'Sunday'
|
|
]
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Number of units'
|
|
},
|
|
labels: {
|
|
formatter: function () {
|
|
return this.value;
|
|
}
|
|
},
|
|
min: 0
|
|
},
|
|
plotOptions: {
|
|
area: {
|
|
fillOpacity: 0.5
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'John',
|
|
data: [3, 4, 3, 5, 4, 10, 12],
|
|
color: '#34C73B'
|
|
}, {
|
|
name: 'Jane',
|
|
data: [1, 3, 4, 3, 3, 5, 4],
|
|
color: '#00A2FF'
|
|
}]
|
|
});
|
|
});
|
|
|
|
// bubble chart
|
|
|
|
$(function () {
|
|
Highcharts.chart('bubble-chart', {
|
|
|
|
chart: {
|
|
type: 'bubble',
|
|
plotBorderWidth: 1,
|
|
zoomType: 'xy',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
|
|
title: {
|
|
text: 'Sugar and fat intake per country'
|
|
},
|
|
|
|
subtitle: {
|
|
text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
|
|
},
|
|
|
|
xAxis: {
|
|
gridLineWidth: 1,
|
|
title: {
|
|
text: 'Daily fat intake'
|
|
},
|
|
labels: {
|
|
format: '{value} gr'
|
|
},
|
|
plotLines: [{
|
|
color: 'black',
|
|
dashStyle: 'dot',
|
|
width: 2,
|
|
value: 65,
|
|
label: {
|
|
rotation: 0,
|
|
y: 15,
|
|
style: {
|
|
fontStyle: 'italic'
|
|
},
|
|
text: 'Safe fat intake 65g/day'
|
|
},
|
|
zIndex: 3
|
|
}]
|
|
},
|
|
|
|
yAxis: {
|
|
startOnTick: false,
|
|
endOnTick: false,
|
|
title: {
|
|
text: 'Daily sugar intake'
|
|
},
|
|
labels: {
|
|
format: '{value} gr'
|
|
},
|
|
maxPadding: 0.2,
|
|
plotLines: [{
|
|
color: 'black',
|
|
dashStyle: 'dot',
|
|
width: 2,
|
|
value: 50,
|
|
label: {
|
|
align: 'right',
|
|
style: {
|
|
fontStyle: 'italic'
|
|
},
|
|
text: 'Safe sugar intake 50g/day',
|
|
x: -10
|
|
},
|
|
zIndex: 3
|
|
}]
|
|
},
|
|
|
|
tooltip: {
|
|
useHTML: true,
|
|
headerFormat: '<table>',
|
|
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
|
|
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
|
|
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
|
|
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
|
|
footerFormat: '</table>',
|
|
followPointer: true
|
|
},
|
|
|
|
plotOptions: {
|
|
series: {
|
|
dataLabels: {
|
|
enabled: true,
|
|
format: '{point.name}'
|
|
}
|
|
}
|
|
},
|
|
|
|
series: [{
|
|
data: [
|
|
{ x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium', color: '#00A2FF'},
|
|
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany', color: '#00A2FF'},
|
|
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland', color: '#00A2FF'},
|
|
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands', color: '#00A2FF'},
|
|
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden', color: '#00A2FF'},
|
|
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain', color: '#00A2FF'},
|
|
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France', color: '#00A2FF'},
|
|
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway', color: '#00A2FF'},
|
|
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom', color: '#00A2FF'},
|
|
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy', color: '#00A2FF'},
|
|
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia', color: '#00A2FF'},
|
|
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States', color: '#00A2FF'},
|
|
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary', color: '#00A2FF'},
|
|
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal', color: '#00A2FF'},
|
|
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand', color: '#00A2FF'},
|
|
]
|
|
}]
|
|
|
|
});
|
|
});
|
|
|
|
//polar chart
|
|
|
|
$(function () {
|
|
|
|
Highcharts.chart('polar-chart', {
|
|
|
|
chart: {
|
|
polar: true,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
|
|
title: {
|
|
text: 'Highcharts Polar Chart'
|
|
},
|
|
|
|
pane: {
|
|
startAngle: 0,
|
|
endAngle: 360
|
|
},
|
|
|
|
xAxis: {
|
|
tickInterval: 45,
|
|
min: 0,
|
|
max: 360,
|
|
labels: {
|
|
formatter: function () {
|
|
return this.value + '°';
|
|
}
|
|
}
|
|
},
|
|
|
|
yAxis: {
|
|
min: 0
|
|
},
|
|
|
|
plotOptions: {
|
|
series: {
|
|
pointStart: 0,
|
|
pointInterval: 45
|
|
},
|
|
column: {
|
|
pointPadding: 0,
|
|
groupPadding: 0
|
|
}
|
|
},
|
|
|
|
series: [{
|
|
type: 'column',
|
|
name: 'Column',
|
|
data: [8, 7, 6, 5, 4, 3, 2, 1],
|
|
pointPlacement: 'between',
|
|
color: '#34C73B'
|
|
}, {
|
|
type: 'line',
|
|
name: 'Line',
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8],
|
|
color: '#0000FF'
|
|
}, {
|
|
type: 'area',
|
|
name: 'Area',
|
|
data: [1, 8, 2, 7, 3, 6, 4, 5],
|
|
color: '#00A2FF'
|
|
}]
|
|
});
|
|
});
|
|
|
|
|
|
// box plot
|
|
|
|
$(function () {
|
|
Highcharts.chart('box-plot', {
|
|
|
|
chart: {
|
|
type: 'boxplot',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
|
|
title: {
|
|
text: 'Highcharts Box Plot Example'
|
|
},
|
|
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
|
|
xAxis: {
|
|
categories: ['1', '2', '3', '4', '5'],
|
|
title: {
|
|
text: 'Experiment No.'
|
|
}
|
|
},
|
|
|
|
yAxis: {
|
|
title: {
|
|
text: 'Observations'
|
|
},
|
|
plotLines: [{
|
|
value: 932,
|
|
color: '#0000FF',
|
|
width: 1,
|
|
label: {
|
|
text: 'Theoretical mean: 932',
|
|
align: 'center',
|
|
style: {
|
|
color: 'gray'
|
|
}
|
|
}
|
|
}]
|
|
},
|
|
|
|
series: [{
|
|
name: 'Observations',
|
|
data: [
|
|
[760, 801, 848, 895, 965],
|
|
[733, 853, 939, 980, 1080],
|
|
[714, 762, 817, 870, 918],
|
|
[724, 802, 806, 871, 950],
|
|
[834, 836, 864, 882, 910]
|
|
],
|
|
color: '#00A2FF',
|
|
tooltip: {
|
|
headerFormat: '<em>Experiment No {point.key}</em><br/>'
|
|
}
|
|
}, {
|
|
name: 'Outlier',
|
|
color: Highcharts.getOptions().colors[0],
|
|
type: 'scatter',
|
|
data: [ // x, y positions where 0 is the first category
|
|
[0, 644],
|
|
[4, 718],
|
|
[4, 951],
|
|
[4, 969]
|
|
],
|
|
marker: {
|
|
fillColor: 'white',
|
|
lineWidth: 1,
|
|
lineColor: Highcharts.getOptions().colors[0]
|
|
},
|
|
tooltip: {
|
|
pointFormat: 'Observation: {point.y}'
|
|
}
|
|
}]
|
|
|
|
});
|
|
});
|
|
|