-v1Ģ@0h3w%b'/-VɗxgLLA:?tDwnUqQnS2v=T5pXB4 t2GR?y"I;Se>"Q)[ .>duǀDpPe޳J6<¬<3#eD5ū-<x82 zL47z3WZjt3`ɦqZôYKOtGTmh tV%\7KlDp,zqn|ں%cT.Q9?r1ĵi;YKqȇ&;1lT;~CF  Q{W[|@saF՛Skf{NY&C֌ntMged&r FuZ/L~*:q鹷bA\Μw%P<U SJ9OjDg|l skay:߮#~Hxњ*. `!=Mp]63װ`+j{-P8ea4aq_0lLv9RV8ba  #JŦ&dKd ոЉ%t)iʀhr~tkK^Vp u'd)N) w XÑr(2I=tD`W2G^D%ʗ!ʷT.`7*z! x3%wuX='=:y^hGKk>(QE~ה?Тq½Ь; }"#^#VH+&a5XϽN7ҍ2 }xlc{V~e¶O3frkh@yjt6)"NE!T<q̰upIS>2⼨3>e]1Fl̟wĚeF3fJaҵ2ܴ]f4=qsx  M;E,d+U?d mNzZ9?L}e3Q~hG)P؋{\uz&ܯ*!fc-k~C.7Wr7fMzOuՊγusOhV9ږ(,U-^0.Mƚ3 V*`d/ksIm 5L3oslU8yɍ*aVWz; BqYTL7ٵ8V2nJԑ u׵\SQAW6RˢN|kpWj=L7wϣX8\_O5@4mpNM)Ό~cYԾzZHue$\Ƃz|\Xwb^i_;] P'%Q3ZPր/H?50ՔQYJ#xX m&CB똱 DG UY kŰ꨼v[etun&#%:kU/gt7OG uOtn6l*<ӌ eUu#yi SmW 诹@Y!*E q_)B*GuyED~-ynyicl;yX o7XN;_{׽N E+%T?f4$?~Ri <3א@~FBSY*JId'P}Ug<#cNoB`2*!I tT朴sT)S.nR |1:'5T:U23e;Ƙ&fK2NNJ;[%4"SE[,JȬ(&'̖zǽj!P^~vw c!g͚V(d}ꐹt _ YM9bLOb2zw}sd'Tɗ :[jq ' j4l0bV0>P3q9gJ?SoٱVߺ~,5Q輇1/=8uݑ,RNJ:z.Ueѓg %J7I`Ю $1p x~_sM|)?5 t6Zfl(byn2-lwDA#,#$ p'xlBnm=&.r̍`xm"h"֝i8(&s; |d 7וuI{{Wc45]zG >D)c ט6eލ>f<ٓf3[0Fw.L3Mqs`>B#吔Glm9{{Vk.*>|J(:=z"h@fҘ}q,߅LV nfޤ4@W񮣋,XasOve7 ? IT,|DVoMR*d(u$tӬw*c˙<:)#{5938Gnxې!Pt9߂eY~YV}3/&pǗQ<M\-rM &nq+uϮLRUfggC6+"|c!2;u٪Ntm%5 a q yOR_d]/ ,dGs6u79;qHs:c OFjޜ Nn8t#SDI] )@SX k Gh  qp䈧䛘Tyھ@,GCgHj(pe+~RB2_y.i$ Y|=Ѻ#ZAftЕq =tOgl'HPCv*pQMvC˄\y02as~fGҴԚ-N3їòkV+UbuDpUxkĕbRD-GF: @[ƺ𢉩(WKe5.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 + " – "); });

Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: CDC). The 15%-85%, 25%-75% and 50% percentiles are indicated.

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.