Merge database-common.js and utility.js into run-tests.js.
[WebKit-https.git] / Websites / perf.webkit.org / public / js / jquery.flot.errorbars.js
1 /* Flot plugin for plotting error bars.
2
3 Copyright (c) 2007-2012 IOLA and Ole Laursen.
4 Licensed under the MIT license.
5
6 Error bars are used to show standard deviation and other statistical
7 properties in a plot.
8
9 * Created by Rui Pereira  -  rui (dot) pereira (at) gmail (dot) com
10
11 This plugin allows you to plot error-bars over points. Set "errorbars" inside
12 the points series to the axis name over which there will be error values in
13 your data array (*even* if you do not intend to plot them later, by setting
14 "show: null" on xerr/yerr).
15
16 The plugin supports these options:
17
18     series: {
19         points: {
20             errorbars: "x" or "y" or "xy",
21             xerr: {
22                 show: null/false or true,
23                 asymmetric: null/false or true,
24                 upperCap: null or "-" or function,
25                 lowerCap: null or "-" or function,
26                 color: null or color,
27                 radius: null or number
28             },
29             yerr: { same options as xerr }
30         }
31     }
32
33 Each data point array is expected to be of the type:
34
35     "x"  [ x, y, xerr ]
36     "y"  [ x, y, yerr ]
37     "xy" [ x, y, xerr, yerr ]
38
39 Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
40 equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
41 error-bars on X and asymmetric on Y would be:
42
43     [ x, y, xerr, yerr_lower, yerr_upper ]
44
45 By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
46 draw a small cap perpendicular to the error bar. They can also be set to a
47 user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.
48
49     function drawSemiCircle( ctx, x, y, radius ) {
50         ctx.beginPath();
51         ctx.arc( x, y, radius, 0, Math.PI, false );
52         ctx.moveTo( x - radius, y );
53         ctx.lineTo( x + radius, y );
54         ctx.stroke();
55     }
56
57 Color and radius both default to the same ones of the points series if not
58 set. The independent radius parameter on xerr/yerr is useful for the case when
59 we may want to add error-bars to a line, without showing the interconnecting
60 points (with radius: 0), and still showing end caps on the error-bars.
61 shadowSize and lineWidth are derived as well from the points series.
62
63 */
64
65 (function ($) {
66     var options = {
67         series: {
68             points: {
69                 errorbars: null, //should be 'x', 'y' or 'xy'
70                 xerr: { err: 'x', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null},
71                 yerr: { err: 'y', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null}
72             }
73         }
74     };
75
76     function processRawData(plot, series, data, datapoints){
77         if (!series.points.errorbars)
78             return;
79
80         // x,y values
81         var format = [
82             { x: true, number: true, required: true },
83             { y: true, number: true, required: true }
84         ];
85
86         var errors = series.points.errorbars;
87         // error bars - first X then Y
88         if (errors == 'x' || errors == 'xy') {
89             // lower / upper error
90             if (series.points.xerr.asymmetric) {
91                 format.push({ x: true, number: true, required: true });
92                 format.push({ x: true, number: true, required: true });
93             } else
94                 format.push({ x: true, number: true, required: true });
95         }
96         if (errors == 'y' || errors == 'xy') {
97             // lower / upper error
98             if (series.points.yerr.asymmetric) {
99                 format.push({ y: true, number: true, required: true });
100                 format.push({ y: true, number: true, required: true });
101             } else
102                 format.push({ y: true, number: true, required: true });
103         }
104         datapoints.format = format;
105     }
106
107     function parseErrors(series, i){
108
109         var points = series.datapoints.points;
110
111         // read errors from points array
112         var exl = null,
113                 exu = null,
114                 eyl = null,
115                 eyu = null;
116         var xerr = series.points.xerr,
117                 yerr = series.points.yerr;
118
119         var eb = series.points.errorbars;
120         // error bars - first X
121         if (eb == 'x' || eb == 'xy') {
122             if (xerr.asymmetric) {
123                 exl = points[i + 2];
124                 exu = points[i + 3];
125                 if (eb == 'xy')
126                     if (yerr.asymmetric){
127                         eyl = points[i + 4];
128                         eyu = points[i + 5];
129                     } else eyl = points[i + 4];
130             } else {
131                 exl = points[i + 2];
132                 if (eb == 'xy')
133                     if (yerr.asymmetric) {
134                         eyl = points[i + 3];
135                         eyu = points[i + 4];
136                     } else eyl = points[i + 3];
137             }
138         // only Y
139         } else if (eb == 'y')
140             if (yerr.asymmetric) {
141                 eyl = points[i + 2];
142                 eyu = points[i + 3];
143             } else eyl = points[i + 2];
144
145         // symmetric errors?
146         if (exu == null) exu = exl;
147         if (eyu == null) eyu = eyl;
148
149         var errRanges = [exl, exu, eyl, eyu];
150         // nullify if not showing
151         if (!xerr.show){
152             errRanges[0] = null;
153             errRanges[1] = null;
154         }
155         if (!yerr.show){
156             errRanges[2] = null;
157             errRanges[3] = null;
158         }
159         return errRanges;
160     }
161
162     function drawSeriesErrors(plot, ctx, s){
163
164         var points = s.datapoints.points,
165                 ps = s.datapoints.pointsize,
166                 ax = [s.xaxis, s.yaxis],
167                 radius = s.points.radius,
168                 err = [s.points.xerr, s.points.yerr];
169
170         //sanity check, in case some inverted axis hack is applied to flot
171         var invertX = false;
172         if (ax[0].p2c(ax[0].max) < ax[0].p2c(ax[0].min)) {
173             invertX = true;
174             var tmp = err[0].lowerCap;
175             err[0].lowerCap = err[0].upperCap;
176             err[0].upperCap = tmp;
177         }
178
179         var invertY = false;
180         if (ax[1].p2c(ax[1].min) < ax[1].p2c(ax[1].max)) {
181             invertY = true;
182             var tmp = err[1].lowerCap;
183             err[1].lowerCap = err[1].upperCap;
184             err[1].upperCap = tmp;
185         }
186
187         for (var i = 0; i < s.datapoints.points.length; i += ps) {
188
189             //parse
190             var errRanges = parseErrors(s, i);
191
192             //cycle xerr & yerr
193             for (var e = 0; e < err.length; e++){
194
195                 var minmax = [ax[e].min, ax[e].max];
196
197                 //draw this error?
198                 if (errRanges[e * err.length]){
199
200                     //data coordinates
201                     var x = points[i],
202                         y = points[i + 1];
203
204                     //errorbar ranges
205                     var upper = [x, y][e] + errRanges[e * err.length + 1],
206                         lower = [x, y][e] - errRanges[e * err.length];
207
208                     //points outside of the canvas
209                     if (err[e].err == 'x')
210                         if (y > ax[1].max || y < ax[1].min || upper < ax[0].min || lower > ax[0].max)
211                             continue;
212                     if (err[e].err == 'y')
213                         if (x > ax[0].max || x < ax[0].min || upper < ax[1].min || lower > ax[1].max)
214                             continue;
215
216                     // prevent errorbars getting out of the canvas
217                     var drawUpper = true,
218                         drawLower = true;
219
220                     if (upper > minmax[1]) {
221                         drawUpper = false;
222                         upper = minmax[1];
223                     }
224                     if (lower < minmax[0]) {
225                         drawLower = false;
226                         lower = minmax[0];
227                     }
228
229                     //sanity check, in case some inverted axis hack is applied to flot
230                     if ((err[e].err == 'x' && invertX) || (err[e].err == 'y' && invertY)) {
231                         //swap coordinates
232                         var tmp = lower;
233                         lower = upper;
234                         upper = tmp;
235                         tmp = drawLower;
236                         drawLower = drawUpper;
237                         drawUpper = tmp;
238                         tmp = minmax[0];
239                         minmax[0] = minmax[1];
240                         minmax[1] = tmp;
241                     }
242
243                     // convert to pixels
244                     x = ax[0].p2c(x),
245                         y = ax[1].p2c(y),
246                         upper = ax[e].p2c(upper);
247                     lower = ax[e].p2c(lower);
248                     minmax[0] = ax[e].p2c(minmax[0]);
249                     minmax[1] = ax[e].p2c(minmax[1]);
250
251                     //same style as points by default
252                     var lw = err[e].lineWidth ? err[e].lineWidth : s.points.lineWidth,
253                         sw = s.points.shadowSize != null ? s.points.shadowSize : s.shadowSize;
254
255                     //shadow as for points
256                     if (lw > 0 && sw > 0) {
257                         var w = sw / 2;
258                         ctx.lineWidth = w;
259                         ctx.strokeStyle = "rgba(0,0,0,0.1)";
260                         drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w + w/2, minmax);
261
262                         ctx.strokeStyle = "rgba(0,0,0,0.2)";
263                         drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w/2, minmax);
264                     }
265
266                     ctx.strokeStyle = err[e].color? err[e].color: s.color;
267                     ctx.lineWidth = lw;
268                     //draw it
269                     drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, 0, minmax);
270                 }
271             }
272         }
273     }
274
275     function drawError(ctx,err,x,y,upper,lower,drawUpper,drawLower,radius,offset,minmax){
276
277         //shadow offset
278         y += offset;
279         upper += offset;
280         lower += offset;
281
282         // error bar - avoid plotting over circles
283         if (err.err == 'x'){
284             if (upper > x + radius) drawPath(ctx, [[upper,y],[Math.max(x + radius,minmax[0]),y]]);
285             else drawUpper = false;
286             if (lower < x - radius) drawPath(ctx, [[Math.min(x - radius,minmax[1]),y],[lower,y]] );
287             else drawLower = false;
288         }
289         else {
290             if (upper < y - radius) drawPath(ctx, [[x,upper],[x,Math.min(y - radius,minmax[0])]] );
291             else drawUpper = false;
292             if (lower > y + radius) drawPath(ctx, [[x,Math.max(y + radius,minmax[1])],[x,lower]] );
293             else drawLower = false;
294         }
295
296         //internal radius value in errorbar, allows to plot radius 0 points and still keep proper sized caps
297         //this is a way to get errorbars on lines without visible connecting dots
298         radius = err.radius != null? err.radius: radius;
299
300         // upper cap
301         if (drawUpper) {
302             if (err.upperCap == '-'){
303                 if (err.err=='x') drawPath(ctx, [[upper,y - radius],[upper,y + radius]] );
304                 else drawPath(ctx, [[x - radius,upper],[x + radius,upper]] );
305             } else if ($.isFunction(err.upperCap)){
306                 if (err.err=='x') err.upperCap(ctx, upper, y, radius);
307                 else err.upperCap(ctx, x, upper, radius);
308             }
309         }
310         // lower cap
311         if (drawLower) {
312             if (err.lowerCap == '-'){
313                 if (err.err=='x') drawPath(ctx, [[lower,y - radius],[lower,y + radius]] );
314                 else drawPath(ctx, [[x - radius,lower],[x + radius,lower]] );
315             } else if ($.isFunction(err.lowerCap)){
316                 if (err.err=='x') err.lowerCap(ctx, lower, y, radius);
317                 else err.lowerCap(ctx, x, lower, radius);
318             }
319         }
320     }
321
322     function drawPath(ctx, pts){
323         ctx.beginPath();
324         ctx.moveTo(pts[0][0], pts[0][1]);
325         for (var p=1; p < pts.length; p++)
326             ctx.lineTo(pts[p][0], pts[p][1]);
327         ctx.stroke();
328     }
329
330     function draw(plot, ctx){
331         var plotOffset = plot.getPlotOffset();
332
333         ctx.save();
334         ctx.translate(plotOffset.left, plotOffset.top);
335         $.each(plot.getData(), function (i, s) {
336             if (s.points.errorbars && (s.points.xerr.show || s.points.yerr.show))
337                 drawSeriesErrors(plot, ctx, s);
338         });
339         ctx.restore();
340     }
341
342     function init(plot) {
343         plot.hooks.processRawData.push(processRawData);
344         plot.hooks.draw.push(draw);
345     }
346
347     $.plot.plugins.push({
348                 init: init,
349                 options: options,
350                 name: 'errorbars',
351                 version: '1.0'
352             });
353 })(jQuery);