progress indicators, bug fixes, after a while
This commit is contained in:
Kwesi Banson
99
public/assets/vendors/Flot/examples/percentiles/index.html
vendored
Normal file
99
public/assets/vendors/Flot/examples/percentiles/index.html
vendored
Normal file
@@ -0,0 +1,99 @@
|
||||
<!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">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/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>
|
||||
Reference in New Issue
Block a user