Statistics
| Branch: | Revision:

root / static / js / jquery.flot.fillbetween.min.js @ 04733cdb

History | View | Annotate | Download (2.6 kB)

1 04733cdb Leonidas Poulopoulos
/* Flot plugin for computing bottoms for filled line and bar charts.
2 04733cdb Leonidas Poulopoulos

3 04733cdb Leonidas Poulopoulos
Copyright (c) 2007-2013 IOLA and Ole Laursen.
4 04733cdb Leonidas Poulopoulos
Licensed under the MIT license.
5 04733cdb Leonidas Poulopoulos

6 04733cdb Leonidas Poulopoulos
The case: you've got two series that you want to fill the area between. In Flot
7 04733cdb Leonidas Poulopoulos
terms, you need to use one as the fill bottom of the other. You can specify the
8 04733cdb Leonidas Poulopoulos
bottom of each data point as the third coordinate manually, or you can use this
9 04733cdb Leonidas Poulopoulos
plugin to compute it for you.
10 04733cdb Leonidas Poulopoulos

11 04733cdb Leonidas Poulopoulos
In order to name the other series, you need to give it an id, like this:
12 04733cdb Leonidas Poulopoulos

13 04733cdb Leonidas Poulopoulos
        var dataset = [
14 04733cdb Leonidas Poulopoulos
                { data: [ ... ], id: "foo" } ,         // use default bottom
15 04733cdb Leonidas Poulopoulos
                { data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
16 04733cdb Leonidas Poulopoulos
        ];
17 04733cdb Leonidas Poulopoulos

18 04733cdb Leonidas Poulopoulos
        $.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }});
19 04733cdb Leonidas Poulopoulos

20 04733cdb Leonidas Poulopoulos
As a convenience, if the id given is a number that doesn't appear as an id in
21 04733cdb Leonidas Poulopoulos
the series, it is interpreted as the index in the array instead (so fillBetween:
22 04733cdb Leonidas Poulopoulos
0 can also mean the first series).
23 04733cdb Leonidas Poulopoulos

24 04733cdb Leonidas Poulopoulos
Internally, the plugin modifies the datapoints in each series. For line series,
25 04733cdb Leonidas Poulopoulos
extra data points might be inserted through interpolation. Note that at points
26 04733cdb Leonidas Poulopoulos
where the bottom line is not defined (due to a null point or start/end of line),
27 04733cdb Leonidas Poulopoulos
the current line will show a gap too. The algorithm comes from the
28 04733cdb Leonidas Poulopoulos
jquery.flot.stack.js plugin, possibly some code could be shared.
29 04733cdb Leonidas Poulopoulos

30 04733cdb Leonidas Poulopoulos
*/(function(e){function n(e){function t(e,t){var n;for(n=0;n<t.length;++n)if(t[n].id===e.fillBetween)return t[n];return typeof e.fillBetween=="number"?e.fillBetween<0||e.fillBetween>=t.length?null:t[e.fillBetween]:null}function n(e,n,r){if(n.fillBetween==null)return;var i=t(n,e.getData());if(!i)return;var s=r.pointsize,o=r.points,u=i.datapoints.pointsize,a=i.datapoints.points,f=[],l,c,h,p,d,v,m=n.lines.show,g=s>2&&r.format[2].y,y=m&&n.lines.steps,b=!0,w=0,E=0,S,x;for(;;){if(w>=o.length)break;S=f.length;if(o[w]==null){for(x=0;x<s;++x)f.push(o[w+x]);w+=s}else if(E>=a.length){if(!m)for(x=0;x<s;++x)f.push(o[w+x]);w+=s}else if(a[E]==null){for(x=0;x<s;++x)f.push(null);b=!0,E+=u}else{l=o[w],c=o[w+1],p=a[E],d=a[E+1],v=0;if(l===p){for(x=0;x<s;++x)f.push(o[w+x]);v=d,w+=s,E+=u}else if(l>p){if(m&&w>0&&o[w-s]!=null){h=c+(o[w-s+1]-c)*(p-l)/(o[w-s]-l),f.push(p),f.push(h);for(x=2;x<s;++x)f.push(o[w+x]);v=d}E+=u}else{if(b&&m){w+=s;continue}for(x=0;x<s;++x)f.push(o[w+x]);m&&E>0&&a[E-u]!=null&&(v=d+(a[E-u+1]-d)*(l-p)/(a[E-u]-p)),w+=s}b=!1,S!==f.length&&g&&(f[S+2]=v)}if(y&&S!==f.length&&S>0&&f[S]!==null&&f[S]!==f[S-s]&&f[S+1]!==f[S-s+1]){for(x=0;x<s;++x)f[S+s+x]=f[S+x];f[S+1]=f[S-s+1]}}r.points=f}e.hooks.processDatapoints.push(n)}var t={series:{fillBetween:null}};e.plot.plugins.push({init:n,options:t,name:"fillbetween",version:"1.0"})})(jQuery);