490 lines
12 KiB
HTML
490 lines
12 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Flot Examples: Percentiles</title>
|
|
<link href="../examples.css" rel="stylesheet" type="text/css" />
|
|
<!--[if lte IE 8
|
|
]><script
|
|
language="javascript"
|
|
type="text/javascript"
|
|
src="../../excanvas.min.js"
|
|
></script
|
|
><![endif]-->
|
|
<script
|
|
language="javascript"
|
|
type="text/javascript"
|
|
src="../../jquery.js"
|
|
></script>
|
|
<script
|
|
language="javascript"
|
|
type="text/javascript"
|
|
src="../../jquery.flot.js"
|
|
></script>
|
|
<script
|
|
language="javascript"
|
|
type="text/javascript"
|
|
src="../../jquery.flot.fillbetween.js"
|
|
></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var males = {
|
|
"15%": [
|
|
[2, 88.0],
|
|
[3, 93.3],
|
|
[4, 102.0],
|
|
[5, 108.5],
|
|
[6, 115.7],
|
|
[7, 115.6],
|
|
[8, 124.6],
|
|
[9, 130.3],
|
|
[10, 134.3],
|
|
[11, 141.4],
|
|
[12, 146.5],
|
|
[13, 151.7],
|
|
[14, 159.9],
|
|
[15, 165.4],
|
|
[16, 167.8],
|
|
[17, 168.7],
|
|
[18, 169.5],
|
|
[19, 168.0],
|
|
],
|
|
"90%": [
|
|
[2, 96.8],
|
|
[3, 105.2],
|
|
[4, 113.9],
|
|
[5, 120.8],
|
|
[6, 127.0],
|
|
[7, 133.1],
|
|
[8, 139.1],
|
|
[9, 143.9],
|
|
[10, 151.3],
|
|
[11, 161.1],
|
|
[12, 164.8],
|
|
[13, 173.5],
|
|
[14, 179.0],
|
|
[15, 182.0],
|
|
[16, 186.9],
|
|
[17, 185.2],
|
|
[18, 186.3],
|
|
[19, 186.6],
|
|
],
|
|
"25%": [
|
|
[2, 89.2],
|
|
[3, 94.9],
|
|
[4, 104.4],
|
|
[5, 111.4],
|
|
[6, 117.5],
|
|
[7, 120.2],
|
|
[8, 127.1],
|
|
[9, 132.9],
|
|
[10, 136.8],
|
|
[11, 144.4],
|
|
[12, 149.5],
|
|
[13, 154.1],
|
|
[14, 163.1],
|
|
[15, 169.2],
|
|
[16, 170.4],
|
|
[17, 171.2],
|
|
[18, 172.4],
|
|
[19, 170.8],
|
|
],
|
|
"10%": [
|
|
[2, 86.9],
|
|
[3, 92.6],
|
|
[4, 99.9],
|
|
[5, 107.0],
|
|
[6, 114.0],
|
|
[7, 113.5],
|
|
[8, 123.6],
|
|
[9, 129.2],
|
|
[10, 133.0],
|
|
[11, 140.6],
|
|
[12, 145.2],
|
|
[13, 149.7],
|
|
[14, 158.4],
|
|
[15, 163.5],
|
|
[16, 166.9],
|
|
[17, 167.5],
|
|
[18, 167.1],
|
|
[19, 165.3],
|
|
],
|
|
mean: [
|
|
[2, 91.9],
|
|
[3, 98.5],
|
|
[4, 107.1],
|
|
[5, 114.4],
|
|
[6, 120.6],
|
|
[7, 124.7],
|
|
[8, 131.1],
|
|
[9, 136.8],
|
|
[10, 142.3],
|
|
[11, 150.0],
|
|
[12, 154.7],
|
|
[13, 161.9],
|
|
[14, 168.7],
|
|
[15, 173.6],
|
|
[16, 175.9],
|
|
[17, 176.6],
|
|
[18, 176.8],
|
|
[19, 176.7],
|
|
],
|
|
"75%": [
|
|
[2, 94.5],
|
|
[3, 102.1],
|
|
[4, 110.8],
|
|
[5, 117.9],
|
|
[6, 124.0],
|
|
[7, 129.3],
|
|
[8, 134.6],
|
|
[9, 141.4],
|
|
[10, 147.0],
|
|
[11, 156.1],
|
|
[12, 160.3],
|
|
[13, 168.3],
|
|
[14, 174.7],
|
|
[15, 178.0],
|
|
[16, 180.2],
|
|
[17, 181.7],
|
|
[18, 181.3],
|
|
[19, 182.5],
|
|
],
|
|
"85%": [
|
|
[2, 96.2],
|
|
[3, 103.8],
|
|
[4, 111.8],
|
|
[5, 119.6],
|
|
[6, 125.6],
|
|
[7, 131.5],
|
|
[8, 138.0],
|
|
[9, 143.3],
|
|
[10, 149.3],
|
|
[11, 159.8],
|
|
[12, 162.5],
|
|
[13, 171.3],
|
|
[14, 177.5],
|
|
[15, 180.2],
|
|
[16, 183.8],
|
|
[17, 183.4],
|
|
[18, 183.5],
|
|
[19, 185.5],
|
|
],
|
|
"50%": [
|
|
[2, 91.9],
|
|
[3, 98.2],
|
|
[4, 106.8],
|
|
[5, 114.6],
|
|
[6, 120.8],
|
|
[7, 125.2],
|
|
[8, 130.3],
|
|
[9, 137.1],
|
|
[10, 141.5],
|
|
[11, 149.4],
|
|
[12, 153.9],
|
|
[13, 162.2],
|
|
[14, 169.0],
|
|
[15, 174.8],
|
|
[16, 176.0],
|
|
[17, 176.8],
|
|
[18, 176.4],
|
|
[19, 177.4],
|
|
],
|
|
};
|
|
|
|
var females = {
|
|
"15%": [
|
|
[2, 84.8],
|
|
[3, 93.7],
|
|
[4, 100.6],
|
|
[5, 105.8],
|
|
[6, 113.3],
|
|
[7, 119.3],
|
|
[8, 124.3],
|
|
[9, 131.4],
|
|
[10, 136.9],
|
|
[11, 143.8],
|
|
[12, 149.4],
|
|
[13, 151.2],
|
|
[14, 152.3],
|
|
[15, 155.9],
|
|
[16, 154.7],
|
|
[17, 157.0],
|
|
[18, 156.1],
|
|
[19, 155.4],
|
|
],
|
|
"90%": [
|
|
[2, 95.6],
|
|
[3, 104.1],
|
|
[4, 111.9],
|
|
[5, 119.6],
|
|
[6, 127.6],
|
|
[7, 133.1],
|
|
[8, 138.7],
|
|
[9, 147.1],
|
|
[10, 152.8],
|
|
[11, 161.3],
|
|
[12, 166.6],
|
|
[13, 167.9],
|
|
[14, 169.3],
|
|
[15, 170.1],
|
|
[16, 172.4],
|
|
[17, 169.2],
|
|
[18, 171.1],
|
|
[19, 172.4],
|
|
],
|
|
"25%": [
|
|
[2, 87.2],
|
|
[3, 95.9],
|
|
[4, 101.9],
|
|
[5, 107.4],
|
|
[6, 114.8],
|
|
[7, 121.4],
|
|
[8, 126.8],
|
|
[9, 133.4],
|
|
[10, 138.6],
|
|
[11, 146.2],
|
|
[12, 152.0],
|
|
[13, 153.8],
|
|
[14, 155.7],
|
|
[15, 158.4],
|
|
[16, 157.0],
|
|
[17, 158.5],
|
|
[18, 158.4],
|
|
[19, 158.1],
|
|
],
|
|
"10%": [
|
|
[2, 84.0],
|
|
[3, 91.9],
|
|
[4, 99.2],
|
|
[5, 105.2],
|
|
[6, 112.7],
|
|
[7, 118.0],
|
|
[8, 123.3],
|
|
[9, 130.2],
|
|
[10, 135.0],
|
|
[11, 141.1],
|
|
[12, 148.3],
|
|
[13, 150.0],
|
|
[14, 150.7],
|
|
[15, 154.3],
|
|
[16, 153.6],
|
|
[17, 155.6],
|
|
[18, 154.7],
|
|
[19, 153.1],
|
|
],
|
|
mean: [
|
|
[2, 90.2],
|
|
[3, 98.3],
|
|
[4, 105.2],
|
|
[5, 112.2],
|
|
[6, 119.0],
|
|
[7, 125.8],
|
|
[8, 131.3],
|
|
[9, 138.6],
|
|
[10, 144.2],
|
|
[11, 151.3],
|
|
[12, 156.7],
|
|
[13, 158.6],
|
|
[14, 160.5],
|
|
[15, 162.1],
|
|
[16, 162.9],
|
|
[17, 162.2],
|
|
[18, 163.0],
|
|
[19, 163.1],
|
|
],
|
|
"75%": [
|
|
[2, 93.2],
|
|
[3, 101.5],
|
|
[4, 107.9],
|
|
[5, 116.6],
|
|
[6, 122.8],
|
|
[7, 129.3],
|
|
[8, 135.2],
|
|
[9, 143.7],
|
|
[10, 148.7],
|
|
[11, 156.9],
|
|
[12, 160.8],
|
|
[13, 163.0],
|
|
[14, 165.0],
|
|
[15, 165.8],
|
|
[16, 168.7],
|
|
[17, 166.2],
|
|
[18, 167.6],
|
|
[19, 168.0],
|
|
],
|
|
"85%": [
|
|
[2, 94.5],
|
|
[3, 102.8],
|
|
[4, 110.4],
|
|
[5, 119.0],
|
|
[6, 125.7],
|
|
[7, 131.5],
|
|
[8, 137.9],
|
|
[9, 146.0],
|
|
[10, 151.3],
|
|
[11, 159.9],
|
|
[12, 164.0],
|
|
[13, 166.5],
|
|
[14, 167.5],
|
|
[15, 168.5],
|
|
[16, 171.5],
|
|
[17, 168.0],
|
|
[18, 169.8],
|
|
[19, 170.3],
|
|
],
|
|
"50%": [
|
|
[2, 90.2],
|
|
[3, 98.1],
|
|
[4, 105.2],
|
|
[5, 111.7],
|
|
[6, 118.2],
|
|
[7, 125.6],
|
|
[8, 130.5],
|
|
[9, 138.3],
|
|
[10, 143.7],
|
|
[11, 151.4],
|
|
[12, 156.7],
|
|
[13, 157.7],
|
|
[14, 161.0],
|
|
[15, 162.0],
|
|
[16, 162.8],
|
|
[17, 162.2],
|
|
[18, 162.8],
|
|
[19, 163.3],
|
|
],
|
|
};
|
|
|
|
var dataset = [
|
|
{
|
|
label: "Female mean",
|
|
data: females["mean"],
|
|
lines: { show: true },
|
|
color: "rgb(255,50,50)",
|
|
},
|
|
{
|
|
id: "f15%",
|
|
data: females["15%"],
|
|
lines: { show: true, lineWidth: 0, fill: false },
|
|
color: "rgb(255,50,50)",
|
|
},
|
|
{
|
|
id: "f25%",
|
|
data: females["25%"],
|
|
lines: { show: true, lineWidth: 0, fill: 0.2 },
|
|
color: "rgb(255,50,50)",
|
|
fillBetween: "f15%",
|
|
},
|
|
{
|
|
id: "f50%",
|
|
data: females["50%"],
|
|
lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 },
|
|
color: "rgb(255,50,50)",
|
|
fillBetween: "f25%",
|
|
},
|
|
{
|
|
id: "f75%",
|
|
data: females["75%"],
|
|
lines: { show: true, lineWidth: 0, fill: 0.4 },
|
|
color: "rgb(255,50,50)",
|
|
fillBetween: "f50%",
|
|
},
|
|
{
|
|
id: "f85%",
|
|
data: females["85%"],
|
|
lines: { show: true, lineWidth: 0, fill: 0.2 },
|
|
color: "rgb(255,50,50)",
|
|
fillBetween: "f75%",
|
|
},
|
|
|
|
{
|
|
label: "Male mean",
|
|
data: males["mean"],
|
|
lines: { show: true },
|
|
color: "rgb(50,50,255)",
|
|
},
|
|
{
|
|
id: "m15%",
|
|
data: males["15%"],
|
|
lines: { show: true, lineWidth: 0, fill: false },
|
|
color: "rgb(50,50,255)",
|
|
},
|
|
{
|
|
id: "m25%",
|
|
data: males["25%"],
|
|
lines: { show: true, lineWidth: 0, fill: 0.2 },
|
|
color: "rgb(50,50,255)",
|
|
fillBetween: "m15%",
|
|
},
|
|
{
|
|
id: "m50%",
|
|
data: males["50%"],
|
|
lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 },
|
|
color: "rgb(50,50,255)",
|
|
fillBetween: "m25%",
|
|
},
|
|
{
|
|
id: "m75%",
|
|
data: males["75%"],
|
|
lines: { show: true, lineWidth: 0, fill: 0.4 },
|
|
color: "rgb(50,50,255)",
|
|
fillBetween: "m50%",
|
|
},
|
|
{
|
|
id: "m85%",
|
|
data: males["85%"],
|
|
lines: { show: true, lineWidth: 0, fill: 0.2 },
|
|
color: "rgb(50,50,255)",
|
|
fillBetween: "m75%",
|
|
},
|
|
];
|
|
|
|
$.plot($("#placeholder"), dataset, {
|
|
xaxis: {
|
|
tickDecimals: 0,
|
|
},
|
|
yaxis: {
|
|
tickFormatter: function (v) {
|
|
return v + " cm";
|
|
},
|
|
},
|
|
legend: {
|
|
position: "se",
|
|
},
|
|
});
|
|
|
|
// Add the Flot version string to the footer
|
|
|
|
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<h2>Percentiles</h2>
|
|
</div>
|
|
|
|
<div id="content">
|
|
<div class="demo-container">
|
|
<div id="placeholder" class="demo-placeholder"></div>
|
|
</div>
|
|
|
|
<p>
|
|
Height in centimeters of individuals from the US (2003-2006) as function
|
|
of age in years (source:
|
|
<a href="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>). The
|
|
15%-85%, 25%-75% and 50% percentiles are indicated.
|
|
</p>
|
|
|
|
<p>
|
|
For each point of a filled curve, you can specify an arbitrary bottom.
|
|
As this example illustrates, this can be useful for plotting
|
|
percentiles. If you have the data sets available without appropriate
|
|
fill bottoms, you can use the fillbetween plugin to compute the data
|
|
point bottoms automatically.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="footer">Copyright © 2007 - 2014 IOLA and Ole Laursen</div>
|
|
</body>
|
|
</html>
|