@ -1,84 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,64 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,92 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,59 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,68 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,134 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,90 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,83 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,83 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,47 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,77 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,82 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,138 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,65 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,81 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,84 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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 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> |
@ -1,94 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,58 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |
@ -1,95 +0,0 @@ | |||
<!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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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> |