1 | /* Flot plugin for plotting error bars. |
---|
2 | |
---|
3 | Copyright (c) 2007-2013 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); |
---|