initial commit
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container, #sliders {
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#container {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-3d.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
<div id="sliders">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Alpha Angle</td>
|
||||
<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beta Angle</td>
|
||||
<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Depth</td>
|
||||
<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// Set up the chart
|
||||
var chart = new Highcharts.Chart({
|
||||
chart: {
|
||||
renderTo: 'container',
|
||||
type: 'column',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
depth: 50,
|
||||
viewDistance: 25
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Chart rotation demo'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Test options by dragging the sliders below'
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
depth: 25
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
|
||||
}]
|
||||
});
|
||||
|
||||
function showValues() {
|
||||
$('#alpha-value').html(chart.options.chart.options3d.alpha);
|
||||
$('#beta-value').html(chart.options.chart.options3d.beta);
|
||||
$('#depth-value').html(chart.options.chart.options3d.depth);
|
||||
}
|
||||
|
||||
// Activate the sliders
|
||||
$('#sliders input').on('input change', function () {
|
||||
chart.options.chart.options3d[this.id] = parseFloat(this.value);
|
||||
showValues();
|
||||
chart.redraw(false);
|
||||
});
|
||||
|
||||
showValues();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-3d.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 10,
|
||||
beta: 25,
|
||||
depth: 70
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '3D chart with null values'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Notice the difference between a 0 value and a null point'
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
depth: 25
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
categories: Highcharts.getOptions().lang.shortMonths,
|
||||
labels: {
|
||||
skew3d: true,
|
||||
style: {
|
||||
fontSize: '16px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-3d.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
viewDistance: 25,
|
||||
depth: 40
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Total fruit consumption, grouped by gender'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
|
||||
labels: {
|
||||
skew3d: true,
|
||||
style: {
|
||||
fontSize: '16px'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Number of fruits',
|
||||
skew3d: true
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
headerFormat: '<b>{point.key}</b><br>',
|
||||
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal',
|
||||
depth: 40
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, 2, 5],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, 5, 6, 2, 1],
|
||||
stack: 'female'
|
||||
}, {
|
||||
name: 'Janet',
|
||||
data: [3, 0, 4, 4, 3],
|
||||
stack: 'female'
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-3d.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 45
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Contents of Highsoft\'s weekly fruit delivery'
|
||||
},
|
||||
subtitle: {
|
||||
text: '3D donut in Highcharts'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
innerSize: 100,
|
||||
depth: 45
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Delivered amount',
|
||||
data: [
|
||||
['Bananas', 8],
|
||||
['Kiwi', 3],
|
||||
['Mixed nuts', 1],
|
||||
['Oranges', 6],
|
||||
['Apples', 8],
|
||||
['Pears', 4],
|
||||
['Clementines', 4],
|
||||
['Reddish (bag)', 1],
|
||||
['Grapes (bunch)', 1]
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-3d.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 45,
|
||||
beta: 0
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares at a specific website, 2014'
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
depth: 35,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.name}'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
name: 'Browser share',
|
||||
data: [
|
||||
['Firefox', 45.0],
|
||||
['IE', 26.8],
|
||||
{
|
||||
name: 'Chrome',
|
||||
y: 12.8,
|
||||
sliced: true,
|
||||
selected: true
|
||||
},
|
||||
['Safari', 8.5],
|
||||
['Opera', 6.2],
|
||||
['Others', 0.7]
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-3d.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="height: 500px"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Give the points a 3D feel by adding a radial gradient
|
||||
Highcharts.setOptions({
|
||||
colors: Highcharts.getOptions().colors.map(function (color) {
|
||||
return {
|
||||
radialGradient: {
|
||||
cx: 0.4,
|
||||
cy: 0.3,
|
||||
r: 0.5
|
||||
},
|
||||
stops: [
|
||||
[0, color],
|
||||
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
|
||||
]
|
||||
};
|
||||
})
|
||||
});
|
||||
|
||||
// Set up the chart
|
||||
var chart = new Highcharts.Chart({
|
||||
chart: {
|
||||
renderTo: 'container',
|
||||
margin: 100,
|
||||
type: 'scatter3d',
|
||||
animation: false,
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 10,
|
||||
beta: 30,
|
||||
depth: 250,
|
||||
viewDistance: 5,
|
||||
fitToPlot: false,
|
||||
frame: {
|
||||
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
|
||||
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
|
||||
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Draggable box'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click and drag the plot area to rotate in space'
|
||||
},
|
||||
plotOptions: {
|
||||
scatter: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
depth: 10
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
title: null
|
||||
},
|
||||
xAxis: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
gridLineWidth: 1
|
||||
},
|
||||
zAxis: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
showFirstLabel: false
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Reading',
|
||||
colorByPoint: true,
|
||||
data: [
|
||||
[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6],
|
||||
[7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3],
|
||||
[6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7],
|
||||
[3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9],
|
||||
[7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5],
|
||||
[6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1],
|
||||
[8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3],
|
||||
[5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8],
|
||||
[2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3],
|
||||
[9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0],
|
||||
[2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8],
|
||||
[8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5],
|
||||
[6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9],
|
||||
[5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2],
|
||||
[9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6],
|
||||
[5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5],
|
||||
[0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
// Add mouse and touch events for rotation
|
||||
(function (H) {
|
||||
function dragStart(eStart) {
|
||||
eStart = chart.pointer.normalize(eStart);
|
||||
|
||||
var posX = eStart.chartX,
|
||||
posY = eStart.chartY,
|
||||
alpha = chart.options.chart.options3d.alpha,
|
||||
beta = chart.options.chart.options3d.beta,
|
||||
sensitivity = 5, // lower is more sensitive
|
||||
handlers = [];
|
||||
|
||||
function drag(e) {
|
||||
// Get e.chartX and e.chartY
|
||||
e = chart.pointer.normalize(e);
|
||||
|
||||
chart.update({
|
||||
chart: {
|
||||
options3d: {
|
||||
alpha: alpha + (e.chartY - posY) / sensitivity,
|
||||
beta: beta + (posX - e.chartX) / sensitivity
|
||||
}
|
||||
}
|
||||
}, undefined, undefined, false);
|
||||
}
|
||||
|
||||
function unbindAll() {
|
||||
handlers.forEach(function (unbind) {
|
||||
if (unbind) {
|
||||
unbind();
|
||||
}
|
||||
});
|
||||
handlers.length = 0;
|
||||
}
|
||||
|
||||
handlers.push(H.addEvent(document, 'mousemove', drag));
|
||||
handlers.push(H.addEvent(document, 'touchmove', drag));
|
||||
|
||||
|
||||
handlers.push(H.addEvent(document, 'mouseup', unbindAll));
|
||||
handlers.push(H.addEvent(document, 'touchend', unbindAll));
|
||||
}
|
||||
H.addEvent(chart.container, 'mousedown', dragStart);
|
||||
H.addEvent(chart.container, 'touchstart', dragStart);
|
||||
}(Highcharts));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-bottom: 5px;
|
||||
font-family: 'Verdana';
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
color:#555555;
|
||||
}
|
||||
|
||||
table {
|
||||
font-family: 'Verdana';
|
||||
font-size: 12pt;
|
||||
color:#555555;
|
||||
border-collapse: collapse;
|
||||
border: 3px solid #CCCCCC;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 2px solid #EEEEEE;
|
||||
}
|
||||
|
||||
th {
|
||||
border-left: 2px solid #EEEEEE;
|
||||
border-right: 2px solid #EEEEEE;
|
||||
padding: 12px 15px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th[scope="col"] {
|
||||
background-color: #ffffee;
|
||||
}
|
||||
|
||||
th[scope="row"] {
|
||||
background-color: #f0fcff;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-left: 2px solid #EEEEEE;
|
||||
border-right: 2px solid #EEEEEE;
|
||||
padding: 12px 15px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
<script src="../../code/modules/accessibility.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline',
|
||||
description: 'Most commonly used desktop screen readers from January 2009 to July 2015 as reported in the Webaim Survey. JAWS remains the most used screen reader, but is steadily declining. ZoomText and WindowEyes are both displaying large growth from 2014 to 2015.'
|
||||
},
|
||||
|
||||
legend: {
|
||||
symbolWidth: 40
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Desktop screen readers from 2009 to 2015'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Click on point to visit official website'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Percentage usage'
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
title: {
|
||||
text: 'Time'
|
||||
},
|
||||
description: 'Time from January 2009 to July 2015',
|
||||
categories: ['January 2009', 'December 2010', 'May 2012', 'January 2014', 'July 2015']
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
split: true
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
point: {
|
||||
events: {
|
||||
click: function () {
|
||||
window.location.href = this.series.options.website;
|
||||
}
|
||||
}
|
||||
},
|
||||
cursor: 'pointer'
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'JAWS',
|
||||
data: [74, 69.6, 63.7, 63.9, 43.7],
|
||||
website: 'https://www.freedomscientific.com/Products/Blindness/JAWS'
|
||||
}, {
|
||||
name: 'NVDA',
|
||||
data: [8, 34.8, 43.0, 51.2, 41.4],
|
||||
website: 'https://www.nvaccess.org',
|
||||
dashStyle: 'Dot'
|
||||
}, {
|
||||
name: 'VoiceOver',
|
||||
data: [6, 20.2, 30.7, 36.8, 30.9],
|
||||
website: 'http://www.apple.com/accessibility/osx/voiceover',
|
||||
dashStyle: 'ShortDot',
|
||||
color: Highcharts.getOptions().colors[7]
|
||||
}, {
|
||||
name: 'Window-Eyes',
|
||||
data: [23, 19.0, 20.7, 13.9, 29.6],
|
||||
website: 'http://www.gwmicro.com/window-eyes',
|
||||
dashStyle: 'Dash',
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}, {
|
||||
name: 'ZoomText',
|
||||
data: [0, 6.1, 6.8, 5.3, 27.5],
|
||||
website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader',
|
||||
dashStyle: 'ShortDashDot',
|
||||
color: Highcharts.getOptions().colors[8]
|
||||
}, {
|
||||
name: 'System Access To Go',
|
||||
data: [0, 16.2, 22.1, 26.2, 6.9],
|
||||
website: 'https://www.satogo.com',
|
||||
dashStyle: 'ShortDash',
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}, {
|
||||
name: 'ChromeVox',
|
||||
data: [0, 0, 2.8, 4.8, 2.8],
|
||||
website: 'http://www.chromevox.com',
|
||||
dashStyle: 'DotDash',
|
||||
color: Highcharts.getOptions().colors[4]
|
||||
}, {
|
||||
name: 'Other',
|
||||
data: [0, 7.4, 5.9, 9.3, 6.5],
|
||||
website: 'http://www.disabled-world.com/assistivedevices/computer/screen-readers.php',
|
||||
dashStyle: 'LongDash',
|
||||
color: Highcharts.getOptions().colors[7]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-bottom: 5px;
|
||||
font-family: 'Verdana';
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
color:#555555;
|
||||
}
|
||||
|
||||
table {
|
||||
font-family: 'Verdana';
|
||||
font-size: 12pt;
|
||||
color:#555555;
|
||||
border-collapse: collapse;
|
||||
border: 3px solid #CCCCCC;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 2px solid #EEEEEE;
|
||||
}
|
||||
|
||||
th {
|
||||
border-left: 2px solid #EEEEEE;
|
||||
border-right: 2px solid #EEEEEE;
|
||||
padding: 12px 15px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th[scope="col"] {
|
||||
background-color: #ffffee;
|
||||
}
|
||||
|
||||
th[scope="row"] {
|
||||
background-color: #f0fcff;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-left: 2px solid #EEEEEE;
|
||||
border-right: 2px solid #EEEEEE;
|
||||
padding: 12px 15px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
<script src="../../code/modules/accessibility.js"></script>
|
||||
<script src="../../code/modules/pattern-fill.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
description: 'Most commonly used desktop screen readers in July 2015 as reported in the Webaim Survey. Shown as percentage of respondents. JAWS is by far the most used screen reader, with 30% of respondents using it. ZoomText and Window-Eyes follow, each with around 20% usage.'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Desktop screen readers'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Click on point to visit official website'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
connectorColor: Highcharts.getOptions().colors[0],
|
||||
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
|
||||
},
|
||||
point: {
|
||||
events: {
|
||||
click: function () {
|
||||
window.location.href = this.website;
|
||||
}
|
||||
}
|
||||
},
|
||||
cursor: 'pointer'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Percentage usage',
|
||||
borderColor: Highcharts.getOptions().colors[0],
|
||||
data: [{
|
||||
name: 'JAWS',
|
||||
y: 30.2,
|
||||
website: 'https://www.freedomscientific.com/Products/Blindness/JAWS',
|
||||
color: 'url(#highcharts-default-pattern-0)',
|
||||
description: 'This is the most used desktop screen reader'
|
||||
}, {
|
||||
name: 'ZoomText',
|
||||
y: 22.2,
|
||||
website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader',
|
||||
color: 'url(#highcharts-default-pattern-1)'
|
||||
}, {
|
||||
name: 'Window-Eyes',
|
||||
y: 20.7,
|
||||
website: 'http://www.gwmicro.com/window-eyes',
|
||||
color: 'url(#highcharts-default-pattern-2)'
|
||||
}, {
|
||||
name: 'NVDA',
|
||||
y: 14.6,
|
||||
website: 'https://www.nvaccess.org',
|
||||
color: 'url(#highcharts-default-pattern-4)'
|
||||
}, {
|
||||
name: 'VoiceOver',
|
||||
y: 7.6,
|
||||
website: 'http://www.apple.com/accessibility/osx/voiceover',
|
||||
color: 'url(#highcharts-default-pattern-3)'
|
||||
}, {
|
||||
name: 'System Access To Go',
|
||||
y: 1.5,
|
||||
website: 'https://www.satogo.com',
|
||||
color: 'url(#highcharts-default-pattern-7)'
|
||||
}, {
|
||||
name: 'ChromeVox',
|
||||
y: 0.3,
|
||||
website: 'http://www.chromevox.com',
|
||||
color: 'url(#highcharts-default-pattern-6)'
|
||||
}, {
|
||||
name: 'Other',
|
||||
y: 2.9,
|
||||
website: 'http://www.disabled-world.com/assistivedevices/computer/screen-readers.php',
|
||||
color: 'url(#highcharts-default-pattern-5)'
|
||||
}]
|
||||
}]
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,218 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-bottom: 5px;
|
||||
font-family: 'Verdana';
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
color:#555555;
|
||||
}
|
||||
|
||||
table {
|
||||
font-family: 'Verdana';
|
||||
font-size: 12pt;
|
||||
color:#555555;
|
||||
border-collapse: collapse;
|
||||
border: 3px solid #CCCCCC;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 2px solid #EEEEEE;
|
||||
}
|
||||
|
||||
th {
|
||||
border-left: 2px solid #EEEEEE;
|
||||
border-right: 2px solid #EEEEEE;
|
||||
padding: 12px 15px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th[scope="col"] {
|
||||
background-color: #ffffee;
|
||||
}
|
||||
|
||||
th[scope="row"] {
|
||||
background-color: #f0fcff;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-left: 2px solid #EEEEEE;
|
||||
border-right: 2px solid #EEEEEE;
|
||||
padding: 12px 15px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
<script src="../../code/modules/accessibility.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
// Define custom series type for displaying low/med/high values using boxplot as a base
|
||||
Highcharts.seriesType('lowmedhigh', 'boxplot', {
|
||||
keys: ['low', 'median', 'high']
|
||||
}, {
|
||||
// Change point shape to a line with three crossing lines for low/median/high
|
||||
// Stroke width is hardcoded to 1 for simplicity
|
||||
drawPoints: function () {
|
||||
var series = this;
|
||||
Highcharts.each(this.points, function (point) {
|
||||
var graphic = point.graphic,
|
||||
verb = graphic ? 'animate' : 'attr',
|
||||
shapeArgs = point.shapeArgs,
|
||||
width = shapeArgs.width,
|
||||
left = Math.floor(shapeArgs.x) + 0.5,
|
||||
right = left + width,
|
||||
crispX = left + Math.round(width / 2) + 0.5,
|
||||
highPlot = Math.floor(point.highPlot) + 0.5,
|
||||
medianPlot = Math.floor(point.medianPlot) + 0.5,
|
||||
lowPlot = Math.floor(point.lowPlot) + 0.5 - (point.low === 0 ? 1 : 0); // Sneakily draw low marker even if 0
|
||||
|
||||
if (!graphic) {
|
||||
point.graphic = graphic = series.chart.renderer.path('point').add(series.group);
|
||||
}
|
||||
|
||||
graphic.attr({
|
||||
stroke: point.color || series.color,
|
||||
"stroke-width": 1
|
||||
});
|
||||
|
||||
graphic[verb]({
|
||||
d: [
|
||||
'M', left, highPlot,
|
||||
'H', right,
|
||||
'M', left, medianPlot,
|
||||
'H', right,
|
||||
'M', left, lowPlot,
|
||||
'H', right,
|
||||
'M', crispX, highPlot,
|
||||
'V', lowPlot
|
||||
]
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Create chart
|
||||
var chart = Highcharts.chart('container', {
|
||||
accessibility: {
|
||||
keyboardNavigation: {
|
||||
skipNullPoints: true
|
||||
},
|
||||
pointDescriptionFormatter: function (point) {
|
||||
return point.category + ', low ' + point.low + ', median ' + point.median + ', high ' + point.high;
|
||||
},
|
||||
seriesDescriptionFormatter: function (series) {
|
||||
return series.name + ', series ' + (series.index + 1) + ' of ' + series.chart.series.length + ' with ' + series.points.length + ' data points.';
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
type: 'lowmedhigh',
|
||||
typeDescription: 'Low, median, high. Each data point has a low, median and high value, depicted vertically as small ticks.', // Describe the chart type to screen reader users, since this is not a traditional boxplot chart
|
||||
description: 'Chart depicting fictional fruit consumption data, with the minimum, maximum and median values for each month of 2015. Most plums were eaten in spring, and none at all in July or August. Bananas and apples were both consumed in smaller numbers and steadily throughout the year.'
|
||||
},
|
||||
title: {
|
||||
text: 'Daily company fruit consumption 2015'
|
||||
},
|
||||
xAxis: [{
|
||||
crosshair: true,
|
||||
description: 'Months of the year',
|
||||
categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
|
||||
}],
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Fruits consumed'
|
||||
},
|
||||
min: 0
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
stickyTracking: true,
|
||||
whiskerWidth: 5
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}:<br/>Low: <b>{point.low}</b><br/>Median: <b>{point.median}</b><br/>High: <b>{point.high}</b><br/>'
|
||||
},
|
||||
series: [{
|
||||
name: 'Plums',
|
||||
data: [
|
||||
[0, 8, 19],
|
||||
[1, 11, 23],
|
||||
[3, 16, 28],
|
||||
[2, 15, 28],
|
||||
[1, 15, 27],
|
||||
[0, 9, 21],
|
||||
null,
|
||||
null,
|
||||
[1, 6, 19],
|
||||
[2, 8, 21],
|
||||
[2, 9, 22],
|
||||
[1, 11, 19]
|
||||
]
|
||||
}, {
|
||||
name: 'Bananas',
|
||||
data: [
|
||||
[0, 3, 6],
|
||||
[1, 2, 4],
|
||||
[0, 2, 5],
|
||||
[2, 2, 5],
|
||||
[1, 3, 6],
|
||||
[0, 1, 3],
|
||||
[1, 1, 2],
|
||||
[0, 1, 3],
|
||||
[1, 1, 3],
|
||||
[0, 2, 4],
|
||||
[1, 2, 5],
|
||||
[1, 3, 5]
|
||||
]
|
||||
}, {
|
||||
name: 'Apples',
|
||||
data: [
|
||||
[1, 4, 6],
|
||||
[2, 4, 5],
|
||||
[1, 3, 6],
|
||||
[2, 3, 6],
|
||||
[1, 3, 4],
|
||||
[0, 2, 4],
|
||||
[0, 1, 2],
|
||||
[0, 1, 2],
|
||||
[0, 1, 2],
|
||||
[0, 2, 4],
|
||||
[1, 2, 4],
|
||||
[1, 3, 4]
|
||||
]
|
||||
}]
|
||||
});
|
||||
|
||||
// Remove click events on container to avoid having "clickable" announced by AT
|
||||
// These events are needed for custom click events, drag to zoom, and navigator
|
||||
// support.
|
||||
chart.container.onmousedown = null;
|
||||
chart.container.onclick = null;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'area',
|
||||
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'
|
||||
},
|
||||
allowDecimals: false,
|
||||
min: 0
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
fillOpacity: 0.5
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [3, 4, 3, 5, 4, 10, 12]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [1, 3, 4, 3, 3, 5, 4]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'area',
|
||||
spacingBottom: 30
|
||||
},
|
||||
title: {
|
||||
text: 'Fruit consumption *'
|
||||
},
|
||||
subtitle: {
|
||||
text: '* Jane\'s banana consumption is unknown',
|
||||
floating: true,
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
y: 15
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
verticalAlign: 'top',
|
||||
x: 100,
|
||||
y: 70,
|
||||
floating: true,
|
||||
borderWidth: 1,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Y-Axis'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + '</b><br/>' +
|
||||
this.x + ': ' + this.y;
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
fillOpacity: 0.5
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [0, 1, 4, 4, 5, 2, 3, 7]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [1, 0, 3, null, 3, 1, 2, 1]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'Area 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]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'Historic and Estimated Worldwide Population Distribution by Region'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: Wikipedia.org'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
|
||||
tickmarkPlacement: 'on',
|
||||
title: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Percent'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
|
||||
split: true
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
stacking: 'percent',
|
||||
lineColor: '#ffffff',
|
||||
lineWidth: 1,
|
||||
marker: {
|
||||
lineWidth: 1,
|
||||
lineColor: '#ffffff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Asia',
|
||||
data: [502, 635, 809, 947, 1402, 3634, 5268]
|
||||
}, {
|
||||
name: 'Africa',
|
||||
data: [106, 107, 111, 133, 221, 767, 1766]
|
||||
}, {
|
||||
name: 'Europe',
|
||||
data: [163, 203, 276, 408, 547, 729, 628]
|
||||
}, {
|
||||
name: 'America',
|
||||
data: [18, 31, 54, 156, 339, 818, 1201]
|
||||
}, {
|
||||
name: 'Oceania',
|
||||
data: [2, 2, 2, 6, 13, 30, 46]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'Historic and Estimated Worldwide Population Growth by Region'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: Wikipedia.org'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
|
||||
tickmarkPlacement: 'on',
|
||||
title: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Billions'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value / 1000;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
split: true,
|
||||
valueSuffix: ' millions'
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
stacking: 'normal',
|
||||
lineColor: '#666666',
|
||||
lineWidth: 1,
|
||||
marker: {
|
||||
lineWidth: 1,
|
||||
lineColor: '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Asia',
|
||||
data: [502, 635, 809, 947, 1402, 3634, 5268]
|
||||
}, {
|
||||
name: 'Africa',
|
||||
data: [106, 107, 111, 133, 221, 767, 1766]
|
||||
}, {
|
||||
name: 'Europe',
|
||||
data: [163, 203, 276, 408, 547, 729, 628]
|
||||
}, {
|
||||
name: 'America',
|
||||
data: [18, 31, 54, 156, 339, 818, 1201]
|
||||
}, {
|
||||
name: 'Oceania',
|
||||
data: [2, 2, 2, 6, 13, 30, 46]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
var ranges = [
|
||||
[1246406400000, 14.3, 27.7],
|
||||
[1246492800000, 14.5, 27.8],
|
||||
[1246579200000, 15.5, 29.6],
|
||||
[1246665600000, 16.7, 30.7],
|
||||
[1246752000000, 16.5, 25.0],
|
||||
[1246838400000, 17.8, 25.7],
|
||||
[1246924800000, 13.5, 24.8],
|
||||
[1247011200000, 10.5, 21.4],
|
||||
[1247097600000, 9.2, 23.8],
|
||||
[1247184000000, 11.6, 21.8],
|
||||
[1247270400000, 10.7, 23.7],
|
||||
[1247356800000, 11.0, 23.3],
|
||||
[1247443200000, 11.6, 23.7],
|
||||
[1247529600000, 11.8, 20.7],
|
||||
[1247616000000, 12.6, 22.4],
|
||||
[1247702400000, 13.6, 19.6],
|
||||
[1247788800000, 11.4, 22.6],
|
||||
[1247875200000, 13.2, 25.0],
|
||||
[1247961600000, 14.2, 21.6],
|
||||
[1248048000000, 13.1, 17.1],
|
||||
[1248134400000, 12.2, 15.5],
|
||||
[1248220800000, 12.0, 20.8],
|
||||
[1248307200000, 12.0, 17.1],
|
||||
[1248393600000, 12.7, 18.3],
|
||||
[1248480000000, 12.4, 19.4],
|
||||
[1248566400000, 12.6, 19.9],
|
||||
[1248652800000, 11.9, 20.2],
|
||||
[1248739200000, 11.0, 19.3],
|
||||
[1248825600000, 10.8, 17.8],
|
||||
[1248912000000, 11.8, 18.5],
|
||||
[1248998400000, 10.8, 16.1]
|
||||
],
|
||||
averages = [
|
||||
[1246406400000, 21.5],
|
||||
[1246492800000, 22.1],
|
||||
[1246579200000, 23],
|
||||
[1246665600000, 23.8],
|
||||
[1246752000000, 21.4],
|
||||
[1246838400000, 21.3],
|
||||
[1246924800000, 18.3],
|
||||
[1247011200000, 15.4],
|
||||
[1247097600000, 16.4],
|
||||
[1247184000000, 17.7],
|
||||
[1247270400000, 17.5],
|
||||
[1247356800000, 17.6],
|
||||
[1247443200000, 17.7],
|
||||
[1247529600000, 16.8],
|
||||
[1247616000000, 17.7],
|
||||
[1247702400000, 16.3],
|
||||
[1247788800000, 17.8],
|
||||
[1247875200000, 18.1],
|
||||
[1247961600000, 17.2],
|
||||
[1248048000000, 14.4],
|
||||
[1248134400000, 13.7],
|
||||
[1248220800000, 15.7],
|
||||
[1248307200000, 14.6],
|
||||
[1248393600000, 15.3],
|
||||
[1248480000000, 15.3],
|
||||
[1248566400000, 15.8],
|
||||
[1248652800000, 15.2],
|
||||
[1248739200000, 14.8],
|
||||
[1248825600000, 14.4],
|
||||
[1248912000000, 15],
|
||||
[1248998400000, 13.6]
|
||||
];
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
title: {
|
||||
text: 'July temperatures'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
crosshairs: true,
|
||||
shared: true,
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
|
||||
legend: {
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Temperature',
|
||||
data: averages,
|
||||
zIndex: 1,
|
||||
marker: {
|
||||
fillColor: 'white',
|
||||
lineWidth: 2,
|
||||
lineColor: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
}, {
|
||||
name: 'Range',
|
||||
data: ranges,
|
||||
type: 'arearange',
|
||||
lineWidth: 0,
|
||||
linkedTo: ':previous',
|
||||
color: Highcharts.getOptions().colors[0],
|
||||
fillOpacity: 0.3,
|
||||
zIndex: 0,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$.getJSON(
|
||||
'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/range.json',
|
||||
function (data) {
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'arearange',
|
||||
zoomType: 'x',
|
||||
scrollablePlotArea: {
|
||||
minWidth: 600,
|
||||
scrollPositionX: 1
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Temperature variation by day'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
crosshairs: true,
|
||||
shared: true,
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Temperatures',
|
||||
data: data
|
||||
}]
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'areaspline'
|
||||
},
|
||||
title: {
|
||||
text: 'Average fruit consumption during one week'
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
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'
|
||||
],
|
||||
plotBands: [{ // visualize the weekend
|
||||
from: 4.5,
|
||||
to: 6.5,
|
||||
color: 'rgba(68, 170, 213, .2)'
|
||||
}]
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Fruit units'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
valueSuffix: ' units'
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.5
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [3, 4, 3, 5, 4, 10, 12]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [1, 3, 4, 3, 3, 5, 4]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
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.theme && Highcharts.theme.legendBackgroundColor) || '#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]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Data gathered from http://populationpyramid.net/germany/2015/
|
||||
|
||||
// Age categories
|
||||
var categories = [
|
||||
'0-4', '5-9', '10-14', '15-19',
|
||||
'20-24', '25-29', '30-34', '35-39', '40-44',
|
||||
'45-49', '50-54', '55-59', '60-64', '65-69',
|
||||
'70-74', '75-79', '80-84', '85-89', '90-94',
|
||||
'95-99', '100 + '
|
||||
];
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
title: {
|
||||
text: 'Population pyramid for Germany, 2018'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://populationpyramid.net/germany/2018/">Population Pyramids of the World from 1950 to 2100</a>'
|
||||
},
|
||||
xAxis: [{
|
||||
categories: categories,
|
||||
reversed: false,
|
||||
labels: {
|
||||
step: 1
|
||||
}
|
||||
}, { // mirror axis on right side
|
||||
opposite: true,
|
||||
reversed: false,
|
||||
categories: categories,
|
||||
linkedTo: 0,
|
||||
labels: {
|
||||
step: 1
|
||||
}
|
||||
}],
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return Math.abs(this.value) + '%';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
stacking: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
|
||||
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Male',
|
||||
data: [
|
||||
-2.2, -2.1, -2.2, -2.4,
|
||||
-2.7, -3.0, -3.3, -3.2,
|
||||
-2.9, -3.5, -4.4, -4.1,
|
||||
-3.4, -2.7, -2.3, -2.2,
|
||||
-1.6, -0.6, -0.3, -0.0,
|
||||
-0.0
|
||||
]
|
||||
}, {
|
||||
name: 'Female',
|
||||
data: [
|
||||
2.1, 2.0, 2.1, 2.3, 2.6,
|
||||
2.9, 3.2, 3.1, 2.9, 3.4,
|
||||
4.3, 4.0, 3.5, 2.9, 2.5,
|
||||
2.7, 2.2, 1.1, 0.6, 0.2,
|
||||
0.0
|
||||
]
|
||||
}]
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
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]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/histogram-bellcurve.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4,
|
||||
4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
|
||||
3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
|
||||
3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
|
||||
2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
|
||||
2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
|
||||
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
|
||||
3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2,
|
||||
2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7,
|
||||
3.2, 3.3, 3, 2.5, 3, 3.4, 3];
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
title: {
|
||||
text: 'Bell curve'
|
||||
},
|
||||
|
||||
xAxis: [{
|
||||
title: {
|
||||
text: 'Data'
|
||||
},
|
||||
alignTicks: false
|
||||
}, {
|
||||
title: {
|
||||
text: 'Bell curve'
|
||||
},
|
||||
alignTicks: false,
|
||||
opposite: true
|
||||
}],
|
||||
|
||||
yAxis: [{
|
||||
title: { text: 'Data' }
|
||||
}, {
|
||||
title: { text: 'Bell curve' },
|
||||
opposite: true
|
||||
}],
|
||||
|
||||
series: [{
|
||||
name: 'Bell curve',
|
||||
type: 'bellcurve',
|
||||
xAxis: 1,
|
||||
yAxis: 1,
|
||||
baseSeries: 1,
|
||||
zIndex: -1
|
||||
}, {
|
||||
name: 'Data',
|
||||
type: 'scatter',
|
||||
data: data,
|
||||
marker: {
|
||||
radius: 1.5
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'boxplot'
|
||||
},
|
||||
|
||||
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: 'red',
|
||||
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]
|
||||
],
|
||||
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}'
|
||||
}
|
||||
}]
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'bubble',
|
||||
plotBorderWidth: 1,
|
||||
zoomType: 'xy'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts bubbles with radial gradient fill'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
gridLineWidth: 1
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
startOnTick: false,
|
||||
endOnTick: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [
|
||||
[9, 81, 63],
|
||||
[98, 5, 89],
|
||||
[51, 50, 73],
|
||||
[41, 22, 14],
|
||||
[58, 24, 20],
|
||||
[78, 37, 34],
|
||||
[55, 56, 53],
|
||||
[18, 45, 70],
|
||||
[42, 44, 28],
|
||||
[3, 52, 59],
|
||||
[31, 18, 97],
|
||||
[79, 91, 63],
|
||||
[93, 23, 23],
|
||||
[44, 83, 22]
|
||||
],
|
||||
marker: {
|
||||
fillColor: {
|
||||
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
|
||||
stops: [
|
||||
[0, 'rgba(255,255,255,0.5)'],
|
||||
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
|
||||
]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
data: [
|
||||
[42, 38, 20],
|
||||
[6, 18, 1],
|
||||
[1, 93, 55],
|
||||
[57, 2, 90],
|
||||
[80, 76, 22],
|
||||
[11, 74, 96],
|
||||
[88, 56, 10],
|
||||
[30, 47, 49],
|
||||
[57, 62, 98],
|
||||
[4, 16, 16],
|
||||
[46, 10, 11],
|
||||
[22, 87, 89],
|
||||
[57, 91, 82],
|
||||
[45, 15, 98]
|
||||
],
|
||||
marker: {
|
||||
fillColor: {
|
||||
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
|
||||
stops: [
|
||||
[0, 'rgba(255,255,255,0.5)'],
|
||||
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
|
||||
]
|
||||
}
|
||||
}
|
||||
}]
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
.highcharts-tooltip h3 {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'bubble',
|
||||
plotBorderWidth: 1,
|
||||
zoomType: 'xy'
|
||||
},
|
||||
|
||||
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' },
|
||||
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
|
||||
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
|
||||
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
|
||||
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
|
||||
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
|
||||
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
|
||||
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
|
||||
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
|
||||
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
|
||||
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
|
||||
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
|
||||
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
|
||||
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
|
||||
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
|
||||
]
|
||||
}]
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container1 {
|
||||
max-width: 800px;
|
||||
height: 115px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
#container2, #container3 {
|
||||
max-width: 800px;
|
||||
height: 85px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
.hc-cat-title {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/bullet.js"></script>
|
||||
<div id="container1"></div>
|
||||
<div id="container2"></div>
|
||||
<div id="container3"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
Highcharts.setOptions({
|
||||
chart: {
|
||||
inverted: true,
|
||||
marginLeft: 135,
|
||||
type: 'bullet'
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 0
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
pointPadding: 0.25,
|
||||
borderWidth: 0,
|
||||
color: '#000',
|
||||
targetOptions: {
|
||||
width: '200%'
|
||||
}
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
exporting: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
|
||||
Highcharts.chart('container1', {
|
||||
chart: {
|
||||
marginTop: 40
|
||||
},
|
||||
title: {
|
||||
text: '2017 YTD'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)']
|
||||
},
|
||||
yAxis: {
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 150,
|
||||
color: '#666'
|
||||
}, {
|
||||
from: 150,
|
||||
to: 225,
|
||||
color: '#999'
|
||||
}, {
|
||||
from: 225,
|
||||
to: 9e9,
|
||||
color: '#bbb'
|
||||
}],
|
||||
title: null
|
||||
},
|
||||
series: [{
|
||||
data: [{
|
||||
y: 275,
|
||||
target: 250
|
||||
}]
|
||||
}],
|
||||
tooltip: {
|
||||
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
|
||||
}
|
||||
});
|
||||
|
||||
Highcharts.chart('container2', {
|
||||
xAxis: {
|
||||
categories: ['<span class="hc-cat-title">Profit</span><br/>%']
|
||||
},
|
||||
yAxis: {
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 20,
|
||||
color: '#666'
|
||||
}, {
|
||||
from: 20,
|
||||
to: 25,
|
||||
color: '#999'
|
||||
}, {
|
||||
from: 25,
|
||||
to: 100,
|
||||
color: '#bbb'
|
||||
}],
|
||||
labels: {
|
||||
format: '{value}%'
|
||||
},
|
||||
title: null
|
||||
},
|
||||
series: [{
|
||||
data: [{
|
||||
y: 22,
|
||||
target: 27
|
||||
}]
|
||||
}],
|
||||
tooltip: {
|
||||
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Highcharts.chart('container3', {
|
||||
xAxis: {
|
||||
categories: ['<span class="hc-cat-title">New Customers</span><br/>Count']
|
||||
},
|
||||
yAxis: {
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 1400,
|
||||
color: '#666'
|
||||
}, {
|
||||
from: 1400,
|
||||
to: 2000,
|
||||
color: '#999'
|
||||
}, {
|
||||
from: 2000,
|
||||
to: 9e9,
|
||||
color: '#bbb'
|
||||
}],
|
||||
labels: {
|
||||
format: '{value}'
|
||||
},
|
||||
title: null
|
||||
},
|
||||
series: [{
|
||||
data: [{
|
||||
y: 1650,
|
||||
target: 2100
|
||||
}]
|
||||
}],
|
||||
tooltip: {
|
||||
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
|
||||
},
|
||||
credits: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 320px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
<button id="plain">Plain</button>
|
||||
<button id="inverted">Inverted</button>
|
||||
<button id="polar">Polar</button>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var chart = Highcharts.chart('container', {
|
||||
|
||||
title: {
|
||||
text: 'Chart.update'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Plain'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'column',
|
||||
colorByPoint: true,
|
||||
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
||||
showInLegend: false
|
||||
}]
|
||||
|
||||
});
|
||||
|
||||
|
||||
$('#plain').click(function () {
|
||||
chart.update({
|
||||
chart: {
|
||||
inverted: false,
|
||||
polar: false
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Plain'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#inverted').click(function () {
|
||||
chart.update({
|
||||
chart: {
|
||||
inverted: true,
|
||||
polar: false
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Inverted'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#polar').click(function () {
|
||||
chart.update({
|
||||
chart: {
|
||||
inverted: false,
|
||||
polar: true
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Polar'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
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]
|
||||
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,326 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
<script src="../../code/modules/drilldown.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// Create the chart
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
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>'
|
||||
},
|
||||
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
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
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]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
<table id="datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Jane</th>
|
||||
<th>John</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Apples</th>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Pears</th>
|
||||
<td>2</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Plums</th>
|
||||
<td>5</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bananas</th>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Oranges</th>
|
||||
<td>2</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
data: {
|
||||
table: 'datatable'
|
||||
},
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Data extracted from a HTML table in the page'
|
||||
},
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
title: {
|
||||
text: 'Units'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + '</b><br/>' +
|
||||
this.point.y + ' ' + this.point.name.toLowerCase();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 360px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Efficiency Optimization by Branch'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Seattle HQ',
|
||||
'San Francisco',
|
||||
'Tokyo'
|
||||
]
|
||||
},
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Employees'
|
||||
}
|
||||
}, {
|
||||
title: {
|
||||
text: 'Profit (millions)'
|
||||
},
|
||||
opposite: true
|
||||
}],
|
||||
legend: {
|
||||
shadow: false
|
||||
},
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
grouping: false,
|
||||
shadow: false,
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Employees',
|
||||
color: 'rgba(165,170,217,1)',
|
||||
data: [150, 73, 20],
|
||||
pointPadding: 0.3,
|
||||
pointPlacement: -0.2
|
||||
}, {
|
||||
name: 'Employees Optimized',
|
||||
color: 'rgba(126,86,134,.9)',
|
||||
data: [140, 90, 40],
|
||||
pointPadding: 0.4,
|
||||
pointPlacement: -0.2
|
||||
}, {
|
||||
name: 'Profit',
|
||||
color: 'rgba(248,161,63,1)',
|
||||
data: [183.6, 178.8, 198.5],
|
||||
tooltip: {
|
||||
valuePrefix: '
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
,
|
||||
valueSuffix: ' M'
|
||||
},
|
||||
pointPadding: 0.3,
|
||||
pointPlacement: 0.2,
|
||||
yAxis: 1
|
||||
}, {
|
||||
name: 'Profit Optimized',
|
||||
color: 'rgba(186,60,61,.9)',
|
||||
data: [203.6, 198.8, 208.5],
|
||||
tooltip: {
|
||||
valuePrefix: '
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
,
|
||||
valueSuffix: ' M'
|
||||
},
|
||||
pointPadding: 0.4,
|
||||
pointPlacement: 0.2,
|
||||
yAxis: 1
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'columnpyramid'
|
||||
},
|
||||
title: {
|
||||
text: 'The 5 highest pyramids in the World'
|
||||
},
|
||||
colors: ['#C79D6D', '#B5927B', '#CE9B84', '#B7A58C', '#C7A58C'],
|
||||
xAxis: {
|
||||
crosshair: true,
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px'
|
||||
}
|
||||
},
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Height (m)'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' m'
|
||||
},
|
||||
series: [{
|
||||
name: 'Height',
|
||||
colorByPoint: true,
|
||||
data: [
|
||||
['Pyramid of Khufu', 138.8],
|
||||
['Pyramid of Khafre', 136.4],
|
||||
['Red Pyramid', 104],
|
||||
['Bent Pyramid', 101.1],
|
||||
['Pyramid of the Sun', 75]
|
||||
],
|
||||
showInLegend: false
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'World\'s largest cities per 2017'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
labels: {
|
||||
rotation: -45,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Verdana, sans-serif'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Population (millions)'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
|
||||
},
|
||||
series: [{
|
||||
name: 'Population',
|
||||
data: [
|
||||
['Shanghai', 24.2],
|
||||
['Beijing', 20.8],
|
||||
['Karachi', 14.9],
|
||||
['Shenzhen', 13.7],
|
||||
['Guangzhou', 13.1],
|
||||
['Istanbul', 12.7],
|
||||
['Mumbai', 12.4],
|
||||
['Moscow', 12.2],
|
||||
['São Paulo', 12.0],
|
||||
['Delhi', 11.7],
|
||||
['Kinshasa', 11.5],
|
||||
['Tianjin', 11.2],
|
||||
['Lahore', 11.1],
|
||||
['Jakarta', 10.6],
|
||||
['Dongguan', 10.6],
|
||||
['Lagos', 10.6],
|
||||
['Bengaluru', 10.3],
|
||||
['Seoul', 9.8],
|
||||
['Foshan', 9.3],
|
||||
['Tokyo', 9.3]
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
rotation: -90,
|
||||
color: '#FFFFFF',
|
||||
align: 'right',
|
||||
format: '{point.y:.1f}', // one decimal
|
||||
y: 10, // 10 pixels down from the top
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Verdana, sans-serif'
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Total fruit consumtion, grouped by gender'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Number of fruits'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.x + '</b><br/>' +
|
||||
this.series.name + ': ' + this.y + '<br/>' +
|
||||
'Total: ' + this.point.stackTotal;
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, 2, 5],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, 5, 6, 2, 1],
|
||||
stack: 'female'
|
||||
}, {
|
||||
name: 'Janet',
|
||||
data: [3, 0, 4, 4, 3],
|
||||
stack: 'female'
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Stacked column chart'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Total fruit consumption'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'percent'
|
||||
}
|
||||
},
|
||||
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]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
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: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
align: 'right',
|
||||
x: -30,
|
||||
verticalAlign: 'top',
|
||||
y: 25,
|
||||
floating: true,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '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,
|
||||
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
|
||||
}
|
||||
}
|
||||
},
|
||||
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]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'columnrange',
|
||||
inverted: true
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Temperature variation by month'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Observed in Vik i Sogn, Norway, 2017'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature ( °C )'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
columnrange: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{y}°C'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Temperatures',
|
||||
data: [
|
||||
[-9.9, 10.3],
|
||||
[-8.6, 8.5],
|
||||
[-10.2, 11.8],
|
||||
[-1.7, 12.2],
|
||||
[-0.6, 23.1],
|
||||
[3.7, 25.4],
|
||||
[6.0, 26.2],
|
||||
[6.7, 21.4],
|
||||
[3.5, 19.5],
|
||||
[-1.3, 16.0],
|
||||
[-8.7, 9.4],
|
||||
[-9.0, 8.6]
|
||||
]
|
||||
}]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
zoomType: 'xy'
|
||||
},
|
||||
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.theme && Highcharts.theme.legendBackgroundColor) || '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'
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,610 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/windbarb.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
|
||||
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||
|
||||
<div id="container" style="max-width: 800px; min-width: 380px; height: 310px; margin: 0 auto">
|
||||
<div style="margin-top: 100px; text-align: center" id="loading">
|
||||
<i class="fa fa-spinner fa-spin"></i> Loading data from external source
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div style="width: 800px; margin: 0 auto">
|
||||
<a href="#http://www.yr.no/place/United_Kingdom/England/London/forecast_hour_by_hour.xml">London</a>,
|
||||
<a href="#http://www.yr.no/place/France/Rhône-Alpes/Val_d\'Isère~2971074/forecast_hour_by_hour.xml">Val d'Isère</a>,
|
||||
<a href="#http://www.yr.no/place/United_States/California/San_Francisco/forecast_hour_by_hour.xml">San Francisco</a>,
|
||||
<a href="#http://www.yr.no/place/Norway/Vik/Vikafjell/forecast_hour_by_hour.xml">Vikjafjellet</a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* This is a complex demo of how to set up a Highcharts chart, coupled to a
|
||||
* dynamic source and extended by drawing image sprites, wind arrow paths
|
||||
* and a second grid on top of the chart. The purpose of the demo is to inpire
|
||||
* developers to go beyond the basic chart types and show how the library can
|
||||
* be extended programmatically. This is what the demo does:
|
||||
*
|
||||
* - Loads weather forecast from www.yr.no in form of an XML service. The XML
|
||||
* is translated on the Higcharts website into JSONP for the sake of the demo
|
||||
* being shown on both our website and JSFiddle.
|
||||
* - When the data arrives async, a Meteogram instance is created. We have
|
||||
* created the Meteogram prototype to provide an organized structure of the different
|
||||
* methods and subroutines associated with the demo.
|
||||
* - The parseYrData method parses the data from www.yr.no into several parallel arrays. These
|
||||
* arrays are used directly as the data option for temperature, precipitation
|
||||
* and air pressure. As the temperature data gives only full degrees, we apply
|
||||
* some smoothing on the graph, but keep the original data in the tooltip.
|
||||
* - After this, the options structure is build, and the chart generated with the
|
||||
* parsed data.
|
||||
* - In the callback (on chart load), we weather icons on top of the temperature series.
|
||||
* The icons are sprites from a single PNG image, placed inside a clipped 30x30
|
||||
* SVG <g> element. VML interprets this as HTML images inside a clipped div.
|
||||
* - Lastly, the wind arrows are built and added below the plot area, and a grid is
|
||||
* drawn around them. The wind arrows are basically drawn north-south, then rotated
|
||||
* as per the wind direction.
|
||||
*/
|
||||
|
||||
function Meteogram(xml, container) {
|
||||
// Parallel arrays for the chart data, these are populated as the XML/JSON file
|
||||
// is loaded
|
||||
this.symbols = [];
|
||||
this.precipitations = [];
|
||||
this.precipitationsError = []; // Only for some data sets
|
||||
this.winds = [];
|
||||
this.temperatures = [];
|
||||
this.pressures = [];
|
||||
|
||||
// Initialize
|
||||
this.xml = xml;
|
||||
this.container = container;
|
||||
|
||||
// Run
|
||||
this.parseYrData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to smooth the temperature line. The original data provides only whole degrees,
|
||||
* which makes the line graph look jagged. So we apply a running mean on it, but preserve
|
||||
* the unaltered value in the tooltip.
|
||||
*/
|
||||
Meteogram.prototype.smoothLine = function (data) {
|
||||
var i = data.length,
|
||||
sum,
|
||||
value;
|
||||
|
||||
while (i--) {
|
||||
data[i].value = value = data[i].y; // preserve value for tooltip
|
||||
|
||||
// Set the smoothed value to the average of the closest points, but don't allow
|
||||
// it to differ more than 0.5 degrees from the given value
|
||||
sum = (data[i - 1] || data[i]).y + value + (data[i + 1] || data[i]).y;
|
||||
data[i].y = Math.max(value - 0.5, Math.min(sum / 3, value + 0.5));
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the weather symbols on top of the temperature series. The symbols are
|
||||
* fetched from yr.no's MIT licensed weather symbol collection.
|
||||
* https://github.com/YR/weather-symbols
|
||||
*/
|
||||
Meteogram.prototype.drawWeatherSymbols = function (chart) {
|
||||
var meteogram = this;
|
||||
|
||||
$.each(chart.series[0].data, function (i, point) {
|
||||
if (meteogram.resolution > 36e5 || i % 2 === 0) {
|
||||
|
||||
chart.renderer
|
||||
.image(
|
||||
'https://cdn.jsdelivr.net/gh/YR/weather-symbols@6.0.2/dist/svg/' +
|
||||
meteogram.symbols[i] + '.svg',
|
||||
point.plotX + chart.plotLeft - 8,
|
||||
point.plotY + chart.plotTop - 30,
|
||||
30,
|
||||
30
|
||||
)
|
||||
.attr({
|
||||
zIndex: 5
|
||||
})
|
||||
.add();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Draw blocks around wind arrows, below the plot area
|
||||
*/
|
||||
Meteogram.prototype.drawBlocksForWindArrows = function (chart) {
|
||||
var xAxis = chart.xAxis[0],
|
||||
x,
|
||||
pos,
|
||||
max,
|
||||
isLong,
|
||||
isLast,
|
||||
i;
|
||||
|
||||
for (pos = xAxis.min, max = xAxis.max, i = 0; pos <= max + 36e5; pos += 36e5, i += 1) {
|
||||
|
||||
// Get the X position
|
||||
isLast = pos === max + 36e5;
|
||||
x = Math.round(xAxis.toPixels(pos)) + (isLast ? 0.5 : -0.5);
|
||||
|
||||
// Draw the vertical dividers and ticks
|
||||
if (this.resolution > 36e5) {
|
||||
isLong = pos % this.resolution === 0;
|
||||
} else {
|
||||
isLong = i % 2 === 0;
|
||||
}
|
||||
chart.renderer.path(['M', x, chart.plotTop + chart.plotHeight + (isLong ? 0 : 28),
|
||||
'L', x, chart.plotTop + chart.plotHeight + 32, 'Z'])
|
||||
.attr({
|
||||
'stroke': chart.options.chart.plotBorderColor,
|
||||
'stroke-width': 1
|
||||
})
|
||||
.add();
|
||||
}
|
||||
|
||||
// Center items in block
|
||||
chart.get('windbarbs').markerGroup.attr({
|
||||
translateX: chart.get('windbarbs').markerGroup.translateX + 8
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the title based on the XML data
|
||||
*/
|
||||
Meteogram.prototype.getTitle = function () {
|
||||
return 'Meteogram for ' + this.xml.querySelector('location name').textContent +
|
||||
', ' + this.xml.querySelector('location country').textContent;
|
||||
};
|
||||
|
||||
/**
|
||||
* Build and return the Highcharts options structure
|
||||
*/
|
||||
Meteogram.prototype.getChartOptions = function () {
|
||||
var meteogram = this;
|
||||
|
||||
return {
|
||||
chart: {
|
||||
renderTo: this.container,
|
||||
marginBottom: 70,
|
||||
marginRight: 40,
|
||||
marginTop: 50,
|
||||
plotBorderWidth: 1,
|
||||
height: 310,
|
||||
alignTicks: false,
|
||||
scrollablePlotArea: {
|
||||
minWidth: 720
|
||||
}
|
||||
},
|
||||
|
||||
defs: {
|
||||
patterns: [{
|
||||
'id': 'precipitation-error',
|
||||
'path': {
|
||||
d: [
|
||||
'M', 3.3, 0, 'L', -6.7, 10,
|
||||
'M', 6.7, 0, 'L', -3.3, 10,
|
||||
'M', 10, 0, 'L', 0, 10,
|
||||
'M', 13.3, 0, 'L', 3.3, 10,
|
||||
'M', 16.7, 0, 'L', 6.7, 10
|
||||
].join(' '),
|
||||
stroke: '#68CFE8',
|
||||
strokeWidth: 1
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
title: {
|
||||
text: this.getTitle(),
|
||||
align: 'left',
|
||||
style: {
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}
|
||||
},
|
||||
|
||||
credits: {
|
||||
text: 'Forecast from <a href="http://yr.no">yr.no</a>',
|
||||
href: this.xml.querySelector('credit link').getAttribute('url'),
|
||||
position: {
|
||||
x: -40
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
shared: true,
|
||||
useHTML: true,
|
||||
headerFormat:
|
||||
'<small>{point.x:%A, %b %e, %H:%M} - {point.point.to:%H:%M}</small><br>' +
|
||||
'<b>{point.point.symbolName}</b><br>'
|
||||
|
||||
},
|
||||
|
||||
xAxis: [{ // Bottom X axis
|
||||
type: 'datetime',
|
||||
tickInterval: 2 * 36e5, // two hours
|
||||
minorTickInterval: 36e5, // one hour
|
||||
tickLength: 0,
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0',
|
||||
startOnTick: false,
|
||||
endOnTick: false,
|
||||
minPadding: 0,
|
||||
maxPadding: 0,
|
||||
offset: 30,
|
||||
showLastLabel: true,
|
||||
labels: {
|
||||
format: '{value:%H}'
|
||||
},
|
||||
crosshair: true
|
||||
}, { // Top X axis
|
||||
linkedTo: 0,
|
||||
type: 'datetime',
|
||||
tickInterval: 24 * 3600 * 1000,
|
||||
labels: {
|
||||
format: '{value:<span style="font-size: 12px; font-weight: bold">%a</span> %b %e}',
|
||||
align: 'left',
|
||||
x: 3,
|
||||
y: -5
|
||||
},
|
||||
opposite: true,
|
||||
tickLength: 20,
|
||||
gridLineWidth: 1
|
||||
}],
|
||||
|
||||
yAxis: [{ // temperature axis
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
format: '{value}°',
|
||||
style: {
|
||||
fontSize: '10px'
|
||||
},
|
||||
x: -3
|
||||
},
|
||||
plotLines: [{ // zero plane
|
||||
value: 0,
|
||||
color: '#BBBBBB',
|
||||
width: 1,
|
||||
zIndex: 2
|
||||
}],
|
||||
maxPadding: 0.3,
|
||||
minRange: 8,
|
||||
tickInterval: 1,
|
||||
gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0'
|
||||
|
||||
}, { // precipitation axis
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
gridLineWidth: 0,
|
||||
tickLength: 0,
|
||||
minRange: 10,
|
||||
min: 0
|
||||
|
||||
}, { // Air pressure
|
||||
allowDecimals: false,
|
||||
title: { // Title on top of axis
|
||||
text: 'hPa',
|
||||
offset: 0,
|
||||
align: 'high',
|
||||
rotation: 0,
|
||||
style: {
|
||||
fontSize: '10px',
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
},
|
||||
textAlign: 'left',
|
||||
x: 3
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '8px',
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
},
|
||||
y: 2,
|
||||
x: 3
|
||||
},
|
||||
gridLineWidth: 0,
|
||||
opposite: true,
|
||||
showLastLabel: false
|
||||
}],
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
pointPlacement: 'between'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
series: [{
|
||||
name: 'Temperature',
|
||||
data: this.temperatures,
|
||||
type: 'spline',
|
||||
marker: {
|
||||
enabled: false,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '<span style="color:{point.color}">\u25CF</span> ' +
|
||||
'{series.name}: <b>{point.value}°C</b><br/>'
|
||||
},
|
||||
zIndex: 1,
|
||||
color: '#FF3333',
|
||||
negativeColor: '#48AFE8'
|
||||
}, {
|
||||
name: 'Precipitation',
|
||||
data: this.precipitationsError,
|
||||
type: 'column',
|
||||
color: 'url(#precipitation-error)',
|
||||
yAxis: 1,
|
||||
groupPadding: 0,
|
||||
pointPadding: 0,
|
||||
tooltip: {
|
||||
valueSuffix: ' mm',
|
||||
pointFormat: '<span style="color:{point.color}">\u25CF</span> ' +
|
||||
'{series.name}: <b>{point.minvalue} mm - {point.maxvalue} mm</b><br/>'
|
||||
},
|
||||
grouping: false,
|
||||
dataLabels: {
|
||||
enabled: meteogram.hasPrecipitationError,
|
||||
formatter: function () {
|
||||
if (this.point.maxvalue > 0) {
|
||||
return this.point.maxvalue;
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fontSize: '8px',
|
||||
color: 'gray'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: 'Precipitation',
|
||||
data: this.precipitations,
|
||||
type: 'column',
|
||||
color: '#68CFE8',
|
||||
yAxis: 1,
|
||||
groupPadding: 0,
|
||||
pointPadding: 0,
|
||||
grouping: false,
|
||||
dataLabels: {
|
||||
enabled: !meteogram.hasPrecipitationError,
|
||||
formatter: function () {
|
||||
if (this.y > 0) {
|
||||
return this.y;
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fontSize: '8px',
|
||||
color: 'gray'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' mm'
|
||||
}
|
||||
}, {
|
||||
name: 'Air pressure',
|
||||
color: Highcharts.getOptions().colors[2],
|
||||
data: this.pressures,
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
shadow: false,
|
||||
tooltip: {
|
||||
valueSuffix: ' hPa'
|
||||
},
|
||||
dashStyle: 'shortdot',
|
||||
yAxis: 2
|
||||
}, {
|
||||
name: 'Wind',
|
||||
type: 'windbarb',
|
||||
id: 'windbarbs',
|
||||
color: Highcharts.getOptions().colors[1],
|
||||
lineWidth: 1.5,
|
||||
data: this.winds,
|
||||
vectorLength: 18,
|
||||
yOffset: -15,
|
||||
tooltip: {
|
||||
valueSuffix: ' m/s'
|
||||
}
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Post-process the chart from the callback function, the second argument to Highcharts.Chart.
|
||||
*/
|
||||
Meteogram.prototype.onChartLoad = function (chart) {
|
||||
|
||||
this.drawWeatherSymbols(chart);
|
||||
this.drawBlocksForWindArrows(chart);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the chart. This function is called async when the data file is loaded and parsed.
|
||||
*/
|
||||
Meteogram.prototype.createChart = function () {
|
||||
var meteogram = this;
|
||||
this.chart = new Highcharts.Chart(this.getChartOptions(), function (chart) {
|
||||
meteogram.onChartLoad(chart);
|
||||
});
|
||||
};
|
||||
|
||||
Meteogram.prototype.error = function () {
|
||||
$('#loading').html('<i class="fa fa-frown-o"></i> Failed loading data, please try again later');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the data. This part of the code is not Highcharts specific, but deals with yr.no's
|
||||
* specific data format
|
||||
*/
|
||||
Meteogram.prototype.parseYrData = function () {
|
||||
|
||||
var meteogram = this,
|
||||
xml = this.xml,
|
||||
pointStart,
|
||||
forecast = xml && xml.querySelector('forecast');
|
||||
|
||||
if (!forecast) {
|
||||
return this.error();
|
||||
}
|
||||
|
||||
// The returned xml variable is a JavaScript representation of the provided
|
||||
// XML, generated on the server by running PHP simple_load_xml and
|
||||
// converting it to JavaScript by json_encode.
|
||||
Highcharts.each(
|
||||
forecast.querySelectorAll('tabular time'),
|
||||
function (time, i) {
|
||||
// Get the times - only Safari can't parse ISO8601 so we need to do
|
||||
// some replacements
|
||||
var from = time.getAttribute('from') + ' UTC',
|
||||
to = time.getAttribute('to') + ' UTC';
|
||||
|
||||
from = from.replace(/-/g, '/').replace('T', ' ');
|
||||
from = Date.parse(from);
|
||||
to = to.replace(/-/g, '/').replace('T', ' ');
|
||||
to = Date.parse(to);
|
||||
|
||||
if (to > pointStart + 4 * 24 * 36e5) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If it is more than an hour between points, show all symbols
|
||||
if (i === 0) {
|
||||
meteogram.resolution = to - from;
|
||||
}
|
||||
|
||||
// Populate the parallel arrays
|
||||
meteogram.symbols.push(
|
||||
time.querySelector('symbol').getAttribute('var')
|
||||
.match(/[0-9]{2}[dnm]?/)[0]
|
||||
);
|
||||
|
||||
meteogram.temperatures.push({
|
||||
x: from,
|
||||
y: parseInt(
|
||||
time.querySelector('temperature').getAttribute('value'),
|
||||
10
|
||||
),
|
||||
// custom options used in the tooltip formatter
|
||||
to: to,
|
||||
symbolName: time.querySelector('symbol').getAttribute('name')
|
||||
});
|
||||
|
||||
var precipitation = time.querySelector('precipitation');
|
||||
meteogram.precipitations.push({
|
||||
x: from,
|
||||
y: parseFloat(
|
||||
Highcharts.pick(
|
||||
precipitation.getAttribute('minvalue'),
|
||||
precipitation.getAttribute('value')
|
||||
)
|
||||
)
|
||||
});
|
||||
|
||||
if (precipitation.getAttribute('maxvalue')) {
|
||||
meteogram.hasPrecipitationError = true;
|
||||
meteogram.precipitationsError.push({
|
||||
x: from,
|
||||
y: parseFloat(precipitation.getAttribute('maxvalue')),
|
||||
minvalue: parseFloat(precipitation.getAttribute('minvalue')),
|
||||
maxvalue: parseFloat(precipitation.getAttribute('maxvalue')),
|
||||
value: parseFloat(precipitation.getAttribute('value'))
|
||||
});
|
||||
}
|
||||
|
||||
if (i % 2 === 0) {
|
||||
meteogram.winds.push({
|
||||
x: from,
|
||||
value: parseFloat(time.querySelector('windSpeed')
|
||||
.getAttribute('mps')),
|
||||
direction: parseFloat(time.querySelector('windDirection')
|
||||
.getAttribute('deg'))
|
||||
});
|
||||
}
|
||||
|
||||
meteogram.pressures.push({
|
||||
x: from,
|
||||
y: parseFloat(time.querySelector('pressure').getAttribute('value'))
|
||||
});
|
||||
|
||||
if (i === 0) {
|
||||
pointStart = (from + to) / 2;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Smooth the line
|
||||
this.smoothLine(this.temperatures);
|
||||
|
||||
// Create the chart when the data is loaded
|
||||
this.createChart();
|
||||
};
|
||||
// End of the Meteogram protype
|
||||
|
||||
|
||||
|
||||
// On DOM ready...
|
||||
|
||||
// Set the hash to the yr.no URL we want to parse
|
||||
var place,
|
||||
url;
|
||||
if (!location.hash) {
|
||||
place = 'United_Kingdom/England/London';
|
||||
//place = 'France/Rhône-Alpes/Val_d\'Isère~2971074';
|
||||
//place = 'Norway/Sogn_og_Fjordane/Vik/Målset';
|
||||
//place = 'United_States/California/San_Francisco';
|
||||
//place = 'United_States/Minnesota/Minneapolis';
|
||||
|
||||
location.hash = 'https://www.yr.no/place/' + place + '/forecast_hour_by_hour.xml';
|
||||
}
|
||||
|
||||
// Then get the XML file through Highcharts' CORS proxy. Our proxy is limited to
|
||||
// this specific location. Useing the third party, rate limited cors.io service
|
||||
// for experimenting with other locations.
|
||||
url = location.hash.substr(1);
|
||||
$.ajax({
|
||||
dataType: 'xml',
|
||||
url: url === 'https://www.yr.no/place/United_Kingdom/England/London/forecast_hour_by_hour.xml' ?
|
||||
'https://www.highcharts.com/samples/data/cors.php?url=' + url :
|
||||
'https://cors.io/?' + url,
|
||||
success: function (xml) {
|
||||
window.meteogram = new Meteogram(xml, 'container');
|
||||
},
|
||||
error: Meteogram.prototype.error
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 320px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
zoomType: 'xy'
|
||||
},
|
||||
title: {
|
||||
text: 'Average Monthly Weather Data for 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[2]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Temperature',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
}
|
||||
},
|
||||
opposite: true
|
||||
|
||||
}, { // Secondary yAxis
|
||||
gridLineWidth: 0,
|
||||
title: {
|
||||
text: 'Rainfall',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
format: '{value} mm',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
}
|
||||
|
||||
}, { // Tertiary yAxis
|
||||
gridLineWidth: 0,
|
||||
title: {
|
||||
text: 'Sea-Level Pressure',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
format: '{value} mb',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
},
|
||||
opposite: true
|
||||
}],
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
x: 80,
|
||||
verticalAlign: 'top',
|
||||
y: 55,
|
||||
floating: true,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '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: 'Sea-Level Pressure',
|
||||
type: 'spline',
|
||||
yAxis: 2,
|
||||
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
dashStyle: 'shortdot',
|
||||
tooltip: {
|
||||
valueSuffix: ' mb'
|
||||
}
|
||||
|
||||
}, {
|
||||
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'
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
xAxis: {
|
||||
min: -0.5,
|
||||
max: 5.5
|
||||
},
|
||||
yAxis: {
|
||||
min: 0
|
||||
},
|
||||
title: {
|
||||
text: 'Scatter plot with regression line'
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
name: 'Regression Line',
|
||||
data: [[0, 1.11], [5, 4.51]],
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 0
|
||||
}
|
||||
},
|
||||
enableMouseTracking: false
|
||||
}, {
|
||||
type: 'scatter',
|
||||
name: 'Observations',
|
||||
data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
|
||||
marker: {
|
||||
radius: 4
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,424 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 1000px;
|
||||
height: 420px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highstock.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock.
|
||||
* It also shows custom graphics drawn in the chart area on chart load.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Fires on chart load, called from the chart.events.load option.
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
// Draw the spiked disc
|
||||
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();
|
||||
|
||||
// Employee image overlay
|
||||
empImage = this.renderer.path(path)
|
||||
.attr({
|
||||
zIndex: 7,
|
||||
opacity: 0,
|
||||
stroke: badgeColor,
|
||||
'stroke-width': 1
|
||||
})
|
||||
.add();
|
||||
|
||||
// Big 5
|
||||
big5 = this.renderer.text('5')
|
||||
.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
|
||||
});
|
||||
|
||||
// Draw the label
|
||||
label = this.renderer.text('Highcharts Anniversary')
|
||||
.attr({
|
||||
zIndex: 6
|
||||
})
|
||||
.css({
|
||||
color: '#FFFFFF'
|
||||
})
|
||||
.add();
|
||||
|
||||
left = centerX - label.getBBox().width / 2;
|
||||
right = centerX + label.getBBox().width / 2;
|
||||
|
||||
label.attr({
|
||||
x: left,
|
||||
y: centerY + 44
|
||||
});
|
||||
|
||||
// The band
|
||||
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();
|
||||
|
||||
// 2009-2014
|
||||
years = this.renderer.text('2009-2014')
|
||||
.attr({
|
||||
zIndex: 6
|
||||
})
|
||||
.css({
|
||||
color: '#FFFFFF',
|
||||
fontStyle: 'italic',
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
years.attr({
|
||||
x: centerX - years.getBBox().width / 2,
|
||||
y: centerY + 62
|
||||
});
|
||||
|
||||
|
||||
// Prepare mouseover
|
||||
renderer = this.renderer;
|
||||
if (renderer.defs) { // is SVG
|
||||
$.each(this.get('employees').points, function () {
|
||||
var point = this,
|
||||
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 });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var 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 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(2014, 10, 27),
|
||||
color: '#FFEFFF',
|
||||
label: {
|
||||
text: '<em>Offices:</em><br> VikØrsta',
|
||||
style: {
|
||||
color: '#999999'
|
||||
},
|
||||
y: 30
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts and Highsoft timeline'
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
style: {
|
||||
width: '250px'
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
max: 100,
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
gridLineColor: 'rgba(0, 0, 0, 0.07)'
|
||||
}, {
|
||||
allowDecimals: false,
|
||||
max: 15,
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'spline',
|
||||
id: 'google-trends',
|
||||
dashStyle: 'dash',
|
||||
name: 'Google search for <em>highcharts</em>',
|
||||
data: [{ x: 1258322400000, /* November 2009 */ y: 0 }, { x: 1260961200000, y: 5 }, { x: 1263639600000, y: 7 }, { x: 1266188400000, y: 5 }, { x: 1268740800000, y: 6 }, { x: 1271368800000, y: 8 }, { x: 1274004000000, y: 11 }, { x: 1276639200000, y: 9 }, { x: 1279274400000, y: 12 }, { x: 1281952800000, y: 13 }, { x: 1284588000000, y: 17 }, { x: 1287223200000, y: 17 }, { x: 1289858400000, y: 18 }, { x: 1292497200000, y: 20 }, { x: 1295175600000, y: 20 }, { x: 1297724400000, y: 27 }, { x: 1300276800000, y: 32 }, { x: 1302904800000, y: 29 }, { x: 1305540000000, y: 34 }, { x: 1308175200000, y: 34 }, { x: 1310810400000, y: 36 }, { x: 1313488800000, y: 43 }, { x: 1316124000000, y: 44 }, { x: 1318759200000, y: 42 }, { x: 1321394400000, y: 47 }, { x: 1324033200000, y: 46 }, { x: 1326711600000, y: 50 }, { x: 1329303600000, y: 57 }, { x: 1331899200000, y: 54 }, { x: 1334527200000, y: 59 }, { x: 1337162400000, y: 62 }, { x: 1339797600000, y: 66 }, { x: 1342432800000, y: 61 }, { x: 1345111200000, y: 68 }, { x: 1347746400000, y: 67 }, { x: 1350381600000, y: 73 }, { x: 1353016800000, y: 63 }, { x: 1355655600000, y: 54 }, { x: 1358334000000, y: 67 }, { x: 1360882800000, y: 74 }, { x: 1363435200000, y: 81 }, { x: 1366063200000, y: 89 }, { x: 1368698400000, y: 83 }, { x: 1371333600000, y: 88 }, { x: 1373968800000, y: 86 }, { x: 1376647200000, y: 81 }, { x: 1379282400000, y: 83 }, { x: 1381917600000, y: 95 }, { x: 1384552800000, y: 86 }, { x: 1387191600000, y: 83 }, { x: 1389870000000, y: 89 }, { x: 1392418800000, y: 90 }, { x: 1394971200000, y: 94 }, { x: 1397599200000, y: 100 }, { x: 1400234400000, y: 100 }, { x: 1402869600000, y: 99 }, { x: 1405504800000, y: 99 }, { x: 1408183200000, y: 93 }, { x: 1410818400000, y: 97 }, { x: 1413453600000, y: 98 }],
|
||||
tooltip: {
|
||||
xDateFormat: '%B %Y',
|
||||
valueSuffix: ' % of best month'
|
||||
}
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
id: 'revenue',
|
||||
type: 'area',
|
||||
data: [[1257033600000, 2], [1259625600000, 3], [1262304000000, 2], [1264982400000, 3], [1267401600000, 4], [1270080000000, 4], [1272672000000, 4], [1275350400000, 4], [1277942400000, 5], [1280620800000, 7], [1283299200000, 6], [1285891200000, 9], [1288569600000, 10], [1291161600000, 8], [1293840000000, 10], [1296518400000, 13], [1298937600000, 15], [1301616000000, 14], [1304208000000, 15], [1306886400000, 16], [1309478400000, 22], [1312156800000, 19], [1314835200000, 20], [1317427200000, 32], [1320105600000, 34], [1322697600000, 36], [1325376000000, 34], [1328054400000, 40], [1330560000000, 37], [1333238400000, 35], [1335830400000, 40], [1338508800000, 38], [1341100800000, 39], [1343779200000, 43], [1346457600000, 49], [1349049600000, 43], [1351728000000, 54], [1354320000000, 44], [1356998400000, 43], [1359676800000, 43], [1362096000000, 52], [1364774400000, 52], [1367366400000, 56], [1370044800000, 62], [1372636800000, 66], [1375315200000, 62], [1377993600000, 63], [1380585600000, 60], [1383264000000, 60], [1385856000000, 58], [1388534400000, 65], [1391212800000, 52], [1393632000000, 72], [1396310400000, 57], [1398902400000, 70], [1401580800000, 63], [1404172800000, 65], [1406851200000, 65], [1409529600000, 89], [1412121600000, 100]],
|
||||
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: [
|
||||
{ x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein worked alone', image: 'Torstein' },
|
||||
{ x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe joined', image: 'Grethe' },
|
||||
{ x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik joined', image: null },
|
||||
{ x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert joined', image: 'Gert' },
|
||||
{ x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde joined', image: 'Hilde' },
|
||||
{ x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro joined', image: 'Guro' },
|
||||
{ x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null },
|
||||
{ x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn joined', image: 'AnneJorunn' },
|
||||
{ x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. joined', image: null },
|
||||
{ x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild joined', image: 'JonArild' },
|
||||
{ x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein joined', image: 'Oystein' },
|
||||
{ x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane joined', image: 'Stephane' },
|
||||
{ x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita joined', image: 'Anita' },
|
||||
{ x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null }
|
||||
]
|
||||
|
||||
}]
|
||||
};
|
||||
|
||||
// Add flags for important milestones. This requires Highstock.
|
||||
if (Highcharts.seriesTypes.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: '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: 'Highstock 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' }
|
||||
],
|
||||
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' }
|
||||
],
|
||||
onSeries: 'revenue',
|
||||
showInLegend: false
|
||||
});
|
||||
}
|
||||
|
||||
$('#container').highcharts(options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
title: {
|
||||
text: 'Combination chart'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
|
||||
},
|
||||
labels: {
|
||||
items: [{
|
||||
html: 'Total fruit consumption',
|
||||
style: {
|
||||
left: '50px',
|
||||
top: '18px',
|
||||
color: (Highcharts.theme && Highcharts.theme.textColor) || '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
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container, #sliders {
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#container {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-3d.js"></script>
|
||||
<script src="../../code/modules/cylinder.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'cylinder',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
depth: 50,
|
||||
viewDistance: 25
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Highcharts Cylinder Chart'
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
depth: 25,
|
||||
colorByPoint: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
||||
name: 'Cylinders',
|
||||
showInLegend: false
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'scatter',
|
||||
margin: [70, 50, 60, 80],
|
||||
events: {
|
||||
click: function (e) {
|
||||
// find the clicked values and the series
|
||||
var x = Math.round(e.xAxis[0].value),
|
||||
y = Math.round(e.yAxis[0].value),
|
||||
series = this.series[0];
|
||||
|
||||
// Add it
|
||||
series.addPoint([x, y]);
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'User supplied data'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click the plot area to add a point. Click a point to remove it.'
|
||||
},
|
||||
xAxis: {
|
||||
gridLineWidth: 1,
|
||||
minPadding: 0.2,
|
||||
maxPadding: 0.2,
|
||||
maxZoom: 60
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Value'
|
||||
},
|
||||
minPadding: 0.2,
|
||||
maxPadding: 0.2,
|
||||
maxZoom: 60,
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
exporting: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth: 1,
|
||||
point: {
|
||||
events: {
|
||||
'click': function () {
|
||||
if (this.series.data.length > 1) {
|
||||
this.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [[20, 20], [80, 80]]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$.getJSON(
|
||||
'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',
|
||||
function (data) {
|
||||
var detailChart;
|
||||
|
||||
// create the detail chart
|
||||
function createDetail(masterChart) {
|
||||
|
||||
// prepare the detail chart
|
||||
var detailData = [],
|
||||
detailStart = data[0][0];
|
||||
|
||||
$.each(masterChart.series[0].data, function () {
|
||||
if (this.x >= detailStart) {
|
||||
detailData.push(this.y);
|
||||
}
|
||||
});
|
||||
|
||||
// create a detail chart referenced by a global variable
|
||||
detailChart = Highcharts.chart('detail-container', {
|
||||
chart: {
|
||||
marginBottom: 120,
|
||||
reflow: false,
|
||||
marginLeft: 50,
|
||||
marginRight: 20,
|
||||
style: {
|
||||
position: 'absolute'
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: 'Historical USD to EUR Exchange Rate'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Select an area by dragging across the lower chart'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
maxZoom: 0.1
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
var point = this.points[0];
|
||||
return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
|
||||
'1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
|
||||
},
|
||||
shared: true
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
marker: {
|
||||
enabled: false,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'USD to EUR',
|
||||
pointStart: detailStart,
|
||||
pointInterval: 24 * 3600 * 1000,
|
||||
data: detailData
|
||||
}],
|
||||
|
||||
exporting: {
|
||||
enabled: false
|
||||
}
|
||||
|
||||
}); // return chart
|
||||
}
|
||||
|
||||
// create the master chart
|
||||
function createMaster() {
|
||||
Highcharts.chart('master-container', {
|
||||
chart: {
|
||||
reflow: false,
|
||||
borderWidth: 0,
|
||||
backgroundColor: null,
|
||||
marginLeft: 50,
|
||||
marginRight: 20,
|
||||
zoomType: 'x',
|
||||
events: {
|
||||
|
||||
// listen to the selection event on the master chart to update the
|
||||
// extremes of the detail chart
|
||||
selection: function (event) {
|
||||
var extremesObject = event.xAxis[0],
|
||||
min = extremesObject.min,
|
||||
max = extremesObject.max,
|
||||
detailData = [],
|
||||
xAxis = this.xAxis[0];
|
||||
|
||||
// reverse engineer the last part of the data
|
||||
$.each(this.series[0].data, function () {
|
||||
if (this.x > min && this.x < max) {
|
||||
detailData.push([this.x, this.y]);
|
||||
}
|
||||
});
|
||||
|
||||
// move the plot bands to reflect the new detail span
|
||||
xAxis.removePlotBand('mask-before');
|
||||
xAxis.addPlotBand({
|
||||
id: 'mask-before',
|
||||
from: data[0][0],
|
||||
to: min,
|
||||
color: 'rgba(0, 0, 0, 0.2)'
|
||||
});
|
||||
|
||||
xAxis.removePlotBand('mask-after');
|
||||
xAxis.addPlotBand({
|
||||
id: 'mask-after',
|
||||
from: max,
|
||||
to: data[data.length - 1][0],
|
||||
color: 'rgba(0, 0, 0, 0.2)'
|
||||
});
|
||||
|
||||
|
||||
detailChart.series[0].setData(detailData);
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
showLastTickLabel: true,
|
||||
maxZoom: 14 * 24 * 3600000, // fourteen days
|
||||
plotBands: [{
|
||||
id: 'mask-before',
|
||||
from: data[0][0],
|
||||
to: data[data.length - 1][0],
|
||||
color: 'rgba(0, 0, 0, 0.2)'
|
||||
}],
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 0,
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
min: 0.6,
|
||||
showFirstLabel: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
fillColor: {
|
||||
linearGradient: [0, 0, 0, 70],
|
||||
stops: [
|
||||
[0, Highcharts.getOptions().colors[0]],
|
||||
[1, 'rgba(255,255,255,0)']
|
||||
]
|
||||
},
|
||||
lineWidth: 1,
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
shadow: false,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
enableMouseTracking: false
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'area',
|
||||
name: 'USD to EUR',
|
||||
pointInterval: 24 * 3600 * 1000,
|
||||
pointStart: data[0][0],
|
||||
data: data
|
||||
}],
|
||||
|
||||
exporting: {
|
||||
enabled: false
|
||||
}
|
||||
|
||||
}, function (masterChart) {
|
||||
createDetail(masterChart);
|
||||
}); // return chart instance
|
||||
}
|
||||
|
||||
// make the container smaller and add a second container for the master chart
|
||||
var $container = $('#container')
|
||||
.css('position', 'relative');
|
||||
|
||||
$('<div id="detail-container">')
|
||||
.appendTo($container);
|
||||
|
||||
$('<div id="master-container">')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: 300,
|
||||
height: 100,
|
||||
width: '100%'
|
||||
})
|
||||
.appendTo($container);
|
||||
|
||||
// create master and in its callback, create the detail chart
|
||||
createMaster();
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 310px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline',
|
||||
animation: Highcharts.svg, // don't animate in old IE
|
||||
marginRight: 10,
|
||||
events: {
|
||||
load: function () {
|
||||
|
||||
// set up the updating of the chart each second
|
||||
var series = this.series[0];
|
||||
setInterval(function () {
|
||||
var x = (new Date()).getTime(), // current time
|
||||
y = Math.random();
|
||||
series.addPoint([x, y], true, true);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
time: {
|
||||
useUTC: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Live random data'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
tickPixelInterval: 150
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Value'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<b>{series.name}</b><br/>',
|
||||
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
exporting: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Random data',
|
||||
data: (function () {
|
||||
// generate an array of random data
|
||||
var data = [],
|
||||
time = (new Date()).getTime(),
|
||||
i;
|
||||
|
||||
for (i = -19; i <= 0; i += 1) {
|
||||
data.push({
|
||||
x: time + i * 1000,
|
||||
y: Math.random()
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}())
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
zoomType: 'xy'
|
||||
},
|
||||
title: {
|
||||
text: 'Temperature vs Rainfall'
|
||||
},
|
||||
xAxis: [{
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
}],
|
||||
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
|
||||
},
|
||||
|
||||
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: {
|
||||
pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
|
||||
}
|
||||
}, {
|
||||
name: 'Rainfall error',
|
||||
type: 'errorbar',
|
||||
yAxis: 1,
|
||||
data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]],
|
||||
tooltip: {
|
||||
pointFormat: '(error range: {point.low}-{point.high} mm)<br/>'
|
||||
}
|
||||
}, {
|
||||
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: {
|
||||
pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
|
||||
}
|
||||
}, {
|
||||
name: 'Temperature error',
|
||||
type: 'errorbar',
|
||||
data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],
|
||||
tooltip: {
|
||||
pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 320px;
|
||||
max-width: 600px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/venn.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
Highcharts.chart('container', {
|
||||
series: [{
|
||||
type: 'venn',
|
||||
data: [{
|
||||
sets: ['A'],
|
||||
value: 4,
|
||||
name: 'Euler diagrams',
|
||||
description: 'An Euler diagram is a diagrammatic means of representing sets and their' +
|
||||
'relationships. Unlike Venn diagrams, which show all possible relations' +
|
||||
'between different sets, the Euler diagram shows only relevant' +
|
||||
'relationships.'
|
||||
}, {
|
||||
sets: ['B'],
|
||||
value: 1,
|
||||
name: 'Venn diagrams',
|
||||
description: 'In Venn diagrams the curves are overlapped in every possible way,' +
|
||||
'showing all possible relations between the sets. They are thus a' +
|
||||
'special case of Euler diagrams, which do not necessarily show all' +
|
||||
'relations'
|
||||
}, {
|
||||
sets: ['A', 'B'],
|
||||
value: 1
|
||||
}]
|
||||
}],
|
||||
tooltip: {
|
||||
headerFormat:
|
||||
'<span style="color:{point.color}">\u2022</span> ' +
|
||||
'<span style="font-size: 14px"> {point.point.name}</span><br/>',
|
||||
pointFormat: '{point.description}<br><span style="font-size: 10px">Source: Wikipedia</span>'
|
||||
},
|
||||
title: {
|
||||
text: 'Relationship between Euler and Venn diagrams'
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/funnel.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'funnel'
|
||||
},
|
||||
title: {
|
||||
text: 'Sales funnel'
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b> ({point.y:,.0f})',
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
|
||||
softConnector: true
|
||||
},
|
||||
center: ['40%', '50%'],
|
||||
neckWidth: '30%',
|
||||
neckHeight: '25%',
|
||||
width: '80%'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Unique users',
|
||||
data: [
|
||||
['Website visits', 15654],
|
||||
['Downloads', 4064],
|
||||
['Requested price list', 1987],
|
||||
['Invoice sent', 976],
|
||||
['Finalized', 846]
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
min-width: 380px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/solid-gauge.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Uncomment to style it like Apple Watch
|
||||
/*
|
||||
if (!Highcharts.theme) {
|
||||
Highcharts.setOptions({
|
||||
chart: {
|
||||
backgroundColor: 'black'
|
||||
},
|
||||
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
|
||||
title: {
|
||||
style: {
|
||||
color: 'silver'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
color: 'silver'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// */
|
||||
|
||||
/**
|
||||
* In the chart render event, add icons on top of the circular shapes
|
||||
*/
|
||||
function renderIcons() {
|
||||
|
||||
// Move icon
|
||||
if (!this.series[0].icon) {
|
||||
this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
|
||||
.attr({
|
||||
'stroke': '#303030',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-width': 2,
|
||||
'zIndex': 10
|
||||
})
|
||||
.add(this.series[2].group);
|
||||
}
|
||||
this.series[0].icon.translate(
|
||||
this.chartWidth / 2 - 10,
|
||||
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
|
||||
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
|
||||
);
|
||||
|
||||
// Exercise icon
|
||||
if (!this.series[1].icon) {
|
||||
this.series[1].icon = this.renderer.path(
|
||||
['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
|
||||
'M', 8, -8, 'L', 16, 0, 8, 8]
|
||||
)
|
||||
.attr({
|
||||
'stroke': '#ffffff',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-width': 2,
|
||||
'zIndex': 10
|
||||
})
|
||||
.add(this.series[2].group);
|
||||
}
|
||||
this.series[1].icon.translate(
|
||||
this.chartWidth / 2 - 10,
|
||||
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
|
||||
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
|
||||
);
|
||||
|
||||
// Stand icon
|
||||
if (!this.series[2].icon) {
|
||||
this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
|
||||
.attr({
|
||||
'stroke': '#303030',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-width': 2,
|
||||
'zIndex': 10
|
||||
})
|
||||
.add(this.series[2].group);
|
||||
}
|
||||
|
||||
this.series[2].icon.translate(
|
||||
this.chartWidth / 2 - 10,
|
||||
this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
|
||||
(this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
|
||||
);
|
||||
}
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'solidgauge',
|
||||
height: '110%',
|
||||
events: {
|
||||
render: renderIcons
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Activity',
|
||||
style: {
|
||||
fontSize: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
borderWidth: 0,
|
||||
backgroundColor: 'none',
|
||||
shadow: false,
|
||||
style: {
|
||||
fontSize: '16px'
|
||||
},
|
||||
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
|
||||
positioner: function (labelWidth) {
|
||||
return {
|
||||
x: (this.chart.chartWidth - labelWidth) / 2,
|
||||
y: (this.chart.plotHeight / 2) + 15
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
background: [{ // Track for Move
|
||||
outerRadius: '112%',
|
||||
innerRadius: '88%',
|
||||
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
|
||||
.setOpacity(0.3)
|
||||
.get(),
|
||||
borderWidth: 0
|
||||
}, { // Track for Exercise
|
||||
outerRadius: '87%',
|
||||
innerRadius: '63%',
|
||||
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
|
||||
.setOpacity(0.3)
|
||||
.get(),
|
||||
borderWidth: 0
|
||||
}, { // Track for Stand
|
||||
outerRadius: '62%',
|
||||
innerRadius: '38%',
|
||||
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
|
||||
.setOpacity(0.3)
|
||||
.get(),
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
lineWidth: 0,
|
||||
tickPositions: []
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
solidgauge: {
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
linecap: 'round',
|
||||
stickyTracking: false,
|
||||
rounded: true
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Move',
|
||||
data: [{
|
||||
color: Highcharts.getOptions().colors[0],
|
||||
radius: '112%',
|
||||
innerRadius: '88%',
|
||||
y: 80
|
||||
}]
|
||||
}, {
|
||||
name: 'Exercise',
|
||||
data: [{
|
||||
color: Highcharts.getOptions().colors[1],
|
||||
radius: '87%',
|
||||
innerRadius: '63%',
|
||||
y: 65
|
||||
}]
|
||||
}, {
|
||||
name: 'Stand',
|
||||
data: [{
|
||||
color: Highcharts.getOptions().colors[2],
|
||||
radius: '62%',
|
||||
innerRadius: '38%',
|
||||
y: 50
|
||||
}]
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
/**
|
||||
* Get the current time
|
||||
*/
|
||||
function getNow() {
|
||||
var now = new Date();
|
||||
|
||||
return {
|
||||
hours: now.getHours() + now.getMinutes() / 60,
|
||||
minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
|
||||
seconds: now.getSeconds() * 12 / 60
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Pad numbers
|
||||
*/
|
||||
function pad(number, length) {
|
||||
// Create an array of the remaining length + 1 and join it with 0's
|
||||
return new Array((length || 2) + 1 - String(number).length).join(0) + number;
|
||||
}
|
||||
|
||||
var now = getNow();
|
||||
|
||||
// Create the chart
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false,
|
||||
height: '80%'
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'The Highcharts clock'
|
||||
},
|
||||
|
||||
pane: {
|
||||
background: [{
|
||||
// default background
|
||||
}, {
|
||||
// reflex for supported browsers
|
||||
backgroundColor: Highcharts.svg ? {
|
||||
radialGradient: {
|
||||
cx: 0.5,
|
||||
cy: -0.4,
|
||||
r: 1.9
|
||||
},
|
||||
stops: [
|
||||
[0.5, 'rgba(255, 255, 255, 0.2)'],
|
||||
[0.5, 'rgba(200, 200, 200, 0.2)']
|
||||
]
|
||||
} : null
|
||||
}]
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
labels: {
|
||||
distance: -20
|
||||
},
|
||||
min: 0,
|
||||
max: 12,
|
||||
lineWidth: 0,
|
||||
showFirstLabel: false,
|
||||
|
||||
minorTickInterval: 'auto',
|
||||
minorTickWidth: 1,
|
||||
minorTickLength: 5,
|
||||
minorTickPosition: 'inside',
|
||||
minorGridLineWidth: 0,
|
||||
minorTickColor: '#666',
|
||||
|
||||
tickInterval: 1,
|
||||
tickWidth: 2,
|
||||
tickPosition: 'inside',
|
||||
tickLength: 10,
|
||||
tickColor: '#666',
|
||||
title: {
|
||||
text: 'Powered by<br/>Highcharts',
|
||||
style: {
|
||||
color: '#BBB',
|
||||
fontWeight: 'normal',
|
||||
fontSize: '8px',
|
||||
lineHeight: '10px'
|
||||
},
|
||||
y: 10
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return this.series.chart.tooltipText;
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [{
|
||||
id: 'hour',
|
||||
y: now.hours,
|
||||
dial: {
|
||||
radius: '60%',
|
||||
baseWidth: 4,
|
||||
baseLength: '95%',
|
||||
rearLength: 0
|
||||
}
|
||||
}, {
|
||||
id: 'minute',
|
||||
y: now.minutes,
|
||||
dial: {
|
||||
baseLength: '95%',
|
||||
rearLength: 0
|
||||
}
|
||||
}, {
|
||||
id: 'second',
|
||||
y: now.seconds,
|
||||
dial: {
|
||||
radius: '100%',
|
||||
baseWidth: 1,
|
||||
rearLength: '20%'
|
||||
}
|
||||
}],
|
||||
animation: false,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
// Move
|
||||
function (chart) {
|
||||
setInterval(function () {
|
||||
|
||||
now = getNow();
|
||||
|
||||
if (chart.axes) { // not destroyed
|
||||
var hour = chart.get('hour'),
|
||||
minute = chart.get('minute'),
|
||||
second = chart.get('second'),
|
||||
// run animation unless we're wrapping around from 59 to 0
|
||||
animation = now.seconds === 0 ?
|
||||
false : {
|
||||
easing: 'easeOutBounce'
|
||||
};
|
||||
|
||||
// Cache the tooltip text
|
||||
chart.tooltipText =
|
||||
pad(Math.floor(now.hours), 2) + ':' +
|
||||
pad(Math.floor(now.minutes * 5), 2) + ':' +
|
||||
pad(now.seconds * 5, 2);
|
||||
|
||||
|
||||
hour.update(now.hours, true, animation);
|
||||
minute.update(now.minutes, true, animation);
|
||||
second.update(now.seconds, true, animation);
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Easing function from https://github.com/danro/easing-js/blob/master/easing.js
|
||||
*/
|
||||
Math.easeOutBounce = function (pos) {
|
||||
if ((pos) < (1 / 2.75)) {
|
||||
return (7.5625 * pos * pos);
|
||||
}
|
||||
if (pos < (2 / 2.75)) {
|
||||
return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
|
||||
}
|
||||
if (pos < (2.5 / 2.75)) {
|
||||
return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
|
||||
}
|
||||
return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
alignTicks: false,
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Speedometer with dual axes'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: -150,
|
||||
endAngle: 150
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
max: 200,
|
||||
lineColor: '#339',
|
||||
tickColor: '#339',
|
||||
minorTickColor: '#339',
|
||||
offset: -25,
|
||||
lineWidth: 2,
|
||||
labels: {
|
||||
distance: -20,
|
||||
rotation: 'auto'
|
||||
},
|
||||
tickLength: 5,
|
||||
minorTickLength: 5,
|
||||
endOnTick: false
|
||||
}, {
|
||||
min: 0,
|
||||
max: 124,
|
||||
tickPosition: 'outside',
|
||||
lineColor: '#933',
|
||||
lineWidth: 2,
|
||||
minorTickPosition: 'outside',
|
||||
tickColor: '#933',
|
||||
minorTickColor: '#933',
|
||||
tickLength: 5,
|
||||
minorTickLength: 5,
|
||||
labels: {
|
||||
distance: 12,
|
||||
rotation: 'auto'
|
||||
},
|
||||
offset: -20,
|
||||
endOnTick: false
|
||||
}],
|
||||
|
||||
series: [{
|
||||
name: 'Speed',
|
||||
data: [80],
|
||||
dataLabels: {
|
||||
formatter: function () {
|
||||
var kmh = this.y,
|
||||
mph = Math.round(kmh * 0.621);
|
||||
return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
|
||||
'<span style="color:#933">' + mph + ' mph</span>';
|
||||
},
|
||||
backgroundColor: {
|
||||
linearGradient: {
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 0,
|
||||
y2: 1
|
||||
},
|
||||
stops: [
|
||||
[0, '#DDD'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' km/h'
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
// Add some life
|
||||
function (chart) {
|
||||
setInterval(function () {
|
||||
if (chart.axes) { // not destroyed
|
||||
var point = chart.series[0].points[0],
|
||||
newVal,
|
||||
inc = Math.round((Math.random() - 0.5) * 20);
|
||||
|
||||
newVal = point.y + inc;
|
||||
if (newVal < 0 || newVal > 200) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
.outer {
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.outer .chart-container {
|
||||
width: 300px;
|
||||
float: left;
|
||||
height: 200px;
|
||||
}
|
||||
.highcharts-yaxis-grid .highcharts-grid-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.outer {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.outer .chart-container {
|
||||
width: 300px;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
|
||||
<script src="../../code/modules/solid-gauge.js"></script>
|
||||
|
||||
<div class="outer">
|
||||
<div id="container-speed" class="chart-container"></div>
|
||||
<div id="container-rpm" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
var gaugeOptions = {
|
||||
|
||||
chart: {
|
||||
type: 'solidgauge'
|
||||
},
|
||||
|
||||
title: null,
|
||||
|
||||
pane: {
|
||||
center: ['50%', '85%'],
|
||||
size: '140%',
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
background: {
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
|
||||
innerRadius: '60%',
|
||||
outerRadius: '100%',
|
||||
shape: 'arc'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
stops: [
|
||||
[0.1, '#55BF3B'], // green
|
||||
[0.5, '#DDDF0D'], // yellow
|
||||
[0.9, '#DF5353'] // red
|
||||
],
|
||||
lineWidth: 0,
|
||||
minorTickInterval: null,
|
||||
tickAmount: 2,
|
||||
title: {
|
||||
y: -70
|
||||
},
|
||||
labels: {
|
||||
y: 16
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
solidgauge: {
|
||||
dataLabels: {
|
||||
y: 5,
|
||||
borderWidth: 0,
|
||||
useHTML: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// The speed gauge
|
||||
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 200,
|
||||
title: {
|
||||
text: 'Speed'
|
||||
}
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Speed',
|
||||
data: [80],
|
||||
dataLabels: {
|
||||
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
|
||||
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
|
||||
'<span style="font-size:12px;color:silver">km/h</span></div>'
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' km/h'
|
||||
}
|
||||
}]
|
||||
|
||||
}));
|
||||
|
||||
// The RPM gauge
|
||||
var chartRpm = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions, {
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 5,
|
||||
title: {
|
||||
text: 'RPM'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'RPM',
|
||||
data: [1],
|
||||
dataLabels: {
|
||||
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
|
||||
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
|
||||
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' revolutions/min'
|
||||
}
|
||||
}]
|
||||
|
||||
}));
|
||||
|
||||
// Bring life to the dials
|
||||
setInterval(function () {
|
||||
// Speed
|
||||
var point,
|
||||
newVal,
|
||||
inc;
|
||||
|
||||
if (chartSpeed) {
|
||||
point = chartSpeed.series[0].points[0];
|
||||
inc = Math.round((Math.random() - 0.5) * 100);
|
||||
newVal = point.y + inc;
|
||||
|
||||
if (newVal < 0 || newVal > 200) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
}
|
||||
|
||||
// RPM
|
||||
if (chartRpm) {
|
||||
point = chartRpm.series[0].points[0];
|
||||
inc = Math.random() - 0.5;
|
||||
newVal = point.y + inc;
|
||||
|
||||
if (newVal < 0 || newVal > 5) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Speedometer'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
background: [{
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#FFF'],
|
||||
[1, '#333']
|
||||
]
|
||||
},
|
||||
borderWidth: 0,
|
||||
outerRadius: '109%'
|
||||
}, {
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#333'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
},
|
||||
borderWidth: 1,
|
||||
outerRadius: '107%'
|
||||
}, {
|
||||
// default background
|
||||
}, {
|
||||
backgroundColor: '#DDD',
|
||||
borderWidth: 0,
|
||||
outerRadius: '105%',
|
||||
innerRadius: '103%'
|
||||
}]
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 200,
|
||||
|
||||
minorTickInterval: 'auto',
|
||||
minorTickWidth: 1,
|
||||
minorTickLength: 10,
|
||||
minorTickPosition: 'inside',
|
||||
minorTickColor: '#666',
|
||||
|
||||
tickPixelInterval: 30,
|
||||
tickWidth: 2,
|
||||
tickPosition: 'inside',
|
||||
tickLength: 10,
|
||||
tickColor: '#666',
|
||||
labels: {
|
||||
step: 2,
|
||||
rotation: 'auto'
|
||||
},
|
||||
title: {
|
||||
text: 'km/h'
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 120,
|
||||
color: '#55BF3B' // green
|
||||
}, {
|
||||
from: 120,
|
||||
to: 160,
|
||||
color: '#DDDF0D' // yellow
|
||||
}, {
|
||||
from: 160,
|
||||
to: 200,
|
||||
color: '#DF5353' // red
|
||||
}]
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Speed',
|
||||
data: [80],
|
||||
tooltip: {
|
||||
valueSuffix: ' km/h'
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
// Add some life
|
||||
function (chart) {
|
||||
if (!chart.renderer.forExport) {
|
||||
setInterval(function () {
|
||||
var point = chart.series[0].points[0],
|
||||
newVal,
|
||||
inc = Math.round((Math.random() - 0.5) * 20);
|
||||
|
||||
newVal = point.y + inc;
|
||||
if (newVal < 0 || newVal > 200) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBorderWidth: 1,
|
||||
plotBackgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#FFF4C6'],
|
||||
[0.3, '#FFFFFF'],
|
||||
[1, '#FFF4C6']
|
||||
]
|
||||
},
|
||||
plotBackgroundImage: null,
|
||||
height: 200
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'VU meter'
|
||||
},
|
||||
|
||||
pane: [{
|
||||
startAngle: -45,
|
||||
endAngle: 45,
|
||||
background: null,
|
||||
center: ['25%', '145%'],
|
||||
size: 300
|
||||
}, {
|
||||
startAngle: -45,
|
||||
endAngle: 45,
|
||||
background: null,
|
||||
center: ['75%', '145%'],
|
||||
size: 300
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
min: -20,
|
||||
max: 6,
|
||||
minorTickPosition: 'outside',
|
||||
tickPosition: 'outside',
|
||||
labels: {
|
||||
rotation: 'auto',
|
||||
distance: 20
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 6,
|
||||
color: '#C02316',
|
||||
innerRadius: '100%',
|
||||
outerRadius: '105%'
|
||||
}],
|
||||
pane: 0,
|
||||
title: {
|
||||
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
|
||||
y: -40
|
||||
}
|
||||
}, {
|
||||
min: -20,
|
||||
max: 6,
|
||||
minorTickPosition: 'outside',
|
||||
tickPosition: 'outside',
|
||||
labels: {
|
||||
rotation: 'auto',
|
||||
distance: 20
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 6,
|
||||
color: '#C02316',
|
||||
innerRadius: '100%',
|
||||
outerRadius: '105%'
|
||||
}],
|
||||
pane: 1,
|
||||
title: {
|
||||
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
|
||||
y: -40
|
||||
}
|
||||
}],
|
||||
|
||||
plotOptions: {
|
||||
gauge: {
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
dial: {
|
||||
radius: '100%'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
series: [{
|
||||
name: 'Channel A',
|
||||
data: [-20],
|
||||
yAxis: 0
|
||||
}, {
|
||||
name: 'Channel B',
|
||||
data: [-20],
|
||||
yAxis: 1
|
||||
}]
|
||||
|
||||
},
|
||||
|
||||
// Let the music play
|
||||
function (chart) {
|
||||
setInterval(function () {
|
||||
if (chart.series) { // the chart may be destroyed
|
||||
var left = chart.series[0].points[0],
|
||||
right = chart.series[1].points[0],
|
||||
leftVal,
|
||||
rightVal,
|
||||
inc = (Math.random() - 0.5) * 3;
|
||||
|
||||
leftVal = left.y + inc;
|
||||
rightVal = leftVal + inc / 3;
|
||||
if (leftVal < -20 || leftVal > 6) {
|
||||
leftVal = left.y - inc;
|
||||
}
|
||||
if (rightVal < -20 || rightVal > 6) {
|
||||
rightVal = leftVal;
|
||||
}
|
||||
|
||||
left.update(leftVal, false);
|
||||
right.update(rightVal, false);
|
||||
chart.redraw();
|
||||
}
|
||||
}, 500);
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/heatmap.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
|
||||
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'heatmap',
|
||||
marginTop: 40,
|
||||
marginBottom: 80,
|
||||
plotBorderWidth: 1
|
||||
},
|
||||
|
||||
|
||||
title: {
|
||||
text: 'Sales per employee per weekday'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
||||
title: null
|
||||
},
|
||||
|
||||
colorAxis: {
|
||||
min: 0,
|
||||
minColor: '#FFFFFF',
|
||||
maxColor: Highcharts.getOptions().colors[0]
|
||||
},
|
||||
|
||||
legend: {
|
||||
align: 'right',
|
||||
layout: 'vertical',
|
||||
margin: 0,
|
||||
verticalAlign: 'top',
|
||||
y: 25,
|
||||
symbolHeight: 280
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
|
||||
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Sales per employee',
|
||||
borderWidth: 1,
|
||||
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
color: '#000000'
|
||||
}
|
||||
}]
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/histogram-bellcurve.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3];
|
||||
|
||||
Highcharts.chart('container', {
|
||||
title: {
|
||||
text: 'Highcharts Histogram'
|
||||
},
|
||||
xAxis: [{
|
||||
title: { text: 'Data' },
|
||||
alignTicks: false
|
||||
}, {
|
||||
title: { text: 'Histogram' },
|
||||
alignTicks: false,
|
||||
opposite: true
|
||||
}],
|
||||
|
||||
yAxis: [{
|
||||
title: { text: 'Data' }
|
||||
}, {
|
||||
title: { text: 'Histogram' },
|
||||
opposite: true
|
||||
}],
|
||||
|
||||
series: [{
|
||||
name: 'Histogram',
|
||||
type: 'histogram',
|
||||
xAxis: 1,
|
||||
yAxis: 1,
|
||||
baseSeries: 's1',
|
||||
zIndex: -1
|
||||
}, {
|
||||
name: 'Data',
|
||||
type: 'scatter',
|
||||
data: data,
|
||||
id: 's1',
|
||||
marker: {
|
||||
radius: 1.5
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 360px;
|
||||
max-width: 650px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/heatmap.js"></script>
|
||||
<script src="../../code/modules/tilemap.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'tilemap',
|
||||
inverted: true,
|
||||
height: '80%'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'U.S. states by population in 2016'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Source:<a href="https://simple.wikipedia.org/wiki/List_of_U.S._states_by_population">Wikipedia</a>'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
visible: false
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
visible: false
|
||||
},
|
||||
|
||||
colorAxis: {
|
||||
dataClasses: [{
|
||||
from: 0,
|
||||
to: 1000000,
|
||||
color: '#F9EDB3',
|
||||
name: '< 1M'
|
||||
}, {
|
||||
from: 1000000,
|
||||
to: 5000000,
|
||||
color: '#FFC428',
|
||||
name: '1M - 5M'
|
||||
}, {
|
||||
from: 5000000,
|
||||
to: 20000000,
|
||||
color: '#FF7987',
|
||||
name: '5M - 20M'
|
||||
}, {
|
||||
from: 20000000,
|
||||
color: '#FF2371',
|
||||
name: '> 20M'
|
||||
}]
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
headerFormat: '',
|
||||
pointFormat: 'The population of <b> {point.name}</b> is <b>{point.value}</b>'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.hc-a2}',
|
||||
color: '#000000',
|
||||
style: {
|
||||
textOutline: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: '',
|
||||
data: [{
|
||||
'hc-a2': 'AL',
|
||||
name: 'Alabama',
|
||||
region: 'South',
|
||||
x: 6,
|
||||
y: 7,
|
||||
value: 4849377
|
||||
}, {
|
||||
'hc-a2': 'AK',
|
||||
name: 'Alaska',
|
||||
region: 'West',
|
||||
x: 0,
|
||||
y: 0,
|
||||
value: 737732
|
||||
}, {
|
||||
'hc-a2': 'AZ',
|
||||
name: 'Arizona',
|
||||
region: 'West',
|
||||
x: 5,
|
||||
y: 3,
|
||||
value: 6745408
|
||||
}, {
|
||||
'hc-a2': 'AR',
|
||||
name: 'Arkansas',
|
||||
region: 'South',
|
||||
x: 5,
|
||||
y: 6,
|
||||
value: 2994079
|
||||
}, {
|
||||
'hc-a2': 'CA',
|
||||
name: 'California',
|
||||
region: 'West',
|
||||
x: 5,
|
||||
y: 2,
|
||||
value: 39250017
|
||||
}, {
|
||||
'hc-a2': 'CO',
|
||||
name: 'Colorado',
|
||||
region: 'West',
|
||||
x: 4,
|
||||
y: 3,
|
||||
value: 5540545
|
||||
}, {
|
||||
'hc-a2': 'CT',
|
||||
name: 'Connecticut',
|
||||
region: 'Northeast',
|
||||
x: 3,
|
||||
y: 11,
|
||||
value: 3596677
|
||||
}, {
|
||||
'hc-a2': 'DE',
|
||||
name: 'Delaware',
|
||||
region: 'South',
|
||||
x: 4,
|
||||
y: 9,
|
||||
value: 935614
|
||||
}, {
|
||||
'hc-a2': 'DC',
|
||||
name: 'District of Columbia',
|
||||
region: 'South',
|
||||
x: 4,
|
||||
y: 10,
|
||||
value: 7288000
|
||||
}, {
|
||||
'hc-a2': 'FL',
|
||||
name: 'Florida',
|
||||
region: 'South',
|
||||
x: 8,
|
||||
y: 8,
|
||||
value: 20612439
|
||||
}, {
|
||||
'hc-a2': 'GA',
|
||||
name: 'Georgia',
|
||||
region: 'South',
|
||||
x: 7,
|
||||
y: 8,
|
||||
value: 10310371
|
||||
}, {
|
||||
'hc-a2': 'HI',
|
||||
name: 'Hawaii',
|
||||
region: 'West',
|
||||
x: 8,
|
||||
y: 0,
|
||||
value: 1419561
|
||||
}, {
|
||||
'hc-a2': 'ID',
|
||||
name: 'Idaho',
|
||||
region: 'West',
|
||||
x: 3,
|
||||
y: 2,
|
||||
value: 1634464
|
||||
}, {
|
||||
'hc-a2': 'IL',
|
||||
name: 'Illinois',
|
||||
region: 'Midwest',
|
||||
x: 3,
|
||||
y: 6,
|
||||
value: 12801539
|
||||
}, {
|
||||
'hc-a2': 'IN',
|
||||
name: 'Indiana',
|
||||
region: 'Midwest',
|
||||
x: 3,
|
||||
y: 7,
|
||||
value: 6596855
|
||||
}, {
|
||||
'hc-a2': 'IA',
|
||||
name: 'Iowa',
|
||||
region: 'Midwest',
|
||||
x: 3,
|
||||
y: 5,
|
||||
value: 3107126
|
||||
}, {
|
||||
'hc-a2': 'KS',
|
||||
name: 'Kansas',
|
||||
region: 'Midwest',
|
||||
x: 5,
|
||||
y: 5,
|
||||
value: 2904021
|
||||
}, {
|
||||
'hc-a2': 'KY',
|
||||
name: 'Kentucky',
|
||||
region: 'South',
|
||||
x: 4,
|
||||
y: 6,
|
||||
value: 4413457
|
||||
}, {
|
||||
'hc-a2': 'LA',
|
||||
name: 'Louisiana',
|
||||
region: 'South',
|
||||
x: 6,
|
||||
y: 5,
|
||||
value: 4649676
|
||||
}, {
|
||||
'hc-a2': 'ME',
|
||||
name: 'Maine',
|
||||
region: 'Northeast',
|
||||
x: 0,
|
||||
y: 11,
|
||||
value: 1330089
|
||||
}, {
|
||||
'hc-a2': 'MD',
|
||||
name: 'Maryland',
|
||||
region: 'South',
|
||||
x: 4,
|
||||
y: 8,
|
||||
value: 6016447
|
||||
}, {
|
||||
'hc-a2': 'MA',
|
||||
name: 'Massachusetts',
|
||||
region: 'Northeast',
|
||||
x: 2,
|
||||
y: 10,
|
||||
value: 6811779
|
||||
}, {
|
||||
'hc-a2': 'MI',
|
||||
name: 'Michigan',
|
||||
region: 'Midwest',
|
||||
x: 2,
|
||||
y: 7,
|
||||
value: 9928301
|
||||
}, {
|
||||
'hc-a2': 'MN',
|
||||
name: 'Minnesota',
|
||||
region: 'Midwest',
|
||||
x: 2,
|
||||
y: 4,
|
||||
value: 5519952
|
||||
}, {
|
||||
'hc-a2': 'MS',
|
||||
name: 'Mississippi',
|
||||
region: 'South',
|
||||
x: 6,
|
||||
y: 6,
|
||||
value: 2984926
|
||||
}, {
|
||||
'hc-a2': 'MO',
|
||||
name: 'Missouri',
|
||||
region: 'Midwest',
|
||||
x: 4,
|
||||
y: 5,
|
||||
value: 6093000
|
||||
}, {
|
||||
'hc-a2': 'MT',
|
||||
name: 'Montana',
|
||||
region: 'West',
|
||||
x: 2,
|
||||
y: 2,
|
||||
value: 1023579
|
||||
}, {
|
||||
'hc-a2': 'NE',
|
||||
name: 'Nebraska',
|
||||
region: 'Midwest',
|
||||
x: 4,
|
||||
y: 4,
|
||||
value: 1881503
|
||||
}, {
|
||||
'hc-a2': 'NV',
|
||||
name: 'Nevada',
|
||||
region: 'West',
|
||||
x: 4,
|
||||
y: 2,
|
||||
value: 2839099
|
||||
}, {
|
||||
'hc-a2': 'NH',
|
||||
name: 'New Hampshire',
|
||||
region: 'Northeast',
|
||||
x: 1,
|
||||
y: 11,
|
||||
value: 1326813
|
||||
}, {
|
||||
'hc-a2': 'NJ',
|
||||
name: 'New Jersey',
|
||||
region: 'Northeast',
|
||||
x: 3,
|
||||
y: 10,
|
||||
value: 8944469
|
||||
}, {
|
||||
'hc-a2': 'NM',
|
||||
name: 'New Mexico',
|
||||
region: 'West',
|
||||
x: 6,
|
||||
y: 3,
|
||||
value: 2085572
|
||||
}, {
|
||||
'hc-a2': 'NY',
|
||||
name: 'New York',
|
||||
region: 'Northeast',
|
||||
x: 2,
|
||||
y: 9,
|
||||
value: 19745289
|
||||
}, {
|
||||
'hc-a2': 'NC',
|
||||
name: 'North Carolina',
|
||||
region: 'South',
|
||||
x: 5,
|
||||
y: 9,
|
||||
value: 10146788
|
||||
}, {
|
||||
'hc-a2': 'ND',
|
||||
name: 'North Dakota',
|
||||
region: 'Midwest',
|
||||
x: 2,
|
||||
y: 3,
|
||||
value: 739482
|
||||
}, {
|
||||
'hc-a2': 'OH',
|
||||
name: 'Ohio',
|
||||
region: 'Midwest',
|
||||
x: 3,
|
||||
y: 8,
|
||||
value: 11614373
|
||||
}, {
|
||||
'hc-a2': 'OK',
|
||||
name: 'Oklahoma',
|
||||
region: 'South',
|
||||
x: 6,
|
||||
y: 4,
|
||||
value: 3878051
|
||||
}, {
|
||||
'hc-a2': 'OR',
|
||||
name: 'Oregon',
|
||||
region: 'West',
|
||||
x: 4,
|
||||
y: 1,
|
||||
value: 3970239
|
||||
}, {
|
||||
'hc-a2': 'PA',
|
||||
name: 'Pennsylvania',
|
||||
region: 'Northeast',
|
||||
x: 3,
|
||||
y: 9,
|
||||
value: 12784227
|
||||
}, {
|
||||
'hc-a2': 'RI',
|
||||
name: 'Rhode Island',
|
||||
region: 'Northeast',
|
||||
x: 2,
|
||||
y: 11,
|
||||
value: 1055173
|
||||
}, {
|
||||
'hc-a2': 'SC',
|
||||
name: 'South Carolina',
|
||||
region: 'South',
|
||||
x: 6,
|
||||
y: 8,
|
||||
value: 4832482
|
||||
}, {
|
||||
'hc-a2': 'SD',
|
||||
name: 'South Dakota',
|
||||
region: 'Midwest',
|
||||
x: 3,
|
||||
y: 4,
|
||||
value: 853175
|
||||
}, {
|
||||
'hc-a2': 'TN',
|
||||
name: 'Tennessee',
|
||||
region: 'South',
|
||||
x: 5,
|
||||
y: 7,
|
||||
value: 6651194
|
||||
}, {
|
||||
'hc-a2': 'TX',
|
||||
name: 'Texas',
|
||||
region: 'South',
|
||||
x: 7,
|
||||
y: 4,
|
||||
value: 27862596
|
||||
}, {
|
||||
'hc-a2': 'UT',
|
||||
name: 'Utah',
|
||||
region: 'West',
|
||||
x: 5,
|
||||
y: 4,
|
||||
value: 2942902
|
||||
}, {
|
||||
'hc-a2': 'VT',
|
||||
name: 'Vermont',
|
||||
region: 'Northeast',
|
||||
x: 1,
|
||||
y: 10,
|
||||
value: 626011
|
||||
}, {
|
||||
'hc-a2': 'VA',
|
||||
name: 'Virginia',
|
||||
region: 'South',
|
||||
x: 5,
|
||||
y: 8,
|
||||
value: 8411808
|
||||
}, {
|
||||
'hc-a2': 'WA',
|
||||
name: 'Washington',
|
||||
region: 'West',
|
||||
x: 2,
|
||||
y: 1,
|
||||
value: 7288000
|
||||
}, {
|
||||
'hc-a2': 'WV',
|
||||
name: 'West Virginia',
|
||||
region: 'South',
|
||||
x: 4,
|
||||
y: 7,
|
||||
value: 1850326
|
||||
}, {
|
||||
'hc-a2': 'WI',
|
||||
name: 'Wisconsin',
|
||||
region: 'Midwest',
|
||||
x: 2,
|
||||
y: 5,
|
||||
value: 5778708
|
||||
}, {
|
||||
'hc-a2': 'WY',
|
||||
name: 'Wyoming',
|
||||
region: 'West',
|
||||
x: 3,
|
||||
y: 3,
|
||||
value: 584153
|
||||
}]
|
||||
}]
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<!-- Additional files for the Highslide popup effect -->
|
||||
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
|
||||
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
scrollablePlotArea: {
|
||||
minWidth: 700
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
csvURL: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/analytics.csv',
|
||||
beforeParse: function (csv) {
|
||||
return csv.replace(/\n\n/g, '\n');
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Daily sessions at www.highcharts.com'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Source: Google Analytics'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
tickInterval: 7 * 24 * 3600 * 1000, // one week
|
||||
tickWidth: 0,
|
||||
gridLineWidth: 1,
|
||||
labels: {
|
||||
align: 'left',
|
||||
x: 3,
|
||||
y: -3
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: [{ // left y axis
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
align: 'left',
|
||||
x: 3,
|
||||
y: 16,
|
||||
format: '{value:.,0f}'
|
||||
},
|
||||
showFirstLabel: false
|
||||
}, { // right y axis
|
||||
linkedTo: 0,
|
||||
gridLineWidth: 0,
|
||||
opposite: true,
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
align: 'right',
|
||||
x: -3,
|
||||
y: 16,
|
||||
format: '{value:.,0f}'
|
||||
},
|
||||
showFirstLabel: false
|
||||
}],
|
||||
|
||||
legend: {
|
||||
align: 'left',
|
||||
verticalAlign: 'top',
|
||||
borderWidth: 0
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
shared: true,
|
||||
crosshairs: true
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
cursor: 'pointer',
|
||||
point: {
|
||||
events: {
|
||||
click: function (e) {
|
||||
hs.htmlExpand(null, {
|
||||
pageOrigin: {
|
||||
x: e.pageX || e.clientX,
|
||||
y: e.pageY || e.clientY
|
||||
},
|
||||
headingText: this.series.name,
|
||||
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
|
||||
this.y + ' sessions',
|
||||
width: 200
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
lineWidth: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'All sessions',
|
||||
lineWidth: 4,
|
||||
marker: {
|
||||
radius: 4
|
||||
}
|
||||
}, {
|
||||
name: 'New users'
|
||||
}]
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 0 auto
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
title: {
|
||||
text: 'Solar Employment Growth by Sector, 2010-2016'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Source: thesolarfoundation.com'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Number of Employees'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
label: {
|
||||
connectorAllowed: false
|
||||
},
|
||||
pointStart: 2010
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Installation',
|
||||
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
|
||||
}, {
|
||||
name: 'Manufacturing',
|
||||
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
|
||||
}, {
|
||||
name: 'Sales & Distribution',
|
||||
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
|
||||
}, {
|
||||
name: 'Project Development',
|
||||
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
|
||||
}, {
|
||||
name: 'Other',
|
||||
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
|
||||
}],
|
||||
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
legend: {
|
||||
layout: 'horizontal',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/boost.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
function getData(n) {
|
||||
var arr = [],
|
||||
i,
|
||||
x,
|
||||
a,
|
||||
b,
|
||||
c,
|
||||
spike;
|
||||
for (
|
||||
i = 0, x = Date.UTC(new Date().getUTCFullYear(), 0, 1) - n * 36e5;
|
||||
i < n;
|
||||
i = i + 1, x = x + 36e5
|
||||
) {
|
||||
if (i % 100 === 0) {
|
||||
a = 2 * Math.random();
|
||||
}
|
||||
if (i % 1000 === 0) {
|
||||
b = 2 * Math.random();
|
||||
}
|
||||
if (i % 10000 === 0) {
|
||||
c = 2 * Math.random();
|
||||
}
|
||||
if (i % 50000 === 0) {
|
||||
spike = 10;
|
||||
} else {
|
||||
spike = 0;
|
||||
}
|
||||
arr.push([
|
||||
x,
|
||||
2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
|
||||
]);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
var n = 500000,
|
||||
data = getData(n);
|
||||
|
||||
|
||||
console.time('line');
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
zoomType: 'x'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts drawing ' + n + ' points'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Using the Boost module'
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
valueDecimals: 2
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: data,
|
||||
lineWidth: 0.5,
|
||||
name: 'Hourly data points'
|
||||
}]
|
||||
|
||||
});
|
||||
console.timeEnd('line');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'line'
|
||||
},
|
||||
title: {
|
||||
text: 'Monthly Average Temperature'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: WorldClimate.com'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature (°C)'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
line: {
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
enableMouseTracking: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Tokyo',
|
||||
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
|
||||
}, {
|
||||
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]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
title: {
|
||||
text: 'Logarithmic axis demo'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
tickInterval: 1,
|
||||
type: 'logarithmic'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: 'logarithmic',
|
||||
minorTickInterval: 0.1
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
headerFormat: '<b>{series.name}</b><br />',
|
||||
pointFormat: 'x = {point.x}, y = {point.y}'
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
|
||||
pointStart: 1
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$.getJSON(
|
||||
'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',
|
||||
function (data) {
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
zoomType: 'x'
|
||||
},
|
||||
title: {
|
||||
text: 'USD to EUR exchange rate over time'
|
||||
},
|
||||
subtitle: {
|
||||
text: document.ontouchstart === undefined ?
|
||||
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Exchange rate'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
fillColor: {
|
||||
linearGradient: {
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 0,
|
||||
y2: 1
|
||||
},
|
||||
stops: [
|
||||
[0, Highcharts.getOptions().colors[0]],
|
||||
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
|
||||
]
|
||||
},
|
||||
marker: {
|
||||
radius: 2
|
||||
},
|
||||
lineWidth: 1,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
threshold: null
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'area',
|
||||
name: 'USD to EUR',
|
||||
data: data
|
||||
}]
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
.ld-label {
|
||||
width:200px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ld-row {
|
||||
}
|
||||
|
||||
.ld-url-input {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.ld-time-input {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
<div class="ld-row">
|
||||
<label class="ld-label">
|
||||
Enable Polling
|
||||
</label>
|
||||
<input type="checkbox" checked="checked" id="enablePolling"/>
|
||||
</div>
|
||||
<div class="ld-row">
|
||||
<label class="ld-label">
|
||||
Polling Time (Seconds)
|
||||
</label>
|
||||
<input class="ld-time-input" type="number" value="2" id="pollingTime"/>
|
||||
</div>
|
||||
<div class="ld-row">
|
||||
<label class="ld-label">
|
||||
CSV URL
|
||||
</label>
|
||||
<input class="ld-url-input" type="text" id="fetchURL"/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var defaultData = 'https://demo-live-data.highcharts.com/time-data.csv';
|
||||
var urlInput = document.getElementById('fetchURL');
|
||||
var pollingCheckbox = document.getElementById('enablePolling');
|
||||
var pollingInput = document.getElementById('pollingTime');
|
||||
|
||||
function createChart() {
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline'
|
||||
},
|
||||
title: {
|
||||
text: 'Live Data'
|
||||
},
|
||||
data: {
|
||||
csvURL: urlInput.value,
|
||||
enablePolling: pollingCheckbox.checked === true,
|
||||
dataRefreshRate: parseInt(pollingInput.value, 10)
|
||||
}
|
||||
});
|
||||
|
||||
if (pollingInput.value < 1 || !pollingInput.value) {
|
||||
pollingInput.value = 1;
|
||||
}
|
||||
}
|
||||
|
||||
urlInput.value = defaultData;
|
||||
|
||||
// We recreate instead of using chart update to make sure the loaded CSV
|
||||
// and such is completely gone.
|
||||
pollingCheckbox.onchange = urlInput.onchange = pollingInput.onchange = createChart;
|
||||
|
||||
// Create the chart
|
||||
createChart();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 320px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/networkgraph.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Add the nodes option through an event call. We want to start with the parent
|
||||
// item and apply separate colors to each child element, then the same color to
|
||||
// grandchildren.
|
||||
Highcharts.addEvent(
|
||||
Highcharts.seriesTypes.networkgraph,
|
||||
'afterSetOptions',
|
||||
function (e) {
|
||||
var colors = Highcharts.getOptions().colors,
|
||||
i = 0,
|
||||
nodes = {};
|
||||
e.options.data.forEach(function (link) {
|
||||
|
||||
if (link[0] === 'Proto Indo-European') {
|
||||
nodes['Proto Indo-European'] = {
|
||||
id: 'Proto Indo-European',
|
||||
marker: {
|
||||
radius: 20
|
||||
}
|
||||
};
|
||||
nodes[link[1]] = {
|
||||
id: link[1],
|
||||
marker: {
|
||||
radius: 10
|
||||
},
|
||||
color: colors[i++]
|
||||
};
|
||||
} else if (nodes[link[0]] && nodes[link[0]].color) {
|
||||
nodes[link[1]] = {
|
||||
id: link[1],
|
||||
color: nodes[link[0]].color
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
e.options.nodes = Object.keys(nodes).map(function (id) {
|
||||
return nodes[id];
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'networkgraph',
|
||||
height: '100%'
|
||||
},
|
||||
title: {
|
||||
text: 'The Indo-European Laungauge Tree'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'A Force-Directed Network Graph in Highcharts'
|
||||
},
|
||||
plotOptions: {
|
||||
networkgraph: {
|
||||
keys: ['from', 'to'],
|
||||
layoutAlgorithm: {
|
||||
enableSimulation: true
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
data: [
|
||||
['Proto Indo-European', 'Balto-Slavic'],
|
||||
['Proto Indo-European', 'Germanic'],
|
||||
['Proto Indo-European', 'Celtic'],
|
||||
['Proto Indo-European', 'Italic'],
|
||||
['Proto Indo-European', 'Hellenic'],
|
||||
['Proto Indo-European', 'Anatolian'],
|
||||
['Proto Indo-European', 'Indo-Iranian'],
|
||||
['Proto Indo-European', 'Tocharian'],
|
||||
['Indo-Iranian', 'Dardic'],
|
||||
['Indo-Iranian', 'Indic'],
|
||||
['Indo-Iranian', 'Iranian'],
|
||||
['Iranian', 'Old Persian'],
|
||||
['Old Persian', 'Middle Persian'],
|
||||
['Indic', 'Sanskrit'],
|
||||
['Italic', 'Osco-Umbrian'],
|
||||
['Italic', 'Latino-Faliscan'],
|
||||
['Latino-Faliscan', 'Latin'],
|
||||
['Celtic', 'Brythonic'],
|
||||
['Celtic', 'Goidelic'],
|
||||
['Germanic', 'North Germanic'],
|
||||
['Germanic', 'West Germanic'],
|
||||
['Germanic', 'East Germanic'],
|
||||
['North Germanic', 'Old Norse'],
|
||||
['North Germanic', 'Old Swedish'],
|
||||
['North Germanic', 'Old Danish'],
|
||||
['West Germanic', 'Old English'],
|
||||
['West Germanic', 'Old Frisian'],
|
||||
['West Germanic', 'Old Dutch'],
|
||||
['West Germanic', 'Old Low German'],
|
||||
['West Germanic', 'Old High German'],
|
||||
['Old Norse', 'Old Icelandic'],
|
||||
['Old Norse', 'Old Norwegian'],
|
||||
['Old Norwegian', 'Middle Norwegian'],
|
||||
['Old Swedish', 'Middle Swedish'],
|
||||
['Old Danish', 'Middle Danish'],
|
||||
['Old English', 'Middle English'],
|
||||
['Old Dutch', 'Middle Dutch'],
|
||||
['Old Low German', 'Middle Low German'],
|
||||
['Old High German', 'Middle High German'],
|
||||
['Balto-Slavic', 'Baltic'],
|
||||
['Balto-Slavic', 'Slavic'],
|
||||
['Slavic', 'East Slavic'],
|
||||
['Slavic', 'West Slavic'],
|
||||
['Slavic', 'South Slavic'],
|
||||
// Leaves:
|
||||
['Proto Indo-European', 'Phrygian'],
|
||||
['Proto Indo-European', 'Armenian'],
|
||||
['Proto Indo-European', 'Albanian'],
|
||||
['Proto Indo-European', 'Thracian'],
|
||||
['Tocharian', 'Tocharian A'],
|
||||
['Tocharian', 'Tocharian B'],
|
||||
['Anatolian', 'Hittite'],
|
||||
['Anatolian', 'Palaic'],
|
||||
['Anatolian', 'Luwic'],
|
||||
['Anatolian', 'Lydian'],
|
||||
['Iranian', 'Balochi'],
|
||||
['Iranian', 'Kurdish'],
|
||||
['Iranian', 'Pashto'],
|
||||
['Iranian', 'Sogdian'],
|
||||
['Old Persian', 'Pahlavi'],
|
||||
['Middle Persian', 'Persian'],
|
||||
['Hellenic', 'Greek'],
|
||||
['Dardic', 'Dard'],
|
||||
['Sanskrit', 'Sindhi'],
|
||||
['Sanskrit', 'Romani'],
|
||||
['Sanskrit', 'Urdu'],
|
||||
['Sanskrit', 'Hindi'],
|
||||
['Sanskrit', 'Bihari'],
|
||||
['Sanskrit', 'Assamese'],
|
||||
['Sanskrit', 'Bengali'],
|
||||
['Sanskrit', 'Marathi'],
|
||||
['Sanskrit', 'Gujarati'],
|
||||
['Sanskrit', 'Punjabi'],
|
||||
['Sanskrit', 'Sinhalese'],
|
||||
['Osco-Umbrian', 'Umbrian'],
|
||||
['Osco-Umbrian', 'Oscan'],
|
||||
['Latino-Faliscan', 'Faliscan'],
|
||||
['Latin', 'Portugese'],
|
||||
['Latin', 'Spanish'],
|
||||
['Latin', 'French'],
|
||||
['Latin', 'Romanian'],
|
||||
['Latin', 'Italian'],
|
||||
['Latin', 'Catalan'],
|
||||
['Latin', 'Franco-Provençal'],
|
||||
['Latin', 'Rhaeto-Romance'],
|
||||
['Brythonic', 'Welsh'],
|
||||
['Brythonic', 'Breton'],
|
||||
['Brythonic', 'Cornish'],
|
||||
['Brythonic', 'Cuymbric'],
|
||||
['Goidelic', 'Modern Irish'],
|
||||
['Goidelic', 'Scottish Gaelic'],
|
||||
['Goidelic', 'Manx'],
|
||||
['East Germanic', 'Gothic'],
|
||||
['Middle Low German', 'Low German'],
|
||||
['Middle High German', '(High) German'],
|
||||
['Middle High German', 'Yiddish'],
|
||||
['Middle English', 'English'],
|
||||
['Middle Dutch', 'Hollandic'],
|
||||
['Middle Dutch', 'Flemish'],
|
||||
['Middle Dutch', 'Dutch'],
|
||||
['Middle Dutch', 'Limburgish'],
|
||||
['Middle Dutch', 'Brabantian'],
|
||||
['Middle Dutch', 'Rhinelandic'],
|
||||
['Old Frisian', 'Frisian'],
|
||||
['Middle Danish', 'Danish'],
|
||||
['Middle Swedish', 'Swedish'],
|
||||
['Middle Norwegian', 'Norwegian'],
|
||||
['Old Norse', 'Faroese'],
|
||||
['Old Icelandic', 'Icelandic'],
|
||||
['Baltic', 'Old Prussian'],
|
||||
['Baltic', 'Lithuanian'],
|
||||
['Baltic', 'Latvian'],
|
||||
['West Slavic', 'Polish'],
|
||||
['West Slavic', 'Slovak'],
|
||||
['West Slavic', 'Czech'],
|
||||
['West Slavic', 'Wendish'],
|
||||
['East Slavic', 'Bulgarian'],
|
||||
['East Slavic', 'Old Church Slavonic'],
|
||||
['East Slavic', 'Macedonian'],
|
||||
['East Slavic', 'Serbo-Croatian'],
|
||||
['East Slavic', 'Slovene'],
|
||||
['South Slavic', 'Russian'],
|
||||
['South Slavic', 'Ukrainian'],
|
||||
['South Slavic', 'Belarusian'],
|
||||
['South Slavic', 'Rusyn']
|
||||
]
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,547 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 320px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'packedbubble',
|
||||
height: '100%'
|
||||
},
|
||||
title: {
|
||||
text: 'Carbon emissions around the world (2014)'
|
||||
},
|
||||
tooltip: {
|
||||
useHTML: true,
|
||||
pointFormat: '<b>{point.name}:</b> {point.y}m CO<sub>2</sub>'
|
||||
},
|
||||
plotOptions: {
|
||||
packedbubble: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.name}',
|
||||
filter: {
|
||||
property: 'y',
|
||||
operator: '>',
|
||||
value: 250
|
||||
},
|
||||
style: {
|
||||
color: 'black',
|
||||
textOutline: 'none',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
minPointSize: 5
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Europe',
|
||||
data: [{
|
||||
name: 'Germany',
|
||||
value: 767.1
|
||||
}, {
|
||||
name: 'Croatia',
|
||||
value: 20.7
|
||||
},
|
||||
{
|
||||
name: "Belgium",
|
||||
value: 97.2
|
||||
},
|
||||
{
|
||||
name: "Czech Republic",
|
||||
value: 111.7
|
||||
},
|
||||
{
|
||||
name: "Netherlands",
|
||||
value: 158.1
|
||||
},
|
||||
{
|
||||
name: "Spain",
|
||||
value: 241.6
|
||||
},
|
||||
{
|
||||
name: "Ukraine",
|
||||
value: 249.1
|
||||
},
|
||||
{
|
||||
name: "Poland",
|
||||
value: 298.1
|
||||
},
|
||||
{
|
||||
name: "France",
|
||||
value: 323.7
|
||||
},
|
||||
{
|
||||
name: "Romania",
|
||||
value: 78.3
|
||||
},
|
||||
{
|
||||
name: "United Kingdom",
|
||||
value: 415.4
|
||||
}, {
|
||||
name: "Turkey",
|
||||
value: 353.2
|
||||
}, {
|
||||
name: "Italy",
|
||||
value: 337.6
|
||||
},
|
||||
{
|
||||
name: "Greece",
|
||||
value: 71.1
|
||||
},
|
||||
{
|
||||
name: "Austria",
|
||||
value: 69.8
|
||||
},
|
||||
{
|
||||
name: "Belarus",
|
||||
value: 67.7
|
||||
},
|
||||
{
|
||||
name: "Serbia",
|
||||
value: 59.3
|
||||
},
|
||||
{
|
||||
name: "Finland",
|
||||
value: 54.8
|
||||
},
|
||||
{
|
||||
name: "Bulgaria",
|
||||
value: 51.2
|
||||
},
|
||||
{
|
||||
name: "Portugal",
|
||||
value: 48.3
|
||||
},
|
||||
{
|
||||
name: "Norway",
|
||||
value: 44.4
|
||||
},
|
||||
{
|
||||
name: "Sweden",
|
||||
value: 44.3
|
||||
},
|
||||
{
|
||||
name: "Hungary",
|
||||
value: 43.7
|
||||
},
|
||||
{
|
||||
name: "Switzerland",
|
||||
value: 40.2
|
||||
},
|
||||
{
|
||||
name: "Denmark",
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
name: "Slovakia",
|
||||
value: 34.7
|
||||
},
|
||||
{
|
||||
name: "Ireland",
|
||||
value: 34.6
|
||||
},
|
||||
{
|
||||
name: "Croatia",
|
||||
value: 20.7
|
||||
},
|
||||
{
|
||||
name: "Estonia",
|
||||
value: 19.4
|
||||
},
|
||||
{
|
||||
name: "Slovenia",
|
||||
value: 16.7
|
||||
},
|
||||
{
|
||||
name: "Lithuania",
|
||||
value: 12.3
|
||||
},
|
||||
{
|
||||
name: "Luxembourg",
|
||||
value: 10.4
|
||||
},
|
||||
{
|
||||
name: "Macedonia",
|
||||
value: 9.5
|
||||
},
|
||||
{
|
||||
name: "Moldova",
|
||||
value: 7.8
|
||||
},
|
||||
{
|
||||
name: "Latvia",
|
||||
value: 7.5
|
||||
},
|
||||
{
|
||||
name: "Cyprus",
|
||||
value: 7.2
|
||||
}]
|
||||
}, {
|
||||
name: 'Africa',
|
||||
data: [{
|
||||
name: "Senegal",
|
||||
value: 8.2
|
||||
},
|
||||
{
|
||||
name: "Cameroon",
|
||||
value: 9.2
|
||||
},
|
||||
{
|
||||
name: "Zimbabwe",
|
||||
value: 13.1
|
||||
},
|
||||
{
|
||||
name: "Ghana",
|
||||
value: 14.1
|
||||
},
|
||||
{
|
||||
name: "Kenya",
|
||||
value: 14.1
|
||||
},
|
||||
{
|
||||
name: "Sudan",
|
||||
value: 17.3
|
||||
},
|
||||
{
|
||||
name: "Tunisia",
|
||||
value: 24.3
|
||||
},
|
||||
{
|
||||
name: "Angola",
|
||||
value: 25
|
||||
},
|
||||
{
|
||||
name: "Libya",
|
||||
value: 50.6
|
||||
},
|
||||
{
|
||||
name: "Ivory Coast",
|
||||
value: 7.3
|
||||
},
|
||||
{
|
||||
name: "Morocco",
|
||||
value: 60.7
|
||||
},
|
||||
{
|
||||
name: "Ethiopia",
|
||||
value: 8.9
|
||||
},
|
||||
{
|
||||
name: "United Republic of Tanzania",
|
||||
value: 9.1
|
||||
},
|
||||
{
|
||||
name: "Nigeria",
|
||||
value: 93.9
|
||||
},
|
||||
{
|
||||
name: "South Africa",
|
||||
value: 392.7
|
||||
}, {
|
||||
name: "Egypt",
|
||||
value: 225.1
|
||||
}, {
|
||||
name: "Algeria",
|
||||
value: 141.5
|
||||
}]
|
||||
}, {
|
||||
name: 'Oceania',
|
||||
data: [{
|
||||
name: "Australia",
|
||||
value: 409.4
|
||||
},
|
||||
{
|
||||
name: "New Zealand",
|
||||
value: 34.1
|
||||
},
|
||||
{
|
||||
name: "Papua New Guinea",
|
||||
value: 7.1
|
||||
}]
|
||||
}, {
|
||||
name: 'North America',
|
||||
data: [{
|
||||
name: "Costa Rica",
|
||||
value: 7.6
|
||||
},
|
||||
{
|
||||
name: "Honduras",
|
||||
value: 8.4
|
||||
},
|
||||
{
|
||||
name: "Jamaica",
|
||||
value: 8.3
|
||||
},
|
||||
{
|
||||
name: "Panama",
|
||||
value: 10.2
|
||||
},
|
||||
{
|
||||
name: "Guatemala",
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
name: "Dominican Republic",
|
||||
value: 23.4
|
||||
},
|
||||
{
|
||||
name: "Cuba",
|
||||
value: 30.2
|
||||
},
|
||||
{
|
||||
name: "USA",
|
||||
value: 5334.5
|
||||
}, {
|
||||
name: "Canada",
|
||||
value: 566
|
||||
}, {
|
||||
name: "Mexico",
|
||||
value: 456.3
|
||||
}]
|
||||
}, {
|
||||
name: 'South America',
|
||||
data: [{
|
||||
name: "El Salvador",
|
||||
value: 7.2
|
||||
},
|
||||
{
|
||||
name: "Uruguay",
|
||||
value: 8.1
|
||||
},
|
||||
{
|
||||
name: "Bolivia",
|
||||
value: 17.8
|
||||
},
|
||||
{
|
||||
name: "Trinidad and Tobago",
|
||||
value: 34
|
||||
},
|
||||
{
|
||||
name: "Ecuador",
|
||||
value: 43
|
||||
},
|
||||
{
|
||||
name: "Chile",
|
||||
value: 78.6
|
||||
},
|
||||
{
|
||||
name: "Peru",
|
||||
value: 52
|
||||
},
|
||||
{
|
||||
name: "Colombia",
|
||||
value: 74.1
|
||||
},
|
||||
{
|
||||
name: "Brazil",
|
||||
value: 501.1
|
||||
}, {
|
||||
name: "Argentina",
|
||||
value: 199
|
||||
},
|
||||
{
|
||||
name: "Venezuela",
|
||||
value: 195.2
|
||||
}]
|
||||
}, {
|
||||
name: 'Asia',
|
||||
data: [{
|
||||
name: "Nepal",
|
||||
value: 6.5
|
||||
},
|
||||
{
|
||||
name: "Georgia",
|
||||
value: 6.5
|
||||
},
|
||||
{
|
||||
name: "Brunei Darussalam",
|
||||
value: 7.4
|
||||
},
|
||||
{
|
||||
name: "Kyrgyzstan",
|
||||
value: 7.4
|
||||
},
|
||||
{
|
||||
name: "Afghanistan",
|
||||
value: 7.9
|
||||
},
|
||||
{
|
||||
name: "Myanmar",
|
||||
value: 9.1
|
||||
},
|
||||
{
|
||||
name: "Mongolia",
|
||||
value: 14.7
|
||||
},
|
||||
{
|
||||
name: "Sri Lanka",
|
||||
value: 16.6
|
||||
},
|
||||
{
|
||||
name: "Bahrain",
|
||||
value: 20.5
|
||||
},
|
||||
{
|
||||
name: "Yemen",
|
||||
value: 22.6
|
||||
},
|
||||
{
|
||||
name: "Jordan",
|
||||
value: 22.3
|
||||
},
|
||||
{
|
||||
name: "Lebanon",
|
||||
value: 21.1
|
||||
},
|
||||
{
|
||||
name: "Azerbaijan",
|
||||
value: 31.7
|
||||
},
|
||||
{
|
||||
name: "Singapore",
|
||||
value: 47.8
|
||||
},
|
||||
{
|
||||
name: "Hong Kong",
|
||||
value: 49.9
|
||||
},
|
||||
{
|
||||
name: "Syria",
|
||||
value: 52.7
|
||||
},
|
||||
{
|
||||
name: "DPR Korea",
|
||||
value: 59.9
|
||||
},
|
||||
{
|
||||
name: "Israel",
|
||||
value: 64.8
|
||||
},
|
||||
{
|
||||
name: "Turkmenistan",
|
||||
value: 70.6
|
||||
},
|
||||
{
|
||||
name: "Oman",
|
||||
value: 74.3
|
||||
},
|
||||
{
|
||||
name: "Qatar",
|
||||
value: 88.8
|
||||
},
|
||||
{
|
||||
name: "Philippines",
|
||||
value: 96.9
|
||||
},
|
||||
{
|
||||
name: "Kuwait",
|
||||
value: 98.6
|
||||
},
|
||||
{
|
||||
name: "Uzbekistan",
|
||||
value: 122.6
|
||||
},
|
||||
{
|
||||
name: "Iraq",
|
||||
value: 139.9
|
||||
},
|
||||
{
|
||||
name: "Pakistan",
|
||||
value: 158.1
|
||||
},
|
||||
{
|
||||
name: "Vietnam",
|
||||
value: 190.2
|
||||
},
|
||||
{
|
||||
name: "United Arab Emirates",
|
||||
value: 201.1
|
||||
},
|
||||
{
|
||||
name: "Malaysia",
|
||||
value: 227.5
|
||||
},
|
||||
{
|
||||
name: "Kazakhstan",
|
||||
value: 236.2
|
||||
},
|
||||
{
|
||||
name: "Thailand",
|
||||
value: 272
|
||||
},
|
||||
{
|
||||
name: "Taiwan",
|
||||
value: 276.7
|
||||
},
|
||||
{
|
||||
name: "Indonesia",
|
||||
value: 453
|
||||
},
|
||||
{
|
||||
name: "Saudi Arabia",
|
||||
value: 494.8
|
||||
},
|
||||
{
|
||||
name: "Japan",
|
||||
value: 1278.9
|
||||
},
|
||||
{
|
||||
name: "China",
|
||||
value: 10540.8
|
||||
},
|
||||
{
|
||||
name: "India",
|
||||
value: 2341.9
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
value: 1766.4
|
||||
},
|
||||
{
|
||||
name: "Iran",
|
||||
value: 618.2
|
||||
},
|
||||
{
|
||||
name: "Korea",
|
||||
value: 610.1
|
||||
}]
|
||||
}],
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
legend: {
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
layout: 'vertical'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.highcharts-series-hover path {
|
||||
stroke: rgb(255, 66, 66);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/parallel-coordinates.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$.getJSON(
|
||||
'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/marathon.json',
|
||||
function (data) {
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline',
|
||||
parallelCoordinates: true,
|
||||
parallelAxes: {
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Marathon set'
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false,
|
||||
marker: {
|
||||
enabled: false,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
halo: {
|
||||
size: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
events: {
|
||||
mouseOver: function () {
|
||||
this.group.toFront();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '<span style="color:{point.color}">\u25CF</span>' +
|
||||
'{series.name}: <b>{point.formattedValue}</b><br/>'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Training date',
|
||||
'Miles for training run',
|
||||
'Training time',
|
||||
'Shoe brand',
|
||||
'Running pace per mile',
|
||||
'Short or long',
|
||||
'After 2004'
|
||||
],
|
||||
offset: 10
|
||||
},
|
||||
yAxis: [{
|
||||
type: 'datetime',
|
||||
tooltipValueFormat: '{value:%Y-%m-%d}'
|
||||
}, {
|
||||
min: 0,
|
||||
tooltipValueFormat: '{value} mile(s)'
|
||||
}, {
|
||||
type: 'datetime',
|
||||
min: 0,
|
||||
labels: {
|
||||
format: '{value:%H:%M}'
|
||||
}
|
||||
}, {
|
||||
categories: [
|
||||
'Other',
|
||||
'Adidas',
|
||||
'Mizuno',
|
||||
'Asics',
|
||||
'Brooks',
|
||||
'New Balance',
|
||||
'Izumi'
|
||||
]
|
||||
}, {
|
||||
type: 'datetime'
|
||||
}, {
|
||||
categories: ['> 5miles', '< 5miles']
|
||||
}, {
|
||||
categories: ['Before', 'After']
|
||||
}],
|
||||
colors: ['rgba(11, 200, 200, 0.1)'],
|
||||
series: data.map(function (set, i) {
|
||||
return {
|
||||
name: 'Runner ' + i,
|
||||
data: set,
|
||||
shadow: false
|
||||
};
|
||||
})
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/pareto.js"></script>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
renderTo: 'container',
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Restaurants Complaints'
|
||||
},
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Overpriced',
|
||||
'Small portions',
|
||||
'Wait time',
|
||||
'Food is tasteless',
|
||||
'No atmosphere',
|
||||
'Not clean',
|
||||
'Too noisy',
|
||||
'Unfriendly staff'
|
||||
],
|
||||
crosshair: true
|
||||
},
|
||||
yAxis: [{
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
}, {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
minPadding: 0,
|
||||
maxPadding: 0,
|
||||
max: 100,
|
||||
min: 0,
|
||||
opposite: true,
|
||||
labels: {
|
||||
format: "{value}%"
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: 'pareto',
|
||||
name: 'Pareto',
|
||||
yAxis: 1,
|
||||
zIndex: 10,
|
||||
baseSeries: 1
|
||||
}, {
|
||||
name: 'Complaints',
|
||||
type: 'column',
|
||||
zIndex: 2,
|
||||
data: [755, 222, 151, 86, 72, 51, 36, 10]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares in January, 2018'
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
}]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,302 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
max-width: 660px;
|
||||
margin: auto;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
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('container', {
|
||||
chart: {
|
||||
type: 'pie'
|
||||
},
|
||||
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
|
||||
}
|
||||
}]
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
<script src="../../code/modules/drilldown.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
|
||||
<pre id="tsv" style="display:none">Browser Version Total Market Share
|
||||
Microsoft Internet Explorer 8.0 26.61%
|
||||
Microsoft Internet Explorer 9.0 16.96%
|
||||
Chrome 18.0 8.01%
|
||||
Chrome 19.0 7.73%
|
||||
Firefox 12 6.72%
|
||||
Microsoft Internet Explorer 6.0 6.40%
|
||||
Firefox 11 4.72%
|
||||
Microsoft Internet Explorer 7.0 3.55%
|
||||
Safari 5.1 3.53%
|
||||
Firefox 13 2.16%
|
||||
Firefox 3.6 1.87%
|
||||
Opera 11.x 1.30%
|
||||
Chrome 17.0 1.13%
|
||||
Firefox 10 0.90%
|
||||
Safari 5.0 0.85%
|
||||
Firefox 9.0 0.65%
|
||||
Firefox 8.0 0.55%
|
||||
Firefox 4.0 0.50%
|
||||
Chrome 16.0 0.45%
|
||||
Firefox 3.0 0.36%
|
||||
Firefox 3.5 0.36%
|
||||
Firefox 6.0 0.32%
|
||||
Firefox 5.0 0.31%
|
||||
Firefox 7.0 0.29%
|
||||
Proprietary or Undetectable 0.29%
|
||||
Chrome 18.0 - Maxthon Edition 0.26%
|
||||
Chrome 14.0 0.25%
|
||||
Chrome 20.0 0.24%
|
||||
Chrome 15.0 0.18%
|
||||
Chrome 12.0 0.16%
|
||||
Opera 12.x 0.15%
|
||||
Safari 4.0 0.14%
|
||||
Chrome 13.0 0.13%
|
||||
Safari 4.1 0.12%
|
||||
Chrome 11.0 0.10%
|
||||
Firefox 14 0.10%
|
||||
Firefox 2.0 0.09%
|
||||
Chrome 10.0 0.09%
|
||||
Opera 10.x 0.09%
|
||||
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// Create the chart
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares. January, 2018'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click the slices to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.name}: {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
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
// Radialize the colors
|
||||
Highcharts.setOptions({
|
||||
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
|
||||
return {
|
||||
radialGradient: {
|
||||
cx: 0.5,
|
||||
cy: 0.3,
|
||||
r: 0.7
|
||||
},
|
||||
stops: [
|
||||
[0, color],
|
||||
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
|
||||
]
|
||||
};
|
||||
})
|
||||
});
|
||||
|
||||
// Build the chart
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares in January, 2018'
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
},
|
||||
connectorColor: 'silver'
|
||||
}
|
||||
}
|
||||
},
|
||||
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 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// Build the chart
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares in January, 2018'
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
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
|
||||
}]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
// 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('container', {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares at a specific website, 2014'
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
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 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
title: {
|
||||
text: 'Browser<br>shares<br>2017',
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
y: 40
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
polar: true,
|
||||
type: 'line'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Budget vs spending',
|
||||
x: -80
|
||||
},
|
||||
|
||||
pane: {
|
||||
size: '80%'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
|
||||
'Information Technology', 'Administration'],
|
||||
tickmarkPlacement: 'on',
|
||||
lineWidth: 0
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
gridLineInterpolation: 'polygon',
|
||||
lineWidth: 0,
|
||||
min: 0
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
shared: true,
|
||||
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
|
||||
},
|
||||
|
||||
legend: {
|
||||
align: 'right',
|
||||
verticalAlign: 'top',
|
||||
y: 70,
|
||||
layout: 'vertical'
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Allocated Budget',
|
||||
data: [43000, 19000, 60000, 35000, 17000, 10000],
|
||||
pointPlacement: 'on'
|
||||
}, {
|
||||
name: 'Actual Spending',
|
||||
data: [50000, 39000, 42000, 31000, 26000, 14000],
|
||||
pointPlacement: 'on'
|
||||
}]
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
<div style="display:none">
|
||||
<!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl -->
|
||||
<table id="freq" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr nowrap bgcolor="#CCCCFF">
|
||||
<th colspan="9" class="hdr">Table of Frequencies (percent)</th>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#CCCCFF">
|
||||
<th class="freq">Direction</th>
|
||||
<th class="freq">< 0.5 m/s</th>
|
||||
<th class="freq">0.5-2 m/s</th>
|
||||
<th class="freq">2-4 m/s</th>
|
||||
<th class="freq">4-6 m/s</th>
|
||||
<th class="freq">6-8 m/s</th>
|
||||
<th class="freq">8-10 m/s</th>
|
||||
<th class="freq">> 10 m/s</th>
|
||||
<th class="freq">Total</th>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">N</td>
|
||||
<td class="data">1.81</td>
|
||||
<td class="data">1.78</td>
|
||||
<td class="data">0.16</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">3.75</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">NNE</td>
|
||||
<td class="data">0.62</td>
|
||||
<td class="data">1.09</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">1.71</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">NE</td>
|
||||
<td class="data">0.82</td>
|
||||
<td class="data">0.82</td>
|
||||
<td class="data">0.07</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">1.71</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">ENE</td>
|
||||
<td class="data">0.59</td>
|
||||
<td class="data">1.22</td>
|
||||
<td class="data">0.07</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">1.88</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">E</td>
|
||||
<td class="data">0.62</td>
|
||||
<td class="data">2.20</td>
|
||||
<td class="data">0.49</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">3.32</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">ESE</td>
|
||||
<td class="data">1.22</td>
|
||||
<td class="data">2.01</td>
|
||||
<td class="data">1.55</td>
|
||||
<td class="data">0.30</td>
|
||||
<td class="data">0.13</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">5.20</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">SE</td>
|
||||
<td class="data">1.61</td>
|
||||
<td class="data">3.06</td>
|
||||
<td class="data">2.37</td>
|
||||
<td class="data">2.14</td>
|
||||
<td class="data">1.74</td>
|
||||
<td class="data">0.39</td>
|
||||
<td class="data">0.13</td>
|
||||
<td class="data">11.45</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">SSE</td>
|
||||
<td class="data">2.04</td>
|
||||
<td class="data">3.42</td>
|
||||
<td class="data">1.97</td>
|
||||
<td class="data">0.86</td>
|
||||
<td class="data">0.53</td>
|
||||
<td class="data">0.49</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">9.31</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">S</td>
|
||||
<td class="data">2.66</td>
|
||||
<td class="data">4.74</td>
|
||||
<td class="data">0.43</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">7.83</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">SSW</td>
|
||||
<td class="data">2.96</td>
|
||||
<td class="data">4.14</td>
|
||||
<td class="data">0.26</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">7.37</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">SW</td>
|
||||
<td class="data">2.53</td>
|
||||
<td class="data">4.01</td>
|
||||
<td class="data">1.22</td>
|
||||
<td class="data">0.49</td>
|
||||
<td class="data">0.13</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">8.39</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">WSW</td>
|
||||
<td class="data">1.97</td>
|
||||
<td class="data">2.66</td>
|
||||
<td class="data">1.97</td>
|
||||
<td class="data">0.79</td>
|
||||
<td class="data">0.30</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">7.70</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">W</td>
|
||||
<td class="data">1.64</td>
|
||||
<td class="data">1.71</td>
|
||||
<td class="data">0.92</td>
|
||||
<td class="data">1.45</td>
|
||||
<td class="data">0.26</td>
|
||||
<td class="data">0.10</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">6.09</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">WNW</td>
|
||||
<td class="data">1.32</td>
|
||||
<td class="data">2.40</td>
|
||||
<td class="data">0.99</td>
|
||||
<td class="data">1.61</td>
|
||||
<td class="data">0.33</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">0.00</td>
|
||||
<td class="data">6.64</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="dir">NW</td>
|
||||
<td class="data">1.58</td>
|
||||
<td class="data">4.28</td>
|
||||
<td class="data">1.28</td>
|
||||
<td class="data">0.76</td>
|
||||
<td class="data">0.66</td>
|
||||
<td class="data">0.69</td>
|
||||
<td class="data">0.03</td>
|
||||
<td class="data">9.28</td>
|
||||
</tr>
|
||||
<tr nowrap bgcolor="#DDDDDD">
|
||||
<td class="dir">NNW</td>
|
||||
<td class="data">1.51</td>
|
||||
<td class="data">5.00</td>
|
||||
<td class="data">1.32</td>
|
||||
<td class="data">0.13</td>
|
||||
<td class="data">0.23</td>
|
||||
<td class="data">0.13</td>
|
||||
<td class="data">0.07</td>
|
||||
<td class="data">8.39</td>
|
||||
</tr>
|
||||
<tr nowrap>
|
||||
<td class="totals">Total</td>
|
||||
<td class="totals">25.53</td>
|
||||
<td class="totals">44.54</td>
|
||||
<td class="totals">15.07</td>
|
||||
<td class="totals">8.52</td>
|
||||
<td class="totals">4.31</td>
|
||||
<td class="totals">1.81</td>
|
||||
<td class="totals">0.23</td>
|
||||
<td class="totals"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
// Parse the data from an inline table using the Highcharts Data plugin
|
||||
Highcharts.chart('container', {
|
||||
data: {
|
||||
table: 'freq',
|
||||
startRow: 1,
|
||||
endRow: 17,
|
||||
endColumn: 7
|
||||
},
|
||||
|
||||
chart: {
|
||||
polar: true,
|
||||
type: 'column'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Wind rose for South Shore Met Station, Oregon'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Source: or.water.usgs.gov'
|
||||
},
|
||||
|
||||
pane: {
|
||||
size: '85%'
|
||||
},
|
||||
|
||||
legend: {
|
||||
align: 'right',
|
||||
verticalAlign: 'top',
|
||||
y: 100,
|
||||
layout: 'vertical'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
tickmarkPlacement: 'on'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
min: 0,
|
||||
endOnTick: false,
|
||||
showLastLabel: true,
|
||||
title: {
|
||||
text: 'Frequency (%)'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '%';
|
||||
}
|
||||
},
|
||||
reversedStacks: false
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
valueSuffix: '%'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
stacking: 'normal',
|
||||
shadow: false,
|
||||
groupPadding: 0,
|
||||
pointPlacement: 'on'
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
polar: true
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts Polar Chart'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Also known as Radar Chart'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: 0,
|
||||
endAngle: 360
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
tickInterval: 45,
|
||||
min: 0,
|
||||
max: 360,
|
||||
labels: {
|
||||
format: '{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'
|
||||
}, {
|
||||
type: 'line',
|
||||
name: 'Line',
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8]
|
||||
}, {
|
||||
type: 'area',
|
||||
name: 'Area',
|
||||
data: [1, 8, 2, 7, 3, 6, 4, 5]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/highcharts-more.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
title: {
|
||||
text: 'Height vs Weight'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Polygon series in Highcharts'
|
||||
},
|
||||
xAxis: {
|
||||
gridLineWidth: 1,
|
||||
title: {
|
||||
enabled: true,
|
||||
text: 'Height (cm)'
|
||||
},
|
||||
startOnTick: true,
|
||||
endOnTick: true,
|
||||
showLastLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Weight (kg)'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
series: [{
|
||||
name: 'Target',
|
||||
type: 'polygon',
|
||||
data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70],
|
||||
[180, 60], [173, 52], [166, 45]],
|
||||
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
|
||||
enableMouseTracking: false
|
||||
|
||||
}, {
|
||||
name: 'Observations',
|
||||
type: 'scatter',
|
||||
color: Highcharts.getOptions().colors[1],
|
||||
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
|
||||
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
|
||||
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
|
||||
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
|
||||
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
|
||||
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
|
||||
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
|
||||
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
|
||||
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
|
||||
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
|
||||
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
|
||||
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
|
||||
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
|
||||
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
|
||||
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
|
||||
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
|
||||
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
|
||||
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
|
||||
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
|
||||
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
|
||||
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
|
||||
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
|
||||
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
|
||||
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
|
||||
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
|
||||
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
|
||||
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
|
||||
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
|
||||
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
|
||||
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
|
||||
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
|
||||
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
|
||||
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
|
||||
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
|
||||
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
|
||||
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
|
||||
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
|
||||
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
|
||||
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
|
||||
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
|
||||
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
|
||||
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
|
||||
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
|
||||
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
|
||||
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
|
||||
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
|
||||
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
|
||||
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
|
||||
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
|
||||
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
|
||||
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]
|
||||
|
||||
}],
|
||||
tooltip: {
|
||||
headerFormat: '<b>{series.name}</b><br>',
|
||||
pointFormat: '{point.x} cm, {point.y} kg'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/funnel.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'pyramid'
|
||||
},
|
||||
title: {
|
||||
text: 'Sales pyramid',
|
||||
x: -50
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b> ({point.y:,.0f})',
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
|
||||
softConnector: true
|
||||
},
|
||||
center: ['40%', '50%'],
|
||||
width: '80%'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Unique users',
|
||||
data: [
|
||||
['Website visits', 15654],
|
||||
['Downloads', 4064],
|
||||
['Requested price list', 1987],
|
||||
['Invoice sent', 976],
|
||||
['Finalized', 846]
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
backgroundColor: 'white',
|
||||
events: {
|
||||
load: function () {
|
||||
|
||||
// Draw the flow chart
|
||||
var ren = this.renderer,
|
||||
colors = Highcharts.getOptions().colors,
|
||||
rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
|
||||
leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
|
||||
|
||||
|
||||
|
||||
// Separator, client from service
|
||||
ren.path(['M', 120, 40, 'L', 120, 330])
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: 'silver',
|
||||
dashstyle: 'dash'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Separator, CLI from service
|
||||
ren.path(['M', 420, 40, 'L', 420, 330])
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: 'silver',
|
||||
dashstyle: 'dash'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Headers
|
||||
ren.label('Web client', 20, 40)
|
||||
.css({
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.add();
|
||||
ren.label('Web service / CLI', 220, 40)
|
||||
.css({
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.add();
|
||||
ren.label('Command line client', 440, 40)
|
||||
.css({
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.add();
|
||||
|
||||
// SaaS client label
|
||||
ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
|
||||
.attr({
|
||||
fill: colors[0],
|
||||
stroke: 'white',
|
||||
'stroke-width': 2,
|
||||
padding: 5,
|
||||
r: 5
|
||||
})
|
||||
.css({
|
||||
color: 'white'
|
||||
})
|
||||
.add()
|
||||
.shadow(true);
|
||||
|
||||
// Arrow from SaaS client to Phantom JS
|
||||
ren.path(rightArrow)
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: colors[3]
|
||||
})
|
||||
.translate(95, 95)
|
||||
.add();
|
||||
|
||||
ren.label('POST options in JSON', 90, 75)
|
||||
.css({
|
||||
fontSize: '10px',
|
||||
color: colors[3]
|
||||
})
|
||||
.add();
|
||||
|
||||
ren.label('PhantomJS', 210, 82)
|
||||
.attr({
|
||||
r: 5,
|
||||
width: 100,
|
||||
fill: colors[1]
|
||||
})
|
||||
.css({
|
||||
color: 'white',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Arrow from Phantom JS to Batik
|
||||
ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: colors[3]
|
||||
})
|
||||
.add();
|
||||
|
||||
ren.label('SVG', 255, 120)
|
||||
.css({
|
||||
color: colors[3],
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
|
||||
ren.label('Batik', 210, 200)
|
||||
.attr({
|
||||
r: 5,
|
||||
width: 100,
|
||||
fill: colors[1]
|
||||
})
|
||||
.css({
|
||||
color: 'white',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Arrow from Batik to SaaS client
|
||||
ren
|
||||
.path([
|
||||
'M', 235, 185,
|
||||
'L', 235, 155,
|
||||
'C', 235, 130, 235, 130, 215, 130,
|
||||
'L', 95, 130,
|
||||
'L', 100, 125,
|
||||
'M', 95, 130,
|
||||
'L', 100, 135
|
||||
])
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: colors[3]
|
||||
})
|
||||
.add();
|
||||
|
||||
ren.label('Rasterized image', 100, 110)
|
||||
.css({
|
||||
color: colors[3],
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Browser label
|
||||
ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
|
||||
.attr({
|
||||
fill: colors[0],
|
||||
stroke: 'white',
|
||||
'stroke-width': 2,
|
||||
padding: 5,
|
||||
r: 5
|
||||
})
|
||||
.css({
|
||||
color: 'white',
|
||||
width: '100px'
|
||||
})
|
||||
.add()
|
||||
.shadow(true);
|
||||
|
||||
|
||||
|
||||
// Arrow from Browser to Batik
|
||||
ren.path(rightArrow)
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: colors[1]
|
||||
})
|
||||
.translate(95, 205)
|
||||
.add();
|
||||
|
||||
ren.label('POST SVG', 110, 185)
|
||||
.css({
|
||||
color: colors[1],
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Arrow from Batik to Browser
|
||||
ren.path(leftArrow)
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: colors[1]
|
||||
})
|
||||
.translate(95, 215)
|
||||
.add();
|
||||
|
||||
ren.label('Rasterized image', 100, 215)
|
||||
.css({
|
||||
color: colors[1],
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Script label
|
||||
ren.label('Script', 450, 82)
|
||||
.attr({
|
||||
fill: colors[2],
|
||||
stroke: 'white',
|
||||
'stroke-width': 2,
|
||||
padding: 5,
|
||||
r: 5
|
||||
})
|
||||
.css({
|
||||
color: 'white',
|
||||
width: '100px'
|
||||
})
|
||||
.add()
|
||||
.shadow(true);
|
||||
|
||||
// Arrow from Script to PhantomJS
|
||||
ren.path(leftArrow)
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: colors[2]
|
||||
})
|
||||
.translate(330, 90)
|
||||
.add();
|
||||
|
||||
ren.label('Command', 340, 70)
|
||||
.css({
|
||||
color: colors[2],
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
|
||||
// Arrow from PhantomJS to Script
|
||||
ren.path(rightArrow)
|
||||
.attr({
|
||||
'stroke-width': 2,
|
||||
stroke: colors[2]
|
||||
})
|
||||
.translate(330, 100)
|
||||
.add();
|
||||
|
||||
ren.label('Rasterized image', 330, 100)
|
||||
.css({
|
||||
color: colors[2],
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Highcharts export server overview',
|
||||
style: {
|
||||
color: 'black'
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 300px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<button id="large">Large</button>
|
||||
<button id="small">Small</button>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var chart = Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts responsive chart'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Resize the frame or click buttons to change appearance'
|
||||
},
|
||||
|
||||
legend: {
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
layout: 'vertical'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Bananas'],
|
||||
labels: {
|
||||
x: -10
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
title: {
|
||||
text: 'Amount'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Christmas Eve',
|
||||
data: [1, 4, 3]
|
||||
}, {
|
||||
name: 'Christmas Day before dinner',
|
||||
data: [6, 4, 2]
|
||||
}, {
|
||||
name: 'Christmas Day after dinner',
|
||||
data: [8, 4, 3]
|
||||
}],
|
||||
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
legend: {
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom',
|
||||
layout: 'horizontal'
|
||||
},
|
||||
yAxis: {
|
||||
labels: {
|
||||
align: 'left',
|
||||
x: 0,
|
||||
y: -5
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
subtitle: {
|
||||
text: null
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
$('#small').click(function () {
|
||||
chart.setSize(400, 300);
|
||||
});
|
||||
|
||||
$('#large').click(function () {
|
||||
chart.setSize(600, 300);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
margin: 1em auto;
|
||||
border: 1px solid silver;
|
||||
}
|
||||
|
||||
#csv {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/sankey.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
Highcharts.chart('container', {
|
||||
|
||||
title: {
|
||||
text: 'Highcharts Sankey Diagram'
|
||||
},
|
||||
|
||||
series: [{
|
||||
keys: ['from', 'to', 'weight'],
|
||||
data: [
|
||||
['Brazil', 'Portugal', 5 ],
|
||||
['Brazil', 'France', 1 ],
|
||||
['Brazil', 'Spain', 1 ],
|
||||
['Brazil', 'England', 1 ],
|
||||
['Canada', 'Portugal', 1 ],
|
||||
['Canada', 'France', 5 ],
|
||||
['Canada', 'England', 1 ],
|
||||
['Mexico', 'Portugal', 1 ],
|
||||
['Mexico', 'France', 1 ],
|
||||
['Mexico', 'Spain', 5 ],
|
||||
['Mexico', 'England', 1 ],
|
||||
['USA', 'Portugal', 1 ],
|
||||
['USA', 'France', 1 ],
|
||||
['USA', 'Spain', 1 ],
|
||||
['USA', 'England', 5 ],
|
||||
['Portugal', 'Angola', 2 ],
|
||||
['Portugal', 'Senegal', 1 ],
|
||||
['Portugal', 'Morocco', 1 ],
|
||||
['Portugal', 'South Africa', 3 ],
|
||||
['France', 'Angola', 1 ],
|
||||
['France', 'Senegal', 3 ],
|
||||
['France', 'Mali', 3 ],
|
||||
['France', 'Morocco', 3 ],
|
||||
['France', 'South Africa', 1 ],
|
||||
['Spain', 'Senegal', 1 ],
|
||||
['Spain', 'Morocco', 3 ],
|
||||
['Spain', 'South Africa', 1 ],
|
||||
['England', 'Angola', 1 ],
|
||||
['England', 'Senegal', 1 ],
|
||||
['England', 'Morocco', 2 ],
|
||||
['England', 'South Africa', 7 ],
|
||||
['South Africa', 'China', 5 ],
|
||||
['South Africa', 'India', 1 ],
|
||||
['South Africa', 'Japan', 3 ],
|
||||
['Angola', 'China', 5 ],
|
||||
['Angola', 'India', 1 ],
|
||||
['Angola', 'Japan', 3 ],
|
||||
['Senegal', 'China', 5 ],
|
||||
['Senegal', 'India', 1 ],
|
||||
['Senegal', 'Japan', 3 ],
|
||||
['Mali', 'China', 5 ],
|
||||
['Mali', 'India', 1 ],
|
||||
['Mali', 'Japan', 3 ],
|
||||
['Morocco', 'China', 5 ],
|
||||
['Morocco', 'India', 1 ],
|
||||
['Morocco', 'Japan', 3 ]
|
||||
],
|
||||
type: 'sankey',
|
||||
name: 'Sankey demo series'
|
||||
}]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 380;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/boost.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
// Prepare the data
|
||||
var data = [],
|
||||
n = 1000000,
|
||||
i;
|
||||
for (i = 0; i < n; i += 1) {
|
||||
data.push([
|
||||
Math.pow(Math.random(), 2) * 100,
|
||||
Math.pow(Math.random(), 2) * 100
|
||||
]);
|
||||
}
|
||||
|
||||
if (!Highcharts.Series.prototype.renderCanvas) {
|
||||
throw 'Module not loaded';
|
||||
}
|
||||
|
||||
console.time('scatter');
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
zoomType: 'xy',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
boost: {
|
||||
useGPUTranslations: true,
|
||||
usePreAllocated: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
gridLineWidth: 1
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
// Renders faster when we don't have to compute min and max
|
||||
min: 0,
|
||||
max: 100,
|
||||
minPadding: 0,
|
||||
maxPadding: 0,
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Scatter chart with 1 million points'
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'scatter',
|
||||
color: 'rgba(152,0,67,0.1)',
|
||||
data: data,
|
||||
marker: {
|
||||
radius: 0.1
|
||||
},
|
||||
tooltip: {
|
||||
followPointer: false,
|
||||
pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
|
||||
}
|
||||
}]
|
||||
|
||||
});
|
||||
console.timeEnd('scatter');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'scatter',
|
||||
zoomType: 'xy'
|
||||
},
|
||||
title: {
|
||||
text: 'Height Versus Weight of 507 Individuals by Gender'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: Heinz 2003'
|
||||
},
|
||||
xAxis: {
|
||||
title: {
|
||||
enabled: true,
|
||||
text: 'Height (cm)'
|
||||
},
|
||||
startOnTick: true,
|
||||
endOnTick: true,
|
||||
showLastLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Weight (kg)'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
verticalAlign: 'top',
|
||||
x: 100,
|
||||
y: 70,
|
||||
floating: true,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
|
||||
borderWidth: 1
|
||||
},
|
||||
plotOptions: {
|
||||
scatter: {
|
||||
marker: {
|
||||
radius: 5,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: true,
|
||||
lineColor: 'rgb(100,100,100)'
|
||||
}
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<b>{series.name}</b><br>',
|
||||
pointFormat: '{point.x} cm, {point.y} kg'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Female',
|
||||
color: 'rgba(223, 83, 83, .5)',
|
||||
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
|
||||
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
|
||||
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
|
||||
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
|
||||
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
|
||||
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
|
||||
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
|
||||
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
|
||||
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
|
||||
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
|
||||
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
|
||||
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
|
||||
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
|
||||
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
|
||||
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
|
||||
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
|
||||
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
|
||||
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
|
||||
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
|
||||
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
|
||||
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
|
||||
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
|
||||
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
|
||||
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
|
||||
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
|
||||
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
|
||||
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
|
||||
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
|
||||
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
|
||||
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
|
||||
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
|
||||
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
|
||||
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
|
||||
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
|
||||
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
|
||||
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
|
||||
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
|
||||
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
|
||||
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
|
||||
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
|
||||
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
|
||||
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
|
||||
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
|
||||
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
|
||||
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
|
||||
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
|
||||
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
|
||||
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
|
||||
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
|
||||
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
|
||||
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]
|
||||
|
||||
}, {
|
||||
name: 'Male',
|
||||
color: 'rgba(119, 152, 191, .5)',
|
||||
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
|
||||
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
|
||||
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
|
||||
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
|
||||
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
|
||||
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
|
||||
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
|
||||
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
|
||||
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
|
||||
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
|
||||
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
|
||||
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
|
||||
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
|
||||
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
|
||||
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
|
||||
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
|
||||
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
|
||||
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
|
||||
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
|
||||
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
|
||||
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
|
||||
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
|
||||
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
|
||||
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
|
||||
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
|
||||
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
|
||||
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
|
||||
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
|
||||
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
|
||||
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
|
||||
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
|
||||
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
|
||||
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
|
||||
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
|
||||
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
|
||||
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
|
||||
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
|
||||
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
|
||||
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
|
||||
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
|
||||
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
|
||||
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
|
||||
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
|
||||
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
|
||||
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
|
||||
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
|
||||
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
|
||||
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
|
||||
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
|
||||
[180.3, 83.2], [180.3, 83.2]]
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 320px;
|
||||
max-width: 900px;
|
||||
height: 500px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
#controls {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/data.js"></script>
|
||||
<script src="../../code/modules/sonification.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<div id="controls" style="">
|
||||
<button id="play">Play</button>
|
||||
<button id="pause">Pause</button>
|
||||
<button id="rewind">Rewind</button>
|
||||
<input type="range" id="speed" name="Speed"
|
||||
min="0.5" max="2" value="1" step="0.05">
|
||||
<label for="speed">Speed</label>
|
||||
</div>
|
||||
|
||||
<pre id="csv_data" style="display:none">2018-01-07,61,9,61,15.85714286
|
||||
2018-01-14,66,20,61,33.85714286
|
||||
2018-01-21,56,41,60,31.85714286
|
||||
2018-01-28,61,46,58,39.28571429
|
||||
2018-02-04,63,35,65,32.14285714
|
||||
2018-02-11,61,47,61,35.85714286
|
||||
2018-02-18,61,37,62,40.42857143
|
||||
2018-02-25,55,44,54,45
|
||||
2018-03-04,57,41,56,43.42857143
|
||||
2018-03-11,62,38,61,36.57142857
|
||||
2018-03-18,57,36,60,36.57142857
|
||||
2018-03-25,59,40,61,38.14285714
|
||||
2018-04-01,60,48,60,43.28571429
|
||||
2018-04-08,64,38,62,41.14285714
|
||||
2018-04-15,68,43,66,45.85714286
|
||||
2018-04-22,64,51,61,46
|
||||
2018-04-29,62,54,62,53.28571429
|
||||
2018-05-06,67,60,62,62.57142857
|
||||
2018-05-13,63,53,62,58.42857143
|
||||
2018-05-20,62,67,63,60.14285714
|
||||
2018-05-27,63,65,63,67.71428571
|
||||
2018-06-03,67,63,65,65.14285714
|
||||
2018-06-10,68,68,66,64
|
||||
2018-06-17,65,74,67,68.57142857
|
||||
2018-06-24,65,69,66,71.42857143
|
||||
2018-07-01,66,82,67,75.14285714
|
||||
2018-07-08,78,69,72,76.57142857
|
||||
2018-07-15,74,75,74,75.14285714
|
||||
2018-07-22,76,73,73,74.85714286
|
||||
2018-07-29,76,77,75,76.57142857
|
||||
2018-08-05,76,81,77,77.42857143
|
||||
2018-08-12,80,76,81,79
|
||||
2018-08-19,76,71,76,77
|
||||
2018-08-26,74,73,75,73
|
||||
2018-09-02,71,72,74,78.28571429
|
||||
2018-09-09,70,61,72,75
|
||||
2018-09-16,74,72,72,69.71428571
|
||||
2018-09-23,71,63,71,70.42857143
|
||||
2018-09-30,71,63,69,65.71428571
|
||||
2018-10-07,68,71,71,68.14285714
|
||||
2018-10-14,68,53,68,64
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// Sonification options
|
||||
var sdInstruments = [{
|
||||
instrument: 'sineMajor',
|
||||
instrumentMapping: {
|
||||
duration: 200,
|
||||
frequency: 'y',
|
||||
volume: 0.7,
|
||||
pan: -1
|
||||
},
|
||||
instrumentOptions: {
|
||||
minFrequency: 220,
|
||||
maxFrequency: 1900
|
||||
}
|
||||
}],
|
||||
nyInstruments = [{
|
||||
instrument: 'triangleMajor',
|
||||
instrumentMapping: {
|
||||
duration: 200,
|
||||
frequency: 'y',
|
||||
volume: 0.6,
|
||||
pan: 1
|
||||
},
|
||||
instrumentOptions: {
|
||||
minFrequency: 220,
|
||||
maxFrequency: 1900
|
||||
}
|
||||
}];
|
||||
|
||||
// Point of interest options
|
||||
var poiTime = Date.UTC(2018, 4, 6),
|
||||
poiEarcon = {
|
||||
// Define the earcon we want to play for the point of interest
|
||||
earcon: new Highcharts.sonification.Earcon({
|
||||
instruments: [{
|
||||
instrument: 'squareMajor',
|
||||
playOptions: {
|
||||
// Play a quick rising frequency
|
||||
frequency: function (time) {
|
||||
return time * 1760 + 440;
|
||||
},
|
||||
volume: 0.1,
|
||||
duration: 200
|
||||
}
|
||||
}]
|
||||
}),
|
||||
// Play this earcon if we hit the point of interest
|
||||
condition: function (point) {
|
||||
return point.x === poiTime;
|
||||
}
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var chart = Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline'
|
||||
},
|
||||
title: {
|
||||
text: 'Play chart as sound'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Weekly temperature averages'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature (°F)'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
plotLines: [{
|
||||
value: poiTime,
|
||||
dashStyle: 'dash',
|
||||
width: 1,
|
||||
color: '#d33'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
split: true,
|
||||
valueDecimals: 0,
|
||||
valueSuffix: '°F'
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
cursor: 'pointer',
|
||||
// Sonify points on click
|
||||
point: {
|
||||
events: {
|
||||
click: function () {
|
||||
// Sonify all points at this x value
|
||||
var targetX = this.x,
|
||||
chart = this.series.chart;
|
||||
chart.series.forEach(function (series) {
|
||||
// Map instruments to the options for this series
|
||||
var instruments = series.options.id === 'sd' ?
|
||||
sdInstruments : nyInstruments;
|
||||
// See if we have a point with the targetX
|
||||
series.points.some(function (point) {
|
||||
if (point.x === targetX) {
|
||||
point.sonify({
|
||||
instruments: instruments
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// Data source: https://www.ncdc.noaa.gov
|
||||
data: {
|
||||
csv: document.getElementById('csv_data').innerHTML,
|
||||
firstRowAsNames: false,
|
||||
parsed: function (columns) {
|
||||
columns.splice(1, 2); // Remove the non-average columns
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'San Diego',
|
||||
id: 'sd',
|
||||
color: '#f4b042'
|
||||
}, {
|
||||
name: 'New York',
|
||||
id: 'ny',
|
||||
color: '#41aff4'
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
// Utility function that highlights a point
|
||||
function highlightPoint(event, point) {
|
||||
var chart = point.series.chart,
|
||||
hasVisibleSeries = chart.series.some(function (series) {
|
||||
return series.visible;
|
||||
});
|
||||
if (!point.isNull && hasVisibleSeries) {
|
||||
point.onMouseOver(); // Show the hover marker and tooltip
|
||||
} else {
|
||||
if (chart.tooltip) {
|
||||
chart.tooltip.hide(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// On speed change we reset the sonification
|
||||
document.getElementById('speed').onchange = function () {
|
||||
chart.cancelSonify();
|
||||
};
|
||||
|
||||
|
||||
// Add sonification button handlers
|
||||
document.getElementById('play').onclick = function () {
|
||||
if (!chart.sonification.timeline || chart.sonification.timeline.atStart()) {
|
||||
chart.sonify({
|
||||
duration: 5000 / document.getElementById('speed').value,
|
||||
order: 'simultaneous',
|
||||
pointPlayTime: 'x',
|
||||
seriesOptions: [{
|
||||
id: 'sd',
|
||||
instruments: sdInstruments,
|
||||
onPointStart: highlightPoint,
|
||||
// Play earcon at point of interest
|
||||
earcons: [poiEarcon]
|
||||
}, {
|
||||
id: 'ny',
|
||||
instruments: nyInstruments,
|
||||
onPointStart: highlightPoint
|
||||
}],
|
||||
// Delete timeline on end
|
||||
onEnd: function () {
|
||||
if (chart.sonification.timeline) {
|
||||
delete chart.sonification.timeline;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
chart.resumeSonify();
|
||||
}
|
||||
};
|
||||
document.getElementById('pause').onclick = function () {
|
||||
chart.pauseSonify();
|
||||
};
|
||||
document.getElementById('rewind').onclick = function () {
|
||||
chart.rewindSonify();
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,677 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#result {
|
||||
text-align: right;
|
||||
color: gray;
|
||||
min-height: 2em;
|
||||
}
|
||||
#table-sparkline {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
td, th {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid silver;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-top: 2px solid gray;
|
||||
border-bottom: 2px solid gray;
|
||||
}
|
||||
.highcharts-tooltip>span {
|
||||
background: white;
|
||||
border: 1px solid silver;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 2px #888;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
|
||||
<div id="result"></div>
|
||||
<table id="table-sparkline">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>State</th>
|
||||
<th>Income</th>
|
||||
<th>Income per quarter</th>
|
||||
<th>Costs</th>
|
||||
<th>Costs per quarter</th>
|
||||
<th>Result</th>
|
||||
<th>Result per quarter</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody-sparkline">
|
||||
<tr>
|
||||
<th>Alabama</th>
|
||||
<td>254</td>
|
||||
<td data-sparkline="71, 78, 39, 66 "/>
|
||||
<td>296</td>
|
||||
<td data-sparkline="68, 52, 80, 96 "/>
|
||||
<td>-42</td>
|
||||
<td data-sparkline="3, 26, -41, -30 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Alaska</th>
|
||||
<td>246</td>
|
||||
<td data-sparkline="87, 44, 74, 41 "/>
|
||||
<td>181</td>
|
||||
<td data-sparkline="29, 54, 73, 25 "/>
|
||||
<td>65</td>
|
||||
<td data-sparkline="58, -10, 1, 16 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Arizona</th>
|
||||
<td>101</td>
|
||||
<td data-sparkline="56, 12, 8, 25 "/>
|
||||
<td>191</td>
|
||||
<td data-sparkline="69, 14, 53, 55 "/>
|
||||
<td>-90</td>
|
||||
<td data-sparkline="-13, -2, -45, -30 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Arkansas</th>
|
||||
<td>303</td>
|
||||
<td data-sparkline="81, 50, 78, 94 "/>
|
||||
<td>76</td>
|
||||
<td data-sparkline="36, 15, 14, 11 "/>
|
||||
<td>227</td>
|
||||
<td data-sparkline="45, 35, 64, 83 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>California</th>
|
||||
<td>200</td>
|
||||
<td data-sparkline="61, 80, 10, 49 "/>
|
||||
<td>217</td>
|
||||
<td data-sparkline="100, 8, 52, 57 "/>
|
||||
<td>-17</td>
|
||||
<td data-sparkline="-39, 72, -42, -8 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Colorado</th>
|
||||
<td>118</td>
|
||||
<td data-sparkline="13, 48, 21, 36 "/>
|
||||
<td>273</td>
|
||||
<td data-sparkline="98, 86, 8, 81 "/>
|
||||
<td>-155</td>
|
||||
<td data-sparkline="-85, -38, 13, -45 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Connecticut</th>
|
||||
<td>201</td>
|
||||
<td data-sparkline="6, 64, 44, 87 "/>
|
||||
<td>148</td>
|
||||
<td data-sparkline="60, 13, 73, 2 "/>
|
||||
<td>53</td>
|
||||
<td data-sparkline="-54, 51, -29, 85 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Delaware</th>
|
||||
<td>161</td>
|
||||
<td data-sparkline="7, 27, 49, 78 "/>
|
||||
<td>298</td>
|
||||
<td data-sparkline="19, 90, 100, 89 "/>
|
||||
<td>-137</td>
|
||||
<td data-sparkline="-12, -63, -51, -11 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>District of Columbia</th>
|
||||
<td>106</td>
|
||||
<td data-sparkline="18, 39, 27, 22 "/>
|
||||
<td>185</td>
|
||||
<td data-sparkline="62, 97, 24, 2 "/>
|
||||
<td>-79</td>
|
||||
<td data-sparkline="-44, -58, 3, 20 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Florida</th>
|
||||
<td>249</td>
|
||||
<td data-sparkline="51, 24, 90, 84 "/>
|
||||
<td>244</td>
|
||||
<td data-sparkline="47, 40, 74, 83 "/>
|
||||
<td>5</td>
|
||||
<td data-sparkline="4, -16, 16, 1 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Georgia</th>
|
||||
<td>183</td>
|
||||
<td data-sparkline="36, 80, 39, 28 "/>
|
||||
<td>212</td>
|
||||
<td data-sparkline="43, 25, 52, 92 "/>
|
||||
<td>-29</td>
|
||||
<td data-sparkline="-7, 55, -13, -64 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Hawaii</th>
|
||||
<td>232</td>
|
||||
<td data-sparkline="73, 34, 74, 51 "/>
|
||||
<td>172</td>
|
||||
<td data-sparkline="1, 83, 49, 39 "/>
|
||||
<td>60</td>
|
||||
<td data-sparkline="72, -49, 25, 12 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Idaho</th>
|
||||
<td>166</td>
|
||||
<td data-sparkline="25, 43, 31, 67 "/>
|
||||
<td>152</td>
|
||||
<td data-sparkline="30, 30, 75, 17 "/>
|
||||
<td>14</td>
|
||||
<td data-sparkline="-5, 13, -44, 50 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Illinois</th>
|
||||
<td>336</td>
|
||||
<td data-sparkline="56, 84, 98, 98 "/>
|
||||
<td>151</td>
|
||||
<td data-sparkline="61, 12, 77, 1 "/>
|
||||
<td>185</td>
|
||||
<td data-sparkline="-5, 72, 21, 97 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Indiana</th>
|
||||
<td>216</td>
|
||||
<td data-sparkline="52, 87, 64, 13 "/>
|
||||
<td>216</td>
|
||||
<td data-sparkline="2, 47, 94, 73 "/>
|
||||
<td>0</td>
|
||||
<td data-sparkline="50, 40, -30, -60 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Iowa</th>
|
||||
<td>135</td>
|
||||
<td data-sparkline="41, 45, 19, 30 "/>
|
||||
<td>159</td>
|
||||
<td data-sparkline="17, 34, 45, 63 "/>
|
||||
<td>-24</td>
|
||||
<td data-sparkline="24, 11, -26, -33 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Kansas</th>
|
||||
<td>184</td>
|
||||
<td data-sparkline="52, 43, 65, 24 "/>
|
||||
<td>215</td>
|
||||
<td data-sparkline="20, 42, 97, 56 "/>
|
||||
<td>-31</td>
|
||||
<td data-sparkline="32, 1, -32, -32 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Kentucky</th>
|
||||
<td>289</td>
|
||||
<td data-sparkline="85, 74, 98, 32 "/>
|
||||
<td>219</td>
|
||||
<td data-sparkline="37, 38, 93, 51 "/>
|
||||
<td>70</td>
|
||||
<td data-sparkline="48, 36, 5, -19 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Louisiana</th>
|
||||
<td>257</td>
|
||||
<td data-sparkline="89, 18, 87, 63 "/>
|
||||
<td>201</td>
|
||||
<td data-sparkline="19, 54, 35, 93 "/>
|
||||
<td>56</td>
|
||||
<td data-sparkline="70, -36, 52, -30 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Maine</th>
|
||||
<td>194</td>
|
||||
<td data-sparkline="17, 68, 61, 48 "/>
|
||||
<td>133</td>
|
||||
<td data-sparkline="44, 35, 42, 12 "/>
|
||||
<td>61</td>
|
||||
<td data-sparkline="-27, 33, 19, 36 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Maryland</th>
|
||||
<td>204</td>
|
||||
<td data-sparkline="74, 12, 74, 44 "/>
|
||||
<td>157</td>
|
||||
<td data-sparkline="65, 58, 22, 12 "/>
|
||||
<td>47</td>
|
||||
<td data-sparkline="9, -46, 52, 32 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Massachusetts</th>
|
||||
<td>172</td>
|
||||
<td data-sparkline="44, 35, 69, 24 "/>
|
||||
<td>115</td>
|
||||
<td data-sparkline="26, 3, 69, 17 "/>
|
||||
<td>57</td>
|
||||
<td data-sparkline="18, 32, 0, 7 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Michigan</th>
|
||||
<td>177</td>
|
||||
<td data-sparkline="99, 26, 13, 39 "/>
|
||||
<td>185</td>
|
||||
<td data-sparkline="20, 37, 99, 29 "/>
|
||||
<td>-8</td>
|
||||
<td data-sparkline="79, -11, -86, 10 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Minnesota</th>
|
||||
<td>99</td>
|
||||
<td data-sparkline="34, 30, 16, 19 "/>
|
||||
<td>137</td>
|
||||
<td data-sparkline="49, 43, 24, 21 "/>
|
||||
<td>-38</td>
|
||||
<td data-sparkline="-15, -13, -8, -2 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Mississippi</th>
|
||||
<td>205</td>
|
||||
<td data-sparkline="38, 75, 31, 61 "/>
|
||||
<td>179</td>
|
||||
<td data-sparkline="0, 68, 100, 11 "/>
|
||||
<td>26</td>
|
||||
<td data-sparkline="38, 7, -69, 50 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Missouri</th>
|
||||
<td>135</td>
|
||||
<td data-sparkline="37, 48, 2, 48 "/>
|
||||
<td>202</td>
|
||||
<td data-sparkline="41, 64, 17, 80 "/>
|
||||
<td>-67</td>
|
||||
<td data-sparkline="-4, -16, -15, -32 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Montana</th>
|
||||
<td>195</td>
|
||||
<td data-sparkline="48, 81, 38, 28 "/>
|
||||
<td>237</td>
|
||||
<td data-sparkline="44, 33, 86, 74 "/>
|
||||
<td>-42</td>
|
||||
<td data-sparkline="4, 48, -48, -46 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Nebraska</th>
|
||||
<td>286</td>
|
||||
<td data-sparkline="98, 55, 82, 51 "/>
|
||||
<td>232</td>
|
||||
<td data-sparkline="89, 54, 28, 61 "/>
|
||||
<td>54</td>
|
||||
<td data-sparkline="9, 1, 54, -10 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Nevada</th>
|
||||
<td>221</td>
|
||||
<td data-sparkline="66, 4, 57, 94 "/>
|
||||
<td>214</td>
|
||||
<td data-sparkline="59, 39, 94, 22 "/>
|
||||
<td>7</td>
|
||||
<td data-sparkline="7, -35, -37, 72 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>New Hampshire</th>
|
||||
<td>136</td>
|
||||
<td data-sparkline="32, 21, 1, 82 "/>
|
||||
<td>306</td>
|
||||
<td data-sparkline="88, 85, 65, 68 "/>
|
||||
<td>-170</td>
|
||||
<td data-sparkline="-56, -64, -64, 14 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>New Jersey</th>
|
||||
<td>194</td>
|
||||
<td data-sparkline="31, 40, 24, 99 "/>
|
||||
<td>147</td>
|
||||
<td data-sparkline="7, 45, 12, 83 "/>
|
||||
<td>47</td>
|
||||
<td data-sparkline="24, -5, 12, 16 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>New Mexico</th>
|
||||
<td>207</td>
|
||||
<td data-sparkline="66, 93, 18, 30 "/>
|
||||
<td>261</td>
|
||||
<td data-sparkline="97, 28, 79, 57 "/>
|
||||
<td>-54</td>
|
||||
<td data-sparkline="-31, 65, -61, -27 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>New York</th>
|
||||
<td>316</td>
|
||||
<td data-sparkline="48, 95, 76, 97 "/>
|
||||
<td>193</td>
|
||||
<td data-sparkline="68, 5, 97, 23 "/>
|
||||
<td>123</td>
|
||||
<td data-sparkline="-20, 90, -21, 74 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>North Carolina</th>
|
||||
<td>175</td>
|
||||
<td data-sparkline="31, 71, 2, 71 "/>
|
||||
<td>188</td>
|
||||
<td data-sparkline="93, 5, 81, 9 "/>
|
||||
<td>-13</td>
|
||||
<td data-sparkline="-62, 66, -79, 62 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>North Dakota</th>
|
||||
<td>181</td>
|
||||
<td data-sparkline="3, 90, 62, 26 "/>
|
||||
<td>288</td>
|
||||
<td data-sparkline="70, 63, 82, 73 "/>
|
||||
<td>-107</td>
|
||||
<td data-sparkline="-67, 27, -20, -47 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Ohio</th>
|
||||
<td>189</td>
|
||||
<td data-sparkline="70, 50, 6, 63 "/>
|
||||
<td>163</td>
|
||||
<td data-sparkline="21, 94, 4, 44 "/>
|
||||
<td>26</td>
|
||||
<td data-sparkline="49, -44, 2, 19 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Oklahoma</th>
|
||||
<td>188</td>
|
||||
<td data-sparkline="66, 46, 53, 23 "/>
|
||||
<td>172</td>
|
||||
<td data-sparkline="26, 25, 35, 86 "/>
|
||||
<td>16</td>
|
||||
<td data-sparkline="40, 21, 18, -63 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Oregon</th>
|
||||
<td>165</td>
|
||||
<td data-sparkline="82, 31, 38, 14 "/>
|
||||
<td>257</td>
|
||||
<td data-sparkline="91, 9, 80, 77 "/>
|
||||
<td>-92</td>
|
||||
<td data-sparkline="-9, 22, -42, -63 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Pennsylvania</th>
|
||||
<td>268</td>
|
||||
<td data-sparkline="33, 88, 82, 65 "/>
|
||||
<td>129</td>
|
||||
<td data-sparkline="30, 29, 41, 29 "/>
|
||||
<td>139</td>
|
||||
<td data-sparkline="3, 59, 41, 36 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Rhode Island</th>
|
||||
<td>164</td>
|
||||
<td data-sparkline="8, 86, 32, 38 "/>
|
||||
<td>182</td>
|
||||
<td data-sparkline="88, 8, 18, 68 "/>
|
||||
<td>-18</td>
|
||||
<td data-sparkline="-80, 78, 14, -30 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>South Carolina</th>
|
||||
<td>91</td>
|
||||
<td data-sparkline="24, 18, 0, 49 "/>
|
||||
<td>193</td>
|
||||
<td data-sparkline="72, 62, 21, 38 "/>
|
||||
<td>-102</td>
|
||||
<td data-sparkline="-48, -44, -21, 11 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>South Dakota</th>
|
||||
<td>184</td>
|
||||
<td data-sparkline="73, 17, 64, 30 "/>
|
||||
<td>221</td>
|
||||
<td data-sparkline="21, 91, 57, 52 "/>
|
||||
<td>-37</td>
|
||||
<td data-sparkline="52, -74, 7, -22 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tennessee</th>
|
||||
<td>233</td>
|
||||
<td data-sparkline="92, 24, 25, 92 "/>
|
||||
<td>131</td>
|
||||
<td data-sparkline="5, 18, 42, 66 "/>
|
||||
<td>102</td>
|
||||
<td data-sparkline="87, 6, -17, 26 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Texas</th>
|
||||
<td>211</td>
|
||||
<td data-sparkline="33, 80, 68, 30 "/>
|
||||
<td>225</td>
|
||||
<td data-sparkline="86, 58, 36, 45 "/>
|
||||
<td>-14</td>
|
||||
<td data-sparkline="-53, 22, 32, -15 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Utah</th>
|
||||
<td>362</td>
|
||||
<td data-sparkline="89, 98, 96, 79 "/>
|
||||
<td>225</td>
|
||||
<td data-sparkline="35, 51, 88, 51 "/>
|
||||
<td>137</td>
|
||||
<td data-sparkline="54, 47, 8, 28 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Vermont</th>
|
||||
<td>119</td>
|
||||
<td data-sparkline="4, 19, 56, 40 "/>
|
||||
<td>152</td>
|
||||
<td data-sparkline="17, 66, 27, 42 "/>
|
||||
<td>-33</td>
|
||||
<td data-sparkline="-13, -47, 29, -2 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Virginia</th>
|
||||
<td>127</td>
|
||||
<td data-sparkline="24, 27, 41, 35 "/>
|
||||
<td>71</td>
|
||||
<td data-sparkline="30, 2, 36, 3 "/>
|
||||
<td>56</td>
|
||||
<td data-sparkline="-6, 25, 5, 32 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Washington</th>
|
||||
<td>165</td>
|
||||
<td data-sparkline="40, 11, 63, 51 "/>
|
||||
<td>245</td>
|
||||
<td data-sparkline="46, 41, 94, 64 "/>
|
||||
<td>-80</td>
|
||||
<td data-sparkline="-6, -30, -31, -13 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>West Virginia</th>
|
||||
<td>248</td>
|
||||
<td data-sparkline="66, 56, 97, 29 "/>
|
||||
<td>171</td>
|
||||
<td data-sparkline="65, 53, 37, 16 "/>
|
||||
<td>77</td>
|
||||
<td data-sparkline="1, 3, 60, 13 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Wisconsin</th>
|
||||
<td>183</td>
|
||||
<td data-sparkline="24, 55, 21, 83 "/>
|
||||
<td>224</td>
|
||||
<td data-sparkline="80, 64, 13, 67 "/>
|
||||
<td>-41</td>
|
||||
<td data-sparkline="-56, -9, 8, 16 ; column"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Wyoming</th>
|
||||
<td>231</td>
|
||||
<td data-sparkline="52, 49, 97, 33 "/>
|
||||
<td>251</td>
|
||||
<td data-sparkline="96, 50, 23, 82 "/>
|
||||
<td>-20</td>
|
||||
<td data-sparkline="-44, -1, 74, -49 ; column"/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
/**
|
||||
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
|
||||
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
|
||||
*/
|
||||
Highcharts.SparkLine = function (a, b, c) {
|
||||
var hasRenderToArg = typeof a === 'string' || a.nodeName,
|
||||
options = arguments[hasRenderToArg ? 1 : 0],
|
||||
defaultOptions = {
|
||||
chart: {
|
||||
renderTo: (options.chart && options.chart.renderTo) || this,
|
||||
backgroundColor: null,
|
||||
borderWidth: 0,
|
||||
type: 'area',
|
||||
margin: [2, 0, 2, 0],
|
||||
width: 120,
|
||||
height: 20,
|
||||
style: {
|
||||
overflow: 'visible'
|
||||
},
|
||||
|
||||
// small optimalization, saves 1-2 ms each sparkline
|
||||
skipClone: true
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
xAxis: {
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
startOnTick: false,
|
||||
endOnTick: false,
|
||||
tickPositions: []
|
||||
},
|
||||
yAxis: {
|
||||
endOnTick: false,
|
||||
startOnTick: false,
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
tickPositions: [0]
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
hideDelay: 0,
|
||||
outside: true,
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false,
|
||||
lineWidth: 1,
|
||||
shadow: false,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
radius: 1,
|
||||
states: {
|
||||
hover: {
|
||||
radius: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
fillOpacity: 0.25
|
||||
},
|
||||
column: {
|
||||
negativeColor: '#910000',
|
||||
borderColor: 'silver'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
options = Highcharts.merge(defaultOptions, options);
|
||||
|
||||
return hasRenderToArg ?
|
||||
new Highcharts.Chart(a, options, c) :
|
||||
new Highcharts.Chart(options, b);
|
||||
};
|
||||
|
||||
var start = +new Date(),
|
||||
$tds = $('td[data-sparkline]'),
|
||||
fullLen = $tds.length,
|
||||
n = 0;
|
||||
|
||||
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
|
||||
// can take some seconds, so we split the input into chunks and apply them in timeouts
|
||||
// in order avoid locking up the browser process and allow interaction.
|
||||
function doChunk() {
|
||||
var time = +new Date(),
|
||||
i,
|
||||
len = $tds.length,
|
||||
$td,
|
||||
stringdata,
|
||||
arr,
|
||||
data,
|
||||
chart;
|
||||
|
||||
for (i = 0; i < len; i += 1) {
|
||||
$td = $($tds[i]);
|
||||
stringdata = $td.data('sparkline');
|
||||
arr = stringdata.split('; ');
|
||||
data = $.map(arr[0].split(', '), parseFloat);
|
||||
chart = {};
|
||||
|
||||
if (arr[1]) {
|
||||
chart.type = arr[1];
|
||||
}
|
||||
$td.highcharts('SparkLine', {
|
||||
series: [{
|
||||
data: data,
|
||||
pointStart: 1
|
||||
}],
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
|
||||
pointFormat: '<b>{point.y}.000</b> USD'
|
||||
},
|
||||
chart: chart
|
||||
});
|
||||
|
||||
n += 1;
|
||||
|
||||
// If the process takes too much time, run a timeout to allow interaction with the browser
|
||||
if (new Date() - time > 500) {
|
||||
$tds.splice(0, i + 1);
|
||||
setTimeout(doChunk, 0);
|
||||
break;
|
||||
}
|
||||
|
||||
// Print a feedback on the performance
|
||||
if (n === fullLen) {
|
||||
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
|
||||
}
|
||||
}
|
||||
}
|
||||
doChunk();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline',
|
||||
inverted: true
|
||||
},
|
||||
title: {
|
||||
text: 'Atmosphere Temperature by Altitude'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'According to the Standard Atmosphere Model'
|
||||
},
|
||||
xAxis: {
|
||||
reversed: false,
|
||||
title: {
|
||||
enabled: true,
|
||||
text: 'Altitude'
|
||||
},
|
||||
labels: {
|
||||
format: '{value} km'
|
||||
},
|
||||
maxPadding: 0.05,
|
||||
showLastLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature'
|
||||
},
|
||||
labels: {
|
||||
format: '{value}°'
|
||||
},
|
||||
lineWidth: 2
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<b>{series.name}</b><br/>',
|
||||
pointFormat: '{point.x} km: {point.y}°C'
|
||||
},
|
||||
plotOptions: {
|
||||
spline: {
|
||||
marker: {
|
||||
enable: false
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Temperature',
|
||||
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
|
||||
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline'
|
||||
},
|
||||
title: {
|
||||
text: 'Snow depth at Vikjafjellet, Norway'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Irregular time data in Highcharts JS'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
dateTimeLabelFormats: { // don't display the dummy year
|
||||
month: '%e. %b',
|
||||
year: '%b'
|
||||
},
|
||||
title: {
|
||||
text: 'Date'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Snow depth (m)'
|
||||
},
|
||||
min: 0
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<b>{series.name}</b><br>',
|
||||
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
spline: {
|
||||
marker: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
|
||||
|
||||
// Define the data points. All series have a dummy year
|
||||
// of 1970/71 in order to be compared on the same x axis. Note
|
||||
// that in JavaScript, months start at 0 for January, 1 for February etc.
|
||||
series: [{
|
||||
name: "Winter 2014-2015",
|
||||
data: [
|
||||
[Date.UTC(1970, 10, 25), 0],
|
||||
[Date.UTC(1970, 11, 6), 0.25],
|
||||
[Date.UTC(1970, 11, 20), 1.41],
|
||||
[Date.UTC(1970, 11, 25), 1.64],
|
||||
[Date.UTC(1971, 0, 4), 1.6],
|
||||
[Date.UTC(1971, 0, 17), 2.55],
|
||||
[Date.UTC(1971, 0, 24), 2.62],
|
||||
[Date.UTC(1971, 1, 4), 2.5],
|
||||
[Date.UTC(1971, 1, 14), 2.42],
|
||||
[Date.UTC(1971, 2, 6), 2.74],
|
||||
[Date.UTC(1971, 2, 14), 2.62],
|
||||
[Date.UTC(1971, 2, 24), 2.6],
|
||||
[Date.UTC(1971, 3, 1), 2.81],
|
||||
[Date.UTC(1971, 3, 11), 2.63],
|
||||
[Date.UTC(1971, 3, 27), 2.77],
|
||||
[Date.UTC(1971, 4, 4), 2.68],
|
||||
[Date.UTC(1971, 4, 9), 2.56],
|
||||
[Date.UTC(1971, 4, 14), 2.39],
|
||||
[Date.UTC(1971, 4, 19), 2.3],
|
||||
[Date.UTC(1971, 5, 4), 2],
|
||||
[Date.UTC(1971, 5, 9), 1.85],
|
||||
[Date.UTC(1971, 5, 14), 1.49],
|
||||
[Date.UTC(1971, 5, 19), 1.27],
|
||||
[Date.UTC(1971, 5, 24), 0.99],
|
||||
[Date.UTC(1971, 5, 29), 0.67],
|
||||
[Date.UTC(1971, 6, 3), 0.18],
|
||||
[Date.UTC(1971, 6, 4), 0]
|
||||
]
|
||||
}, {
|
||||
name: "Winter 2015-2016",
|
||||
data: [
|
||||
[Date.UTC(1970, 10, 9), 0],
|
||||
[Date.UTC(1970, 10, 15), 0.23],
|
||||
[Date.UTC(1970, 10, 20), 0.25],
|
||||
[Date.UTC(1970, 10, 25), 0.23],
|
||||
[Date.UTC(1970, 10, 30), 0.39],
|
||||
[Date.UTC(1970, 11, 5), 0.41],
|
||||
[Date.UTC(1970, 11, 10), 0.59],
|
||||
[Date.UTC(1970, 11, 15), 0.73],
|
||||
[Date.UTC(1970, 11, 20), 0.41],
|
||||
[Date.UTC(1970, 11, 25), 1.07],
|
||||
[Date.UTC(1970, 11, 30), 0.88],
|
||||
[Date.UTC(1971, 0, 5), 0.85],
|
||||
[Date.UTC(1971, 0, 11), 0.89],
|
||||
[Date.UTC(1971, 0, 17), 1.04],
|
||||
[Date.UTC(1971, 0, 20), 1.02],
|
||||
[Date.UTC(1971, 0, 25), 1.03],
|
||||
[Date.UTC(1971, 0, 30), 1.39],
|
||||
[Date.UTC(1971, 1, 5), 1.77],
|
||||
[Date.UTC(1971, 1, 26), 2.12],
|
||||
[Date.UTC(1971, 3, 19), 2.1],
|
||||
[Date.UTC(1971, 4, 9), 1.7],
|
||||
[Date.UTC(1971, 4, 29), 0.85],
|
||||
[Date.UTC(1971, 5, 7), 0]
|
||||
]
|
||||
}, {
|
||||
name: "Winter 2016-2017",
|
||||
data: [
|
||||
[Date.UTC(1970, 9, 15), 0],
|
||||
[Date.UTC(1970, 9, 31), 0.09],
|
||||
[Date.UTC(1970, 10, 7), 0.17],
|
||||
[Date.UTC(1970, 10, 10), 0.1],
|
||||
[Date.UTC(1970, 11, 10), 0.1],
|
||||
[Date.UTC(1970, 11, 13), 0.1],
|
||||
[Date.UTC(1970, 11, 16), 0.11],
|
||||
[Date.UTC(1970, 11, 19), 0.11],
|
||||
[Date.UTC(1970, 11, 22), 0.08],
|
||||
[Date.UTC(1970, 11, 25), 0.23],
|
||||
[Date.UTC(1970, 11, 28), 0.37],
|
||||
[Date.UTC(1971, 0, 16), 0.68],
|
||||
[Date.UTC(1971, 0, 19), 0.55],
|
||||
[Date.UTC(1971, 0, 22), 0.4],
|
||||
[Date.UTC(1971, 0, 25), 0.4],
|
||||
[Date.UTC(1971, 0, 28), 0.37],
|
||||
[Date.UTC(1971, 0, 31), 0.43],
|
||||
[Date.UTC(1971, 1, 4), 0.42],
|
||||
[Date.UTC(1971, 1, 7), 0.39],
|
||||
[Date.UTC(1971, 1, 10), 0.39],
|
||||
[Date.UTC(1971, 1, 13), 0.39],
|
||||
[Date.UTC(1971, 1, 16), 0.39],
|
||||
[Date.UTC(1971, 1, 19), 0.35],
|
||||
[Date.UTC(1971, 1, 22), 0.45],
|
||||
[Date.UTC(1971, 1, 25), 0.62],
|
||||
[Date.UTC(1971, 1, 28), 0.68],
|
||||
[Date.UTC(1971, 2, 4), 0.68],
|
||||
[Date.UTC(1971, 2, 7), 0.65],
|
||||
[Date.UTC(1971, 2, 10), 0.65],
|
||||
[Date.UTC(1971, 2, 13), 0.75],
|
||||
[Date.UTC(1971, 2, 16), 0.86],
|
||||
[Date.UTC(1971, 2, 19), 1.14],
|
||||
[Date.UTC(1971, 2, 22), 1.2],
|
||||
[Date.UTC(1971, 2, 25), 1.27],
|
||||
[Date.UTC(1971, 2, 27), 1.12],
|
||||
[Date.UTC(1971, 2, 30), 0.98],
|
||||
[Date.UTC(1971, 3, 3), 0.85],
|
||||
[Date.UTC(1971, 3, 6), 1.04],
|
||||
[Date.UTC(1971, 3, 9), 0.92],
|
||||
[Date.UTC(1971, 3, 12), 0.96],
|
||||
[Date.UTC(1971, 3, 15), 0.94],
|
||||
[Date.UTC(1971, 3, 18), 0.99],
|
||||
[Date.UTC(1971, 3, 21), 0.96],
|
||||
[Date.UTC(1971, 3, 24), 1.15],
|
||||
[Date.UTC(1971, 3, 27), 1.18],
|
||||
[Date.UTC(1971, 3, 30), 1.12],
|
||||
[Date.UTC(1971, 4, 3), 1.06],
|
||||
[Date.UTC(1971, 4, 6), 0.96],
|
||||
[Date.UTC(1971, 4, 9), 0.87],
|
||||
[Date.UTC(1971, 4, 12), 0.88],
|
||||
[Date.UTC(1971, 4, 15), 0.79],
|
||||
[Date.UTC(1971, 4, 18), 0.54],
|
||||
[Date.UTC(1971, 4, 21), 0.34],
|
||||
[Date.UTC(1971, 4, 25), 0]
|
||||
]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline',
|
||||
scrollablePlotArea: {
|
||||
minWidth: 600,
|
||||
scrollPositionX: 1
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Wind speed during two days'
|
||||
},
|
||||
subtitle: {
|
||||
text: '13th & 14th of February, 2018 at two locations in Vik i Sogn, Norway'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
overflow: 'justify'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Wind speed (m/s)'
|
||||
},
|
||||
minorGridLineWidth: 0,
|
||||
gridLineWidth: 0,
|
||||
alternateGridColor: null,
|
||||
plotBands: [{ // Light air
|
||||
from: 0.3,
|
||||
to: 1.5,
|
||||
color: 'rgba(68, 170, 213, 0.1)',
|
||||
label: {
|
||||
text: 'Light air',
|
||||
style: {
|
||||
color: '#606060'
|
||||
}
|
||||
}
|
||||
}, { // Light breeze
|
||||
from: 1.5,
|
||||
to: 3.3,
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
label: {
|
||||
text: 'Light breeze',
|
||||
style: {
|
||||
color: '#606060'
|
||||
}
|
||||
}
|
||||
}, { // Gentle breeze
|
||||
from: 3.3,
|
||||
to: 5.5,
|
||||
color: 'rgba(68, 170, 213, 0.1)',
|
||||
label: {
|
||||
text: 'Gentle breeze',
|
||||
style: {
|
||||
color: '#606060'
|
||||
}
|
||||
}
|
||||
}, { // Moderate breeze
|
||||
from: 5.5,
|
||||
to: 8,
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
label: {
|
||||
text: 'Moderate breeze',
|
||||
style: {
|
||||
color: '#606060'
|
||||
}
|
||||
}
|
||||
}, { // Fresh breeze
|
||||
from: 8,
|
||||
to: 11,
|
||||
color: 'rgba(68, 170, 213, 0.1)',
|
||||
label: {
|
||||
text: 'Fresh breeze',
|
||||
style: {
|
||||
color: '#606060'
|
||||
}
|
||||
}
|
||||
}, { // Strong breeze
|
||||
from: 11,
|
||||
to: 14,
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
label: {
|
||||
text: 'Strong breeze',
|
||||
style: {
|
||||
color: '#606060'
|
||||
}
|
||||
}
|
||||
}, { // High wind
|
||||
from: 14,
|
||||
to: 15,
|
||||
color: 'rgba(68, 170, 213, 0.1)',
|
||||
label: {
|
||||
text: 'High wind',
|
||||
style: {
|
||||
color: '#606060'
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' m/s'
|
||||
},
|
||||
plotOptions: {
|
||||
spline: {
|
||||
lineWidth: 4,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 5
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
pointInterval: 3600000, // one hour
|
||||
pointStart: Date.UTC(2018, 1, 13, 0, 0, 0)
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Hestavollane',
|
||||
data: [
|
||||
3.7, 3.3, 3.9, 5.1, 3.5, 3.8, 4.0, 5.0, 6.1, 3.7, 3.3, 6.4,
|
||||
6.9, 6.0, 6.8, 4.4, 4.0, 3.8, 5.0, 4.9, 9.2, 9.6, 9.5, 6.3,
|
||||
9.5, 10.8, 14.0, 11.5, 10.0, 10.2, 10.3, 9.4, 8.9, 10.6, 10.5, 11.1,
|
||||
10.4, 10.7, 11.3, 10.2, 9.6, 10.2, 11.1, 10.8, 13.0, 12.5, 12.5, 11.3,
|
||||
10.1
|
||||
]
|
||||
|
||||
}, {
|
||||
name: 'Vik',
|
||||
data: [
|
||||
0.2, 0.1, 0.1, 0.1, 0.3, 0.2, 0.3, 0.1, 0.7, 0.3, 0.2, 0.2,
|
||||
0.3, 0.1, 0.3, 0.4, 0.3, 0.2, 0.3, 0.2, 0.4, 0.0, 0.9, 0.3,
|
||||
0.7, 1.1, 1.8, 1.2, 1.4, 1.2, 0.9, 0.8, 0.9, 0.2, 0.4, 1.2,
|
||||
0.3, 2.3, 1.0, 0.7, 1.0, 0.8, 2.0, 1.2, 1.4, 3.7, 2.1, 2.0,
|
||||
1.5
|
||||
]
|
||||
}],
|
||||
navigation: {
|
||||
menuItemStyle: {
|
||||
fontSize: '10px'
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
<script src="../../code/modules/export-data.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
chart: {
|
||||
type: 'spline'
|
||||
},
|
||||
title: {
|
||||
text: 'Monthly Average Temperature'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: WorldClimate.com'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '°';
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
crosshairs: true,
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
spline: {
|
||||
marker: {
|
||||
radius: 4,
|
||||
lineColor: '#666666',
|
||||
lineWidth: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Tokyo',
|
||||
marker: {
|
||||
symbol: 'square'
|
||||
},
|
||||
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
|
||||
y: 26.5,
|
||||
marker: {
|
||||
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
|
||||
}
|
||||
}, 23.3, 18.3, 13.9, 9.6]
|
||||
|
||||
}, {
|
||||
name: 'London',
|
||||
marker: {
|
||||
symbol: 'diamond'
|
||||
},
|
||||
data: [{
|
||||
y: 3.9,
|
||||
marker: {
|
||||
symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
|
||||
}
|
||||
}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,394 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
height: 600px;
|
||||
margin: 0 auto
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/streamgraph.js"></script>
|
||||
<script src="../../code/modules/series-label.js"></script>
|
||||
<script src="../../code/modules/annotations.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var colors = Highcharts.getOptions().colors;
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'streamgraph',
|
||||
marginBottom: 30,
|
||||
zoomType: 'x'
|
||||
},
|
||||
|
||||
// Make sure connected countries have similar colors
|
||||
colors: [
|
||||
colors[0],
|
||||
colors[1],
|
||||
colors[2],
|
||||
colors[3],
|
||||
colors[4],
|
||||
// East Germany, West Germany and Germany
|
||||
Highcharts.color(colors[5]).brighten(0.2).get(),
|
||||
Highcharts.color(colors[5]).brighten(0.1).get(),
|
||||
|
||||
colors[5],
|
||||
colors[6],
|
||||
colors[7],
|
||||
colors[8],
|
||||
colors[9],
|
||||
colors[0],
|
||||
colors[1],
|
||||
colors[3],
|
||||
// Soviet Union, Russia
|
||||
Highcharts.color(colors[2]).brighten(-0.1).get(),
|
||||
Highcharts.color(colors[2]).brighten(-0.2).get(),
|
||||
Highcharts.color(colors[2]).brighten(-0.3).get()
|
||||
],
|
||||
|
||||
title: {
|
||||
floating: true,
|
||||
align: 'left',
|
||||
text: 'Winter Olympic Medal Wins'
|
||||
},
|
||||
subtitle: {
|
||||
floating: true,
|
||||
align: 'left',
|
||||
y: 30,
|
||||
text: 'Source: <a href="https://www.sports-reference.com/olympics/winter/1924/">sports-reference.com</a>'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
maxPadding: 0,
|
||||
type: 'category',
|
||||
crosshair: true,
|
||||
categories: [
|
||||
'',
|
||||
'1924 Chamonix',
|
||||
'1928 St. Moritz',
|
||||
'1932 Lake Placid',
|
||||
'1936 Garmisch-Partenkirchen',
|
||||
'1940 <i>Cancelled (Sapporo)</i>',
|
||||
'1944 <i>Cancelled (Cortina d\'Ampezzo)</i>',
|
||||
'1948 St. Moritz',
|
||||
'1952 Oslo',
|
||||
'1956 Cortina d\'Ampezzo',
|
||||
'1960 Squaw Valley',
|
||||
'1964 Innsbruck',
|
||||
'1968 Grenoble',
|
||||
'1972 Sapporo',
|
||||
'1976 Innsbruck',
|
||||
'1980 Lake Placid',
|
||||
'1984 Sarajevo',
|
||||
'1988 Calgary',
|
||||
'1992 Albertville',
|
||||
'1994 Lillehammer',
|
||||
'1998 Nagano',
|
||||
'2002 Salt Lake City',
|
||||
'2006 Turin',
|
||||
'2010 Vancouver',
|
||||
'2014 Sochi'
|
||||
],
|
||||
labels: {
|
||||
align: 'left',
|
||||
reserveSpace: false,
|
||||
rotation: 270
|
||||
},
|
||||
lineWidth: 0,
|
||||
margin: 20,
|
||||
tickWidth: 0
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
visible: false,
|
||||
startOnTick: false,
|
||||
endOnTick: false
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
annotations: [{
|
||||
labels: [{
|
||||
point: {
|
||||
x: 5.5,
|
||||
xAxis: 0,
|
||||
y: 30,
|
||||
yAxis: 0
|
||||
},
|
||||
text: 'Cancelled<br>during<br>World War II'
|
||||
}, {
|
||||
point: {
|
||||
x: 18,
|
||||
xAxis: 0,
|
||||
y: 90,
|
||||
yAxis: 0
|
||||
},
|
||||
text: 'Soviet Union fell,<br>Germany united'
|
||||
}],
|
||||
labelOptions: {
|
||||
backgroundColor: 'rgba(255,255,255,0.5)',
|
||||
borderColor: 'silver'
|
||||
}
|
||||
}],
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
label: {
|
||||
minFontSize: 5,
|
||||
maxFontSize: 15,
|
||||
style: {
|
||||
color: 'rgba(255,255,255,0.75)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Data parsed with olympic-medals.node.js
|
||||
series: [{
|
||||
"name": "Finland",
|
||||
"data": [
|
||||
0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5
|
||||
]
|
||||
}, {
|
||||
"name": "Austria",
|
||||
"data": [
|
||||
0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17
|
||||
]
|
||||
}, {
|
||||
"name": "Sweden",
|
||||
"data": [
|
||||
0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15
|
||||
]
|
||||
}, {
|
||||
"name": "Norway",
|
||||
"data": [
|
||||
0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10, 9, 5, 20, 26, 25, 25, 19, 23, 26
|
||||
]
|
||||
}, {
|
||||
"name": "U.S.",
|
||||
"data": [
|
||||
0, 4, 6, 12, 4, 0, 0, 9, 11, 7, 10, 7, 7, 8, 10, 12, 8, 6, 11, 13, 13, 34, 25, 37, 28
|
||||
]
|
||||
}, {
|
||||
"name": "East Germany",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 14, 19, 23, 24, 25, 0, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "West Germany",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 5, 10, 5, 4, 8, 0, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Germany",
|
||||
"data": [
|
||||
0, 0, 1, 2, 6, 0, 0, 0, 7, 2, 8, 9, 0, 0, 0, 0, 0, 0, 26, 24, 29, 36, 29, 30, 19
|
||||
]
|
||||
}, {
|
||||
"name": "Netherlands",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 2, 2, 9, 9, 6, 4, 0, 7, 4, 4, 11, 8, 9, 8, 24
|
||||
]
|
||||
}, {
|
||||
"name": "Italy",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 1, 4, 4, 5, 4, 2, 2, 5, 14, 20, 10, 13, 11, 5, 8
|
||||
]
|
||||
}, {
|
||||
"name": "Canada",
|
||||
"data": [
|
||||
0, 1, 1, 7, 1, 0, 0, 3, 2, 3, 4, 3, 3, 1, 3, 2, 4, 5, 7, 13, 15, 17, 24, 26, 25
|
||||
]
|
||||
}, {
|
||||
"name": "Switzerland",
|
||||
"data": [
|
||||
0, 3, 1, 1, 3, 0, 0, 10, 2, 6, 2, 0, 6, 10, 5, 5, 5, 15, 3, 9, 7, 11, 14, 9, 11
|
||||
]
|
||||
}, {
|
||||
"name": "Great Britain",
|
||||
"data": [
|
||||
0, 4, 1, 0, 3, 0, 0, 2, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 2, 1, 2, 1, 1, 4
|
||||
]
|
||||
}, {
|
||||
"name": "France",
|
||||
"data": [
|
||||
0, 3, 1, 1, 1, 0, 0, 5, 1, 0, 3, 7, 9, 3, 1, 1, 3, 2, 9, 5, 8, 11, 9, 11, 15
|
||||
]
|
||||
}, {
|
||||
"name": "Hungary",
|
||||
"data": [
|
||||
0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Unified Team",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Soviet Union",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 21, 25, 13, 16, 27, 22, 25, 29, 0, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Russia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 18, 13, 22, 15, 33
|
||||
]
|
||||
}, {
|
||||
"name": "Japan",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 1, 1, 1, 7, 5, 10, 2, 1, 5, 8
|
||||
]
|
||||
}, {
|
||||
"name": "Czechoslovakia",
|
||||
"data": [
|
||||
0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 4, 3, 1, 1, 6, 3, 3, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Poland",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 2, 2, 6, 6
|
||||
]
|
||||
}, {
|
||||
"name": "Spain",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "China",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 8, 8, 11, 11, 9
|
||||
]
|
||||
}, {
|
||||
"name": "South Korea",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 6, 6, 4, 11, 14, 8
|
||||
]
|
||||
}, {
|
||||
"name": "Czech Republic",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 4, 6, 8
|
||||
]
|
||||
}, {
|
||||
"name": "Belarus",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 1, 3, 6
|
||||
]
|
||||
}, {
|
||||
"name": "Kazakhstan",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 0, 1, 1
|
||||
]
|
||||
}, {
|
||||
"name": "Bulgaria",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 3, 1, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Denmark",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Ukraine",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 2, 0, 2
|
||||
]
|
||||
}, {
|
||||
"name": "Australia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 3, 3
|
||||
]
|
||||
}, {
|
||||
"name": "Belgium",
|
||||
"data": [
|
||||
0, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Romania",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Liechtenstein",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 0, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Yugoslavia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Luxembourg",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "New Zealand",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "North Korea",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Slovakia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1
|
||||
]
|
||||
}, {
|
||||
"name": "Croatia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 3, 3, 1
|
||||
]
|
||||
}, {
|
||||
"name": "Slovenia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 1, 0, 3, 8
|
||||
]
|
||||
}, {
|
||||
"name": "Latvia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 4
|
||||
]
|
||||
}, {
|
||||
"name": "Estonia",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 1, 0
|
||||
]
|
||||
}, {
|
||||
"name": "Uzbekistan",
|
||||
"data": [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0
|
||||
]
|
||||
}],
|
||||
|
||||
exporting: {
|
||||
sourceWidth: 800,
|
||||
sourceHeight: 600
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
@import 'https://code.highcharts.com/css/highcharts.css';
|
||||
|
||||
#container {
|
||||
height: 400px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Link the series colors to axis colors */
|
||||
.highcharts-color-0 {
|
||||
fill: #7cb5ec;
|
||||
stroke: #7cb5ec;
|
||||
}
|
||||
.highcharts-axis.highcharts-color-0 .highcharts-axis-line {
|
||||
stroke: #7cb5ec;
|
||||
}
|
||||
.highcharts-axis.highcharts-color-0 text {
|
||||
fill: #7cb5ec;
|
||||
}
|
||||
.highcharts-color-1 {
|
||||
fill: #90ed7d;
|
||||
stroke: #90ed7d;
|
||||
}
|
||||
.highcharts-axis.highcharts-color-1 .highcharts-axis-line {
|
||||
stroke: #90ed7d;
|
||||
}
|
||||
.highcharts-axis.highcharts-color-1 text {
|
||||
fill: #90ed7d;
|
||||
}
|
||||
|
||||
|
||||
.highcharts-yaxis .highcharts-axis-line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'column',
|
||||
styledMode: true
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Styling axes and columns'
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
className: 'highcharts-color-0',
|
||||
title: {
|
||||
text: 'Primary axis'
|
||||
}
|
||||
}, {
|
||||
className: 'highcharts-color-1',
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'Secondary axis'
|
||||
}
|
||||
}],
|
||||
|
||||
plotOptions: {
|
||||
column: {
|
||||
borderRadius: 5
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [1, 3, 2, 4]
|
||||
}, {
|
||||
data: [324, 124, 547, 221],
|
||||
yAxis: 1
|
||||
}]
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<style type="text/css">
|
||||
@import 'https://code.highcharts.com/css/highcharts.css';
|
||||
|
||||
#container {
|
||||
height: 400px;
|
||||
max-width: 800px;
|
||||
min-width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.highcharts-pie-series .highcharts-point {
|
||||
stroke: #EDE;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.highcharts-pie-series .highcharts-data-label-connector {
|
||||
stroke: silver;
|
||||
stroke-dasharray: 2, 2;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../code/highcharts.js"></script>
|
||||
<script src="../../code/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
styledMode: true
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Pie point CSS'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'pie',
|
||||
allowPointSelect: true,
|
||||
keys: ['name', 'y', 'selected', 'sliced'],
|
||||
data: [
|
||||
['Apples', 29.9, false],
|
||||
['Pears', 71.5, false],
|
||||
['Oranges', 106.4, false],
|
||||
['Plums', 129.2, false],
|
||||
['Bananas', 144.0, false],
|
||||
['Peaches', 176.0, false],
|
||||
['Prunes', 135.6, true, true],
|
||||
['Avocados', 148.5, false]
|
||||
],
|
||||
showInLegend: true
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user