1 /* Flot plugin for computing bottoms for filled line and bar charts.
3 Copyright (c) 2007-2012 IOLA and Ole Laursen.
6 The case: you've got two series that you want to fill the area between. In Flot
7 terms, you need to use one as the fill bottom of the other. You can specify the
8 bottom of each data point as the third coordinate manually, or you can use this
9 plugin to compute it for you.
11 In order to name the other series, you need to give it an id, like this:
13     var dataset = [
14         { data: [ ... ], id: "foo" } ,         // use default bottom
15         { data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
16     ];
18     \$.plot(\$("#placeholder"), dataset, { lines: { show: true, fill: true }});
20 As a convenience, if the id given is a number that doesn't appear as an id in
21 the series, it is interpreted as the index in the array instead (so fillBetween:
22 0 can also mean the first series).
24 Internally, the plugin modifies the datapoints in each series. For line series,
25 extra data points might be inserted through interpolation. Note that at points
26 where the bottom line is not defined (due to a null point or start/end of line),
27 the current line will show a gap too. The algorithm comes from the
28 jquery.flot.stack.js plugin, possibly some code could be shared.
30 */
32 (function ( \$ ) {
34     var options = {
35         series: {
36             fillBetween: null    // or number
37         }
38     };
40     function init( plot ) {
42         function findBottomSeries( s, allseries ) {
44             var i;
46             for ( i = 0; i < allseries.length; ++i ) {
47                 if ( allseries[ i ].id === s.fillBetween ) {
48                     return allseries[ i ];
49                 }
50             }
52             if ( typeof s.fillBetween === "number" ) {
53                 if ( s.fillBetween < 0 || s.fillBetween >= allseries.length ) {
54                     return null;
55                 }
56                 return allseries[ s.fillBetween ];
57             }
59             return null;
60         }
62         function computeFillBottoms( plot, s, datapoints ) {
64             if ( s.fillBetween == null ) {
65                 return;
66             }
68             var other = findBottomSeries( s, plot.getData() );
70             if ( !other ) {
71                 return;
72             }
74             var ps = datapoints.pointsize,
75                 points = datapoints.points,
76                 otherps = other.datapoints.pointsize,
77                 otherpoints = other.datapoints.points,
78                 newpoints = [],
79                 px, py, intery, qx, qy, bottom,
80                 withlines = s.lines.show,
81                 withbottom = ps > 2 && datapoints.format.y,
82                 withsteps = withlines && s.lines.steps,
83                 fromgap = true,
84                 i = 0,
85                 j = 0,
86                 l, m;
88             while ( true ) {
90                 if ( i >= points.length ) {
91                     break;
92                 }
94                 l = newpoints.length;
96                 if ( points[ i ] == null ) {
98                     // copy gaps
100                     for ( m = 0; m < ps; ++m ) {
101                         newpoints.push( points[ i + m ] );
102                     }
104                     i += ps;
106                 } else if ( j >= otherpoints.length ) {
108                     // for lines, we can't use the rest of the points
110                     if ( !withlines ) {
111                         for ( m = 0; m < ps; ++m ) {
112                             newpoints.push( points[ i + m ] );
113                         }
114                     }
116                     i += ps;
118                 } else if ( otherpoints[ j ] == null ) {
120                     // oops, got a gap
122                     for ( m = 0; m < ps; ++m ) {
123                         newpoints.push( null );
124                     }
126                     fromgap = true;
127                     j += otherps;
129                 } else {
131                     // cases where we actually got two points
133                     px = points[ i ];
134                     py = points[ i + 1 ];
135                     qx = otherpoints[ j ];
136                     qy = otherpoints[ j + 1 ];
137                     bottom = 0;
139                     if ( px === qx ) {
141                         for ( m = 0; m < ps; ++m ) {
142                             newpoints.push( points[ i + m ] );
143                         }
145                         //newpoints[ l + 1 ] += qy;
146                         bottom = qy;
148                         i += ps;
149                         j += otherps;
151                     } else if ( px > qx ) {
153                         // we got past point below, might need to
154                         // insert interpolated extra point
156                         if ( withlines && i > 0 && points[ i - ps ] != null ) {
157                             intery = py + ( points[ i - ps + 1 ] - py ) * ( qx - px ) / ( points[ i - ps ] - px );
158                             newpoints.push( qx );
159                             newpoints.push( intery );
160                             for ( m = 2; m < ps; ++m ) {
161                                 newpoints.push( points[ i + m ] );
162                             }
163                             bottom = qy;
164                         }
166                         j += otherps;
168                     } else { // px < qx
170                         // if we come from a gap, we just skip this point
172                         if ( fromgap && withlines ) {
173                             i += ps;
174                             continue;
175                         }
177                         for ( m = 0; m < ps; ++m ) {
178                             newpoints.push( points[ i + m ] );
179                         }
181                         // we might be able to interpolate a point below,
182                         // this can give us a better y
184                         if ( withlines && j > 0 && otherpoints[ j - otherps ] != null ) {
185                             bottom = qy + ( otherpoints[ j - otherps + 1 ] - qy ) * ( px - qx ) / ( otherpoints[ j - otherps ] - qx );
186                         }
188                         //newpoints[l + 1] += bottom;
190                         i += ps;
191                     }
193                     fromgap = false;
195                     if ( l !== newpoints.length && withbottom ) {
196                         newpoints[ l + 2 ] = bottom;
197                     }
198                 }
200                 // maintain the line steps invariant
202                 if ( withsteps && l !== newpoints.length && l > 0 &&
203                     newpoints[ l ] !== null &&
204                     newpoints[ l ] !== newpoints[ l - ps ] &&
205                     newpoints[ l + 1 ] !== newpoints[ l - ps + 1 ] ) {
206                     for (m = 0; m < ps; ++m) {
207                         newpoints[ l + ps + m ] = newpoints[ l + m ];
208                     }
209                     newpoints[ l + 1 ] = newpoints[ l - ps + 1 ];
210                 }
211             }
213             datapoints.points = newpoints;
214         }
216         plot.hooks.processDatapoints.push( computeFillBottoms );
217     }
219     \$.plot.plugins.push({
220         init: init,
221         options: options,
222         name: "fillbetween",
223         version: "1.0"
224     });
226 })(jQuery);