Initial commit,修正
This commit is contained in:
+84
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container, #sliders {
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#container {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// Set up the chart
|
||||
var chart = new Highcharts.Chart({
|
||||
chart: {
|
||||
renderTo: 'container',
|
||||
type: 'column',
|
||||
margin: 75,
|
||||
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() {
|
||||
$('#R0-value').html(chart.options.chart.options3d.alpha);
|
||||
$('#R1-value').html(chart.options.chart.options3d.beta);
|
||||
}
|
||||
|
||||
// Activate the sliders
|
||||
$('#R0').on('change', function () {
|
||||
chart.options.chart.options3d.alpha = this.value;
|
||||
showValues();
|
||||
chart.redraw(false);
|
||||
});
|
||||
$('#R1').on('change', function () {
|
||||
chart.options.chart.options3d.beta = this.value;
|
||||
showValues();
|
||||
chart.redraw(false);
|
||||
});
|
||||
|
||||
showValues();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-3d.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
<div id="sliders">
|
||||
<table>
|
||||
<tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
|
||||
<tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column',
|
||||
margin: 75,
|
||||
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
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-3d.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'column',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
viewDistance: 25,
|
||||
depth: 40
|
||||
},
|
||||
marginTop: 80,
|
||||
marginRight: 40
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Total fruit consumption, grouped by gender'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Number of fruits'
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-3d.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-3d.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-3d.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// Give the points a 3D feel by adding a radial gradient
|
||||
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, 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: 'scatter',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 10,
|
||||
beta: 30,
|
||||
depth: 250,
|
||||
viewDistance: 5,
|
||||
|
||||
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 events for rotation
|
||||
$(chart.container).bind('mousedown.hc touchstart.hc', function (e) {
|
||||
e = chart.pointer.normalize(e);
|
||||
|
||||
var posX = e.pageX,
|
||||
posY = e.pageY,
|
||||
alpha = chart.options.chart.options3d.alpha,
|
||||
beta = chart.options.chart.options3d.beta,
|
||||
newAlpha,
|
||||
newBeta,
|
||||
sensitivity = 5; // lower is more sensitive
|
||||
|
||||
$(document).bind({
|
||||
'mousemove.hc touchdrag.hc': function (e) {
|
||||
// Run beta
|
||||
newBeta = beta + (posX - e.pageX) / sensitivity;
|
||||
chart.options.chart.options3d.beta = newBeta;
|
||||
|
||||
// Run alpha
|
||||
newAlpha = alpha + (e.pageY - posY) / sensitivity;
|
||||
chart.options.chart.options3d.alpha = newAlpha;
|
||||
|
||||
chart.redraw(false);
|
||||
},
|
||||
'mouseup touchend': function () {
|
||||
$(document).unbind('.hc');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-3d.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'US and USSR nuclear stockpiles'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
|
||||
'thebulletin.metapress.com</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} produced <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]
|
||||
}, {
|
||||
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]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value;
|
||||
}
|
||||
},
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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: 150,
|
||||
y: 100,
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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/>',
|
||||
shared: 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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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: {
|
||||
shared: 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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
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]
|
||||
];
|
||||
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
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
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'arearange',
|
||||
zoomType: 'x'
|
||||
},
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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 2008',
|
||||
data: [973, 914, 4054, 732, 34]
|
||||
}, {
|
||||
name: 'Year 2012',
|
||||
data: [1052, 954, 4250, 740, 38]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
// Data gathered from http://populationpyramid.net/germany/2015/
|
||||
$(function () {
|
||||
// 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 + '];
|
||||
$(document).ready(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
title: {
|
||||
text: 'Population pyramid for Germany, 2015'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://populationpyramid.net/germany/2015/">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.2, -2.3, -2.5, -2.7, -3.1, -3.2,
|
||||
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
|
||||
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
|
||||
}, {
|
||||
name: 'Female',
|
||||
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
|
||||
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
|
||||
1.8, 1.2, 0.6, 0.1, 0.0]
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'bubble',
|
||||
zoomType: 'xy'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts Bubbles'
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
|
||||
}, {
|
||||
data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
|
||||
}, {
|
||||
data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+237
@@ -0,0 +1,237 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function () {
|
||||
// Create the chart
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares. January, 2015 to May, 2015'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.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: "Brands",
|
||||
colorByPoint: true,
|
||||
data: [{
|
||||
name: "Microsoft Internet Explorer",
|
||||
y: 56.33,
|
||||
drilldown: "Microsoft Internet Explorer"
|
||||
}, {
|
||||
name: "Chrome",
|
||||
y: 24.030000000000005,
|
||||
drilldown: "Chrome"
|
||||
}, {
|
||||
name: "Firefox",
|
||||
y: 10.38,
|
||||
drilldown: "Firefox"
|
||||
}, {
|
||||
name: "Safari",
|
||||
y: 4.77,
|
||||
drilldown: "Safari"
|
||||
}, {
|
||||
name: "Opera",
|
||||
y: 0.9100000000000001,
|
||||
drilldown: "Opera"
|
||||
}, {
|
||||
name: "Proprietary or Undetectable",
|
||||
y: 0.2,
|
||||
drilldown: null
|
||||
}]
|
||||
}],
|
||||
drilldown: {
|
||||
series: [{
|
||||
name: "Microsoft Internet Explorer",
|
||||
id: "Microsoft Internet Explorer",
|
||||
data: [
|
||||
[
|
||||
"v11.0",
|
||||
24.13],
|
||||
[
|
||||
"v8.0",
|
||||
17.2],
|
||||
[
|
||||
"v9.0",
|
||||
8.11],
|
||||
[
|
||||
"v10.0",
|
||||
5.33],
|
||||
[
|
||||
"v6.0",
|
||||
1.06],
|
||||
[
|
||||
"v7.0",
|
||||
0.5]
|
||||
]
|
||||
}, {
|
||||
name: "Chrome",
|
||||
id: "Chrome",
|
||||
data: [
|
||||
[
|
||||
"v40.0",
|
||||
5],
|
||||
[
|
||||
"v41.0",
|
||||
4.32],
|
||||
[
|
||||
"v42.0",
|
||||
3.68],
|
||||
[
|
||||
"v39.0",
|
||||
2.96],
|
||||
[
|
||||
"v36.0",
|
||||
2.53],
|
||||
[
|
||||
"v43.0",
|
||||
1.45],
|
||||
[
|
||||
"v31.0",
|
||||
1.24],
|
||||
[
|
||||
"v35.0",
|
||||
0.85],
|
||||
[
|
||||
"v38.0",
|
||||
0.6],
|
||||
[
|
||||
"v32.0",
|
||||
0.55],
|
||||
[
|
||||
"v37.0",
|
||||
0.38],
|
||||
[
|
||||
"v33.0",
|
||||
0.19],
|
||||
[
|
||||
"v34.0",
|
||||
0.14],
|
||||
[
|
||||
"v30.0",
|
||||
0.14]
|
||||
]
|
||||
}, {
|
||||
name: "Firefox",
|
||||
id: "Firefox",
|
||||
data: [
|
||||
[
|
||||
"v35",
|
||||
2.76],
|
||||
[
|
||||
"v36",
|
||||
2.32],
|
||||
[
|
||||
"v37",
|
||||
2.31],
|
||||
[
|
||||
"v34",
|
||||
1.27],
|
||||
[
|
||||
"v38",
|
||||
1.02],
|
||||
[
|
||||
"v31",
|
||||
0.33],
|
||||
[
|
||||
"v33",
|
||||
0.22],
|
||||
[
|
||||
"v32",
|
||||
0.15]
|
||||
]
|
||||
}, {
|
||||
name: "Safari",
|
||||
id: "Safari",
|
||||
data: [
|
||||
[
|
||||
"v8.0",
|
||||
2.56],
|
||||
[
|
||||
"v7.1",
|
||||
0.77],
|
||||
[
|
||||
"v5.1",
|
||||
0.42],
|
||||
[
|
||||
"v5.0",
|
||||
0.3],
|
||||
[
|
||||
"v6.1",
|
||||
0.29],
|
||||
[
|
||||
"v7.0",
|
||||
0.26],
|
||||
[
|
||||
"v6.2",
|
||||
0.17]
|
||||
]
|
||||
}, {
|
||||
name: "Opera",
|
||||
id: "Opera",
|
||||
data: [
|
||||
[
|
||||
"v12.x",
|
||||
0.34],
|
||||
[
|
||||
"v28",
|
||||
0.24],
|
||||
[
|
||||
"v27",
|
||||
0.17],
|
||||
[
|
||||
"v29",
|
||||
0.16]
|
||||
]
|
||||
}]
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/data.js"></script>
|
||||
<script src="../../js/modules/drilldown.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
</body>
|
||||
</html>
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/data.js"></script>
|
||||
<script src="../../js/modules/exporting.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>
|
||||
</body>
|
||||
</html>
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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: '$',
|
||||
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: '$',
|
||||
valueSuffix: ' M'
|
||||
},
|
||||
pointPadding: 0.4,
|
||||
pointPlacement: 0.2,
|
||||
yAxis: 1
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'World\'s largest cities per 2014'
|
||||
},
|
||||
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 2008: <b>{point.y:.1f} millions</b>'
|
||||
},
|
||||
series: [{
|
||||
name: 'Population',
|
||||
data: [
|
||||
['Shanghai', 23.7],
|
||||
['Lagos', 16.1],
|
||||
['Instanbul', 14.2],
|
||||
['Karachi', 14.0],
|
||||
['Mumbai', 12.5],
|
||||
['Moscow', 12.1],
|
||||
['São Paulo', 11.8],
|
||||
['Beijing', 11.7],
|
||||
['Guangzhou', 11.1],
|
||||
['Delhi', 11.1],
|
||||
['Shenzhen', 10.5],
|
||||
['Seoul', 10.4],
|
||||
['Jakarta', 10.0],
|
||||
['Kinshasa', 9.3],
|
||||
['Tianjin', 9.3],
|
||||
['Tokyo', 9.0],
|
||||
['Cairo', 8.9],
|
||||
['Dhaka', 8.9],
|
||||
['Mexico City', 8.9],
|
||||
['Lima', 8.9]
|
||||
],
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.x + '</b><br/>' +
|
||||
this.series.name + ': ' + this.y + '<br/>' +
|
||||
'Total: ' + this.point.stackTotal;
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
|
||||
style: {
|
||||
textShadow: '0 0 3px black'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'columnrange',
|
||||
inverted: true
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Temperature variation by month'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Observed in Vik i Sogn, Norway'
|
||||
},
|
||||
|
||||
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,
|
||||
formatter: function () {
|
||||
return this.y + '°C';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Temperatures',
|
||||
data: [
|
||||
[-9.7, 9.4],
|
||||
[-8.7, 6.5],
|
||||
[-3.5, 9.4],
|
||||
[-1.4, 19.9],
|
||||
[0.0, 22.6],
|
||||
[2.9, 29.5],
|
||||
[9.2, 30.7],
|
||||
[7.3, 26.5],
|
||||
[4.4, 18.0],
|
||||
[-3.1, 11.4],
|
||||
[-5.2, 10.4],
|
||||
[-13.5, 9.8]
|
||||
]
|
||||
}]
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+96
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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) || '#FFFFFF'
|
||||
},
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+791
@@ -0,0 +1,791 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<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.symbolNames = [];
|
||||
this.precipitations = [];
|
||||
this.windDirections = [];
|
||||
this.windDirectionNames = [];
|
||||
this.windSpeeds = [];
|
||||
this.windSpeedNames = [];
|
||||
this.temperatures = [];
|
||||
this.pressures = [];
|
||||
|
||||
// Initialize
|
||||
this.xml = xml;
|
||||
this.container = container;
|
||||
|
||||
// Run
|
||||
this.parseYrData();
|
||||
}
|
||||
/**
|
||||
* Return weather symbol sprites as laid out at http://om.yr.no/forklaring/symbol/
|
||||
*/
|
||||
Meteogram.prototype.getSymbolSprites = function (symbolSize) {
|
||||
return {
|
||||
'01d': {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
'01n': {
|
||||
x: symbolSize,
|
||||
y: 0
|
||||
},
|
||||
'16': {
|
||||
x: 2 * symbolSize,
|
||||
y: 0
|
||||
},
|
||||
'02d': {
|
||||
x: 0,
|
||||
y: symbolSize
|
||||
},
|
||||
'02n': {
|
||||
x: symbolSize,
|
||||
y: symbolSize
|
||||
},
|
||||
'03d': {
|
||||
x: 0,
|
||||
y: 2 * symbolSize
|
||||
},
|
||||
'03n': {
|
||||
x: symbolSize,
|
||||
y: 2 * symbolSize
|
||||
},
|
||||
'17': {
|
||||
x: 2 * symbolSize,
|
||||
y: 2 * symbolSize
|
||||
},
|
||||
'04': {
|
||||
x: 0,
|
||||
y: 3 * symbolSize
|
||||
},
|
||||
'05d': {
|
||||
x: 0,
|
||||
y: 4 * symbolSize
|
||||
},
|
||||
'05n': {
|
||||
x: symbolSize,
|
||||
y: 4 * symbolSize
|
||||
},
|
||||
'18': {
|
||||
x: 2 * symbolSize,
|
||||
y: 4 * symbolSize
|
||||
},
|
||||
'06d': {
|
||||
x: 0,
|
||||
y: 5 * symbolSize
|
||||
},
|
||||
'06n': {
|
||||
x: symbolSize,
|
||||
y: 5 * symbolSize
|
||||
},
|
||||
'07d': {
|
||||
x: 0,
|
||||
y: 6 * symbolSize
|
||||
},
|
||||
'07n': {
|
||||
x: symbolSize,
|
||||
y: 6 * symbolSize
|
||||
},
|
||||
'08d': {
|
||||
x: 0,
|
||||
y: 7 * symbolSize
|
||||
},
|
||||
'08n': {
|
||||
x: symbolSize,
|
||||
y: 7 * symbolSize
|
||||
},
|
||||
'19': {
|
||||
x: 2 * symbolSize,
|
||||
y: 7 * symbolSize
|
||||
},
|
||||
'09': {
|
||||
x: 0,
|
||||
y: 8 * symbolSize
|
||||
},
|
||||
'10': {
|
||||
x: 0,
|
||||
y: 9 * symbolSize
|
||||
},
|
||||
'11': {
|
||||
x: 0,
|
||||
y: 10 * symbolSize
|
||||
},
|
||||
'12': {
|
||||
x: 0,
|
||||
y: 11 * symbolSize
|
||||
},
|
||||
'13': {
|
||||
x: 0,
|
||||
y: 12 * symbolSize
|
||||
},
|
||||
'14': {
|
||||
x: 0,
|
||||
y: 13 * symbolSize
|
||||
},
|
||||
'15': {
|
||||
x: 0,
|
||||
y: 14 * symbolSize
|
||||
},
|
||||
'20d': {
|
||||
x: 0,
|
||||
y: 15 * symbolSize
|
||||
},
|
||||
'20n': {
|
||||
x: symbolSize,
|
||||
y: 15 * symbolSize
|
||||
},
|
||||
'20m': {
|
||||
x: 2 * symbolSize,
|
||||
y: 15 * symbolSize
|
||||
},
|
||||
'21d': {
|
||||
x: 0,
|
||||
y: 16 * symbolSize
|
||||
},
|
||||
'21n': {
|
||||
x: symbolSize,
|
||||
y: 16 * symbolSize
|
||||
},
|
||||
'21m': {
|
||||
x: 2 * symbolSize,
|
||||
y: 16 * symbolSize
|
||||
},
|
||||
'22': {
|
||||
x: 0,
|
||||
y: 17 * symbolSize
|
||||
},
|
||||
'23': {
|
||||
x: 0,
|
||||
y: 18 * symbolSize
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 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));
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback function that is called from Highcharts on hovering each point and returns
|
||||
* HTML for the tooltip.
|
||||
*/
|
||||
Meteogram.prototype.tooltipFormatter = function (tooltip) {
|
||||
|
||||
// Create the header with reference to the time interval
|
||||
var index = tooltip.points[0].point.index,
|
||||
ret = '<small>' + Highcharts.dateFormat('%A, %b %e, %H:%M', tooltip.x) + '-' +
|
||||
Highcharts.dateFormat('%H:%M', tooltip.points[0].point.to) + '</small><br>';
|
||||
|
||||
// Symbol text
|
||||
ret += '<b>' + this.symbolNames[index] + '</b>';
|
||||
|
||||
ret += '<table>';
|
||||
|
||||
// Add all series
|
||||
Highcharts.each(tooltip.points, function (point) {
|
||||
var series = point.series;
|
||||
ret += '<tr><td><span style="color:' + series.color + '">\u25CF</span> ' + series.name +
|
||||
': </td><td style="white-space:nowrap">' + Highcharts.pick(point.point.value, point.y) +
|
||||
series.options.tooltip.valueSuffix + '</td></tr>';
|
||||
});
|
||||
|
||||
// Add wind
|
||||
ret += '<tr><td style="vertical-align: top">\u25CF Wind</td><td style="white-space:nowrap">' + this.windDirectionNames[index] +
|
||||
'<br>' + this.windSpeedNames[index] + ' (' +
|
||||
Highcharts.numberFormat(this.windSpeeds[index], 1) + ' m/s)</td></tr>';
|
||||
|
||||
// Close
|
||||
ret += '</table>';
|
||||
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the weather symbols on top of the temperature series. The symbols are sprites of a single
|
||||
* file, defined in the getSymbolSprites function above.
|
||||
*/
|
||||
Meteogram.prototype.drawWeatherSymbols = function (chart) {
|
||||
var meteogram = this,
|
||||
symbolSprites = this.getSymbolSprites(30);
|
||||
|
||||
$.each(chart.series[0].data, function (i, point) {
|
||||
var sprite,
|
||||
group;
|
||||
|
||||
if (meteogram.resolution > 36e5 || i % 2 === 0) {
|
||||
|
||||
sprite = symbolSprites[meteogram.symbols[i]];
|
||||
if (sprite) {
|
||||
|
||||
// Create a group element that is positioned and clipped at 30 pixels width and height
|
||||
group = chart.renderer.g()
|
||||
.attr({
|
||||
translateX: point.plotX + chart.plotLeft - 15,
|
||||
translateY: point.plotY + chart.plotTop - 30,
|
||||
zIndex: 5
|
||||
})
|
||||
.clip(chart.renderer.clipRect(0, 0, 30, 30))
|
||||
.add();
|
||||
|
||||
// Position the image inside it at the sprite position
|
||||
chart.renderer.image(
|
||||
'http://www.highcharts.com/samples/graphics/meteogram-symbols-30px.png',
|
||||
-sprite.x,
|
||||
-sprite.y,
|
||||
90,
|
||||
570
|
||||
)
|
||||
.add(group);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create wind speed symbols for the Beaufort wind scale. The symbols are rotated
|
||||
* around the zero centerpoint.
|
||||
*/
|
||||
Meteogram.prototype.windArrow = function (name) {
|
||||
var level,
|
||||
path;
|
||||
|
||||
// The stem and the arrow head
|
||||
path = [
|
||||
'M', 0, 7, // base of arrow
|
||||
'L', -1.5, 7,
|
||||
0, 10,
|
||||
1.5, 7,
|
||||
0, 7,
|
||||
0, -10 // top
|
||||
];
|
||||
|
||||
level = $.inArray(name, ['Calm', 'Light air', 'Light breeze', 'Gentle breeze', 'Moderate breeze',
|
||||
'Fresh breeze', 'Strong breeze', 'Near gale', 'Gale', 'Strong gale', 'Storm',
|
||||
'Violent storm', 'Hurricane']);
|
||||
|
||||
if (level === 0) {
|
||||
path = [];
|
||||
}
|
||||
|
||||
if (level === 2) {
|
||||
path.push('M', 0, -8, 'L', 4, -8); // short line
|
||||
} else if (level >= 3) {
|
||||
path.push(0, -10, 7, -10); // long line
|
||||
}
|
||||
|
||||
if (level === 4) {
|
||||
path.push('M', 0, -7, 'L', 4, -7);
|
||||
} else if (level >= 5) {
|
||||
path.push('M', 0, -7, 'L', 7, -7);
|
||||
}
|
||||
|
||||
if (level === 5) {
|
||||
path.push('M', 0, -4, 'L', 4, -4);
|
||||
} else if (level >= 6) {
|
||||
path.push('M', 0, -4, 'L', 7, -4);
|
||||
}
|
||||
|
||||
if (level === 7) {
|
||||
path.push('M', 0, -1, 'L', 4, -1);
|
||||
} else if (level >= 8) {
|
||||
path.push('M', 0, -1, 'L', 7, -1);
|
||||
}
|
||||
|
||||
return path;
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the wind arrows. Each arrow path is generated by the windArrow function above.
|
||||
*/
|
||||
Meteogram.prototype.drawWindArrows = function (chart) {
|
||||
var meteogram = this;
|
||||
|
||||
$.each(chart.series[0].data, function (i, point) {
|
||||
var sprite, arrow, x, y;
|
||||
|
||||
if (meteogram.resolution > 36e5 || i % 2 === 0) {
|
||||
|
||||
// Draw the wind arrows
|
||||
x = point.plotX + chart.plotLeft + 7;
|
||||
y = 255;
|
||||
if (meteogram.windSpeedNames[i] === 'Calm') {
|
||||
arrow = chart.renderer.circle(x, y, 10).attr({
|
||||
fill: 'none'
|
||||
});
|
||||
} else {
|
||||
arrow = chart.renderer.path(
|
||||
meteogram.windArrow(meteogram.windSpeedNames[i])
|
||||
).attr({
|
||||
rotation: parseInt(meteogram.windDirections[i], 10),
|
||||
translateX: x, // rotation center
|
||||
translateY: y // rotation center
|
||||
});
|
||||
}
|
||||
arrow.attr({
|
||||
stroke: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
|
||||
'stroke-width': 1.5,
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the title based on the XML data
|
||||
*/
|
||||
Meteogram.prototype.getTitle = function () {
|
||||
return 'Meteogram for ' + this.xml.location.name + ', ' + this.xml.location.country;
|
||||
};
|
||||
|
||||
/**
|
||||
* 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,
|
||||
width: 800,
|
||||
height: 310
|
||||
},
|
||||
|
||||
title: {
|
||||
text: this.getTitle(),
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
credits: {
|
||||
text: 'Forecast from <a href="http://yr.no">yr.no</a>',
|
||||
href: this.xml.credit.link['@attributes'].url,
|
||||
position: {
|
||||
x: -40
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
shared: true,
|
||||
useHTML: true,
|
||||
formatter: function () {
|
||||
return meteogram.tooltipFormatter(this);
|
||||
}
|
||||
},
|
||||
|
||||
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}'
|
||||
}
|
||||
}, { // 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
|
||||
}],
|
||||
// Custom positioner to provide even temperature ticks from top down
|
||||
tickPositioner: function () {
|
||||
var max = Math.ceil(this.max) + 1,
|
||||
pos = max - 12, // start
|
||||
ret;
|
||||
|
||||
if (pos < this.min) {
|
||||
ret = [];
|
||||
while (pos <= max) {
|
||||
ret.push(pos += 1);
|
||||
}
|
||||
} // else return undefined and go auto
|
||||
|
||||
return ret;
|
||||
|
||||
},
|
||||
maxPadding: 0.3,
|
||||
tickInterval: 1,
|
||||
gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0'
|
||||
|
||||
}, { // precipitation axis
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
gridLineWidth: 0,
|
||||
tickLength: 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: {
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
zIndex: 1,
|
||||
color: '#FF3333',
|
||||
negativeColor: '#48AFE8'
|
||||
}, {
|
||||
name: 'Precipitation',
|
||||
data: this.precipitations,
|
||||
type: 'column',
|
||||
color: '#68CFE8',
|
||||
yAxis: 1,
|
||||
groupPadding: 0,
|
||||
pointPadding: 0,
|
||||
borderWidth: 0,
|
||||
shadow: false,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
if (this.y > 0) {
|
||||
return this.y;
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fontSize: '8px'
|
||||
}
|
||||
},
|
||||
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
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Post-process the chart from the callback function, the second argument to Highcharts.Chart.
|
||||
*/
|
||||
Meteogram.prototype.onChartLoad = function (chart) {
|
||||
|
||||
this.drawWeatherSymbols(chart);
|
||||
this.drawWindArrows(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);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
if (!xml || !xml.forecast) {
|
||||
$('#loading').html('<i class="fa fa-frown-o"></i> Failed loading data, please try again later');
|
||||
return;
|
||||
}
|
||||
|
||||
// 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.
|
||||
$.each(xml.forecast.tabular.time, function (i, time) {
|
||||
// Get the times - only Safari can't parse ISO8601 so we need to do some replacements
|
||||
var from = time['@attributes'].from + ' UTC',
|
||||
to = time['@attributes'].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.symbol['@attributes']['var'].match(/[0-9]{2}[dnm]?/)[0]);
|
||||
meteogram.symbolNames.push(time.symbol['@attributes'].name);
|
||||
|
||||
meteogram.temperatures.push({
|
||||
x: from,
|
||||
y: parseInt(time.temperature['@attributes'].value),
|
||||
// custom options used in the tooltip formatter
|
||||
to: to,
|
||||
index: i
|
||||
});
|
||||
|
||||
meteogram.precipitations.push({
|
||||
x: from,
|
||||
y: parseFloat(time.precipitation['@attributes'].value)
|
||||
});
|
||||
meteogram.windDirections.push(parseFloat(time.windDirection['@attributes'].deg));
|
||||
meteogram.windDirectionNames.push(time.windDirection['@attributes'].name);
|
||||
meteogram.windSpeeds.push(parseFloat(time.windSpeed['@attributes'].mps));
|
||||
meteogram.windSpeedNames.push(time.windSpeed['@attributes'].name);
|
||||
|
||||
meteogram.pressures.push({
|
||||
x: from,
|
||||
y: parseFloat(time.pressure['@attributes'].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
|
||||
|
||||
|
||||
|
||||
$(function () { // On DOM ready...
|
||||
|
||||
// Set the hash to the yr.no URL we want to parse
|
||||
if (!location.hash) {
|
||||
var 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 = 'http://www.yr.no/place/' + place + '/forecast_hour_by_hour.xml';
|
||||
|
||||
}
|
||||
|
||||
// Then get the XML file through Highcharts' jsonp provider, see
|
||||
// https://github.com/highslide-software/highcharts.com/blob/master/samples/data/jsonp.php
|
||||
// for source code.
|
||||
$.getJSON(
|
||||
'http://www.highcharts.com/samples/data/jsonp.php?url=' + location.hash.substr(1) + '&callback=?',
|
||||
function (xml) {
|
||||
var meteogram = new Meteogram(xml, 'container');
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||
|
||||
<div id="container" style="width: 800px; 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>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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) || '#FFFFFF'
|
||||
},
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+422
@@ -0,0 +1,422 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 1000px;
|
||||
height: 420px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
<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(
|
||||
'http://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 });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highstock.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'scatter',
|
||||
margin: [70, 50, 60, 80],
|
||||
events: {
|
||||
click: function (e) {
|
||||
// find the clicked values and the series
|
||||
var x = e.xAxis[0].value,
|
||||
y = 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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+260
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
|
||||
var detailChart;
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
// 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 = $('#detail-container').highcharts({
|
||||
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
|
||||
}
|
||||
|
||||
}).highcharts(); // return chart
|
||||
}
|
||||
|
||||
// create the master chart
|
||||
function createMaster() {
|
||||
$('#master-container').highcharts({
|
||||
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);
|
||||
})
|
||||
.highcharts(); // 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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$(document).ready(function () {
|
||||
Highcharts.setOptions({
|
||||
global: {
|
||||
useUTC: false
|
||||
}
|
||||
});
|
||||
|
||||
$('#container').highcharts({
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Live random data'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
tickPixelInterval: 150
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Value'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + '</b><br/>' +
|
||||
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
|
||||
Highcharts.numberFormat(this.y, 2);
|
||||
}
|
||||
},
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var chart;
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'funnel',
|
||||
marginRight: 100
|
||||
},
|
||||
title: {
|
||||
text: 'Sales funnel',
|
||||
x: -50
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b> ({point.y:,.0f})',
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
|
||||
softConnector: true
|
||||
},
|
||||
neckWidth: '30%',
|
||||
neckHeight: '25%'
|
||||
|
||||
//-- Other available options
|
||||
// height: pixels or percent
|
||||
// width: pixels or percent
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Unique users',
|
||||
data: [
|
||||
['Website visits', 15654],
|
||||
['Downloads', 4064],
|
||||
['Requested price list', 1987],
|
||||
['Invoice sent', 976],
|
||||
['Finalized', 846]
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/funnel.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
/**
|
||||
* 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
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false,
|
||||
height: 200
|
||||
},
|
||||
|
||||
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();
|
||||
|
||||
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: 'easeOutElastic'
|
||||
};
|
||||
|
||||
// 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);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
// Extend jQuery with some easing (copied from jQuery UI)
|
||||
$.extend($.easing, {
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
|
||||
<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
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 () {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
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,
|
||||
tickPixelInterval: 400,
|
||||
tickWidth: 0,
|
||||
title: {
|
||||
y: -70
|
||||
},
|
||||
labels: {
|
||||
y: 16
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
solidgauge: {
|
||||
dataLabels: {
|
||||
y: 5,
|
||||
borderWidth: 0,
|
||||
useHTML: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// The speed gauge
|
||||
$('#container-speed').highcharts(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
|
||||
$('#container-rpm').highcharts(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 chart = $('#container-speed').highcharts(),
|
||||
point,
|
||||
newVal,
|
||||
inc;
|
||||
|
||||
if (chart) {
|
||||
point = chart.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
|
||||
chart = $('#container-rpm').highcharts();
|
||||
if (chart) {
|
||||
point = chart.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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
|
||||
<script src="../../js/modules/solid-gauge.js"></script>
|
||||
|
||||
<div style="width: 600px; height: 400px; margin: 0 auto">
|
||||
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
|
||||
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
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
|
||||
}],
|
||||
|
||||
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: [{
|
||||
data: [-20],
|
||||
yAxis: 0
|
||||
}, {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+8948
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'heatmap',
|
||||
marginTop: 40,
|
||||
marginBottom: 80
|
||||
},
|
||||
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/heatmap.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
|
||||
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// Get the CSV and create the chart
|
||||
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
data: {
|
||||
csv: csv
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Daily visits 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',
|
||||
y: 20,
|
||||
floating: true,
|
||||
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 + ' visits',
|
||||
width: 200
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
lineWidth: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'All visits',
|
||||
lineWidth: 4,
|
||||
marker: {
|
||||
radius: 4
|
||||
}
|
||||
}, {
|
||||
name: 'New visitors'
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/data.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<!-- Additional files for the Highslide popup effect -->
|
||||
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
|
||||
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
|
||||
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
title: {
|
||||
text: 'Monthly Average Temperature',
|
||||
x: -20 //center
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: WorldClimate.com',
|
||||
x: -20
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature (°C)'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
borderWidth: 0
|
||||
},
|
||||
series: [{
|
||||
name: 'Tokyo',
|
||||
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
|
||||
}, {
|
||||
name: 'New York',
|
||||
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
|
||||
}, {
|
||||
name: 'Berlin',
|
||||
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
|
||||
}, {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
title: {
|
||||
text: 'Logarithmic axis demo'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
tickInterval: 1
|
||||
},
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
|
||||
var fromYear = new Date(data[0][0]).getFullYear();
|
||||
var toYear = new Date(data[data.length-1][0]).getFullYear();
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
zoomType: 'x'
|
||||
},
|
||||
title: {
|
||||
text: 'USD to EUR exchange rate from ' + fromYear + ' through ' + toYear
|
||||
},
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares January, 2015 to May, 2015'
|
||||
},
|
||||
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: "Microsoft Internet Explorer",
|
||||
y: 56.33
|
||||
}, {
|
||||
name: "Chrome",
|
||||
y: 24.030000000000005,
|
||||
sliced: true,
|
||||
selected: true
|
||||
}, {
|
||||
name: "Firefox",
|
||||
y: 10.38
|
||||
}, {
|
||||
name: "Safari",
|
||||
y: 4.77
|
||||
}, {
|
||||
name: "Opera",
|
||||
y: 0.9100000000000001
|
||||
}, {
|
||||
name: "Proprietary or Undetectable",
|
||||
y: 0.2
|
||||
}]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
var colors = Highcharts.getOptions().colors,
|
||||
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
|
||||
data = [{
|
||||
y: 56.33,
|
||||
color: colors[0],
|
||||
drilldown: {
|
||||
name: 'MSIE versions',
|
||||
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
|
||||
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
|
||||
color: colors[0]
|
||||
}
|
||||
}, {
|
||||
y: 10.38,
|
||||
color: colors[1],
|
||||
drilldown: {
|
||||
name: 'Firefox versions',
|
||||
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
|
||||
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
|
||||
color: colors[1]
|
||||
}
|
||||
}, {
|
||||
y: 24.030000000000005,
|
||||
color: colors[2],
|
||||
drilldown: {
|
||||
name: 'Chrome versions',
|
||||
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
|
||||
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'],
|
||||
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
|
||||
color: colors[2]
|
||||
}
|
||||
}, {
|
||||
y: 4.77,
|
||||
color: colors[3],
|
||||
drilldown: {
|
||||
name: 'Safari versions',
|
||||
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0', ],
|
||||
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
|
||||
color: colors[3]
|
||||
}
|
||||
}, {
|
||||
y: 0.9100000000000001,
|
||||
color: colors[4],
|
||||
drilldown: {
|
||||
name: 'Opera versions',
|
||||
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
|
||||
data: [0.34, 0.17, 0.24, 0.16],
|
||||
color: colors[4]
|
||||
}
|
||||
}, {
|
||||
y: 0.2,
|
||||
color: colors[5],
|
||||
drilldown: {
|
||||
name: 'Proprietary or Undetectable',
|
||||
categories: [],
|
||||
data: [],
|
||||
color: colors[5]
|
||||
}
|
||||
}],
|
||||
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
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market share, January, 2015 to May, 2015'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Total percent market share'
|
||||
}
|
||||
},
|
||||
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: 'white',
|
||||
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;
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+188
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// Create the chart
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares. January, 2015 to May, 2015'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click the slices to view versions. Source: netmarketshare.com.'
|
||||
},
|
||||
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: "Brands",
|
||||
colorByPoint: true,
|
||||
data: [{
|
||||
name: "Microsoft Internet Explorer",
|
||||
y: 56.33,
|
||||
drilldown: "Microsoft Internet Explorer"
|
||||
}, {
|
||||
name: "Chrome",
|
||||
y: 24.030000000000005,
|
||||
drilldown: "Chrome"
|
||||
}, {
|
||||
name: "Firefox",
|
||||
y: 10.38,
|
||||
drilldown: "Firefox"
|
||||
}, {
|
||||
name: "Safari",
|
||||
y: 4.77,
|
||||
drilldown: "Safari"
|
||||
}, {
|
||||
name: "Opera",
|
||||
y: 0.9100000000000001,
|
||||
drilldown: "Opera"
|
||||
}, {
|
||||
name: "Proprietary or Undetectable",
|
||||
y: 0.2,
|
||||
drilldown: null
|
||||
}]
|
||||
}],
|
||||
drilldown: {
|
||||
series: [{
|
||||
name: "Microsoft Internet Explorer",
|
||||
id: "Microsoft Internet Explorer",
|
||||
data: [
|
||||
["v11.0", 24.13],
|
||||
["v8.0", 17.2],
|
||||
["v9.0", 8.11],
|
||||
["v10.0", 5.33],
|
||||
["v6.0", 1.06],
|
||||
["v7.0", 0.5]
|
||||
]
|
||||
}, {
|
||||
name: "Chrome",
|
||||
id: "Chrome",
|
||||
data: [
|
||||
["v40.0", 5],
|
||||
["v41.0", 4.32],
|
||||
["v42.0", 3.68],
|
||||
["v39.0", 2.96],
|
||||
["v36.0", 2.53],
|
||||
["v43.0", 1.45],
|
||||
["v31.0", 1.24],
|
||||
["v35.0", 0.85],
|
||||
["v38.0", 0.6],
|
||||
["v32.0", 0.55],
|
||||
["v37.0", 0.38],
|
||||
["v33.0", 0.19],
|
||||
["v34.0", 0.14],
|
||||
["v30.0", 0.14]
|
||||
]
|
||||
}, {
|
||||
name: "Firefox",
|
||||
id: "Firefox",
|
||||
data: [
|
||||
["v35", 2.76],
|
||||
["v36", 2.32],
|
||||
["v37", 2.31],
|
||||
["v34", 1.27],
|
||||
["v38", 1.02],
|
||||
["v31", 0.33],
|
||||
["v33", 0.22],
|
||||
["v32", 0.15]
|
||||
]
|
||||
}, {
|
||||
name: "Safari",
|
||||
id: "Safari",
|
||||
data: [
|
||||
["v8.0", 2.56],
|
||||
["v7.1", 0.77],
|
||||
["v5.1", 0.42],
|
||||
["v5.0", 0.3],
|
||||
["v6.1", 0.29],
|
||||
["v7.0", 0.26],
|
||||
["v6.2", 0.17]
|
||||
]
|
||||
}, {
|
||||
name: "Opera",
|
||||
id: "Opera",
|
||||
data: [
|
||||
["v12.x", 0.34],
|
||||
["v28", 0.24],
|
||||
["v27", 0.17],
|
||||
["v29", 0.16]
|
||||
]
|
||||
}]
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/data.js"></script>
|
||||
<script src="../../js/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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// Radialize the colors
|
||||
Highcharts.getOptions().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
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares. January, 2015 to May, 2015'
|
||||
},
|
||||
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: "Brands",
|
||||
colorByPoint: true,
|
||||
data: [
|
||||
{name: "Microsoft Internet Explorer", y: 56.33},
|
||||
{
|
||||
name: "Chrome",
|
||||
y: 24.030000000000005,
|
||||
sliced: true,
|
||||
selected: true
|
||||
},
|
||||
{name: "Firefox", y: 10.38},
|
||||
{name: "Safari", y: 4.77}, {name: "Opera", y: 0.9100000000000001},
|
||||
{name: "Proprietary or Undetectable", y: 0.2}
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
// Build the chart
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares January, 2015 to May, 2015'
|
||||
},
|
||||
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: "Microsoft Internet Explorer",
|
||||
y: 56.33
|
||||
}, {
|
||||
name: "Chrome",
|
||||
y: 24.030000000000005,
|
||||
sliced: true,
|
||||
selected: true
|
||||
}, {
|
||||
name: "Firefox",
|
||||
y: 10.38
|
||||
}, {
|
||||
name: "Safari",
|
||||
y: 4.77
|
||||
}, {
|
||||
name: "Opera",
|
||||
y: 0.9100000000000001
|
||||
}, {
|
||||
name: "Proprietary or Undetectable",
|
||||
y: 0.2
|
||||
}]
|
||||
}]
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// Make monochrome colors and set them as default for all pies
|
||||
Highcharts.getOptions().plotOptions.pie.colors = (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
|
||||
$('#container').highcharts({
|
||||
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',
|
||||
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: "Microsoft Internet Explorer", y: 56.33},
|
||||
{name: "Chrome", y: 24.030000000000005},
|
||||
{name: "Firefox", y: 10.38},
|
||||
{name: "Safari", y: 4.77},
|
||||
{name: "Opera", y: 0.9100000000000001},
|
||||
{name: "Proprietary or Undetectable", y: 0.2}
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
title: {
|
||||
text: 'Browser<br>shares<br>2015',
|
||||
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',
|
||||
textShadow: '0px 1px 2px black'
|
||||
}
|
||||
},
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
center: ['50%', '75%']
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
name: 'Browser share',
|
||||
innerSize: '50%',
|
||||
data: [
|
||||
['Firefox', 10.38],
|
||||
['IE', 56.33],
|
||||
['Chrome', 24.030000000000005],
|
||||
['Safari', 4.77],
|
||||
['Opera', 0.9100000000000001],
|
||||
{
|
||||
name: 'Proprietary or Undetectable',
|
||||
y: 0.2,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+299
@@ -0,0 +1,299 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// Parse the data from an inline table using the Highcharts Data plugin
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/data.js"></script>
|
||||
<script src="../../js/modules/exporting.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>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
polar: true
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts Polar Chart'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: 0,
|
||||
endAngle: 360
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
tickInterval: 45,
|
||||
min: 0,
|
||||
max: 360,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '°';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
min: 0
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
pointStart: 0,
|
||||
pointInterval: 45
|
||||
},
|
||||
column: {
|
||||
pointPadding: 0,
|
||||
groupPadding: 0
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'column',
|
||||
name: 'Column',
|
||||
data: [8, 7, 6, 5, 4, 3, 2, 1],
|
||||
pointPlacement: 'between'
|
||||
}, {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'pyramid',
|
||||
marginRight: 100
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Unique users',
|
||||
data: [
|
||||
['Website visits', 15654],
|
||||
['Downloads', 4064],
|
||||
['Requested price list', 1987],
|
||||
['Invoice sent', 976],
|
||||
['Finalized', 846]
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/funnel.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,268 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,675 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function () {
|
||||
/**
|
||||
* 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 (options, callback) {
|
||||
var 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'
|
||||
},
|
||||
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: {
|
||||
backgroundColor: null,
|
||||
borderWidth: 0,
|
||||
shadow: false,
|
||||
useHTML: true,
|
||||
hideDelay: 0,
|
||||
shared: true,
|
||||
padding: 0,
|
||||
positioner: function (w, h, point) {
|
||||
return { x: point.plotX - w / 2, y: point.plotY - h};
|
||||
}
|
||||
},
|
||||
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 new Highcharts.Chart(options, callback);
|
||||
};
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/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>
|
||||
</body>
|
||||
</html>
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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: {
|
||||
formatter: function () {
|
||||
return this.value + 'km';
|
||||
}
|
||||
},
|
||||
maxPadding: 0.05,
|
||||
showLastLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "Winter 2012-2013",
|
||||
// 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.
|
||||
data: [
|
||||
[Date.UTC(1970, 9, 21), 0],
|
||||
[Date.UTC(1970, 10, 4), 0.28],
|
||||
[Date.UTC(1970, 10, 9), 0.25],
|
||||
[Date.UTC(1970, 10, 27), 0.2],
|
||||
[Date.UTC(1970, 11, 2), 0.28],
|
||||
[Date.UTC(1970, 11, 26), 0.28],
|
||||
[Date.UTC(1970, 11, 29), 0.47],
|
||||
[Date.UTC(1971, 0, 11), 0.79],
|
||||
[Date.UTC(1971, 0, 26), 0.72],
|
||||
[Date.UTC(1971, 1, 3), 1.02],
|
||||
[Date.UTC(1971, 1, 11), 1.12],
|
||||
[Date.UTC(1971, 1, 25), 1.2],
|
||||
[Date.UTC(1971, 2, 11), 1.18],
|
||||
[Date.UTC(1971, 3, 11), 1.19],
|
||||
[Date.UTC(1971, 4, 1), 1.85],
|
||||
[Date.UTC(1971, 4, 5), 2.22],
|
||||
[Date.UTC(1971, 4, 19), 1.15],
|
||||
[Date.UTC(1971, 5, 3), 0]
|
||||
]
|
||||
}, {
|
||||
name: "Winter 2013-2014",
|
||||
data: [
|
||||
[Date.UTC(1970, 9, 29), 0],
|
||||
[Date.UTC(1970, 10, 9), 0.4],
|
||||
[Date.UTC(1970, 11, 1), 0.25],
|
||||
[Date.UTC(1971, 0, 1), 1.66],
|
||||
[Date.UTC(1971, 0, 10), 1.8],
|
||||
[Date.UTC(1971, 1, 19), 1.76],
|
||||
[Date.UTC(1971, 2, 25), 2.62],
|
||||
[Date.UTC(1971, 3, 19), 2.41],
|
||||
[Date.UTC(1971, 3, 30), 2.05],
|
||||
[Date.UTC(1971, 4, 14), 1.7],
|
||||
[Date.UTC(1971, 4, 24), 1.1],
|
||||
[Date.UTC(1971, 5, 10), 0]
|
||||
]
|
||||
}, {
|
||||
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, 2), 2.81],
|
||||
[Date.UTC(1971, 3, 12), 2.63],
|
||||
[Date.UTC(1971, 3, 28), 2.77],
|
||||
[Date.UTC(1971, 4, 5), 2.68],
|
||||
[Date.UTC(1971, 4, 10), 2.56],
|
||||
[Date.UTC(1971, 4, 15), 2.39],
|
||||
[Date.UTC(1971, 4, 20), 2.3],
|
||||
[Date.UTC(1971, 5, 5), 2],
|
||||
[Date.UTC(1971, 5, 10), 1.85],
|
||||
[Date.UTC(1971, 5, 15), 1.49],
|
||||
[Date.UTC(1971, 5, 23), 1.08]
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
// Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'spline'
|
||||
},
|
||||
title: {
|
||||
text: 'Wind speed during two days'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
overflow: 'justify'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Wind speed (m/s)'
|
||||
},
|
||||
min: 0,
|
||||
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(2015, 4, 31, 0, 0, 0)
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Hestavollane',
|
||||
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
|
||||
|
||||
}, {
|
||||
name: 'Vik',
|
||||
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
|
||||
}],
|
||||
navigation: {
|
||||
menuItemStyle: {
|
||||
fontSize: '10px'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
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(http://www.highcharts.com/demo/gfx/sun.png)'
|
||||
}
|
||||
}, 23.3, 18.3, 13.9, 9.6]
|
||||
|
||||
}, {
|
||||
name: 'London',
|
||||
marker: {
|
||||
symbol: 'diamond'
|
||||
},
|
||||
data: [{
|
||||
y: 3.9,
|
||||
marker: {
|
||||
symbol: 'url(http://www.highcharts.com/demo/gfx/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>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
colorAxis: {
|
||||
minColor: '#FFFFFF',
|
||||
maxColor: Highcharts.getOptions().colors[0]
|
||||
},
|
||||
series: [{
|
||||
type: "treemap",
|
||||
layoutAlgorithm: 'squarified',
|
||||
data: [{
|
||||
name: 'A',
|
||||
value: 6,
|
||||
colorValue: 1
|
||||
}, {
|
||||
name: 'B',
|
||||
value: 6,
|
||||
colorValue: 2
|
||||
}, {
|
||||
name: 'C',
|
||||
value: 4,
|
||||
colorValue: 3
|
||||
}, {
|
||||
name: 'D',
|
||||
value: 3,
|
||||
colorValue: 4
|
||||
}, {
|
||||
name: 'E',
|
||||
value: 2,
|
||||
colorValue: 5
|
||||
}, {
|
||||
name: 'F',
|
||||
value: 2,
|
||||
colorValue: 6
|
||||
}, {
|
||||
name: 'G',
|
||||
value: 1,
|
||||
colorValue: 7
|
||||
}]
|
||||
}],
|
||||
title: {
|
||||
text: 'Highcharts Treemap'
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/heatmap.js"></script>
|
||||
<script src="../../js/modules/treemap.js"></script>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
+974
@@ -0,0 +1,974 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var data = {
|
||||
"South-East Asia": {
|
||||
"Sri Lanka": {
|
||||
"Communicable & other Group I": "75.5",
|
||||
"Injuries": "89.0",
|
||||
"Noncommunicable diseases": "501.2"
|
||||
},
|
||||
"Bangladesh": {
|
||||
"Noncommunicable diseases": "548.9",
|
||||
"Injuries": "64.0",
|
||||
"Communicable & other Group I": "234.6"
|
||||
},
|
||||
"Myanmar": {
|
||||
"Communicable & other Group I": "316.4",
|
||||
"Injuries": "102.0",
|
||||
"Noncommunicable diseases": "708.7"
|
||||
},
|
||||
"Maldives": {
|
||||
"Injuries": "35.0",
|
||||
"Noncommunicable diseases": "487.2",
|
||||
"Communicable & other Group I": "59.2"
|
||||
},
|
||||
"Democratic People's Republic of Korea": {
|
||||
"Injuries": "91.9",
|
||||
"Noncommunicable diseases": "751.4",
|
||||
"Communicable & other Group I": "117.3"
|
||||
},
|
||||
"Bhutan": {
|
||||
"Injuries": "142.2",
|
||||
"Noncommunicable diseases": "572.8",
|
||||
"Communicable & other Group I": "186.9"
|
||||
},
|
||||
"Thailand": {
|
||||
"Injuries": "72.8",
|
||||
"Communicable & other Group I": "123.3",
|
||||
"Noncommunicable diseases": "449.1"
|
||||
},
|
||||
"Nepal": {
|
||||
"Noncommunicable diseases": "678.1",
|
||||
"Injuries": "88.7",
|
||||
"Communicable & other Group I": "251.8"
|
||||
},
|
||||
"Timor-Leste": {
|
||||
"Injuries": "69.2",
|
||||
"Noncommunicable diseases": "670.5",
|
||||
"Communicable & other Group I": "343.5"
|
||||
},
|
||||
"India": {
|
||||
"Communicable & other Group I": "253.0",
|
||||
"Injuries": "115.9",
|
||||
"Noncommunicable diseases": "682.3"
|
||||
},
|
||||
"Indonesia": {
|
||||
"Injuries": "49.3",
|
||||
"Noncommunicable diseases": "680.1",
|
||||
"Communicable & other Group I": "162.4"
|
||||
}
|
||||
},
|
||||
"Europe": {
|
||||
"Hungary": {
|
||||
"Communicable & other Group I": "16.8",
|
||||
"Noncommunicable diseases": "602.8",
|
||||
"Injuries": "44.3"
|
||||
},
|
||||
"Poland": {
|
||||
"Communicable & other Group I": "22.6",
|
||||
"Noncommunicable diseases": "494.5",
|
||||
"Injuries": "48.9"
|
||||
},
|
||||
"Israel": {
|
||||
"Communicable & other Group I": "31.2",
|
||||
"Noncommunicable diseases": "311.2",
|
||||
"Injuries": "20.8"
|
||||
},
|
||||
"France": {
|
||||
"Communicable & other Group I": "21.4",
|
||||
"Noncommunicable diseases": "313.2",
|
||||
"Injuries": "34.6"
|
||||
},
|
||||
"Turkey": {
|
||||
"Injuries": "39.1",
|
||||
"Communicable & other Group I": "43.9",
|
||||
"Noncommunicable diseases": "555.2"
|
||||
},
|
||||
"Kyrgyzstan": {
|
||||
"Communicable & other Group I": "65.8",
|
||||
"Injuries": "65.1",
|
||||
"Noncommunicable diseases": "835.4"
|
||||
},
|
||||
"Croatia": {
|
||||
"Communicable & other Group I": "12.2",
|
||||
"Noncommunicable diseases": "495.8",
|
||||
"Injuries": "40.1"
|
||||
},
|
||||
"Portugal": {
|
||||
"Injuries": "25.2",
|
||||
"Communicable & other Group I": "39.9",
|
||||
"Noncommunicable diseases": "343.3"
|
||||
},
|
||||
"Greece": {
|
||||
"Injuries": "26.5",
|
||||
"Noncommunicable diseases": "365.0",
|
||||
"Communicable & other Group I": "24.1"
|
||||
},
|
||||
"Italy": {
|
||||
"Injuries": "20.1",
|
||||
"Communicable & other Group I": "15.5",
|
||||
"Noncommunicable diseases": "303.6"
|
||||
},
|
||||
"Belgium": {
|
||||
"Communicable & other Group I": "27.8",
|
||||
"Injuries": "38.9",
|
||||
"Noncommunicable diseases": "356.8"
|
||||
},
|
||||
"Lithuania": {
|
||||
"Noncommunicable diseases": "580.6",
|
||||
"Communicable & other Group I": "25.5",
|
||||
"Injuries": "76.4"
|
||||
},
|
||||
"Uzbekistan": {
|
||||
"Communicable & other Group I": "85.8",
|
||||
"Injuries": "47.4",
|
||||
"Noncommunicable diseases": "810.9"
|
||||
},
|
||||
"Serbia": {
|
||||
"Communicable & other Group I": "19.4",
|
||||
"Injuries": "32.0",
|
||||
"Noncommunicable diseases": "657.7"
|
||||
},
|
||||
"Austria": {
|
||||
"Noncommunicable diseases": "359.5",
|
||||
"Injuries": "30.6",
|
||||
"Communicable & other Group I": "12.6"
|
||||
},
|
||||
"Bosnia and Herzegovina": {
|
||||
"Injuries": "42.4",
|
||||
"Noncommunicable diseases": "512.5",
|
||||
"Communicable & other Group I": "20.0"
|
||||
},
|
||||
"Slovakia": {
|
||||
"Injuries": "39.1",
|
||||
"Communicable & other Group I": "35.3",
|
||||
"Noncommunicable diseases": "532.5"
|
||||
},
|
||||
"The former Yugoslav republic of Macedonia": {
|
||||
"Injuries": "24.0",
|
||||
"Communicable & other Group I": "16.9",
|
||||
"Noncommunicable diseases": "636.5"
|
||||
},
|
||||
"Sweden": {
|
||||
"Communicable & other Group I": "19.3",
|
||||
"Noncommunicable diseases": "333.5",
|
||||
"Injuries": "26.1"
|
||||
},
|
||||
"Russian Federation": {
|
||||
"Noncommunicable diseases": "790.3",
|
||||
"Communicable & other Group I": "73.8",
|
||||
"Injuries": "102.8"
|
||||
},
|
||||
"Republic of Moldova": {
|
||||
"Noncommunicable diseases": "787.6",
|
||||
"Injuries": "75.7",
|
||||
"Communicable & other Group I": "44.5"
|
||||
},
|
||||
"Ireland": {
|
||||
"Injuries": "31.8",
|
||||
"Communicable & other Group I": "21.5",
|
||||
"Noncommunicable diseases": "343.9"
|
||||
},
|
||||
"Estonia": {
|
||||
"Injuries": "47.0",
|
||||
"Communicable & other Group I": "18.5",
|
||||
"Noncommunicable diseases": "510.7"
|
||||
},
|
||||
"Cyprus": {
|
||||
"Noncommunicable diseases": "333.0",
|
||||
"Injuries": "26.6",
|
||||
"Communicable & other Group I": "16.2"
|
||||
},
|
||||
"Kazakhstan": {
|
||||
"Noncommunicable diseases": "949.7",
|
||||
"Injuries": "101.6",
|
||||
"Communicable & other Group I": "55.3"
|
||||
},
|
||||
"Netherlands": {
|
||||
"Noncommunicable diseases": "355.2",
|
||||
"Injuries": "22.3",
|
||||
"Communicable & other Group I": "25.5"
|
||||
},
|
||||
"Finland": {
|
||||
"Noncommunicable diseases": "366.6",
|
||||
"Injuries": "38.7",
|
||||
"Communicable & other Group I": "9.0"
|
||||
},
|
||||
"Romania": {
|
||||
"Noncommunicable diseases": "612.2",
|
||||
"Injuries": "40.7",
|
||||
"Communicable & other Group I": "38.5"
|
||||
},
|
||||
"Albania": {
|
||||
"Noncommunicable diseases": "671.6",
|
||||
"Injuries": "48.0",
|
||||
"Communicable & other Group I": "46.5"
|
||||
},
|
||||
"Iceland": {
|
||||
"Injuries": "29.0",
|
||||
"Noncommunicable diseases": "311.7",
|
||||
"Communicable & other Group I": "14.0"
|
||||
},
|
||||
"Azerbaijan": {
|
||||
"Noncommunicable diseases": "664.3",
|
||||
"Injuries": "33.6",
|
||||
"Communicable & other Group I": "70.8"
|
||||
},
|
||||
"Tajikistan": {
|
||||
"Injuries": "51.6",
|
||||
"Communicable & other Group I": "147.7",
|
||||
"Noncommunicable diseases": "752.6"
|
||||
},
|
||||
"Bulgaria": {
|
||||
"Communicable & other Group I": "33.4",
|
||||
"Injuries": "36.4",
|
||||
"Noncommunicable diseases": "638.2"
|
||||
},
|
||||
"United Kingdom of Great Britain and Northern Ireland": {
|
||||
"Communicable & other Group I": "28.5",
|
||||
"Injuries": "21.5",
|
||||
"Noncommunicable diseases": "358.8"
|
||||
},
|
||||
"Spain": {
|
||||
"Communicable & other Group I": "19.1",
|
||||
"Injuries": "17.8",
|
||||
"Noncommunicable diseases": "323.1"
|
||||
},
|
||||
"Ukraine": {
|
||||
"Communicable & other Group I": "69.3",
|
||||
"Injuries": "67.3",
|
||||
"Noncommunicable diseases": "749.0"
|
||||
},
|
||||
"Norway": {
|
||||
"Noncommunicable diseases": "336.6",
|
||||
"Communicable & other Group I": "25.2",
|
||||
"Injuries": "25.6"
|
||||
},
|
||||
"Denmark": {
|
||||
"Injuries": "22.5",
|
||||
"Communicable & other Group I": "29.5",
|
||||
"Noncommunicable diseases": "406.1"
|
||||
},
|
||||
"Belarus": {
|
||||
"Noncommunicable diseases": "682.5",
|
||||
"Communicable & other Group I": "28.3",
|
||||
"Injuries": "91.3"
|
||||
},
|
||||
"Malta": {
|
||||
"Noncommunicable diseases": "364.5",
|
||||
"Injuries": "19.0",
|
||||
"Communicable & other Group I": "23.6"
|
||||
},
|
||||
"Latvia": {
|
||||
"Noncommunicable diseases": "623.7",
|
||||
"Injuries": "54.5",
|
||||
"Communicable & other Group I": "26.0"
|
||||
},
|
||||
"Turkmenistan": {
|
||||
"Injuries": "93.0",
|
||||
"Communicable & other Group I": "115.8",
|
||||
"Noncommunicable diseases": "1025.1"
|
||||
},
|
||||
"Switzerland": {
|
||||
"Communicable & other Group I": "14.5",
|
||||
"Noncommunicable diseases": "291.6",
|
||||
"Injuries": "25.4"
|
||||
},
|
||||
"Luxembourg": {
|
||||
"Injuries": "31.1",
|
||||
"Noncommunicable diseases": "317.8",
|
||||
"Communicable & other Group I": "20.5"
|
||||
},
|
||||
"Georgia": {
|
||||
"Injuries": "32.2",
|
||||
"Communicable & other Group I": "39.3",
|
||||
"Noncommunicable diseases": "615.2"
|
||||
},
|
||||
"Slovenia": {
|
||||
"Noncommunicable diseases": "369.2",
|
||||
"Communicable & other Group I": "15.4",
|
||||
"Injuries": "44.2"
|
||||
},
|
||||
"Montenegro": {
|
||||
"Communicable & other Group I": "18.7",
|
||||
"Noncommunicable diseases": "571.5",
|
||||
"Injuries": "41.2"
|
||||
},
|
||||
"Armenia": {
|
||||
"Noncommunicable diseases": "847.5",
|
||||
"Communicable & other Group I": "45.0",
|
||||
"Injuries": "49.2"
|
||||
},
|
||||
"Germany": {
|
||||
"Injuries": "23.0",
|
||||
"Communicable & other Group I": "21.6",
|
||||
"Noncommunicable diseases": "365.1"
|
||||
},
|
||||
"Czech Republic": {
|
||||
"Injuries": "39.1",
|
||||
"Noncommunicable diseases": "460.7",
|
||||
"Communicable & other Group I": "27.0"
|
||||
}
|
||||
},
|
||||
"Africa": {
|
||||
"Equatorial Guinea": {
|
||||
"Communicable & other Group I": "756.8",
|
||||
"Injuries": "133.6",
|
||||
"Noncommunicable diseases": "729.0"
|
||||
},
|
||||
"Madagascar": {
|
||||
"Noncommunicable diseases": "648.6",
|
||||
"Communicable & other Group I": "429.9",
|
||||
"Injuries": "89.0"
|
||||
},
|
||||
"Swaziland": {
|
||||
"Communicable & other Group I": "884.3",
|
||||
"Injuries": "119.5",
|
||||
"Noncommunicable diseases": "702.4"
|
||||
},
|
||||
"Congo": {
|
||||
"Noncommunicable diseases": "632.3",
|
||||
"Communicable & other Group I": "666.9",
|
||||
"Injuries": "89.0"
|
||||
},
|
||||
"Burkina Faso": {
|
||||
"Communicable & other Group I": "648.2",
|
||||
"Noncommunicable diseases": "784.0",
|
||||
"Injuries": "119.3"
|
||||
},
|
||||
"Guinea-Bissau": {
|
||||
"Communicable & other Group I": "869.8",
|
||||
"Noncommunicable diseases": "764.7",
|
||||
"Injuries": "111.6"
|
||||
},
|
||||
"Democratic Republic of the Congo": {
|
||||
"Noncommunicable diseases": "724.4",
|
||||
"Injuries": "137.1",
|
||||
"Communicable & other Group I": "920.7"
|
||||
},
|
||||
"Mozambique": {
|
||||
"Injuries": "175.3",
|
||||
"Noncommunicable diseases": "593.7",
|
||||
"Communicable & other Group I": "998.1"
|
||||
},
|
||||
"Central African Republic": {
|
||||
"Communicable & other Group I": "1212.1",
|
||||
"Injuries": "107.9",
|
||||
"Noncommunicable diseases": "550.8"
|
||||
},
|
||||
"United Republic of Tanzania": {
|
||||
"Noncommunicable diseases": "569.8",
|
||||
"Communicable & other Group I": "584.2",
|
||||
"Injuries": "129.2"
|
||||
},
|
||||
"Cameroon": {
|
||||
"Communicable & other Group I": "768.8",
|
||||
"Injuries": "106.0",
|
||||
"Noncommunicable diseases": "675.2"
|
||||
},
|
||||
"Togo": {
|
||||
"Noncommunicable diseases": "679.0",
|
||||
"Communicable & other Group I": "681.8",
|
||||
"Injuries": "93.0"
|
||||
},
|
||||
"Eritrea": {
|
||||
"Injuries": "118.7",
|
||||
"Communicable & other Group I": "506.0",
|
||||
"Noncommunicable diseases": "671.9"
|
||||
},
|
||||
"Namibia": {
|
||||
"Injuries": "76.4",
|
||||
"Noncommunicable diseases": "580.2",
|
||||
"Communicable & other Group I": "356.6"
|
||||
},
|
||||
"Senegal": {
|
||||
"Noncommunicable diseases": "558.1",
|
||||
"Injuries": "89.3",
|
||||
"Communicable & other Group I": "587.7"
|
||||
},
|
||||
"Chad": {
|
||||
"Communicable & other Group I": "1070.9",
|
||||
"Injuries": "114.5",
|
||||
"Noncommunicable diseases": "712.6"
|
||||
},
|
||||
"Benin": {
|
||||
"Injuries": "98.0",
|
||||
"Noncommunicable diseases": "761.5",
|
||||
"Communicable & other Group I": "577.3"
|
||||
},
|
||||
"Zimbabwe": {
|
||||
"Communicable & other Group I": "711.3",
|
||||
"Injuries": "82.5",
|
||||
"Noncommunicable diseases": "598.9"
|
||||
},
|
||||
"Rwanda": {
|
||||
"Noncommunicable diseases": "585.3",
|
||||
"Injuries": "106.3",
|
||||
"Communicable & other Group I": "401.7"
|
||||
},
|
||||
"Zambia": {
|
||||
"Noncommunicable diseases": "587.4",
|
||||
"Injuries": "156.4",
|
||||
"Communicable & other Group I": "764.3"
|
||||
},
|
||||
"Mali": {
|
||||
"Injuries": "119.5",
|
||||
"Communicable & other Group I": "588.3",
|
||||
"Noncommunicable diseases": "866.1"
|
||||
},
|
||||
"Ethiopia": {
|
||||
"Injuries": "94.5",
|
||||
"Communicable & other Group I": "558.9",
|
||||
"Noncommunicable diseases": "476.3"
|
||||
},
|
||||
"South Africa": {
|
||||
"Communicable & other Group I": "611.6",
|
||||
"Injuries": "103.5",
|
||||
"Noncommunicable diseases": "710.9"
|
||||
},
|
||||
"Burundi": {
|
||||
"Injuries": "146.6",
|
||||
"Communicable & other Group I": "704.8",
|
||||
"Noncommunicable diseases": "729.5"
|
||||
},
|
||||
"Cabo Verde": {
|
||||
"Injuries": "54.4",
|
||||
"Noncommunicable diseases": "482.1",
|
||||
"Communicable & other Group I": "141.9"
|
||||
},
|
||||
"Liberia": {
|
||||
"Noncommunicable diseases": "656.9",
|
||||
"Injuries": "83.3",
|
||||
"Communicable & other Group I": "609.1"
|
||||
},
|
||||
"Uganda": {
|
||||
"Noncommunicable diseases": "664.4",
|
||||
"Communicable & other Group I": "696.7",
|
||||
"Injuries": "166.8"
|
||||
},
|
||||
"Mauritius": {
|
||||
"Noncommunicable diseases": "576.5",
|
||||
"Injuries": "44.1",
|
||||
"Communicable & other Group I": "61.8"
|
||||
},
|
||||
"Algeria": {
|
||||
"Noncommunicable diseases": "710.4",
|
||||
"Injuries": "53.8",
|
||||
"Communicable & other Group I": "97.8"
|
||||
},
|
||||
"C\u00f4te d'Ivoire": {
|
||||
"Noncommunicable diseases": "794.0",
|
||||
"Injuries": "124.0",
|
||||
"Communicable & other Group I": "861.3"
|
||||
},
|
||||
"Malawi": {
|
||||
"Injuries": "97.7",
|
||||
"Communicable & other Group I": "777.6",
|
||||
"Noncommunicable diseases": "655.0"
|
||||
},
|
||||
"Botswana": {
|
||||
"Injuries": "87.9",
|
||||
"Noncommunicable diseases": "612.2",
|
||||
"Communicable & other Group I": "555.3"
|
||||
},
|
||||
"Guinea": {
|
||||
"Injuries": "96.0",
|
||||
"Noncommunicable diseases": "681.1",
|
||||
"Communicable & other Group I": "679.6"
|
||||
},
|
||||
"Ghana": {
|
||||
"Injuries": "76.1",
|
||||
"Noncommunicable diseases": "669.9",
|
||||
"Communicable & other Group I": "476.0"
|
||||
},
|
||||
"Kenya": {
|
||||
"Noncommunicable diseases": "514.7",
|
||||
"Injuries": "101.1",
|
||||
"Communicable & other Group I": "657.5"
|
||||
},
|
||||
"Gambia": {
|
||||
"Noncommunicable diseases": "629.6",
|
||||
"Injuries": "96.0",
|
||||
"Communicable & other Group I": "590.5"
|
||||
},
|
||||
"Angola": {
|
||||
"Injuries": "137.8",
|
||||
"Noncommunicable diseases": "768.4",
|
||||
"Communicable & other Group I": "873.3"
|
||||
},
|
||||
"Sierra Leone": {
|
||||
"Communicable & other Group I": "1327.4",
|
||||
"Noncommunicable diseases": "963.5",
|
||||
"Injuries": "149.5"
|
||||
},
|
||||
"Mauritania": {
|
||||
"Communicable & other Group I": "619.1",
|
||||
"Injuries": "83.4",
|
||||
"Noncommunicable diseases": "555.1"
|
||||
},
|
||||
"Comoros": {
|
||||
"Communicable & other Group I": "494.6",
|
||||
"Injuries": "132.4",
|
||||
"Noncommunicable diseases": "695.5"
|
||||
},
|
||||
"Gabon": {
|
||||
"Noncommunicable diseases": "504.6",
|
||||
"Injuries": "77.4",
|
||||
"Communicable & other Group I": "589.4"
|
||||
},
|
||||
"Niger": {
|
||||
"Injuries": "97.6",
|
||||
"Communicable & other Group I": "740.0",
|
||||
"Noncommunicable diseases": "649.1"
|
||||
},
|
||||
"Lesotho": {
|
||||
"Communicable & other Group I": "1110.5",
|
||||
"Injuries": "142.5",
|
||||
"Noncommunicable diseases": "671.8"
|
||||
},
|
||||
"Nigeria": {
|
||||
"Noncommunicable diseases": "673.7",
|
||||
"Communicable & other Group I": "866.2",
|
||||
"Injuries": "145.6"
|
||||
}
|
||||
},
|
||||
"Americas": {
|
||||
"Canada": {
|
||||
"Noncommunicable diseases": "318.0",
|
||||
"Injuries": "31.3",
|
||||
"Communicable & other Group I": "22.6"
|
||||
},
|
||||
"Bolivia (Plurinational State of)": {
|
||||
"Communicable & other Group I": "226.2",
|
||||
"Noncommunicable diseases": "635.3",
|
||||
"Injuries": "100.0"
|
||||
},
|
||||
"Haiti": {
|
||||
"Communicable & other Group I": "405.4",
|
||||
"Noncommunicable diseases": "724.6",
|
||||
"Injuries": "89.3"
|
||||
},
|
||||
"Belize": {
|
||||
"Noncommunicable diseases": "470.7",
|
||||
"Injuries": "82.0",
|
||||
"Communicable & other Group I": "104.6"
|
||||
},
|
||||
"Suriname": {
|
||||
"Injuries": "70.5",
|
||||
"Communicable & other Group I": "83.7",
|
||||
"Noncommunicable diseases": "374.8"
|
||||
},
|
||||
"Argentina": {
|
||||
"Communicable & other Group I": "68.7",
|
||||
"Injuries": "50.7",
|
||||
"Noncommunicable diseases": "467.3"
|
||||
},
|
||||
"Mexico": {
|
||||
"Injuries": "63.2",
|
||||
"Communicable & other Group I": "57.0",
|
||||
"Noncommunicable diseases": "468.3"
|
||||
},
|
||||
"Jamaica": {
|
||||
"Injuries": "51.5",
|
||||
"Communicable & other Group I": "97.0",
|
||||
"Noncommunicable diseases": "519.1"
|
||||
},
|
||||
"Peru": {
|
||||
"Noncommunicable diseases": "363.5",
|
||||
"Injuries": "47.9",
|
||||
"Communicable & other Group I": "121.3"
|
||||
},
|
||||
"Brazil": {
|
||||
"Injuries": "80.2",
|
||||
"Communicable & other Group I": "92.8",
|
||||
"Noncommunicable diseases": "513.8"
|
||||
},
|
||||
"Venezuela (Bolivarian Republic of)": {
|
||||
"Communicable & other Group I": "58.2",
|
||||
"Injuries": "103.2",
|
||||
"Noncommunicable diseases": "410.6"
|
||||
},
|
||||
"Paraguay": {
|
||||
"Noncommunicable diseases": "485.5",
|
||||
"Communicable & other Group I": "77.3",
|
||||
"Injuries": "67.6"
|
||||
},
|
||||
"Chile": {
|
||||
"Noncommunicable diseases": "366.5",
|
||||
"Communicable & other Group I": "36.3",
|
||||
"Injuries": "41.2"
|
||||
},
|
||||
"Trinidad and Tobago": {
|
||||
"Noncommunicable diseases": "705.3",
|
||||
"Communicable & other Group I": "80.4",
|
||||
"Injuries": "98.4"
|
||||
},
|
||||
"Colombia": {
|
||||
"Noncommunicable diseases": "377.3",
|
||||
"Communicable & other Group I": "55.0",
|
||||
"Injuries": "72.6"
|
||||
},
|
||||
"Cuba": {
|
||||
"Injuries": "45.3",
|
||||
"Noncommunicable diseases": "421.8",
|
||||
"Communicable & other Group I": "33.2"
|
||||
},
|
||||
"El Salvador": {
|
||||
"Noncommunicable diseases": "474.9",
|
||||
"Injuries": "157.7",
|
||||
"Communicable & other Group I": "96.2"
|
||||
},
|
||||
"Honduras": {
|
||||
"Injuries": "80.8",
|
||||
"Communicable & other Group I": "117.5",
|
||||
"Noncommunicable diseases": "441.5"
|
||||
},
|
||||
"Ecuador": {
|
||||
"Noncommunicable diseases": "409.7",
|
||||
"Injuries": "83.7",
|
||||
"Communicable & other Group I": "97.3"
|
||||
},
|
||||
"Costa Rica": {
|
||||
"Communicable & other Group I": "30.5",
|
||||
"Noncommunicable diseases": "391.8",
|
||||
"Injuries": "46.5"
|
||||
},
|
||||
"Dominican Republic": {
|
||||
"Noncommunicable diseases": "396.0",
|
||||
"Injuries": "66.4",
|
||||
"Communicable & other Group I": "76.8"
|
||||
},
|
||||
"Nicaragua": {
|
||||
"Communicable & other Group I": "75.2",
|
||||
"Injuries": "64.4",
|
||||
"Noncommunicable diseases": "546.6"
|
||||
},
|
||||
"Barbados": {
|
||||
"Noncommunicable diseases": "404.5",
|
||||
"Injuries": "28.0",
|
||||
"Communicable & other Group I": "60.8"
|
||||
},
|
||||
"Uruguay": {
|
||||
"Noncommunicable diseases": "446.0",
|
||||
"Injuries": "53.8",
|
||||
"Communicable & other Group I": "46.2"
|
||||
},
|
||||
"Panama": {
|
||||
"Communicable & other Group I": "86.1",
|
||||
"Injuries": "67.4",
|
||||
"Noncommunicable diseases": "372.9"
|
||||
},
|
||||
"Bahamas": {
|
||||
"Noncommunicable diseases": "465.2",
|
||||
"Injuries": "45.7",
|
||||
"Communicable & other Group I": "122.0"
|
||||
},
|
||||
"Guyana": {
|
||||
"Communicable & other Group I": "177.2",
|
||||
"Noncommunicable diseases": "1024.2",
|
||||
"Injuries": "150.0"
|
||||
},
|
||||
"United States of America": {
|
||||
"Noncommunicable diseases": "412.8",
|
||||
"Injuries": "44.2",
|
||||
"Communicable & other Group I": "31.3"
|
||||
},
|
||||
"Guatemala": {
|
||||
"Communicable & other Group I": "212.7",
|
||||
"Noncommunicable diseases": "409.4",
|
||||
"Injuries": "111.0"
|
||||
}
|
||||
},
|
||||
"Eastern Mediterranean": {
|
||||
"Egypt": {
|
||||
"Communicable & other Group I": "74.3",
|
||||
"Noncommunicable diseases": "781.7",
|
||||
"Injuries": "33.5"
|
||||
},
|
||||
"South Sudan": {
|
||||
"Injuries": "143.4",
|
||||
"Communicable & other Group I": "831.3",
|
||||
"Noncommunicable diseases": "623.4"
|
||||
},
|
||||
"Sudan": {
|
||||
"Injuries": "133.6",
|
||||
"Noncommunicable diseases": "551.0",
|
||||
"Communicable & other Group I": "495.0"
|
||||
},
|
||||
"Libya": {
|
||||
"Injuries": "62.8",
|
||||
"Noncommunicable diseases": "550.0",
|
||||
"Communicable & other Group I": "52.6"
|
||||
},
|
||||
"Jordan": {
|
||||
"Noncommunicable diseases": "640.3",
|
||||
"Injuries": "53.5",
|
||||
"Communicable & other Group I": "52.5"
|
||||
},
|
||||
"Pakistan": {
|
||||
"Communicable & other Group I": "296.0",
|
||||
"Noncommunicable diseases": "669.3",
|
||||
"Injuries": "98.7"
|
||||
},
|
||||
"Djibouti": {
|
||||
"Noncommunicable diseases": "631.1",
|
||||
"Communicable & other Group I": "626.0",
|
||||
"Injuries": "106.0"
|
||||
},
|
||||
"Syrian Arab Republic": {
|
||||
"Communicable & other Group I": "41.0",
|
||||
"Injuries": "308.0",
|
||||
"Noncommunicable diseases": "572.7"
|
||||
},
|
||||
"Morocco": {
|
||||
"Noncommunicable diseases": "707.7",
|
||||
"Communicable & other Group I": "131.5",
|
||||
"Injuries": "47.0"
|
||||
},
|
||||
"Yemen": {
|
||||
"Communicable & other Group I": "515.0",
|
||||
"Noncommunicable diseases": "626.9",
|
||||
"Injuries": "84.3"
|
||||
},
|
||||
"Bahrain": {
|
||||
"Injuries": "33.5",
|
||||
"Noncommunicable diseases": "505.7",
|
||||
"Communicable & other Group I": "48.5"
|
||||
},
|
||||
"United Arab Emirates": {
|
||||
"Noncommunicable diseases": "546.8",
|
||||
"Injuries": "31.5",
|
||||
"Communicable & other Group I": "35.6"
|
||||
},
|
||||
"Lebanon": {
|
||||
"Noncommunicable diseases": "384.6",
|
||||
"Injuries": "40.6",
|
||||
"Communicable & other Group I": "30.5"
|
||||
},
|
||||
"Saudi Arabia": {
|
||||
"Noncommunicable diseases": "549.4",
|
||||
"Injuries": "41.1",
|
||||
"Communicable & other Group I": "71.3"
|
||||
},
|
||||
"Iran (Islamic Republic of)": {
|
||||
"Injuries": "74.9",
|
||||
"Communicable & other Group I": "56.2",
|
||||
"Noncommunicable diseases": "569.3"
|
||||
},
|
||||
"Iraq": {
|
||||
"Communicable & other Group I": "87.0",
|
||||
"Noncommunicable diseases": "715.5",
|
||||
"Injuries": "128.5"
|
||||
},
|
||||
"Qatar": {
|
||||
"Communicable & other Group I": "28.3",
|
||||
"Injuries": "41.0",
|
||||
"Noncommunicable diseases": "407.0"
|
||||
},
|
||||
"Afghanistan": {
|
||||
"Communicable & other Group I": "362.7",
|
||||
"Injuries": "169.2",
|
||||
"Noncommunicable diseases": "846.3"
|
||||
},
|
||||
"Somalia": {
|
||||
"Noncommunicable diseases": "550.7",
|
||||
"Communicable & other Group I": "927.2",
|
||||
"Injuries": "188.5"
|
||||
},
|
||||
"Kuwait": {
|
||||
"Communicable & other Group I": "82.5",
|
||||
"Injuries": "25.4",
|
||||
"Noncommunicable diseases": "406.3"
|
||||
},
|
||||
"Oman": {
|
||||
"Injuries": "52.8",
|
||||
"Noncommunicable diseases": "478.2",
|
||||
"Communicable & other Group I": "84.2"
|
||||
},
|
||||
"Tunisia": {
|
||||
"Noncommunicable diseases": "509.3",
|
||||
"Communicable & other Group I": "65.0",
|
||||
"Injuries": "39.1"
|
||||
}
|
||||
},
|
||||
"Western Pacific": {
|
||||
"Mongolia": {
|
||||
"Injuries": "69.4",
|
||||
"Noncommunicable diseases": "966.5",
|
||||
"Communicable & other Group I": "82.8"
|
||||
},
|
||||
"Cambodia": {
|
||||
"Injuries": "62.2",
|
||||
"Communicable & other Group I": "227.5",
|
||||
"Noncommunicable diseases": "394.0"
|
||||
},
|
||||
"Japan": {
|
||||
"Injuries": "40.5",
|
||||
"Noncommunicable diseases": "244.2",
|
||||
"Communicable & other Group I": "33.9"
|
||||
},
|
||||
"Brunei Darussalam": {
|
||||
"Injuries": "44.6",
|
||||
"Noncommunicable diseases": "475.3",
|
||||
"Communicable & other Group I": "56.1"
|
||||
},
|
||||
"Solomon Islands": {
|
||||
"Communicable & other Group I": "230.6",
|
||||
"Injuries": "75.1",
|
||||
"Noncommunicable diseases": "709.7"
|
||||
},
|
||||
"Viet Nam": {
|
||||
"Communicable & other Group I": "96.0",
|
||||
"Injuries": "59.0",
|
||||
"Noncommunicable diseases": "435.4"
|
||||
},
|
||||
"Lao People's Democratic Republic": {
|
||||
"Communicable & other Group I": "328.7",
|
||||
"Injuries": "75.2",
|
||||
"Noncommunicable diseases": "680.0"
|
||||
},
|
||||
"China": {
|
||||
"Communicable & other Group I": "41.4",
|
||||
"Noncommunicable diseases": "576.3",
|
||||
"Injuries": "50.4"
|
||||
},
|
||||
"New Zealand": {
|
||||
"Injuries": "32.9",
|
||||
"Noncommunicable diseases": "313.6",
|
||||
"Communicable & other Group I": "18.0"
|
||||
},
|
||||
"Papua New Guinea": {
|
||||
"Injuries": "100.1",
|
||||
"Communicable & other Group I": "554.3",
|
||||
"Noncommunicable diseases": "693.2"
|
||||
},
|
||||
"Philippines": {
|
||||
"Communicable & other Group I": "226.4",
|
||||
"Noncommunicable diseases": "720.0",
|
||||
"Injuries": "53.8"
|
||||
},
|
||||
"Malaysia": {
|
||||
"Injuries": "62.8",
|
||||
"Noncommunicable diseases": "563.2",
|
||||
"Communicable & other Group I": "117.4"
|
||||
},
|
||||
"Australia": {
|
||||
"Communicable & other Group I": "13.7",
|
||||
"Noncommunicable diseases": "302.9",
|
||||
"Injuries": "28.2"
|
||||
},
|
||||
"Fiji": {
|
||||
"Noncommunicable diseases": "804.0",
|
||||
"Injuries": "64.0",
|
||||
"Communicable & other Group I": "105.2"
|
||||
},
|
||||
"Singapore": {
|
||||
"Communicable & other Group I": "66.2",
|
||||
"Noncommunicable diseases": "264.8",
|
||||
"Injuries": "17.5"
|
||||
},
|
||||
"Republic of Korea": {
|
||||
"Injuries": "53.1",
|
||||
"Communicable & other Group I": "33.8",
|
||||
"Noncommunicable diseases": "302.1"
|
||||
}
|
||||
}
|
||||
};
|
||||
var points = [],
|
||||
region_p,
|
||||
region_val,
|
||||
region_i,
|
||||
country_p,
|
||||
country_i,
|
||||
cause_p,
|
||||
cause_i,
|
||||
cause_name = [];
|
||||
cause_name['Communicable & other Group I'] = 'Communicable diseases';
|
||||
cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
|
||||
cause_name['Injuries'] = 'Injuries';
|
||||
region_i = 0;
|
||||
for (var region in data) {
|
||||
region_val = 0;
|
||||
region_p = {
|
||||
id: "id_" + region_i,
|
||||
name: region,
|
||||
color: Highcharts.getOptions().colors[region_i]
|
||||
};
|
||||
country_i = 0;
|
||||
for (var country in data[region]) {
|
||||
country_p = {
|
||||
id: region_p.id + "_" + country_i,
|
||||
name: country,
|
||||
parent: region_p.id
|
||||
};
|
||||
points.push(country_p);
|
||||
cause_i = 0;
|
||||
for (var cause in data[region][country]) {
|
||||
cause_p = {
|
||||
id: country_p.id + "_" + cause_i,
|
||||
name: cause_name[cause],
|
||||
parent: country_p.id,
|
||||
value: Math.round(+data[region][country][cause])
|
||||
};
|
||||
region_val += cause_p.value;
|
||||
points.push(cause_p);
|
||||
cause_i++;
|
||||
}
|
||||
country_i++;
|
||||
}
|
||||
region_p.value = Math.round(region_val / country_i);
|
||||
points.push(region_p);
|
||||
region_i++;
|
||||
}
|
||||
var chart = new Highcharts.Chart({
|
||||
chart: {
|
||||
renderTo: 'container'
|
||||
},
|
||||
series: [{
|
||||
type: "treemap",
|
||||
layoutAlgorithm: 'squarified',
|
||||
allowDrillToNode: true,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
levelIsConstant: false,
|
||||
levels: [{
|
||||
level: 1,
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
borderWidth: 3
|
||||
}],
|
||||
data: points
|
||||
}],
|
||||
subtitle: {
|
||||
text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
|
||||
},
|
||||
title: {
|
||||
text: 'Global Mortality Rate 2012, per 100 000 population'
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/heatmap.js"></script>
|
||||
<script src="../../js/modules/treemap.js"></script>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
series: [{
|
||||
type: "treemap",
|
||||
layoutAlgorithm: 'stripes',
|
||||
alternateStartingDirection: true,
|
||||
levels: [{
|
||||
level: 1,
|
||||
layoutAlgorithm: 'sliceAndDice',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
align: 'left',
|
||||
verticalAlign: 'top',
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}],
|
||||
data: [{
|
||||
id: 'A',
|
||||
name: 'Apples',
|
||||
color: "#EC2500"
|
||||
}, {
|
||||
id: 'B',
|
||||
name: 'Bananas',
|
||||
color: "#ECE100"
|
||||
}, {
|
||||
id: 'O',
|
||||
name: 'Oranges',
|
||||
color: '#EC9800'
|
||||
}, {
|
||||
name: 'Anne',
|
||||
parent: 'A',
|
||||
value: 5
|
||||
}, {
|
||||
name: 'Rick',
|
||||
parent: 'A',
|
||||
value: 3
|
||||
}, {
|
||||
name: 'Peter',
|
||||
parent: 'A',
|
||||
value: 4
|
||||
}, {
|
||||
name: 'Anne',
|
||||
parent: 'B',
|
||||
value: 4
|
||||
}, {
|
||||
name: 'Rick',
|
||||
parent: 'B',
|
||||
value: 10
|
||||
}, {
|
||||
name: 'Peter',
|
||||
parent: 'B',
|
||||
value: 1
|
||||
}, {
|
||||
name: 'Anne',
|
||||
parent: 'O',
|
||||
value: 1
|
||||
}, {
|
||||
name: 'Rick',
|
||||
parent: 'O',
|
||||
value: 3
|
||||
}, {
|
||||
name: 'Peter',
|
||||
parent: 'O',
|
||||
value: 3
|
||||
}, {
|
||||
name: 'Susanne',
|
||||
parent: 'Kiwi',
|
||||
value: 2,
|
||||
color: '#9EDE00'
|
||||
}]
|
||||
}],
|
||||
title: {
|
||||
text: 'Fruit consumption'
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/modules/treemap.js"></script>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'waterfall'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts Waterfall'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'USD'
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
pointFormat: '<b>${point.y:,.2f}</b> USD'
|
||||
},
|
||||
|
||||
series: [{
|
||||
upColor: Highcharts.getOptions().colors[2],
|
||||
color: Highcharts.getOptions().colors[3],
|
||||
data: [{
|
||||
name: 'Start',
|
||||
y: 120000
|
||||
}, {
|
||||
name: 'Product Revenue',
|
||||
y: 569000
|
||||
}, {
|
||||
name: 'Service Revenue',
|
||||
y: 231000
|
||||
}, {
|
||||
name: 'Positive Balance',
|
||||
isIntermediateSum: true,
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}, {
|
||||
name: 'Fixed Costs',
|
||||
y: -342000
|
||||
}, {
|
||||
name: 'Variable Costs',
|
||||
y: -233000
|
||||
}, {
|
||||
name: 'Balance',
|
||||
isSum: true,
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
|
||||
},
|
||||
style: {
|
||||
color: '#FFFFFF',
|
||||
fontWeight: 'bold',
|
||||
textShadow: '0px 0px 3px black'
|
||||
}
|
||||
},
|
||||
pointPadding: 0
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../js/highcharts.js"></script>
|
||||
<script src="../../js/highcharts-more.js"></script>
|
||||
<script src="../../js/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2010-2015 Torstein Hønsi, Gert Vaartjes
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
<parent>
|
||||
<groupId>com.highcharts.export</groupId>
|
||||
<artifactId>highcharts-export</artifactId>
|
||||
<version>2.1.0</version>
|
||||
</parent>
|
||||
<artifactId>highcharts-export-convert</artifactId>
|
||||
<packaging>jar</packaging>
|
||||
<name>highcharts-export-convert</name>
|
||||
<url>http://maven.apache.org</url>
|
||||
<organization>
|
||||
<name>Highsoft</name>
|
||||
<url>http://highcharts.com</url>
|
||||
</organization>
|
||||
<dependencies>
|
||||
<dependency>
|
||||
<groupId>com.google.code.gson</groupId>
|
||||
<artifactId>gson</artifactId>
|
||||
<version>2.2.2</version>
|
||||
<scope>compile</scope>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
<build>
|
||||
<finalName>${project.artifactId}</finalName>
|
||||
</build>
|
||||
</project>
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
/**
|
||||
* @license Highcharts JS v2.3.3 (2012-11-02)
|
||||
*
|
||||
* (c) 20012-2014
|
||||
*
|
||||
* Author: Gert Vaartjes
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
package com.highcharts.export.converter;
|
||||
|
||||
import java.io.File;
|
||||
import java.io.IOException;
|
||||
import java.net.SocketTimeoutException;
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
import java.util.NoSuchElementException;
|
||||
import java.util.concurrent.TimeoutException;
|
||||
|
||||
import org.apache.commons.io.FileUtils;
|
||||
import org.apache.log4j.Logger;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import com.google.gson.Gson;
|
||||
import com.highcharts.export.pool.PoolException;
|
||||
import com.highcharts.export.pool.BlockingQueuePool;
|
||||
import com.highcharts.export.server.Server;
|
||||
import com.highcharts.export.util.MimeType;
|
||||
|
||||
@Service("svgConverter")
|
||||
public class SVGConverter {
|
||||
|
||||
@Autowired
|
||||
private BlockingQueuePool serverPool;
|
||||
protected static Logger logger = Logger.getLogger("converter");
|
||||
private static final String SVG_DOCTYPE = "<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">";
|
||||
|
||||
public String convert(String input, MimeType mime,
|
||||
String constructor, String callback, String globalOptions, Float width, Float scale, String filename) throws SVGConverterException, PoolException, NoSuchElementException, TimeoutException {
|
||||
return this.convert(input, globalOptions, null, null, mime, constructor, callback, width, scale, filename);
|
||||
}
|
||||
|
||||
public String convert(String input, String globalOptions, String dataOptions, String customCode, MimeType mime,
|
||||
String constructor, String callback, Float width, Float scale, String filename) throws SVGConverterException, PoolException, NoSuchElementException, TimeoutException {
|
||||
|
||||
Map<String, String> params = new HashMap<String, String>();
|
||||
Gson gson = new Gson();
|
||||
|
||||
if (filename != null) {
|
||||
params.put("outfile", filename);
|
||||
} else {
|
||||
params.put("type", mime.name().toLowerCase());
|
||||
}
|
||||
|
||||
params.put("infile", input);
|
||||
|
||||
if (constructor != null && !constructor.isEmpty()) {
|
||||
params.put("constr", constructor);
|
||||
}
|
||||
|
||||
if (callback != null && !callback.isEmpty()) {
|
||||
params.put("callback", callback);
|
||||
}
|
||||
|
||||
if (globalOptions != null && !globalOptions.isEmpty()) {
|
||||
params.put("globaloptions", globalOptions);
|
||||
}
|
||||
|
||||
if (dataOptions != null && !dataOptions.isEmpty()) {
|
||||
params.put("dataoptions", dataOptions);
|
||||
}
|
||||
|
||||
if (customCode != null && !customCode.isEmpty()) {
|
||||
params.put("customcode", customCode);
|
||||
}
|
||||
|
||||
if (width != null) {
|
||||
params.put("width", String.valueOf(width));
|
||||
}
|
||||
|
||||
if (scale != null) {
|
||||
params.put("scale", String.valueOf(scale));
|
||||
}
|
||||
|
||||
// parameters to JSON
|
||||
String json = gson.toJson(params);
|
||||
|
||||
// send to phantomJs
|
||||
String output = "";
|
||||
output = requestServer(json);
|
||||
|
||||
// check first for errors
|
||||
if (output.length() > 5 && output.substring(0,5).equalsIgnoreCase("error")) {
|
||||
throw new SVGConverterException("recveived error from phantomjs:" + output);
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
/*
|
||||
* Redirect the SVG string directly
|
||||
*/
|
||||
public String redirectSVG(String svg, String filename) throws SVGConverterException {
|
||||
// add XML Doctype for svg
|
||||
String output = SVG_DOCTYPE + svg;
|
||||
|
||||
if (filename != null) {
|
||||
// Create file and return filename instead.
|
||||
//String filename = createUniqueFileName(".svg");
|
||||
File file = new File(filename);
|
||||
try {
|
||||
FileUtils.writeStringToFile(file, output);
|
||||
} catch (IOException ioex) {
|
||||
logger.error(ioex.getMessage());
|
||||
throw new SVGConverterException("Error while converting, " + ioex.getMessage());
|
||||
}
|
||||
return filename;
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
public String requestServer(String params) throws SVGConverterException, TimeoutException, NoSuchElementException, PoolException {
|
||||
Server server = null;
|
||||
|
||||
try {
|
||||
server = (Server) serverPool.borrowObject();
|
||||
String response = server.request(params);
|
||||
|
||||
return response;
|
||||
} catch (SocketTimeoutException ste) {
|
||||
logger.error(ste);
|
||||
throw new TimeoutException(ste.getMessage());
|
||||
} catch (TimeoutException te) {
|
||||
logger.error(te);
|
||||
throw new TimeoutException(te.getMessage());
|
||||
} catch (PoolException nse) {
|
||||
logger.error("POOL EXHAUSTED!!");
|
||||
throw new PoolException(nse.getMessage());
|
||||
} catch (Exception e) {
|
||||
logger.error(e);
|
||||
throw new SVGConverterException("Error converting SVG: " + e.getMessage());
|
||||
} finally {
|
||||
try {
|
||||
serverPool.returnObject(server, true);
|
||||
} catch (Exception e) {
|
||||
logger.error("Exception while returning server to pool: " + e.getMessage());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @license Highcharts JS v2.3.3 (2012-11-02)
|
||||
*
|
||||
* (c) 20012-2014
|
||||
*
|
||||
* Author: Gert Vaartjes
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
package com.highcharts.export.converter;
|
||||
|
||||
public class SVGConverterException extends Exception {
|
||||
|
||||
private static final long serialVersionUID = -5110552374074051446L;
|
||||
private String mistake;
|
||||
|
||||
public SVGConverterException() {
|
||||
super();
|
||||
mistake = "unknown to men";
|
||||
}
|
||||
|
||||
public SVGConverterException(String err) {
|
||||
super(err); // call super class constructor
|
||||
mistake = err; // save message
|
||||
}
|
||||
|
||||
public String getError() {
|
||||
return mistake;
|
||||
}
|
||||
|
||||
}
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
package com.highcharts.export.pool;
|
||||
|
||||
import com.highcharts.export.util.TempDir;
|
||||
import java.io.File;
|
||||
import java.io.IOException;
|
||||
import java.nio.file.Files;
|
||||
import java.nio.file.Path;
|
||||
import java.nio.file.Paths;
|
||||
import java.nio.file.attribute.BasicFileAttributes;
|
||||
import java.util.Collection;
|
||||
import java.util.Date;
|
||||
import java.util.Queue;
|
||||
import java.util.concurrent.atomic.AtomicInteger;
|
||||
import org.apache.commons.io.FileUtils;
|
||||
import org.apache.commons.io.filefilter.IOFileFilter;
|
||||
|
||||
import org.apache.log4j.Logger;
|
||||
import org.springframework.scheduling.annotation.Scheduled;
|
||||
|
||||
public abstract class AbstractPool<T> implements ObjectPool<T> {
|
||||
|
||||
final ObjectFactory<T> objectFactory;
|
||||
Queue<T> queue;
|
||||
final AtomicInteger poolSize = new AtomicInteger(0);
|
||||
int maxWait;
|
||||
final int capacity;
|
||||
final long retentionTime;
|
||||
protected static Logger logger = Logger.getLogger("pool");
|
||||
|
||||
public AbstractPool(ObjectFactory<T> objectFactory, int number, int maxWait, Long retentionTime) throws PoolException {
|
||||
this.objectFactory = objectFactory;
|
||||
this.capacity = number;
|
||||
this.maxWait = maxWait;
|
||||
this.retentionTime = retentionTime;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void createObject() {
|
||||
T object = objectFactory.create();
|
||||
queue.add(object);
|
||||
poolSize.getAndIncrement();
|
||||
}
|
||||
|
||||
@Override
|
||||
public void destroyObject(T object) {
|
||||
objectFactory.destroy(object);
|
||||
}
|
||||
|
||||
@Override
|
||||
@Scheduled(initialDelay = 10000, fixedRate = 5000)
|
||||
public void poolCleaner() throws InterruptedException, PoolException {
|
||||
|
||||
logger.debug("HC: queue size: " + queue.size() + " poolSize " + poolSize.get());
|
||||
|
||||
int size = poolSize.get();
|
||||
// remove invalid objects
|
||||
for (int i = 0; i < size; i++) {
|
||||
T object = borrowObject();
|
||||
if (object == null) {
|
||||
logger.debug("HC: object is null");
|
||||
} else {
|
||||
logger.debug("HC: validating " + object.toString());
|
||||
if (!objectFactory.validate(object)) {
|
||||
logger.debug("HC: destroying " + object.toString());
|
||||
destroyObject(object);
|
||||
} else {
|
||||
returnObject(object, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
int number = poolSize.get() - capacity;
|
||||
logger.debug("in cleanpool, the surplus or shortage is: " + number);
|
||||
synchronized (this) {
|
||||
int iterations = Math.abs(number);
|
||||
for (int i = 0; i < iterations; i++) {
|
||||
if (number < 1) {
|
||||
this.createObject();
|
||||
} else {
|
||||
T object = borrowObject();
|
||||
this.destroyObject(object);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
@Scheduled(initialDelay = 15000, fixedRate = 60000)
|
||||
public void tempDirCleaner() {
|
||||
IOFileFilter filter = new IOFileFilter() {
|
||||
|
||||
@Override
|
||||
public boolean accept(File file) {
|
||||
try {
|
||||
Long now = new Date().getTime();
|
||||
Path path = Paths.get(file.getAbsolutePath());
|
||||
BasicFileAttributes attrs = Files.readAttributes(path, BasicFileAttributes.class);
|
||||
Long inBetween = now - attrs.lastAccessTime().toMillis();
|
||||
|
||||
if (inBetween > retentionTime) {
|
||||
return true;
|
||||
}
|
||||
|
||||
} catch (IOException ioex) {
|
||||
logger.error("Error: while selection files for deletion: " + ioex.getMessage());
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
@Override
|
||||
public boolean accept(File file, String string) {
|
||||
throw new UnsupportedOperationException("Not supported yet.");
|
||||
}
|
||||
};
|
||||
|
||||
Collection<File> oldFiles = FileUtils.listFiles(TempDir.outputDir.toFile(),filter, null);
|
||||
for (File file : oldFiles) {
|
||||
file.delete();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*Getter and Setters*/
|
||||
public int getMaxWait() {
|
||||
return maxWait;
|
||||
}
|
||||
|
||||
public void setMaxWait(int maxWait) {
|
||||
this.maxWait = maxWait;
|
||||
}
|
||||
}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
package com.highcharts.export.pool;
|
||||
|
||||
import java.util.concurrent.LinkedBlockingQueue;
|
||||
import java.util.concurrent.TimeUnit;
|
||||
|
||||
|
||||
public class BlockingQueuePool<T> extends AbstractPool<T>{
|
||||
|
||||
LinkedBlockingQueue<T> linkQueue;
|
||||
/**
|
||||
* @param factory
|
||||
* @param number
|
||||
* @throws PoolException
|
||||
*/
|
||||
|
||||
public BlockingQueuePool(ObjectFactory<T> factory, int number, int maxWait, long retentionTime) throws PoolException {
|
||||
super(factory, number, maxWait, retentionTime);
|
||||
queue = new LinkedBlockingQueue<T>();
|
||||
linkQueue = (LinkedBlockingQueue<T>) queue;
|
||||
}
|
||||
|
||||
|
||||
@Override
|
||||
public T borrowObject() throws InterruptedException, PoolException {
|
||||
T object = linkQueue.poll(maxWait, TimeUnit.MILLISECONDS);
|
||||
if (object == null) {
|
||||
throw new PoolException();
|
||||
}
|
||||
poolSize.getAndDecrement();
|
||||
|
||||
return object;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void returnObject(T object, boolean validate) throws InterruptedException {
|
||||
if (object == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
boolean valid = ( !validate || objectFactory.validate(object)) ? true : false;
|
||||
|
||||
if (!valid) {
|
||||
destroyObject(object);
|
||||
} else {
|
||||
objectFactory.passivate(object);
|
||||
linkQueue.offer(object, maxWait, TimeUnit.MILLISECONDS);
|
||||
poolSize.incrementAndGet();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
package com.highcharts.export.pool;
|
||||
|
||||
public interface ObjectFactory<T>{
|
||||
public T create();
|
||||
public boolean validate(T object);
|
||||
public void destroy(T object);
|
||||
public void activate(T object);
|
||||
public void passivate(T Object);
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/*
|
||||
* To change this template, choose Tools | Templates
|
||||
* and open the template in the editor.
|
||||
*/
|
||||
package com.highcharts.export.pool;
|
||||
|
||||
/**
|
||||
*
|
||||
* @author gert
|
||||
*/
|
||||
public interface ObjectPool<T> {
|
||||
|
||||
public void createObject();
|
||||
public void destroyObject(T object);
|
||||
public T borrowObject() throws InterruptedException, PoolException;
|
||||
public void returnObject(T object, boolean validate) throws InterruptedException;
|
||||
public void poolCleaner() throws PoolException, InterruptedException;
|
||||
public void tempDirCleaner();
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @license Highcharts JS v2.3.3 (2012-11-02)
|
||||
*
|
||||
* (c) 20012-2014
|
||||
*
|
||||
* Author: Gert Vaartjes
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
package com.highcharts.export.pool;
|
||||
|
||||
public class PoolException extends Exception {
|
||||
|
||||
private static final long serialVersionUID = 3925816328286206059L;
|
||||
private final String mistake;
|
||||
|
||||
public PoolException() {
|
||||
super();
|
||||
mistake = "unknown to men";
|
||||
}
|
||||
|
||||
public PoolException(String err) {
|
||||
super(err); // call super class constructor
|
||||
mistake = err; // save message
|
||||
}
|
||||
|
||||
public String getError() {
|
||||
return mistake;
|
||||
}
|
||||
|
||||
}
|
||||
+239
@@ -0,0 +1,239 @@
|
||||
package com.highcharts.export.pool;
|
||||
|
||||
import java.nio.file.*;
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
|
||||
import javax.annotation.PostConstruct;
|
||||
|
||||
import org.apache.log4j.Logger;
|
||||
|
||||
import com.highcharts.export.server.Server;
|
||||
import com.highcharts.export.server.ServerState;
|
||||
import com.highcharts.export.util.TempDir;
|
||||
|
||||
import java.io.File;
|
||||
import java.io.FileOutputStream;
|
||||
import java.io.IOException;
|
||||
import java.io.InputStream;
|
||||
import java.io.OutputStream;
|
||||
import java.net.URL;
|
||||
import java.net.URLClassLoader;
|
||||
import java.util.TreeMap;
|
||||
|
||||
import org.apache.commons.io.IOUtils;
|
||||
import org.springframework.core.io.ClassPathResource;
|
||||
|
||||
public class ServerObjectFactory implements ObjectFactory<Server> {
|
||||
|
||||
public String exec;
|
||||
public String script;
|
||||
private String host;
|
||||
private int basePort;
|
||||
private int readTimeout;
|
||||
private int poolSize;
|
||||
private int connectTimeout;
|
||||
private int maxTimeout;
|
||||
private static TreeMap<Integer, PortStatus> portUsage = new TreeMap<>();
|
||||
protected static Logger logger = Logger.getLogger("pool");
|
||||
|
||||
private enum PortStatus {
|
||||
BUSY,
|
||||
FREE;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Server create() {
|
||||
logger.debug("in makeObject, " + exec + ", " + script + ", " + host);
|
||||
Integer port = this.getAvailablePort();
|
||||
String separator = FileSystems.getDefault().getSeparator();
|
||||
|
||||
if (script.isEmpty()) {
|
||||
// use the bundled highcharts-convert.js script
|
||||
script = TempDir.getPhantomJsDir().toAbsolutePath().toString() + separator + "highcharts-convert.js";
|
||||
}
|
||||
Server server = new Server(exec, script, host, port, connectTimeout, readTimeout, maxTimeout);
|
||||
portUsage.put(port, PortStatus.BUSY);
|
||||
return server;
|
||||
}
|
||||
|
||||
@Override
|
||||
public boolean validate(Server server) {
|
||||
boolean isValid = false;
|
||||
try {
|
||||
if(server.getState() != ServerState.IDLE) {
|
||||
logger.debug("server didn\'t pass validation");
|
||||
return false;
|
||||
}
|
||||
String result = server.request("{\"status\":\"isok\"}");
|
||||
if(result.indexOf("OK") > -1) {
|
||||
isValid = true;
|
||||
logger.debug("server passed validation");
|
||||
} else {
|
||||
logger.debug("server didn\'t pass validation");
|
||||
}
|
||||
} catch (Exception e) {
|
||||
logger.error("Error while validating object in Pool: " + e.getMessage());
|
||||
}
|
||||
return isValid;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void destroy(Server server) {
|
||||
ServerObjectFactory.releasePort(server.getPort());
|
||||
server.cleanup();
|
||||
}
|
||||
|
||||
@Override
|
||||
public void activate(Server server) {
|
||||
server.setState(ServerState.ACTIVE);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void passivate(Server server) {
|
||||
server.setState(ServerState.IDLE);
|
||||
}
|
||||
|
||||
public static void releasePort(Integer port) {
|
||||
logger.debug("Releasing port " + port);
|
||||
portUsage.put(port, PortStatus.FREE);
|
||||
}
|
||||
|
||||
public Integer getAvailablePort() {
|
||||
|
||||
/* first we check within the defined port range from baseport
|
||||
* up to baseport + poolsize
|
||||
*/
|
||||
int port = basePort;
|
||||
for (; port < basePort + poolSize; port++) {
|
||||
|
||||
if (portUsage.containsKey(port)) {
|
||||
if (portUsage.get(port) == PortStatus.FREE) {
|
||||
return port;
|
||||
}
|
||||
} else {
|
||||
// doesn't exist any longer, but is within the valid port range
|
||||
return port;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// at this point there is no free port, we have to look outside of the valid port range
|
||||
logger.debug("Nothing free in Portusage " + portUsage.toString());
|
||||
return portUsage.lastKey() + 1;
|
||||
}
|
||||
|
||||
/*Getters and Setters*/
|
||||
|
||||
public String getExec() {
|
||||
return exec;
|
||||
}
|
||||
|
||||
public void setExec(String exec) {
|
||||
this.exec = exec;
|
||||
}
|
||||
|
||||
public String getScript() {
|
||||
return script;
|
||||
}
|
||||
|
||||
public void setScript(String script) {
|
||||
this.script = script;
|
||||
}
|
||||
|
||||
public String getHost() {
|
||||
return host;
|
||||
}
|
||||
|
||||
public void setHost(String host) {
|
||||
this.host = host;
|
||||
}
|
||||
|
||||
public int getBasePort() {
|
||||
return basePort;
|
||||
}
|
||||
|
||||
public void setBasePort(int basePort) {
|
||||
this.basePort = basePort;
|
||||
}
|
||||
|
||||
public int getReadTimeout() {
|
||||
return readTimeout;
|
||||
}
|
||||
|
||||
public void setReadTimeout(int readTimeout) {
|
||||
this.readTimeout = readTimeout;
|
||||
}
|
||||
|
||||
public int getConnectTimeout() {
|
||||
return connectTimeout;
|
||||
}
|
||||
|
||||
public void setConnectTimeout(int connectTimeout) {
|
||||
this.connectTimeout = connectTimeout;
|
||||
}
|
||||
|
||||
public int getMaxTimeout() {
|
||||
return maxTimeout;
|
||||
}
|
||||
|
||||
public void setMaxTimeout(int maxTimeout) {
|
||||
this.maxTimeout = maxTimeout;
|
||||
}
|
||||
|
||||
public int getPoolSize() {
|
||||
return poolSize;
|
||||
}
|
||||
|
||||
public void setPoolSize(int poolSize) {
|
||||
this.poolSize = poolSize;
|
||||
}
|
||||
|
||||
@PostConstruct
|
||||
public void afterBeanInit() {
|
||||
|
||||
URL u = getClass().getProtectionDomain().getCodeSource().getLocation();
|
||||
URLClassLoader jarLoader = new URLClassLoader(new URL[]{u}, Thread.currentThread().getContextClassLoader());
|
||||
String filenames[] = new String[] {"highcharts-convert.js",
|
||||
"jquery.1.9.1.min.js",
|
||||
"highcharts.js",
|
||||
"highstock.js",
|
||||
"highcharts-more.js",
|
||||
"data.js",
|
||||
"drilldown.js",
|
||||
"funnel.js",
|
||||
"heatmap.js",
|
||||
"highcharts-3d.js",
|
||||
"no-data-to-display.js",
|
||||
"solid-gauge.js",
|
||||
"map.js",
|
||||
"broken-axis.js",
|
||||
"treemap.js"};
|
||||
|
||||
for (String filename : filenames) {
|
||||
|
||||
ClassPathResource resource = new ClassPathResource("phantomjs/" + filename, jarLoader);
|
||||
if (resource.exists()) {
|
||||
Path path = Paths.get(TempDir.getPhantomJsDir().toString(), filename);
|
||||
File file;
|
||||
try {
|
||||
file = Files.createFile(path).toFile();
|
||||
file.deleteOnExit();
|
||||
try (InputStream in = resource.getInputStream();
|
||||
OutputStream out=new FileOutputStream(file))
|
||||
{
|
||||
IOUtils.copy(in, out);
|
||||
}
|
||||
} catch (IOException ioex) {
|
||||
logger.error("Error while setting up phantomjs environment: " + ioex.getMessage());
|
||||
}
|
||||
} else {
|
||||
logger.debug("Copy javascript file to temp folder, resource doesn't exist: " + filename);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
package com.highcharts.export.server;
|
||||
|
||||
import java.io.BufferedReader;
|
||||
import java.io.IOException;
|
||||
import java.io.InputStream;
|
||||
import java.io.InputStreamReader;
|
||||
import java.io.OutputStream;
|
||||
import java.net.SocketTimeoutException;
|
||||
import java.net.URL;
|
||||
import java.net.URLConnection;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Timer;
|
||||
import java.util.concurrent.TimeoutException;
|
||||
|
||||
import org.apache.commons.io.IOUtils;
|
||||
|
||||
import com.highcharts.export.converter.SVGConverterException;
|
||||
import com.highcharts.export.util.TempDir;
|
||||
import java.util.logging.Level;
|
||||
import java.util.logging.Logger;
|
||||
|
||||
public class Server {
|
||||
private Process process;
|
||||
private final int port;
|
||||
private final String host;
|
||||
private final int readTimeout;
|
||||
private final int connectTimeout;
|
||||
private final int maxTimeout;
|
||||
private ServerState state = ServerState.IDLE;
|
||||
|
||||
protected static final Logger logger = Logger.getLogger("server");
|
||||
|
||||
public Server(String exec, String script, String host, int port, int connectTimeout, int readTimeout, int maxTimeout) {
|
||||
|
||||
// assign port and host to this instance
|
||||
this.port = port;
|
||||
this.host = host;
|
||||
this.connectTimeout = connectTimeout;
|
||||
this.readTimeout = readTimeout;
|
||||
this.maxTimeout = maxTimeout;
|
||||
|
||||
try {
|
||||
ArrayList<String> commands = new ArrayList<String>();
|
||||
commands.add(exec);
|
||||
commands.add(script);
|
||||
commands.add("-host");
|
||||
commands.add(host);
|
||||
commands.add("-port");
|
||||
commands.add("" + port);
|
||||
|
||||
logger.log(Level.FINE, commands.toString());
|
||||
|
||||
process = new ProcessBuilder(commands).start();
|
||||
final BufferedReader bufferedReader = new BufferedReader(
|
||||
new InputStreamReader(process.getInputStream()));
|
||||
String readLine = bufferedReader.readLine();
|
||||
if (readLine == null || !readLine.contains("ready")) {
|
||||
logger.log(Level.WARNING, "Command starting Phantomjs failed");
|
||||
process.destroy();
|
||||
throw new RuntimeException("Error, PhantomJS couldnot start");
|
||||
}
|
||||
|
||||
initialize();
|
||||
|
||||
Runtime.getRuntime().addShutdownHook(new Thread() {
|
||||
@Override
|
||||
public void run() {
|
||||
if (process != null) {
|
||||
logger.log(Level.WARNING, "Shutting down PhantomJS instance, kill process directly, {0}", this.toString());
|
||||
try {
|
||||
process.getErrorStream().close();
|
||||
process.getInputStream().close();
|
||||
process.getOutputStream().close();
|
||||
} catch (IOException e) {
|
||||
logger.log(Level.WARNING, "Error while shutting down process: {0}", e.getMessage());
|
||||
}
|
||||
process.destroy();
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (IOException e) {
|
||||
throw new RuntimeException(e);
|
||||
}
|
||||
}
|
||||
|
||||
public void initialize() {
|
||||
logger.log(Level.FINE, "Phantom server started on port {0}", port);
|
||||
}
|
||||
|
||||
public String request(String params) throws SocketTimeoutException, SVGConverterException, TimeoutException {
|
||||
String response = "";
|
||||
Timer _timer = new Timer();
|
||||
try {
|
||||
URL url = new URL("http://" + host + ":"
|
||||
+ port + "/");
|
||||
|
||||
// TEST with running a local phantom instance
|
||||
// url = new URL("http://" + host + ":7777/");
|
||||
// logger.log(Level.INFO, "requesting url: " + url.toString());
|
||||
// logger.log(Level.INFO, "parameters: " + params);
|
||||
|
||||
state = ServerState.BUSY;
|
||||
|
||||
_timer.schedule(new TimeOut(this), maxTimeout);
|
||||
|
||||
URLConnection connection = url.openConnection();
|
||||
connection.setDoOutput(true);
|
||||
connection.setConnectTimeout(connectTimeout);
|
||||
connection.setReadTimeout(readTimeout);
|
||||
|
||||
OutputStream out = connection.getOutputStream();
|
||||
out.write(params.getBytes("utf-8"));
|
||||
out.close();
|
||||
InputStream in = connection.getInputStream();
|
||||
response = IOUtils.toString(in, "utf-8");
|
||||
|
||||
in.close();
|
||||
_timer.cancel();
|
||||
state = ServerState.IDLE;
|
||||
} catch (SocketTimeoutException ste) {
|
||||
_timer.cancel();
|
||||
throw new SocketTimeoutException(ste.getMessage());
|
||||
} catch (Exception e) {
|
||||
if(state == ServerState.TIMEDOUT) {
|
||||
throw new TimeoutException(e.getMessage());
|
||||
}
|
||||
_timer.cancel();
|
||||
throw new SVGConverterException(e.getMessage());
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
public void cleanup() {
|
||||
try {
|
||||
/* It's not enough to only destroy the process, this helps*/
|
||||
process.getErrorStream().close();
|
||||
process.getInputStream().close();
|
||||
process.getOutputStream().close();
|
||||
} catch (IOException e) {
|
||||
logger.log(Level.SEVERE, "Error while shutting down process: {0}", e.getMessage());
|
||||
}
|
||||
|
||||
process.destroy();
|
||||
process = null;
|
||||
logger.log(Level.FINE, "Destroyed phantomJS process running on port {0}", port);
|
||||
}
|
||||
|
||||
public int getPort() {
|
||||
return port;
|
||||
}
|
||||
|
||||
public String getHost() {
|
||||
return host;
|
||||
}
|
||||
|
||||
public ServerState getState() {
|
||||
return state;
|
||||
}
|
||||
|
||||
public void setState(ServerState state) {
|
||||
this.state = state;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return this.getClass().getName() + "listening to port: " + port;
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
package com.highcharts.export.server;
|
||||
|
||||
|
||||
public enum ServerState {
|
||||
IDLE, DEAD, BUSY, TIMEDOUT, ACTIVE;
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
package com.highcharts.export.server;
|
||||
|
||||
import java.util.TimerTask;
|
||||
|
||||
import org.apache.log4j.Logger;
|
||||
|
||||
|
||||
public class TimeOut extends TimerTask {
|
||||
private final Server server;
|
||||
protected static Logger logger = Logger.getLogger("utils");
|
||||
|
||||
public TimeOut(Server server) {
|
||||
this.server = server;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void run(){
|
||||
logger.debug("Timed out while downloading.");
|
||||
server.setState(ServerState.TIMEDOUT);
|
||||
}
|
||||
};
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* @license Highcharts JS v2.3.3 (2012-11-02)
|
||||
*
|
||||
* (c) 2012-2014
|
||||
*
|
||||
* Author: Gert Vaartjes
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
package com.highcharts.export.util;
|
||||
|
||||
import java.util.EnumSet;
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
|
||||
public enum MimeType {
|
||||
PNG("image/png", "png"),
|
||||
JPEG("image/jpeg", "jpeg"),
|
||||
PDF("application/pdf", "pdf"),
|
||||
SVG("image/svg+xml", "svg");
|
||||
|
||||
private static final Map<String, MimeType> lookup = new HashMap<>();
|
||||
|
||||
static {
|
||||
for (MimeType m : EnumSet.allOf(MimeType.class)) {
|
||||
lookup.put(m.getType(), m);
|
||||
}
|
||||
}
|
||||
|
||||
private String type;
|
||||
private String extension;
|
||||
|
||||
private MimeType(String type, String extension) {
|
||||
this.type = type;
|
||||
this.extension = extension;
|
||||
}
|
||||
|
||||
public String getType() {
|
||||
return type;
|
||||
}
|
||||
|
||||
public String getExtension() {
|
||||
return extension;
|
||||
}
|
||||
|
||||
public static MimeType get(String type) {
|
||||
MimeType mime = lookup.get(type);
|
||||
if (mime != null) {
|
||||
return mime;
|
||||
}
|
||||
return MimeType.PNG;
|
||||
}
|
||||
}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
* To change this template, choose Tools | Templates
|
||||
* and open the template in the editor.
|
||||
*/
|
||||
package com.highcharts.export.util;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.nio.file.Files;
|
||||
import java.nio.file.Path;
|
||||
import java.nio.file.Paths;
|
||||
|
||||
import org.apache.commons.io.FileUtils;
|
||||
import org.apache.commons.io.FilenameUtils;
|
||||
import org.apache.log4j.Logger;
|
||||
|
||||
/**
|
||||
*
|
||||
* @author gert
|
||||
*/
|
||||
public class TempDir {
|
||||
|
||||
public static Path tmpDir;
|
||||
public static Path outputDir;
|
||||
public static Path phantomJsDir;
|
||||
|
||||
protected static Logger logger = Logger.getLogger(TempDir.class.getName());
|
||||
|
||||
|
||||
public TempDir() throws IOException {
|
||||
tmpDir = Files.createTempDirectory("export");
|
||||
|
||||
// Delete this directory on deletion of the JVM
|
||||
tmpDir.toFile().deleteOnExit();
|
||||
|
||||
outputDir = Files.createDirectory(Paths.get(tmpDir.toString(), "output"));
|
||||
outputDir.toFile().deleteOnExit();
|
||||
|
||||
phantomJsDir = Files.createDirectory(Paths.get(tmpDir.toString(), "phantomjs"));
|
||||
phantomJsDir.toFile().deleteOnExit();
|
||||
|
||||
Runtime.getRuntime().addShutdownHook(new Thread() {
|
||||
@Override
|
||||
public void run() {
|
||||
FileUtils.deleteQuietly(tmpDir.toFile());
|
||||
}
|
||||
});
|
||||
|
||||
logger.debug("Highcharts Export Server using " +TempDir.getTmpDir() + " as TEMP folder.");
|
||||
}
|
||||
|
||||
public static Path getTmpDir() {
|
||||
return tmpDir;
|
||||
}
|
||||
|
||||
public static Path getOutputDir() {
|
||||
return outputDir;
|
||||
}
|
||||
|
||||
public static Path getPhantomJsDir() {
|
||||
return phantomJsDir;
|
||||
}
|
||||
|
||||
public static String getDownloadLink(String filename) {
|
||||
filename = FilenameUtils.getName(filename);
|
||||
String link = "files/" + filename;
|
||||
return link;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
#### phantomjs properties ####
|
||||
|
||||
# the host and port phantomjs listens to
|
||||
host = 127.0.0.1
|
||||
port = 7777
|
||||
|
||||
# location of the phantomjs executable, could be for example /usr/local/bin/phantomjs
|
||||
exec = /usr/local/bin/phantomjs
|
||||
|
||||
# specify here an alternative location (the whole path!) for the script that starts an Phantomjs server. F.eks /home/bert/scripts/my-highcharts-convert.js
|
||||
# Leave empty if you're using the script bundled with the export-server.
|
||||
script =
|
||||
|
||||
#### connect properties used to connect with phantomjs running as HTTP-server ####
|
||||
# all values in milliseconds
|
||||
|
||||
# specifies the timeout when reading from phantomjs when a connection is established
|
||||
readTimeout = 6000
|
||||
|
||||
# timeout to be used when opening a communications link to the phantomjs server
|
||||
connectTimeout = 500
|
||||
|
||||
# the whole request to the phantomjs server is scheduled, max timeout can last to this value. This is because in java you can't rely on the above two timeouts.
|
||||
maxTimeout = 6500
|
||||
|
||||
#### Pool properties ####
|
||||
|
||||
# number of phantomjs servers you can run in the pool.
|
||||
poolSize = 10
|
||||
|
||||
# The pool is implemented as a BlockingQueue. When asking for a phantom server connection and nothing is available, it waits for the number of milliseconds defined by maxWait
|
||||
maxWait = 1000
|
||||
|
||||
# Keep files in the temp folder for a certain retentionTime, defined in miliseconds
|
||||
retentionTime = 60000
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
#Console Appender
|
||||
log4j.appender.console=org.apache.log4j.ConsoleAppender
|
||||
log4j.appender.console.layout=org.apache.log4j.PatternLayout
|
||||
log4j.appender.console.layout.ConversionPattern=[%5p] [%t %d{hh:mm:ss}] (%F:%M:%L) %m%n
|
||||
|
||||
log4j.appender.R=org.apache.log4j.RollingFileAppender
|
||||
log4j.appender.R.File=${catalina.base}/logs/export-convert.log
|
||||
log4j.appender.R.MaxFileSize=1000KB
|
||||
log4j.appender.R.MaxBackupIndex=10
|
||||
log4j.appender.R.layout=org.apache.log4j.PatternLayout
|
||||
log4j.appender.R.layout.ConversionPattern=[%5p] [%t %d{hh:mm:ss}] (%F:%M:%L) %m%n
|
||||
|
||||
# Debug specific class
|
||||
#log4j.logger.services=DEBUG
|
||||
#log4j.logger.converter=DEBUG
|
||||
#log4j.logger.exporter=DEBUG
|
||||
#log4j.logger.pool=DEBUG
|
||||
|
||||
log4j.rootLogger=ERROR,console,R
|
||||
#log4j.rootLogger=ERROR,console
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
(function(h){function r(){return Array.prototype.slice.call(arguments,1)}var s=h.pick,o=h.wrap,t=h.extend,p=HighchartsAdapter.fireEvent,n=h.Axis,u=h.Series;t(n.prototype,{isInBreak:function(f,d){var a=f.repeat||Infinity,c=f.from,b=f.to-f.from,a=d>=c?(d-c)%a:a-(c-d)%a;return f.inclusive?a<=b:a<b&&a!==0},isInAnyBreak:function(f,d){var a=this.options.breaks,c=a&&a.length,b,e,q;if(c){for(;c--;)this.isInBreak(a[c],f)&&(b=!0,e||(e=s(a[c].showPoints,this.isXAxis?!1:!0)));q=b&&d?b&&!e:b}return q}});o(n.prototype,
|
||||
"setTickPositions",function(f){f.apply(this,Array.prototype.slice.call(arguments,1));if(this.options.breaks){var d=this.tickPositions,a=this.tickPositions.info,c=[],b;if(!(a&&a.totalRange>=this.closestPointRange)){for(b=0;b<d.length;b++)this.isInAnyBreak(d[b])||c.push(d[b]);this.tickPositions=c;this.tickPositions.info=a}}});o(n.prototype,"init",function(f,d,a){if(a.breaks&&a.breaks.length)a.ordinal=!1;f.call(this,d,a);if(this.options.breaks){var c=this;c.doPostTranslate=!0;this.val2lin=function(b){var e=
|
||||
b,a,d;for(d=0;d<c.breakArray.length;d++)if(a=c.breakArray[d],a.to<=b)e-=a.len;else if(a.from>=b)break;else if(c.isInBreak(a,b)){e-=b-a.from;break}return e};this.lin2val=function(b){var e,a;for(a=0;a<c.breakArray.length;a++)if(e=c.breakArray[a],e.from>=b)break;else e.to<b?b+=e.len:c.isInBreak(e,b)&&(b+=e.len);return b};this.setExtremes=function(b,c,a,d,f){for(;this.isInAnyBreak(b);)b-=this.closestPointRange;for(;this.isInAnyBreak(c);)c-=this.closestPointRange;n.prototype.setExtremes.call(this,b,c,
|
||||
a,d,f)};this.setAxisTranslation=function(b){n.prototype.setAxisTranslation.call(this,b);var a=c.options.breaks,b=[],d=[],f=0,j,g,k=c.userMin||c.min,l=c.userMax||c.max,i,h;for(h in a)g=a[h],j=g.repeat||Infinity,c.isInBreak(g,k)&&(k+=g.to%j-k%j),c.isInBreak(g,l)&&(l-=l%j-g.from%j);for(h in a){g=a[h];i=g.from;for(j=g.repeat||Infinity;i-j>k;)i-=j;for(;i<k;)i+=j;for(;i<l;i+=j)b.push({value:i,move:"in"}),b.push({value:i+(g.to-g.from),move:"out",size:g.breakSize})}b.sort(function(a,b){return a.value===b.value?
|
||||
(a.move==="in"?0:1)-(b.move==="in"?0:1):a.value-b.value});a=0;i=k;for(h in b){g=b[h];a+=g.move==="in"?1:-1;if(a===1&&g.move==="in")i=g.value;a===0&&(d.push({from:i,to:g.value,len:g.value-i-(g.size||0)}),f+=g.value-i-(g.size||0))}c.breakArray=d;p(c,"afterBreaks");c.transA*=(l-c.min)/(l-k-f);c.min=k;c.max=l}}});o(u.prototype,"generatePoints",function(f){f.apply(this,r(arguments));var d=this.xAxis,a=this.yAxis,c=this.points,b,e=c.length,h=this.options.connectNulls,m;if(d&&a&&(d.options.breaks||a.options.breaks))for(;e--;)if(b=
|
||||
c[e],m=b.y===null&&h===!1,!m&&(d.isInAnyBreak(b.x,!0)||a.isInAnyBreak(b.y,!0)))c.splice(e,1),this.data[e]&&this.data[e].destroyElements()});o(h.seriesTypes.column.prototype,"drawPoints",function(f){f.apply(this);var f=this.points,d=this.yAxis,a=d.breakArray||[],c,b,e,h,m;for(e=0;e<f.length;e++){c=f[e];m=c.stackY||c.y;for(h=0;h<a.length;h++)if(b=a[h],m<b.from)break;else m>b.to?p(d,"pointBreak",{point:c,brk:b}):p(d,"pointInBreak",{point:c,brk:b})}})})(Highcharts);
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
Highcharts JS v4.1.7 (2015-06-26)
|
||||
Data module
|
||||
|
||||
(c) 2012-2014 Torstein Honsi
|
||||
|
||||
License: www.highcharts.com/license
|
||||
*/
|
||||
(function(g){var k=g.each,t=g.pick,r=HighchartsAdapter.inArray,u=g.splat,j,p=function(b,a){this.init(b,a)};g.extend(p.prototype,{init:function(b,a){this.options=b;this.chartOptions=a;this.columns=b.columns||this.rowsToColumns(b.rows)||[];this.firstRowAsNames=t(b.firstRowAsNames,!0);this.decimalRegex=b.decimalPoint&&RegExp("^([0-9]+)"+b.decimalPoint+"([0-9]+)$");this.rawColumns=[];this.columns.length?this.dataFound():(this.parseCSV(),this.parseTable(),this.parseGoogleSpreadsheet())},getColumnDistribution:function(){var b=
|
||||
this.chartOptions,a=this.options,e=[],f=function(b){return(g.seriesTypes[b||"line"].prototype.pointArrayMap||[0]).length},d=b&&b.chart&&b.chart.type,c=[],h=[],n=0,i;k(b&&b.series||[],function(b){c.push(f(b.type||d))});k(a&&a.seriesMapping||[],function(b){e.push(b.x||0)});e.length===0&&e.push(0);k(a&&a.seriesMapping||[],function(a){var e=new j,o,q=c[n]||f(d),m=g.seriesTypes[((b&&b.series||[])[n]||{}).type||d||"line"].prototype.pointArrayMap||["y"];e.addColumnReader(a.x,"x");for(o in a)a.hasOwnProperty(o)&&
|
||||
o!=="x"&&e.addColumnReader(a[o],o);for(i=0;i<q;i++)e.hasReader(m[i])||e.addColumnReader(void 0,m[i]);h.push(e);n++});a=g.seriesTypes[d||"line"].prototype.pointArrayMap;a===void 0&&(a=["y"]);this.valueCount={global:f(d),xColumns:e,individual:c,seriesBuilders:h,globalPointArrayMap:a}},dataFound:function(){if(this.options.switchRowsAndColumns)this.columns=this.rowsToColumns(this.columns);this.getColumnDistribution();this.parseTypes();this.parsed()!==!1&&this.complete()},parseCSV:function(){var b=this,
|
||||
a=this.options,e=a.csv,f=this.columns,d=a.startRow||0,c=a.endRow||Number.MAX_VALUE,h=a.startColumn||0,n=a.endColumn||Number.MAX_VALUE,i,g,s=0;e&&(g=e.replace(/\r\n/g,"\n").replace(/\r/g,"\n").split(a.lineDelimiter||"\n"),i=a.itemDelimiter||(e.indexOf("\t")!==-1?"\t":","),k(g,function(a,e){var g=b.trim(a),v=g.indexOf("#")===0;e>=d&&e<=c&&!v&&g!==""&&(g=a.split(i),k(g,function(b,a){a>=h&&a<=n&&(f[a-h]||(f[a-h]=[]),f[a-h][s]=b)}),s+=1)}),this.dataFound())},parseTable:function(){var b=this.options,a=
|
||||
b.table,e=this.columns,f=b.startRow||0,d=b.endRow||Number.MAX_VALUE,c=b.startColumn||0,h=b.endColumn||Number.MAX_VALUE;a&&(typeof a==="string"&&(a=document.getElementById(a)),k(a.getElementsByTagName("tr"),function(b,a){a>=f&&a<=d&&k(b.children,function(b,d){if((b.tagName==="TD"||b.tagName==="TH")&&d>=c&&d<=h)e[d-c]||(e[d-c]=[]),e[d-c][a-f]=b.innerHTML})}),this.dataFound())},parseGoogleSpreadsheet:function(){var b=this,a=this.options,e=a.googleSpreadsheetKey,f=this.columns,d=a.startRow||0,c=a.endRow||
|
||||
Number.MAX_VALUE,h=a.startColumn||0,n=a.endColumn||Number.MAX_VALUE,i,g;e&&jQuery.ajax({dataType:"json",url:"https://spreadsheets.google.com/feeds/cells/"+e+"/"+(a.googleSpreadsheetWorksheet||"od6")+"/public/values?alt=json-in-script&callback=?",error:a.error,success:function(a){var a=a.feed.entry,e,k=a.length,m=0,j=0,l;for(l=0;l<k;l++)e=a[l],m=Math.max(m,e.gs$cell.col),j=Math.max(j,e.gs$cell.row);for(l=0;l<m;l++)if(l>=h&&l<=n)f[l-h]=[],f[l-h].length=Math.min(j,c-d);for(l=0;l<k;l++)if(e=a[l],i=e.gs$cell.row-
|
||||
1,g=e.gs$cell.col-1,g>=h&&g<=n&&i>=d&&i<=c)f[g-h][i-d]=e.content.$t;b.dataFound()}})},trim:function(b,a){typeof b==="string"&&(b=b.replace(/^\s+|\s+$/g,""),a&&/^[0-9\s]+$/.test(b)&&(b=b.replace(/\s/g,"")),this.decimalRegex&&(b=b.replace(this.decimalRegex,"$1.$2")));return b},parseTypes:function(){for(var b=this.columns,a=b.length;a--;)this.parseColumn(b[a],a)},parseColumn:function(b,a){var e=this.rawColumns,f=this.columns,d=b.length,c,h,g,i,k=this.firstRowAsNames,j=r(a,this.valueCount.xColumns)!==
|
||||
-1,o=[],q=this.chartOptions,m,p=(this.options.columnTypes||[])[a],q=j&&(q&&q.xAxis&&u(q.xAxis)[0].type==="category"||p==="string");for(e[a]||(e[a]=[]);d--;)if(c=o[d]||b[d],g=this.trim(c),i=this.trim(c,!0),h=parseFloat(i),e[a][d]===void 0&&(e[a][d]=g),q||d===0&&k)b[d]=g;else if(+i===h)b[d]=h,h>31536E6&&p!=="float"?b.isDatetime=!0:b.isNumeric=!0,b[d+1]!==void 0&&(m=h>b[d+1]);else if(h=this.parseDate(c),j&&typeof h==="number"&&!isNaN(h)&&p!=="float"){if(o[d]=c,b[d]=h,b.isDatetime=!0,b[d+1]!==void 0){c=
|
||||
h>b[d+1];if(c!==m&&m!==void 0)this.alternativeFormat?(this.dateFormat=this.alternativeFormat,d=b.length,this.alternativeFormat=this.dateFormats[this.dateFormat].alternative):b.unsorted=!0;m=c}}else if(b[d]=g===""?null:g,d!==0&&(b.isDatetime||b.isNumeric))b.mixed=!0;j&&b.mixed&&(f[a]=e[a]);if(j&&m&&this.options.sort)for(a=0;a<f.length;a++)f[a].reverse(),k&&f[a].unshift(f[a].pop())},dateFormats:{"YYYY-mm-dd":{regex:/^([0-9]{4})[\-\/\.]([0-9]{2})[\-\/\.]([0-9]{2})$/,parser:function(b){return Date.UTC(+b[1],
|
||||
b[2]-1,+b[3])}},"dd/mm/YYYY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,parser:function(b){return Date.UTC(+b[3],b[2]-1,+b[1])},alternative:"mm/dd/YYYY"},"mm/dd/YYYY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,parser:function(b){return Date.UTC(+b[3],b[1]-1,+b[2])}},"dd/mm/YY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/,parser:function(b){return Date.UTC(+b[3]+2E3,b[2]-1,+b[1])},alternative:"mm/dd/YY"},"mm/dd/YY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/,
|
||||
parser:function(b){return Date.UTC(+b[3]+2E3,b[1]-1,+b[2])}}},parseDate:function(b){var a=this.options.parseDate,e,f,d=this.options.dateFormat||this.dateFormat,c;if(a)e=a(b);else if(typeof b==="string"){if(d)a=this.dateFormats[d],(c=b.match(a.regex))&&(e=a.parser(c));else for(f in this.dateFormats)if(a=this.dateFormats[f],c=b.match(a.regex)){this.dateFormat=f;this.alternativeFormat=a.alternative;e=a.parser(c);break}c||(c=Date.parse(b),typeof c==="object"&&c!==null&&c.getTime?e=c.getTime()-c.getTimezoneOffset()*
|
||||
6E4:typeof c==="number"&&!isNaN(c)&&(e=c-(new Date(c)).getTimezoneOffset()*6E4))}return e},rowsToColumns:function(b){var a,e,f,d,c;if(b){c=[];e=b.length;for(a=0;a<e;a++){d=b[a].length;for(f=0;f<d;f++)c[f]||(c[f]=[]),c[f][a]=b[a][f]}}return c},parsed:function(){if(this.options.parsed)return this.options.parsed.call(this,this.columns)},getFreeIndexes:function(b,a){var e,f,d=[],c=[],h;for(f=0;f<b;f+=1)d.push(!0);for(e=0;e<a.length;e+=1){h=a[e].getReferencedColumnIndexes();for(f=0;f<h.length;f+=1)d[h[f]]=
|
||||
!1}for(f=0;f<d.length;f+=1)d[f]&&c.push(f);return c},complete:function(){var b=this.columns,a,e=this.options,f,d,c,h,g=[],i;if(e.complete||e.afterComplete){for(c=0;c<b.length;c++)if(this.firstRowAsNames)b[c].name=b[c].shift();f=[];d=this.getFreeIndexes(b.length,this.valueCount.seriesBuilders);for(c=0;c<this.valueCount.seriesBuilders.length;c++)i=this.valueCount.seriesBuilders[c],i.populateColumns(d)&&g.push(i);for(;d.length>0;){i=new j;i.addColumnReader(0,"x");c=r(0,d);c!==-1&&d.splice(c,1);for(c=
|
||||
0;c<this.valueCount.global;c++)i.addColumnReader(void 0,this.valueCount.globalPointArrayMap[c]);i.populateColumns(d)&&g.push(i)}g.length>0&&g[0].readers.length>0&&(i=b[g[0].readers[0].columnIndex],i!==void 0&&(i.isDatetime?a="datetime":i.isNumeric||(a="category")));if(a==="category")for(c=0;c<g.length;c++){i=g[c];for(d=0;d<i.readers.length;d++)if(i.readers[d].configName==="x")i.readers[d].configName="name"}for(c=0;c<g.length;c++){i=g[c];d=[];for(h=0;h<b[0].length;h++)d[h]=i.read(b,h);f[c]={data:d};
|
||||
if(i.name)f[c].name=i.name;if(a==="category")f[c].turboThreshold=0}b={series:f};if(a)b.xAxis={type:a};e.complete&&e.complete(b);e.afterComplete&&e.afterComplete(b)}}});g.Data=p;g.data=function(b,a){return new p(b,a)};g.wrap(g.Chart.prototype,"init",function(b,a,e){var f=this;a&&a.data?g.data(g.extend(a.data,{afterComplete:function(d){var c,h;if(a.hasOwnProperty("series"))if(typeof a.series==="object")for(c=Math.max(a.series.length,d.series.length);c--;)h=a.series[c]||{},a.series[c]=g.merge(h,d.series[c]);
|
||||
else delete a.series;a=g.merge(d,a);b.call(f,a,e)}}),a):b.call(f,a,e)});j=function(){this.readers=[];this.pointIsArray=!0};j.prototype.populateColumns=function(b){var a=!0;k(this.readers,function(a){if(a.columnIndex===void 0)a.columnIndex=b.shift()});k(this.readers,function(b){b.columnIndex===void 0&&(a=!1)});return a};j.prototype.read=function(b,a){var e=this.pointIsArray,f=e?[]:{},d;k(this.readers,function(c){var d=b[c.columnIndex][a];e?f.push(d):f[c.configName]=d});if(this.name===void 0&&this.readers.length>=
|
||||
2&&(d=this.getReferencedColumnIndexes(),d.length>=2))d.shift(),d.sort(),this.name=b[d.shift()].name;return f};j.prototype.addColumnReader=function(b,a){this.readers.push({columnIndex:b,configName:a});if(!(a==="x"||a==="y"||a===void 0))this.pointIsArray=!1};j.prototype.getReferencedColumnIndexes=function(){var b,a=[],e;for(b=0;b<this.readers.length;b+=1)e=this.readers[b],e.columnIndex!==void 0&&a.push(e.columnIndex);return a};j.prototype.hasReader=function(b){var a,e;for(a=0;a<this.readers.length;a+=
|
||||
1)if(e=this.readers[a],e.configName===b)return!0}})(Highcharts);
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
(function(f){function A(b,a,c){var d;!a.rgba.length||!b.rgba.length?b=a.raw||"none":(b=b.rgba,a=a.rgba,d=a[3]!==1||b[3]!==1,b=(d?"rgba(":"rgb(")+Math.round(a[0]+(b[0]-a[0])*(1-c))+","+Math.round(a[1]+(b[1]-a[1])*(1-c))+","+Math.round(a[2]+(b[2]-a[2])*(1-c))+(d?","+(a[3]+(b[3]-a[3])*(1-c)):"")+")");return b}var t=function(){},q=f.getOptions(),h=f.each,l=f.extend,B=f.format,u=f.pick,r=f.wrap,m=f.Chart,p=f.seriesTypes,v=p.pie,n=p.column,w=f.Tick,x=HighchartsAdapter.fireEvent,y=HighchartsAdapter.inArray,
|
||||
z=1;h(["fill","stroke"],function(b){HighchartsAdapter.addAnimSetter(b,function(a){a.elem.attr(b,A(f.Color(a.start),f.Color(a.end),a.pos))})});l(q.lang,{drillUpText:"◁ Back to {series.name}"});q.drilldown={activeAxisLabelStyle:{cursor:"pointer",color:"#0d233a",fontWeight:"bold",textDecoration:"underline"},activeDataLabelStyle:{cursor:"pointer",color:"#0d233a",fontWeight:"bold",textDecoration:"underline"},animation:{duration:500},drillUpButton:{position:{align:"right",x:-10,y:10}}};f.SVGRenderer.prototype.Element.prototype.fadeIn=
|
||||
function(b){this.attr({opacity:0.1,visibility:"inherit"}).animate({opacity:u(this.newOpacity,1)},b||{duration:250})};m.prototype.addSeriesAsDrilldown=function(b,a){this.addSingleSeriesAsDrilldown(b,a);this.applyDrilldown()};m.prototype.addSingleSeriesAsDrilldown=function(b,a){var c=b.series,d=c.xAxis,g=c.yAxis,e;e=b.color||c.color;var i,f=[],j=[],k,o;if(!this.drilldownLevels)this.drilldownLevels=[];k=c.options._levelNumber||0;(o=this.drilldownLevels[this.drilldownLevels.length-1])&&o.levelNumber!==
|
||||
k&&(o=void 0);a=l({color:e,_ddSeriesId:z++},a);i=y(b,c.points);h(c.chart.series,function(a){if(a.xAxis===d&&!a.isDrilling)a.options._ddSeriesId=a.options._ddSeriesId||z++,a.options._colorIndex=a.userOptions._colorIndex,a.options._levelNumber=a.options._levelNumber||k,o?(f=o.levelSeries,j=o.levelSeriesOptions):(f.push(a),j.push(a.options))});e={levelNumber:k,seriesOptions:c.options,levelSeriesOptions:j,levelSeries:f,shapeArgs:b.shapeArgs,bBox:b.graphic?b.graphic.getBBox():{},color:e,lowerSeriesOptions:a,
|
||||
pointOptions:c.options.data[i],pointIndex:i,oldExtremes:{xMin:d&&d.userMin,xMax:d&&d.userMax,yMin:g&&g.userMin,yMax:g&&g.userMax}};this.drilldownLevels.push(e);e=e.lowerSeries=this.addSeries(a,!1);e.options._levelNumber=k+1;if(d)d.oldPos=d.pos,d.userMin=d.userMax=null,g.userMin=g.userMax=null;if(c.type===e.type)e.animate=e.animateDrilldown||t,e.options.animation=!0};m.prototype.applyDrilldown=function(){var b=this.drilldownLevels,a;if(b&&b.length>0)a=b[b.length-1].levelNumber,h(this.drilldownLevels,
|
||||
function(b){b.levelNumber===a&&h(b.levelSeries,function(b){b.options&&b.options._levelNumber===a&&b.remove(!1)})});this.redraw();this.showDrillUpButton()};m.prototype.getDrilldownBackText=function(){var b=this.drilldownLevels;if(b&&b.length>0)return b=b[b.length-1],b.series=b.seriesOptions,B(this.options.lang.drillUpText,b)};m.prototype.showDrillUpButton=function(){var b=this,a=this.getDrilldownBackText(),c=b.options.drilldown.drillUpButton,d,g;this.drillUpButton?this.drillUpButton.attr({text:a}).align():
|
||||
(g=(d=c.theme)&&d.states,this.drillUpButton=this.renderer.button(a,null,null,function(){b.drillUp()},d,g&&g.hover,g&&g.select).attr({align:c.position.align,zIndex:9}).add().align(c.position,!1,c.relativeTo||"plotBox"))};m.prototype.drillUp=function(){for(var b=this,a=b.drilldownLevels,c=a[a.length-1].levelNumber,d=a.length,g=b.series,e,i,f,j,k=function(a){var c;h(g,function(b){b.options._ddSeriesId===a._ddSeriesId&&(c=b)});c=c||b.addSeries(a,!1);if(c.type===f.type&&c.animateDrillupTo)c.animate=c.animateDrillupTo;
|
||||
a===i.seriesOptions&&(j=c)};d--;)if(i=a[d],i.levelNumber===c){a.pop();f=i.lowerSeries;if(!f.chart)for(e=g.length;e--;)if(g[e].options.id===i.lowerSeriesOptions.id&&g[e].options._levelNumber===c+1){f=g[e];break}f.xData=[];h(i.levelSeriesOptions,k);x(b,"drillup",{seriesOptions:i.seriesOptions});if(j.type===f.type)j.drilldownLevel=i,j.options.animation=b.options.drilldown.animation,f.animateDrillupFrom&&f.chart&&f.animateDrillupFrom(i);j.options._levelNumber=c;f.remove(!1);if(j.xAxis)e=i.oldExtremes,
|
||||
j.xAxis.setExtremes(e.xMin,e.xMax,!1),j.yAxis.setExtremes(e.yMin,e.yMax,!1)}this.redraw();this.drilldownLevels.length===0?this.drillUpButton=this.drillUpButton.destroy():this.drillUpButton.attr({text:this.getDrilldownBackText()}).align();this.ddDupes.length=[]};n.prototype.supportsDrilldown=!0;n.prototype.animateDrillupTo=function(b){if(!b){var a=this,c=a.drilldownLevel;h(this.points,function(a){a.graphic&&a.graphic.hide();a.dataLabel&&a.dataLabel.hide();a.connector&&a.connector.hide()});setTimeout(function(){a.points&&
|
||||
h(a.points,function(a,b){var e=b===(c&&c.pointIndex)?"show":"fadeIn",f=e==="show"?!0:void 0;if(a.graphic)a.graphic[e](f);if(a.dataLabel)a.dataLabel[e](f);if(a.connector)a.connector[e](f)})},Math.max(this.chart.options.drilldown.animation.duration-50,0));this.animate=t}};n.prototype.animateDrilldown=function(b){var a=this,c=this.chart.drilldownLevels,d,g=this.chart.options.drilldown.animation,e=this.xAxis;if(!b)h(c,function(b){if(a.options._ddSeriesId===b.lowerSeriesOptions._ddSeriesId)d=b.shapeArgs,
|
||||
d.fill=b.color}),d.x+=u(e.oldPos,e.pos)-e.pos,h(this.points,function(a){a.graphic&&a.graphic.attr(d).animate(l(a.shapeArgs,{fill:a.color}),g);a.dataLabel&&a.dataLabel.fadeIn(g)}),this.animate=null};n.prototype.animateDrillupFrom=function(b){var a=this.chart.options.drilldown.animation,c=this.group,d=this;h(d.trackerGroups,function(a){if(d[a])d[a].on("mouseover")});delete this.group;h(this.points,function(d){var e=d.graphic,i=function(){e.destroy();c&&(c=c.destroy())};e&&(delete d.graphic,a?e.animate(l(b.shapeArgs,
|
||||
{fill:b.color}),f.merge(a,{complete:i})):(e.attr(b.shapeArgs),i()))})};v&&l(v.prototype,{supportsDrilldown:!0,animateDrillupTo:n.prototype.animateDrillupTo,animateDrillupFrom:n.prototype.animateDrillupFrom,animateDrilldown:function(b){var a=this.chart.drilldownLevels[this.chart.drilldownLevels.length-1],c=this.chart.options.drilldown.animation,d=a.shapeArgs,g=d.start,e=(d.end-g)/this.points.length;if(!b)h(this.points,function(b,h){b.graphic.attr(f.merge(d,{start:g+h*e,end:g+(h+1)*e,fill:a.color}))[c?
|
||||
"animate":"attr"](l(b.shapeArgs,{fill:b.color}),c)}),this.animate=null}});f.Point.prototype.doDrilldown=function(b,a){var c=this.series.chart,d=c.options.drilldown,f=(d.series||[]).length,e;if(!c.ddDupes)c.ddDupes=[];for(;f--&&!e;)d.series[f].id===this.drilldown&&y(this.drilldown,c.ddDupes)===-1&&(e=d.series[f],c.ddDupes.push(this.drilldown));x(c,"drilldown",{point:this,seriesOptions:e,category:a,points:a!==void 0&&this.series.xAxis.ddPoints[a].slice(0)});e&&(b?c.addSingleSeriesAsDrilldown(this,e):
|
||||
c.addSeriesAsDrilldown(this,e))};f.Axis.prototype.drilldownCategory=function(b){var a,c,d=this.ddPoints[b];for(a in d)(c=d[a])&&c.series&&c.series.visible&&c.doDrilldown&&c.doDrilldown(!0,b);this.chart.applyDrilldown()};f.Axis.prototype.getDDPoints=function(b,a){var c=this.ddPoints;if(!c)this.ddPoints=c={};c[b]||(c[b]=[]);if(c[b].levelNumber!==a)c[b].length=0;return c[b]};w.prototype.drillable=function(){var b=this.pos,a=this.label,c=this.axis,d=c.ddPoints&&c.ddPoints[b];if(a&&d&&d.length){if(!a.basicStyles)a.basicStyles=
|
||||
f.merge(a.styles);a.addClass("highcharts-drilldown-axis-label").css(c.chart.options.drilldown.activeAxisLabelStyle).on("click",function(){c.drilldownCategory(b)})}else if(a&&a.basicStyles)a.styles={},a.css(a.basicStyles),a.on("click",null)};r(w.prototype,"addLabel",function(b){b.call(this);this.drillable()});r(f.Point.prototype,"init",function(b,a,c,d){var g=b.call(this,a,c,d),b=(c=a.xAxis)&&c.ticks[d],c=c&&c.getDDPoints(d,a.options._levelNumber);if(g.drilldown&&(f.addEvent(g,"click",function(){a.xAxis&&
|
||||
a.chart.options.drilldown.allowPointDrilldown===!1?a.xAxis.drilldownCategory(d):g.doDrilldown()}),c))c.push(g),c.levelNumber=a.options._levelNumber;b&&b.drillable();return g});r(f.Series.prototype,"drawDataLabels",function(b){var a=this.chart.options.drilldown.activeDataLabelStyle;b.call(this);h(this.points,function(b){b.drilldown&&b.dataLabel&&b.dataLabel.attr({"class":"highcharts-drilldown-data-label"}).css(a)})});var s,q=function(b){b.call(this);h(this.points,function(a){a.drilldown&&a.graphic&&
|
||||
a.graphic.attr({"class":"highcharts-drilldown-point"}).css({cursor:"pointer"})})};for(s in p)p[s].prototype.supportsDrilldown&&r(p[s].prototype,"drawTracker",q)})(Highcharts);
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
|
||||
Highcharts funnel module
|
||||
|
||||
(c) 2010-2014 Torstein Honsi
|
||||
|
||||
License: www.highcharts.com/license
|
||||
*/
|
||||
(function(c){var q=c.getOptions(),w=q.plotOptions,r=c.seriesTypes,G=c.merge,F=function(){},C=c.each,x=c.pick;w.funnel=G(w.pie,{animation:!1,center:["50%","50%"],width:"90%",neckWidth:"30%",height:"100%",neckHeight:"25%",reversed:!1,dataLabels:{connectorWidth:1,connectorColor:"#606060"},size:!0,states:{select:{color:"#C0C0C0",borderColor:"#000000",shadow:!1}}});r.funnel=c.extendClass(r.pie,{type:"funnel",animate:F,translate:function(){var a=function(b,a){return/%$/.test(b)?a*parseInt(b,10)/100:parseInt(b,
|
||||
10)},D=0,f=this.chart,d=this.options,c=d.reversed,n=d.ignoreHiddenPoint,g=f.plotWidth,h=f.plotHeight,q=0,f=d.center,i=a(f[0],g),r=a(f[1],h),w=a(d.width,g),k,s,e=a(d.height,h),t=a(d.neckWidth,g),u=a(d.neckHeight,h),y=e-u,a=this.data,z,A,x=d.dataLabels.position==="left"?1:0,B,l,E,p,j,v,m;this.getWidthAt=s=function(b){return b>e-u||e===u?t:t+(w-t)*((e-u-b)/(e-u))};this.getX=function(b,a){return i+(a?-1:1)*(s(c?h-b:b)/2+d.dataLabels.distance)};this.center=[i,r,e];this.centerX=i;C(a,function(b){if(!n||
|
||||
b.visible!==!1)D+=b.y});C(a,function(b){m=null;A=D?b.y/D:0;l=r-e/2+q*e;j=l+A*e;k=s(l);B=i-k/2;E=B+k;k=s(j);p=i-k/2;v=p+k;l>y?(B=p=i-t/2,E=v=i+t/2):j>y&&(m=j,k=s(y),p=i-k/2,v=p+k,j=y);c&&(l=e-l,j=e-j,m=m?e-m:null);z=["M",B,l,"L",E,l,v,j];m&&z.push(v,m,p,m);z.push(p,j,"Z");b.shapeType="path";b.shapeArgs={d:z};b.percentage=A*100;b.plotX=i;b.plotY=(l+(m||j))/2;b.tooltipPos=[i,b.plotY];b.slice=F;b.half=x;if(!n||b.visible!==!1)q+=A})},drawPoints:function(){var a=this,c=a.options,f=a.chart.renderer;C(a.data,
|
||||
function(d){var o=d.options,n=d.graphic,g=d.shapeArgs;n?n.animate(g):d.graphic=f.path(g).attr({fill:d.color,stroke:x(o.borderColor,c.borderColor),"stroke-width":x(o.borderWidth,c.borderWidth)}).add(a.group)})},sortByAngle:function(a){a.sort(function(a,c){return a.plotY-c.plotY})},drawDataLabels:function(){var a=this.data,c=this.options.dataLabels.distance,f,d,o,n=a.length,g,h;for(this.center[2]-=2*c;n--;)o=a[n],d=(f=o.half)?1:-1,h=o.plotY,g=this.getX(h,f),o.labelPos=[0,h,g+(c-5)*d,h,g+c*d,h,f?"right":
|
||||
"left",0];r.pie.prototype.drawDataLabels.call(this)}});q.plotOptions.pyramid=c.merge(q.plotOptions.funnel,{neckWidth:"0%",neckHeight:"0%",reversed:!0});c.seriesTypes.pyramid=c.extendClass(c.seriesTypes.funnel,{type:"pyramid"})})(Highcharts);
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
Highcharts JS v4.1.7 (2015-06-26)
|
||||
|
||||
(c) 2011-2014 Torstein Honsi
|
||||
|
||||
License: www.highcharts.com/license
|
||||
*/
|
||||
(function(h){var n=h.Axis,r=h.Chart,k=h.Color,x=h.Legend,t=h.LegendSymbolMixin,u=h.Series,v=h.getOptions(),i=h.each,s=h.extend,y=h.extendClass,l=h.merge,m=h.pick,p=h.seriesTypes,w=h.wrap,o=function(){},q=h.ColorAxis=function(){this.isColorAxis=!0;this.init.apply(this,arguments)};s(q.prototype,n.prototype);s(q.prototype,{defaultColorAxisOptions:{lineWidth:0,gridLineWidth:1,tickPixelInterval:72,startOnTick:!0,endOnTick:!0,offset:0,marker:{animation:{duration:50},color:"gray",width:0.01},labels:{overflow:"justify"},
|
||||
minColor:"#EFEFFF",maxColor:"#003875",tickLength:5},init:function(a,b){var d=a.options.legend.layout!=="vertical",c;c=l(this.defaultColorAxisOptions,{side:d?2:1,reversed:!d},b,{isX:d,opposite:!d,showEmpty:!1,title:null,isColor:!0});n.prototype.init.call(this,a,c);b.dataClasses&&this.initDataClasses(b);this.initStops(b);this.isXAxis=!0;this.horiz=d;this.zoomEnabled=!1},tweenColors:function(a,b,d){var c;!b.rgba.length||!a.rgba.length?a=b.raw||"none":(a=a.rgba,b=b.rgba,c=b[3]!==1||a[3]!==1,a=(c?"rgba(":
|
||||
"rgb(")+Math.round(b[0]+(a[0]-b[0])*(1-d))+","+Math.round(b[1]+(a[1]-b[1])*(1-d))+","+Math.round(b[2]+(a[2]-b[2])*(1-d))+(c?","+(b[3]+(a[3]-b[3])*(1-d)):"")+")");return a},initDataClasses:function(a){var b=this,d=this.chart,c,e=0,f=this.options,g=a.dataClasses.length;this.dataClasses=c=[];this.legendItems=[];i(a.dataClasses,function(a,h){var i,a=l(a);c.push(a);if(!a.color)f.dataClassColor==="category"?(i=d.options.colors,a.color=i[e++],e===i.length&&(e=0)):a.color=b.tweenColors(k(f.minColor),k(f.maxColor),
|
||||
g<2?0.5:h/(g-1))})},initStops:function(a){this.stops=a.stops||[[0,this.options.minColor],[1,this.options.maxColor]];i(this.stops,function(a){a.color=k(a[1])})},setOptions:function(a){n.prototype.setOptions.call(this,a);this.options.crosshair=this.options.marker;this.coll="colorAxis"},setAxisSize:function(){var a=this.legendSymbol,b=this.chart,d,c,e;if(a)this.left=d=a.attr("x"),this.top=c=a.attr("y"),this.width=e=a.attr("width"),this.height=a=a.attr("height"),this.right=b.chartWidth-d-e,this.bottom=
|
||||
b.chartHeight-c-a,this.len=this.horiz?e:a,this.pos=this.horiz?d:c},toColor:function(a,b){var d,c=this.stops,e,f=this.dataClasses,g,j;if(f)for(j=f.length;j--;){if(g=f[j],e=g.from,c=g.to,(e===void 0||a>=e)&&(c===void 0||a<=c)){d=g.color;if(b)b.dataClass=j;break}}else{this.isLog&&(a=this.val2lin(a));d=1-(this.max-a)/(this.max-this.min||1);for(j=c.length;j--;)if(d>c[j][0])break;e=c[j]||c[j+1];c=c[j+1]||e;d=1-(c[0]-d)/(c[0]-e[0]||1);d=this.tweenColors(e.color,c.color,d)}return d},getOffset:function(){var a=
|
||||
this.legendGroup,b=this.chart.axisOffset[this.side];if(a){n.prototype.getOffset.call(this);if(!this.axisGroup.parentGroup)this.axisGroup.add(a),this.gridGroup.add(a),this.labelGroup.add(a),this.added=!0,this.labelLeft=0,this.labelRight=this.width;this.chart.axisOffset[this.side]=b}},setLegendColor:function(){var a,b=this.options;a=this.reversed;a=this.horiz?[+a,0,+!a,0]:[0,+!a,0,+a];this.legendColor={linearGradient:{x1:a[0],y1:a[1],x2:a[2],y2:a[3]},stops:b.stops||[[0,b.minColor],[1,b.maxColor]]}},
|
||||
drawLegendSymbol:function(a,b){var d=a.padding,c=a.options,e=this.horiz,f=m(c.symbolWidth,e?200:12),g=m(c.symbolHeight,e?12:200),j=m(c.labelPadding,e?16:30),c=m(c.itemDistance,10);this.setLegendColor();b.legendSymbol=this.chart.renderer.rect(0,a.baseline-11,f,g).attr({zIndex:1}).add(b.legendGroup);b.legendSymbol.getBBox();this.legendItemWidth=f+d+(e?c:j);this.legendItemHeight=g+d+(e?j:0)},setState:o,visible:!0,setVisible:o,getSeriesExtremes:function(){var a;if(this.series.length)a=this.series[0],
|
||||
this.dataMin=a.valueMin,this.dataMax=a.valueMax},drawCrosshair:function(a,b){var d=b&&b.plotX,c=b&&b.plotY,e,f=this.pos,g=this.len;if(b)e=this.toPixels(b[b.series.colorKey]),e<f?e=f-2:e>f+g&&(e=f+g+2),b.plotX=e,b.plotY=this.len-e,n.prototype.drawCrosshair.call(this,a,b),b.plotX=d,b.plotY=c,this.cross&&this.cross.attr({fill:this.crosshair.color}).add(this.legendGroup)},getPlotLinePath:function(a,b,d,c,e){return typeof e==="number"?this.horiz?["M",e-4,this.top-6,"L",e+4,this.top-6,e,this.top,"Z"]:["M",
|
||||
this.left,e,"L",this.left-6,e+6,this.left-6,e-6,"Z"]:n.prototype.getPlotLinePath.call(this,a,b,d,c)},update:function(a,b){var d=this.chart,c=d.legend;i(this.series,function(a){a.isDirtyData=!0});if(a.dataClasses)i(c.allItems,function(a){a.isDataClass&&a.legendGroup.destroy()}),d.isDirtyLegend=!0;d.options[this.coll]=l(this.userOptions,a);n.prototype.update.call(this,a,b);this.legendItem&&(this.setLegendColor(),c.colorizeItem(this,!0))},getDataClassLegendSymbols:function(){var a=this,b=this.chart,
|
||||
d=this.legendItems,c=b.options.legend,e=c.valueDecimals,f=c.valueSuffix||"",g;d.length||i(this.dataClasses,function(c,n){var k=!0,l=c.from,m=c.to;g="";l===void 0?g="< ":m===void 0&&(g="> ");l!==void 0&&(g+=h.numberFormat(l,e)+f);l!==void 0&&m!==void 0&&(g+=" - ");m!==void 0&&(g+=h.numberFormat(m,e)+f);d.push(s({chart:b,name:g,options:{},drawLegendSymbol:t.drawRectangle,visible:!0,setState:o,isDataClass:!0,setVisible:function(){k=this.visible=!k;i(a.series,function(a){i(a.points,function(a){a.dataClass===
|
||||
n&&a.setVisible(k)})});b.legend.colorizeItem(this,k)}},c))});return d},name:""});i(["fill","stroke"],function(a){HighchartsAdapter.addAnimSetter(a,function(b){b.elem.attr(a,q.prototype.tweenColors(k(b.start),k(b.end),b.pos))})});w(r.prototype,"getAxes",function(a){var b=this.options.colorAxis;a.call(this);this.colorAxis=[];b&&new q(this,b)});w(x.prototype,"getAllItems",function(a){var b=[],d=this.chart.colorAxis[0];d&&(d.options.dataClasses?b=b.concat(d.getDataClassLegendSymbols()):b.push(d),i(d.series,
|
||||
function(a){a.options.showInLegend=!1}));return b.concat(a.call(this))});r={pointAttrToOptions:{stroke:"borderColor","stroke-width":"borderWidth",fill:"color",dashstyle:"dashStyle"},pointArrayMap:["value"],axisTypes:["xAxis","yAxis","colorAxis"],optionalAxis:"colorAxis",trackerGroups:["group","markerGroup","dataLabelsGroup"],getSymbol:o,parallelArrays:["x","y","value"],colorKey:"value",translateColors:function(){var a=this,b=this.options.nullColor,d=this.colorAxis,c=this.colorKey;i(this.data,function(e){var f=
|
||||
e[c];if(f=f===null?b:d&&f!==void 0?d.toColor(f,e):e.color||a.color)e.color=f})}};v.plotOptions.heatmap=l(v.plotOptions.scatter,{animation:!1,borderWidth:0,nullColor:"#F8F8F8",dataLabels:{formatter:function(){return this.point.value},inside:!0,verticalAlign:"middle",crop:!1,overflow:!1,padding:0},marker:null,pointRange:null,tooltip:{pointFormat:"{point.x}, {point.y}: {point.value}<br/>"},states:{normal:{animation:!0},hover:{halo:!1,brightness:0.2}}});p.heatmap=y(p.scatter,l(r,{type:"heatmap",pointArrayMap:["y",
|
||||
"value"],hasPointSpecificOptions:!0,supportsDrilldown:!0,getExtremesFromAll:!0,directTouch:!0,init:function(){var a;p.scatter.prototype.init.apply(this,arguments);a=this.options;this.pointRange=a.pointRange=m(a.pointRange,a.colsize||1);this.yAxis.axisPointRange=a.rowsize||1},translate:function(){var a=this.options,b=this.xAxis,d=this.yAxis;this.generatePoints();i(this.points,function(c){var e=(a.colsize||1)/2,f=(a.rowsize||1)/2,g=Math.round(b.len-b.translate(c.x-e,0,1,0,1)),e=Math.round(b.len-b.translate(c.x+
|
||||
e,0,1,0,1)),h=Math.round(d.translate(c.y-f,0,1,0,1)),f=Math.round(d.translate(c.y+f,0,1,0,1));c.plotX=c.clientX=(g+e)/2;c.plotY=(h+f)/2;c.shapeType="rect";c.shapeArgs={x:Math.min(g,e),y:Math.min(h,f),width:Math.abs(e-g),height:Math.abs(f-h)}});this.translateColors();this.chart.hasRendered&&i(this.points,function(a){a.shapeArgs.fill=a.options.color||a.color})},drawPoints:p.column.prototype.drawPoints,animate:o,getBox:o,drawLegendSymbol:t.drawRectangle,getExtremes:function(){u.prototype.getExtremes.call(this,
|
||||
this.valueData);this.valueMin=this.dataMin;this.valueMax=this.dataMax;u.prototype.getExtremes.call(this)}}))})(Highcharts);
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
/*
|
||||
Highcharts JS v4.1.7 (2015-06-26)
|
||||
|
||||
(c) 2009-2013 Torstein Hønsi
|
||||
|
||||
License: www.highcharts.com/license
|
||||
*/
|
||||
(function(d){function n(c,a,b){var e,f,g=a.options.chart.options3d,i=!1;b?(i=a.inverted,b=a.plotWidth/2,a=a.plotHeight/2,e=g.depth/2,f=y(g.depth,1)*y(g.viewDistance,0)):(b=a.plotLeft+a.plotWidth/2,a=a.plotTop+a.plotHeight/2,e=g.depth/2,f=y(g.depth,1)*y(g.viewDistance,0));var j=[],h=b,k=a,v=e,p=f,b=x*(i?g.beta:-g.beta),g=x*(i?-g.alpha:g.alpha),q=l(b),s=m(b),t=l(g),u=m(g),w,B,r,n,o,z;d.each(c,function(a){w=(i?a.y:a.x)-h;B=(i?a.x:a.y)-k;r=(a.z||0)-v;n=s*w-q*r;o=-q*t*w-s*t*r+u*B;z=q*u*w+s*u*r+t*B;p>0&&
|
||||
p<Number.POSITIVE_INFINITY&&(n*=p/(z+v+p),o*=p/(z+v+p));n+=h;o+=k;z+=v;j.push({x:i?o:n,y:i?n:o,z:z})});return j}function o(c){return c!==void 0&&c!==null}function E(c){var a=0,b,e;for(b=0;b<c.length;b++)e=(b+1)%c.length,a+=c[b].x*c[e].y-c[e].x*c[b].y;return a/2}function C(c){var a=0,b;for(b=0;b<c.length;b++)a+=c[b].z;return c.length?a/c.length:0}function r(c,a,b,e,f,g,d,j){var h=[];return g>f&&g-f>q/2+1.0E-4?(h=h.concat(r(c,a,b,e,f,f+q/2,d,j)),h=h.concat(r(c,a,b,e,f+q/2,g,d,j))):g<f&&f-g>q/2+1.0E-4?
|
||||
(h=h.concat(r(c,a,b,e,f,f-q/2,d,j)),h=h.concat(r(c,a,b,e,f-q/2,g,d,j))):(h=g-f,["C",c+b*m(f)-b*A*h*l(f)+d,a+e*l(f)+e*A*h*m(f)+j,c+b*m(g)+b*A*h*l(g)+d,a+e*l(g)-e*A*h*m(g)+j,c+b*m(g)+d,a+e*l(g)+j])}function F(c){if(this.chart.is3d()){var a=this.chart.options.plotOptions.column.grouping;if(a!==void 0&&!a&&this.group.zIndex!==void 0&&!this.zIndexSet)this.group.attr({zIndex:this.group.zIndex*10}),this.zIndexSet=!0;var b=this.options,e=this.options.states;this.borderWidth=b.borderWidth=o(b.edgeWidth)?b.edgeWidth:
|
||||
1;d.each(this.data,function(a){if(a.y!==null)a=a.pointAttr,this.borderColor=d.pick(b.edgeColor,a[""].fill),a[""].stroke=this.borderColor,a.hover.stroke=d.pick(e.hover.edgeColor,this.borderColor),a.select.stroke=d.pick(e.select.edgeColor,this.borderColor)})}c.apply(this,[].slice.call(arguments,1))}var q=Math.PI,x=q/180,l=Math.sin,m=Math.cos,y=d.pick,G=Math.round;d.perspective=n;var A=4*(Math.sqrt(2)-1)/3/(q/2);d.SVGRenderer.prototype.toLinePath=function(c,a){var b=[];d.each(c,function(a){b.push("L",
|
||||
a.x,a.y)});c.length&&(b[0]="M",a&&b.push("Z"));return b};d.SVGRenderer.prototype.cuboid=function(c){var a=this.g(),c=this.cuboidPath(c);a.front=this.path(c[0]).attr({zIndex:c[3],"stroke-linejoin":"round"}).add(a);a.top=this.path(c[1]).attr({zIndex:c[4],"stroke-linejoin":"round"}).add(a);a.side=this.path(c[2]).attr({zIndex:c[5],"stroke-linejoin":"round"}).add(a);a.fillSetter=function(a){var c=d.Color(a).brighten(0.1).get(),f=d.Color(a).brighten(-0.1).get();this.front.attr({fill:a});this.top.attr({fill:c});
|
||||
this.side.attr({fill:f});this.color=a;return this};a.opacitySetter=function(a){this.front.attr({opacity:a});this.top.attr({opacity:a});this.side.attr({opacity:a});return this};a.attr=function(a){a.shapeArgs||o(a.x)?(a=this.renderer.cuboidPath(a.shapeArgs||a),this.front.attr({d:a[0],zIndex:a[3]}),this.top.attr({d:a[1],zIndex:a[4]}),this.side.attr({d:a[2],zIndex:a[5]})):d.SVGElement.prototype.attr.call(this,a);return this};a.animate=function(a,c,f){o(a.x)&&o(a.y)?(a=this.renderer.cuboidPath(a),this.front.attr({zIndex:a[3]}).animate({d:a[0]},
|
||||
c,f),this.top.attr({zIndex:a[4]}).animate({d:a[1]},c,f),this.side.attr({zIndex:a[5]}).animate({d:a[2]},c,f)):a.opacity?(this.front.animate(a,c,f),this.top.animate(a,c,f),this.side.animate(a,c,f)):d.SVGElement.prototype.animate.call(this,a,c,f);return this};a.destroy=function(){this.front.destroy();this.top.destroy();this.side.destroy();return null};a.attr({zIndex:-c[3]});return a};d.SVGRenderer.prototype.cuboidPath=function(c){var a=c.x,b=c.y,e=c.z,f=c.height,g=c.width,i=c.depth,j=d.map,h=[{x:a,y:b,
|
||||
z:e},{x:a+g,y:b,z:e},{x:a+g,y:b+f,z:e},{x:a,y:b+f,z:e},{x:a,y:b+f,z:e+i},{x:a+g,y:b+f,z:e+i},{x:a+g,y:b,z:e+i},{x:a,y:b,z:e+i}],h=n(h,d.charts[this.chartIndex],c.insidePlotArea),b=function(a,b){a=j(a,function(a){return h[a]});b=j(b,function(a){return h[a]});return E(a)<0?a:E(b)<0?b:[]},c=b([3,2,1,0],[7,6,5,4]),a=b([1,6,7,0],[4,5,2,3]),b=b([1,2,5,6],[0,7,4,3]);return[this.toLinePath(c,!0),this.toLinePath(a,!0),this.toLinePath(b,!0),C(c),C(a),C(b)]};d.SVGRenderer.prototype.arc3d=function(c){c.alpha*=
|
||||
x;c.beta*=x;var a=this.g(),b=this.arc3dPath(c),e=a.renderer,f=b.zTop*100;a.shapeArgs=c;a.top=e.path(b.top).setRadialReference(c.center).attr({zIndex:b.zTop}).add(a);a.side1=e.path(b.side2).attr({zIndex:b.zSide1});a.side2=e.path(b.side1).attr({zIndex:b.zSide2});a.inn=e.path(b.inn).attr({zIndex:b.zInn});a.out=e.path(b.out).attr({zIndex:b.zOut});a.fillSetter=function(a){this.color=a;var b=d.Color(a).brighten(-0.1).get();this.side1.attr({fill:b});this.side2.attr({fill:b});this.inn.attr({fill:b});this.out.attr({fill:b});
|
||||
this.top.attr({fill:a});return this};a.translateXSetter=function(a){this.out.attr({translateX:a});this.inn.attr({translateX:a});this.side1.attr({translateX:a});this.side2.attr({translateX:a});this.top.attr({translateX:a})};a.translateYSetter=function(a){this.out.attr({translateY:a});this.inn.attr({translateY:a});this.side1.attr({translateY:a});this.side2.attr({translateY:a});this.top.attr({translateY:a})};a.animate=function(a,b,c){o(a.end)||o(a.start)?(this._shapeArgs=this.shapeArgs,d.SVGElement.prototype.animate.call(this,
|
||||
{_args:a},{duration:b,step:function(){var a=arguments[1],b=a.elem,c=b._shapeArgs,e=a.end,a=a.pos,c=d.merge(c,{x:c.x+(e.x-c.x)*a,y:c.y+(e.y-c.y)*a,r:c.r+(e.r-c.r)*a,innerR:c.innerR+(e.innerR-c.innerR)*a,start:c.start+(e.start-c.start)*a,end:c.end+(e.end-c.end)*a}),e=b.renderer.arc3dPath(c);b.shapeArgs=c;b.top.attr({d:e.top,zIndex:e.zTop});b.inn.attr({d:e.inn,zIndex:e.zInn});b.out.attr({d:e.out,zIndex:e.zOut});b.side1.attr({d:e.side1,zIndex:e.zSide1});b.side2.attr({d:e.side2,zIndex:e.zSide2})}},c)):
|
||||
d.SVGElement.prototype.animate.call(this,a,b,c);return this};a.destroy=function(){this.top.destroy();this.out.destroy();this.inn.destroy();this.side1.destroy();this.side2.destroy();d.SVGElement.prototype.destroy.call(this)};a.hide=function(){this.top.hide();this.out.hide();this.inn.hide();this.side1.hide();this.side2.hide()};a.show=function(){this.top.show();this.out.show();this.inn.show();this.side1.show();this.side2.show()};a.zIndex=f;a.attr({zIndex:f});return a};d.SVGRenderer.prototype.arc3dPath=
|
||||
function(c){var a=c.x,b=c.y,e=c.start,d=c.end-1.0E-5,g=c.r,i=c.innerR,j=c.depth,h=c.alpha,k=c.beta,v=m(e),p=l(e),c=m(d),n=l(d),s=g*m(k),t=g*m(h),u=i*m(k);i*=m(h);var w=j*l(k),o=j*l(h),j=["M",a+s*v,b+t*p],j=j.concat(r(a,b,s,t,e,d,0,0)),j=j.concat(["L",a+u*c,b+i*n]),j=j.concat(r(a,b,u,i,d,e,0,0)),j=j.concat(["Z"]),k=k>0?q/2:0,h=h>0?0:q/2,k=e>-k?e:d>-k?-k:e,x=d<q-h?d:e<q-h?q-h:d,h=["M",a+s*m(k),b+t*l(k)],h=h.concat(r(a,b,s,t,k,x,0,0)),h=h.concat(["L",a+s*m(x)+w,b+t*l(x)+o]),h=h.concat(r(a,b,s,t,x,k,
|
||||
w,o)),h=h.concat(["Z"]),k=["M",a+u*v,b+i*p],k=k.concat(r(a,b,u,i,e,d,0,0)),k=k.concat(["L",a+u*m(d)+w,b+i*l(d)+o]),k=k.concat(r(a,b,u,i,d,e,w,o)),k=k.concat(["Z"]),v=["M",a+s*v,b+t*p,"L",a+s*v+w,b+t*p+o,"L",a+u*v+w,b+i*p+o,"L",a+u*v,b+i*p,"Z"],a=["M",a+s*c,b+t*n,"L",a+s*c+w,b+t*n+o,"L",a+u*c+w,b+i*n+o,"L",a+u*c,b+i*n,"Z"],b=l((e+d)/2),e=l(e),d=l(d);return{top:j,zTop:g,out:h,zOut:Math.max(b,e,d)*g,inn:k,zInn:Math.max(b,e,d)*g,side1:v,zSide1:e*g*0.99,side2:a,zSide2:d*g*0.99}};d.Chart.prototype.is3d=
|
||||
function(){return this.options.chart.options3d&&this.options.chart.options3d.enabled};d.wrap(d.Chart.prototype,"isInsidePlot",function(c){return this.is3d()?!0:c.apply(this,[].slice.call(arguments,1))});d.getOptions().chart.options3d={enabled:!1,alpha:0,beta:0,depth:100,viewDistance:25,frame:{bottom:{size:1,color:"rgba(255,255,255,0)"},side:{size:1,color:"rgba(255,255,255,0)"},back:{size:1,color:"rgba(255,255,255,0)"}}};d.wrap(d.Chart.prototype,"init",function(c){var a=[].slice.call(arguments,1),
|
||||
b;if(a[0].chart.options3d&&a[0].chart.options3d.enabled)b=a[0].plotOptions||{},b=b.pie||{},b.borderColor=d.pick(b.borderColor,void 0);c.apply(this,a)});d.wrap(d.Chart.prototype,"setChartSize",function(c){c.apply(this,[].slice.call(arguments,1));if(this.is3d()){var a=this.inverted,b=this.clipBox,d=this.margin;b[a?"y":"x"]=-(d[3]||0);b[a?"x":"y"]=-(d[0]||0);b[a?"height":"width"]=this.chartWidth+(d[3]||0)+(d[1]||0);b[a?"width":"height"]=this.chartHeight+(d[0]||0)+(d[2]||0)}});d.wrap(d.Chart.prototype,
|
||||
"redraw",function(c){if(this.is3d())this.isDirtyBox=!0;c.apply(this,[].slice.call(arguments,1))});d.wrap(d.Chart.prototype,"renderSeries",function(c){var a=this.series.length;if(this.is3d())for(;a--;)c=this.series[a],c.translate(),c.render();else c.call(this)});d.Chart.prototype.retrieveStacks=function(c){var a=this.series,b={},e,f=1;d.each(this.series,function(d){e=c?d.options.stack||0:a.length-1-d.index;b[e]?b[e].series.push(d):(b[e]={series:[d],position:f},f++)});b.totalStacks=f+1;return b};d.wrap(d.Axis.prototype,
|
||||
"init",function(c){var a=arguments;if(a[1].is3d())a[2].tickWidth=d.pick(a[2].tickWidth,0),a[2].gridLineWidth=d.pick(a[2].gridLineWidth,1);c.apply(this,[].slice.call(arguments,1))});d.wrap(d.Axis.prototype,"render",function(c){c.apply(this,[].slice.call(arguments,1));if(this.chart.is3d()){var a=this.chart,b=a.renderer,d=a.options.chart.options3d,f=d.frame,g=f.bottom,i=f.back,f=f.side,j=d.depth,h=this.height,k=this.width,l=this.left,p=this.top;if(!this.isZAxis)this.horiz?(i={x:l,y:p+(a.xAxis[0].opposite?
|
||||
-g.size:h),z:0,width:k,height:g.size,depth:j,insidePlotArea:!1},this.bottomFrame?this.bottomFrame.animate(i):this.bottomFrame=b.cuboid(i).attr({fill:g.color,zIndex:a.yAxis[0].reversed&&d.alpha>0?4:-1}).css({stroke:g.color}).add()):(d={x:l+(a.yAxis[0].opposite?0:-f.size),y:p+(a.xAxis[0].opposite?-g.size:0),z:j,width:k+f.size,height:h+g.size,depth:i.size,insidePlotArea:!1},this.backFrame?this.backFrame.animate(d):this.backFrame=b.cuboid(d).attr({fill:i.color,zIndex:-3}).css({stroke:i.color}).add(),
|
||||
a={x:l+(a.yAxis[0].opposite?k:-f.size),y:p+(a.xAxis[0].opposite?-g.size:0),z:0,width:f.size,height:h+g.size,depth:j,insidePlotArea:!1},this.sideFrame?this.sideFrame.animate(a):this.sideFrame=b.cuboid(a).attr({fill:f.color,zIndex:-2}).css({stroke:f.color}).add())}});d.wrap(d.Axis.prototype,"getPlotLinePath",function(c){var a=c.apply(this,[].slice.call(arguments,1));if(!this.chart.is3d())return a;if(a===null)return a;var b=this.chart.options.chart.options3d,b=this.isZAxis?this.chart.plotWidth:b.depth,
|
||||
d=this.opposite;this.horiz&&(d=!d);a=[this.swapZ({x:a[1],y:a[2],z:d?b:0}),this.swapZ({x:a[1],y:a[2],z:b}),this.swapZ({x:a[4],y:a[5],z:b}),this.swapZ({x:a[4],y:a[5],z:d?0:b})];a=n(a,this.chart,!1);return a=this.chart.renderer.toLinePath(a,!1)});d.wrap(d.Axis.prototype,"getLinePath",function(){return[]});d.wrap(d.Axis.prototype,"getPlotBandPath",function(c){if(this.chart.is3d()){var a=arguments,b=a[1],a=this.getPlotLinePath(a[2]);(b=this.getPlotLinePath(b))&&a?b.push("L",a[10],a[11],"L",a[7],a[8],"L",
|
||||
a[4],a[5],"L",a[1],a[2]):b=null;return b}else return c.apply(this,[].slice.call(arguments,1))});d.wrap(d.Tick.prototype,"getMarkPath",function(c){var a=c.apply(this,[].slice.call(arguments,1));if(!this.axis.chart.is3d())return a;a=[this.axis.swapZ({x:a[1],y:a[2],z:0}),this.axis.swapZ({x:a[4],y:a[5],z:0})];a=n(a,this.axis.chart,!1);return a=["M",a[0].x,a[0].y,"L",a[1].x,a[1].y]});d.wrap(d.Tick.prototype,"getLabelPosition",function(c){var a=c.apply(this,[].slice.call(arguments,1));if(!this.axis.chart.is3d())return a;
|
||||
var b=n([this.axis.swapZ({x:a.x,y:a.y,z:0})],this.axis.chart,!1)[0];b.x-=!this.axis.horiz&&this.axis.opposite?this.axis.transA:0;b.old=a;return b});d.wrap(d.Tick.prototype,"handleOverflow",function(c,a){if(this.axis.chart.is3d())a=a.old;return c.call(this,a)});d.wrap(d.Axis.prototype,"getTitlePosition",function(c){var a=c.apply(this,[].slice.call(arguments,1));return!this.chart.is3d()?a:a=n([this.swapZ({x:a.x,y:a.y,z:0})],this.chart,!1)[0]});d.wrap(d.Axis.prototype,"drawCrosshair",function(c){var a=
|
||||
arguments;this.chart.is3d()&&a[2]&&(a[2]={plotX:a[2].plotXold||a[2].plotX,plotY:a[2].plotYold||a[2].plotY});c.apply(this,[].slice.call(a,1))});d.Axis.prototype.swapZ=function(c,a){if(this.isZAxis){var b=a?0:this.chart.plotLeft,d=this.chart;return{x:b+(d.yAxis[0].opposite?c.z:d.xAxis[0].width-c.z),y:c.y,z:c.x-b}}else return c};var D=d.ZAxis=function(){this.isZAxis=!0;this.init.apply(this,arguments)};d.extend(D.prototype,d.Axis.prototype);d.extend(D.prototype,{setOptions:function(c){c=d.merge({offset:0,
|
||||
lineWidth:0},c);d.Axis.prototype.setOptions.call(this,c);this.coll="zAxis"},setAxisSize:function(){d.Axis.prototype.setAxisSize.call(this);this.width=this.len=this.chart.options.chart.options3d.depth;this.right=this.chart.chartWidth-this.width-this.left},getSeriesExtremes:function(){var c=this,a=c.chart;c.hasVisibleSeries=!1;c.dataMin=c.dataMax=c.ignoreMinPadding=c.ignoreMaxPadding=null;c.buildStacks&&c.buildStacks();d.each(c.series,function(b){if(b.visible||!a.options.chart.ignoreHiddenSeries)if(c.hasVisibleSeries=
|
||||
!0,b=b.zData,b.length)c.dataMin=Math.min(y(c.dataMin,b[0]),Math.min.apply(null,b)),c.dataMax=Math.max(y(c.dataMax,b[0]),Math.max.apply(null,b))})}});d.wrap(d.Chart.prototype,"getAxes",function(c){var a=this,b=this.options,b=b.zAxis=d.splat(b.zAxis||{});c.call(this);if(a.is3d())this.zAxis=[],d.each(b,function(b,c){b.index=c;b.isX=!0;(new D(a,b)).setScale()})});d.wrap(d.seriesTypes.column.prototype,"translate",function(c){c.apply(this,[].slice.call(arguments,1));if(this.chart.is3d()){var a=this.chart,
|
||||
b=this.options,e=b.depth||25,f=(b.stacking?b.stack||0:this._i)*(e+(b.groupZPadding||1));b.grouping!==!1&&(f=0);f+=b.groupZPadding||1;d.each(this.data,function(b){if(b.y!==null){var c=b.shapeArgs,d=b.tooltipPos;b.shapeType="cuboid";c.z=f;c.depth=e;c.insidePlotArea=!0;d=n([{x:d[0],y:d[1],z:f}],a,!1)[0];b.tooltipPos=[d.x,d.y]}});this.z=f}});d.wrap(d.seriesTypes.column.prototype,"animate",function(c){if(this.chart.is3d()){var a=arguments[1],b=this.yAxis,e=this,f=this.yAxis.reversed;if(d.svg)a?d.each(e.data,
|
||||
function(a){if(a.y!==null&&(a.height=a.shapeArgs.height,a.shapey=a.shapeArgs.y,a.shapeArgs.height=1,!f))a.shapeArgs.y=a.stackY?a.plotY+b.translate(a.stackY):a.plotY+(a.negative?-a.height:a.height)}):(d.each(e.data,function(a){if(a.y!==null)a.shapeArgs.height=a.height,a.shapeArgs.y=a.shapey,a.graphic&&a.graphic.animate(a.shapeArgs,e.options.animation)}),this.drawDataLabels(),e.animate=null)}else c.apply(this,[].slice.call(arguments,1))});d.wrap(d.seriesTypes.column.prototype,"init",function(c){c.apply(this,
|
||||
[].slice.call(arguments,1));if(this.chart.is3d()){var a=this.options,b=a.grouping,d=a.stacking,f=0;if(b===void 0||b){b=this.chart.retrieveStacks(d);d=a.stack||0;for(f=0;f<b[d].series.length;f++)if(b[d].series[f]===this)break;f=b.totalStacks*10-10*(b.totalStacks-b[d].position)-f}a.zIndex=f}});d.wrap(d.Series.prototype,"alignDataLabel",function(c){if(this.chart.is3d()&&(this.type==="column"||this.type==="columnrange")){var a=arguments[4],b={x:a.x,y:a.y,z:this.z},b=n([b],this.chart,!0)[0];a.x=b.x;a.y=
|
||||
b.y}c.apply(this,[].slice.call(arguments,1))});d.seriesTypes.columnrange&&d.wrap(d.seriesTypes.columnrange.prototype,"drawPoints",F);d.wrap(d.seriesTypes.column.prototype,"drawPoints",F);d.wrap(d.seriesTypes.pie.prototype,"translate",function(c){c.apply(this,[].slice.call(arguments,1));if(this.chart.is3d()){var a=this,b=a.chart,e=a.options,f=e.depth||0,g=b.options.chart.options3d,i={x:b.plotWidth/2,y:b.plotHeight/2,z:g.depth},j=g.alpha,h=g.beta,k=e.stacking?(e.stack||0)*f:a._i*f;k+=f/2;e.grouping!==
|
||||
!1&&(k=0);d.each(a.data,function(b){var c=b.shapeArgs;b.shapeType="arc3d";c.z=k;c.depth=f*0.75;c.origin=i;c.alpha=j;c.beta=h;c.center=a.center;c=(c.end+c.start)/2;b.slicedTranslation={translateX:G(m(c)*e.slicedOffset*m(j*x)),translateY:G(l(c)*e.slicedOffset*m(j*x))}})}});d.wrap(d.seriesTypes.pie.prototype.pointClass.prototype,"haloPath",function(c){var a=arguments;return this.series.chart.is3d()?[]:c.call(this,a[1])});d.wrap(d.seriesTypes.pie.prototype,"drawPoints",function(c){var a=this.group,b=
|
||||
this.options,e=b.states;if(this.chart.is3d())this.borderWidth=b.borderWidth=b.edgeWidth||1,this.borderColor=b.edgeColor=d.pick(b.edgeColor,b.borderColor,void 0),e.hover.borderColor=d.pick(e.hover.edgeColor,this.borderColor),e.hover.borderWidth=d.pick(e.hover.edgeWidth,this.borderWidth),e.select.borderColor=d.pick(e.select.edgeColor,this.borderColor),e.select.borderWidth=d.pick(e.select.edgeWidth,this.borderWidth),d.each(this.data,function(a){var b=a.pointAttr;b[""].stroke=a.series.borderColor||a.color;
|
||||
b[""]["stroke-width"]=a.series.borderWidth;b.hover.stroke=e.hover.borderColor;b.hover["stroke-width"]=e.hover.borderWidth;b.select.stroke=e.select.borderColor;b.select["stroke-width"]=e.select.borderWidth});c.apply(this,[].slice.call(arguments,1));this.chart.is3d()&&d.each(this.points,function(b){var c=b.graphic;c.out.add(a);c.inn.add(a);c.side1.add(a);c.side2.add(a);c[b.y?"show":"hide"]()})});d.wrap(d.seriesTypes.pie.prototype,"drawDataLabels",function(c){if(this.chart.is3d()){var a=this;d.each(a.data,
|
||||
function(b){var c=b.shapeArgs,d=c.r,g=c.depth,i=(c.alpha||a.chart.options.chart.options3d.alpha)*x,c=(c.start+c.end)/2,b=b.labelPos;b[1]+=-d*(1-m(i))*l(c)+(l(c)>0?l(i)*g:0);b[3]+=-d*(1-m(i))*l(c)+(l(c)>0?l(i)*g:0);b[5]+=-d*(1-m(i))*l(c)+(l(c)>0?l(i)*g:0)})}c.apply(this,[].slice.call(arguments,1))});d.wrap(d.seriesTypes.pie.prototype,"addPoint",function(c){c.apply(this,[].slice.call(arguments,1));this.chart.is3d()&&this.update(this.userOptions,!0)});d.wrap(d.seriesTypes.pie.prototype,"animate",function(c){if(this.chart.is3d()){var a=
|
||||
arguments[1],b=this.options.animation,e=this.center,f=this.group,g=this.markerGroup;if(d.svg)if(b===!0&&(b={}),a){if(f.oldtranslateX=f.translateX,f.oldtranslateY=f.translateY,a={translateX:e[0],translateY:e[1],scaleX:0.001,scaleY:0.001},f.attr(a),g)g.attrSetters=f.attrSetters,g.attr(a)}else a={translateX:f.oldtranslateX,translateY:f.oldtranslateY,scaleX:1,scaleY:1},f.animate(a,b),g&&g.animate(a,b),this.animate=null}else c.apply(this,[].slice.call(arguments,1))});d.wrap(d.seriesTypes.scatter.prototype,
|
||||
"translate",function(c){c.apply(this,[].slice.call(arguments,1));if(this.chart.is3d()){var a=this.chart,b=d.pick(this.zAxis,a.options.zAxis[0]),e=[],f,g;for(g=0;g<this.data.length;g++)f=this.data[g],f.isInside=f.isInside?f.z>=b.min&&f.z<=b.max:!1,e.push({x:f.plotX,y:f.plotY,z:b.translate(f.z)});a=n(e,a,!0);for(g=0;g<this.data.length;g++)f=this.data[g],b=a[g],f.plotXold=f.plotX,f.plotYold=f.plotY,f.plotX=b.x,f.plotY=b.y,f.plotZ=b.z}});d.wrap(d.seriesTypes.scatter.prototype,"init",function(c,a,b){if(a.is3d())this.axisTypes=
|
||||
["xAxis","yAxis","zAxis"],this.pointArrayMap=["x","y","z"],this.parallelArrays=["x","y","z"];c=c.apply(this,[a,b]);if(this.chart.is3d())this.tooltipOptions.pointFormat=this.userOptions.tooltip?this.userOptions.tooltip.pointFormat||"x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>z: <b>{point.z}</b><br/>":"x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>z: <b>{point.z}</b><br/>";return c});if(d.VMLRenderer)d.setOptions({animate:!1}),d.VMLRenderer.prototype.cuboid=d.SVGRenderer.prototype.cuboid,d.VMLRenderer.prototype.cuboidPath=
|
||||
d.SVGRenderer.prototype.cuboidPath,d.VMLRenderer.prototype.toLinePath=d.SVGRenderer.prototype.toLinePath,d.VMLRenderer.prototype.createElement3D=d.SVGRenderer.prototype.createElement3D,d.VMLRenderer.prototype.arc3d=function(c){c=d.SVGRenderer.prototype.arc3d.call(this,c);c.css({zIndex:c.zIndex});return c},d.VMLRenderer.prototype.arc3dPath=d.SVGRenderer.prototype.arc3dPath,d.wrap(d.Axis.prototype,"render",function(c){c.apply(this,[].slice.call(arguments,1));this.sideFrame&&(this.sideFrame.css({zIndex:0}),
|
||||
this.sideFrame.front.attr({fill:this.sideFrame.color}));this.bottomFrame&&(this.bottomFrame.css({zIndex:1}),this.bottomFrame.front.attr({fill:this.bottomFrame.color}));this.backFrame&&(this.backFrame.css({zIndex:0}),this.backFrame.front.attr({fill:this.backFrame.color}))})})(Highcharts);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user