summaryrefslogtreecommitdiff
path: root/jquery.flot.errorbars.js
diff options
context:
space:
mode:
Diffstat (limited to 'jquery.flot.errorbars.js')
-rw-r--r--jquery.flot.errorbars.js353
1 files changed, 353 insertions, 0 deletions
diff --git a/jquery.flot.errorbars.js b/jquery.flot.errorbars.js
new file mode 100644
index 0000000..7298436
--- /dev/null
+++ b/jquery.flot.errorbars.js
@@ -0,0 +1,353 @@
+/* Flot plugin for plotting error bars.
+
+Copyright (c) 2007-2013 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+Error bars are used to show standard deviation and other statistical
+properties in a plot.
+
+* Created by Rui Pereira - rui (dot) pereira (at) gmail (dot) com
+
+This plugin allows you to plot error-bars over points. Set "errorbars" inside
+the points series to the axis name over which there will be error values in
+your data array (*even* if you do not intend to plot them later, by setting
+"show: null" on xerr/yerr).
+
+The plugin supports these options:
+
+ series: {
+ points: {
+ errorbars: "x" or "y" or "xy",
+ xerr: {
+ show: null/false or true,
+ asymmetric: null/false or true,
+ upperCap: null or "-" or function,
+ lowerCap: null or "-" or function,
+ color: null or color,
+ radius: null or number
+ },
+ yerr: { same options as xerr }
+ }
+ }
+
+Each data point array is expected to be of the type:
+
+ "x" [ x, y, xerr ]
+ "y" [ x, y, yerr ]
+ "xy" [ x, y, xerr, yerr ]
+
+Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
+equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
+error-bars on X and asymmetric on Y would be:
+
+ [ x, y, xerr, yerr_lower, yerr_upper ]
+
+By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
+draw a small cap perpendicular to the error bar. They can also be set to a
+user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.
+
+ function drawSemiCircle( ctx, x, y, radius ) {
+ ctx.beginPath();
+ ctx.arc( x, y, radius, 0, Math.PI, false );
+ ctx.moveTo( x - radius, y );
+ ctx.lineTo( x + radius, y );
+ ctx.stroke();
+ }
+
+Color and radius both default to the same ones of the points series if not
+set. The independent radius parameter on xerr/yerr is useful for the case when
+we may want to add error-bars to a line, without showing the interconnecting
+points (with radius: 0), and still showing end caps on the error-bars.
+shadowSize and lineWidth are derived as well from the points series.
+
+*/
+
+(function ($) {
+ var options = {
+ series: {
+ points: {
+ errorbars: null, //should be 'x', 'y' or 'xy'
+ xerr: { err: 'x', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null},
+ yerr: { err: 'y', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null}
+ }
+ }
+ };
+
+ function processRawData(plot, series, data, datapoints){
+ if (!series.points.errorbars)
+ return;
+
+ // x,y values
+ var format = [
+ { x: true, number: true, required: true },
+ { y: true, number: true, required: true }
+ ];
+
+ var errors = series.points.errorbars;
+ // error bars - first X then Y
+ if (errors == 'x' || errors == 'xy') {
+ // lower / upper error
+ if (series.points.xerr.asymmetric) {
+ format.push({ x: true, number: true, required: true });
+ format.push({ x: true, number: true, required: true });
+ } else
+ format.push({ x: true, number: true, required: true });
+ }
+ if (errors == 'y' || errors == 'xy') {
+ // lower / upper error
+ if (series.points.yerr.asymmetric) {
+ format.push({ y: true, number: true, required: true });
+ format.push({ y: true, number: true, required: true });
+ } else
+ format.push({ y: true, number: true, required: true });
+ }
+ datapoints.format = format;
+ }
+
+ function parseErrors(series, i){
+
+ var points = series.datapoints.points;
+
+ // read errors from points array
+ var exl = null,
+ exu = null,
+ eyl = null,
+ eyu = null;
+ var xerr = series.points.xerr,
+ yerr = series.points.yerr;
+
+ var eb = series.points.errorbars;
+ // error bars - first X
+ if (eb == 'x' || eb == 'xy') {
+ if (xerr.asymmetric) {
+ exl = points[i + 2];
+ exu = points[i + 3];
+ if (eb == 'xy')
+ if (yerr.asymmetric){
+ eyl = points[i + 4];
+ eyu = points[i + 5];
+ } else eyl = points[i + 4];
+ } else {
+ exl = points[i + 2];
+ if (eb == 'xy')
+ if (yerr.asymmetric) {
+ eyl = points[i + 3];
+ eyu = points[i + 4];
+ } else eyl = points[i + 3];
+ }
+ // only Y
+ } else if (eb == 'y')
+ if (yerr.asymmetric) {
+ eyl = points[i + 2];
+ eyu = points[i + 3];
+ } else eyl = points[i + 2];
+
+ // symmetric errors?
+ if (exu == null) exu = exl;
+ if (eyu == null) eyu = eyl;
+
+ var errRanges = [exl, exu, eyl, eyu];
+ // nullify if not showing
+ if (!xerr.show){
+ errRanges[0] = null;
+ errRanges[1] = null;
+ }
+ if (!yerr.show){
+ errRanges[2] = null;
+ errRanges[3] = null;
+ }
+ return errRanges;
+ }
+
+ function drawSeriesErrors(plot, ctx, s){
+
+ var points = s.datapoints.points,
+ ps = s.datapoints.pointsize,
+ ax = [s.xaxis, s.yaxis],
+ radius = s.points.radius,
+ err = [s.points.xerr, s.points.yerr];
+
+ //sanity check, in case some inverted axis hack is applied to flot
+ var invertX = false;
+ if (ax[0].p2c(ax[0].max) < ax[0].p2c(ax[0].min)) {
+ invertX = true;
+ var tmp = err[0].lowerCap;
+ err[0].lowerCap = err[0].upperCap;
+ err[0].upperCap = tmp;
+ }
+
+ var invertY = false;
+ if (ax[1].p2c(ax[1].min) < ax[1].p2c(ax[1].max)) {
+ invertY = true;
+ var tmp = err[1].lowerCap;
+ err[1].lowerCap = err[1].upperCap;
+ err[1].upperCap = tmp;
+ }
+
+ for (var i = 0; i < s.datapoints.points.length; i += ps) {
+
+ //parse
+ var errRanges = parseErrors(s, i);
+
+ //cycle xerr & yerr
+ for (var e = 0; e < err.length; e++){
+
+ var minmax = [ax[e].min, ax[e].max];
+
+ //draw this error?
+ if (errRanges[e * err.length]){
+
+ //data coordinates
+ var x = points[i],
+ y = points[i + 1];
+
+ //errorbar ranges
+ var upper = [x, y][e] + errRanges[e * err.length + 1],
+ lower = [x, y][e] - errRanges[e * err.length];
+
+ //points outside of the canvas
+ if (err[e].err == 'x')
+ if (y > ax[1].max || y < ax[1].min || upper < ax[0].min || lower > ax[0].max)
+ continue;
+ if (err[e].err == 'y')
+ if (x > ax[0].max || x < ax[0].min || upper < ax[1].min || lower > ax[1].max)
+ continue;
+
+ // prevent errorbars getting out of the canvas
+ var drawUpper = true,
+ drawLower = true;
+
+ if (upper > minmax[1]) {
+ drawUpper = false;
+ upper = minmax[1];
+ }
+ if (lower < minmax[0]) {
+ drawLower = false;
+ lower = minmax[0];
+ }
+
+ //sanity check, in case some inverted axis hack is applied to flot
+ if ((err[e].err == 'x' && invertX) || (err[e].err == 'y' && invertY)) {
+ //swap coordinates
+ var tmp = lower;
+ lower = upper;
+ upper = tmp;
+ tmp = drawLower;
+ drawLower = drawUpper;
+ drawUpper = tmp;
+ tmp = minmax[0];
+ minmax[0] = minmax[1];
+ minmax[1] = tmp;
+ }
+
+ // convert to pixels
+ x = ax[0].p2c(x),
+ y = ax[1].p2c(y),
+ upper = ax[e].p2c(upper);
+ lower = ax[e].p2c(lower);
+ minmax[0] = ax[e].p2c(minmax[0]);
+ minmax[1] = ax[e].p2c(minmax[1]);
+
+ //same style as points by default
+ var lw = err[e].lineWidth ? err[e].lineWidth : s.points.lineWidth,
+ sw = s.points.shadowSize != null ? s.points.shadowSize : s.shadowSize;
+
+ //shadow as for points
+ if (lw > 0 && sw > 0) {
+ var w = sw / 2;
+ ctx.lineWidth = w;
+ ctx.strokeStyle = "rgba(0,0,0,0.1)";
+ drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w + w/2, minmax);
+
+ ctx.strokeStyle = "rgba(0,0,0,0.2)";
+ drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w/2, minmax);
+ }
+
+ ctx.strokeStyle = err[e].color? err[e].color: s.color;
+ ctx.lineWidth = lw;
+ //draw it
+ drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, 0, minmax);
+ }
+ }
+ }
+ }
+
+ function drawError(ctx,err,x,y,upper,lower,drawUpper,drawLower,radius,offset,minmax){
+
+ //shadow offset
+ y += offset;
+ upper += offset;
+ lower += offset;
+
+ // error bar - avoid plotting over circles
+ if (err.err == 'x'){
+ if (upper > x + radius) drawPath(ctx, [[upper,y],[Math.max(x + radius,minmax[0]),y]]);
+ else drawUpper = false;
+ if (lower < x - radius) drawPath(ctx, [[Math.min(x - radius,minmax[1]),y],[lower,y]] );
+ else drawLower = false;
+ }
+ else {
+ if (upper < y - radius) drawPath(ctx, [[x,upper],[x,Math.min(y - radius,minmax[0])]] );
+ else drawUpper = false;
+ if (lower > y + radius) drawPath(ctx, [[x,Math.max(y + radius,minmax[1])],[x,lower]] );
+ else drawLower = false;
+ }
+
+ //internal radius value in errorbar, allows to plot radius 0 points and still keep proper sized caps
+ //this is a way to get errorbars on lines without visible connecting dots
+ radius = err.radius != null? err.radius: radius;
+
+ // upper cap
+ if (drawUpper) {
+ if (err.upperCap == '-'){
+ if (err.err=='x') drawPath(ctx, [[upper,y - radius],[upper,y + radius]] );
+ else drawPath(ctx, [[x - radius,upper],[x + radius,upper]] );
+ } else if ($.isFunction(err.upperCap)){
+ if (err.err=='x') err.upperCap(ctx, upper, y, radius);
+ else err.upperCap(ctx, x, upper, radius);
+ }
+ }
+ // lower cap
+ if (drawLower) {
+ if (err.lowerCap == '-'){
+ if (err.err=='x') drawPath(ctx, [[lower,y - radius],[lower,y + radius]] );
+ else drawPath(ctx, [[x - radius,lower],[x + radius,lower]] );
+ } else if ($.isFunction(err.lowerCap)){
+ if (err.err=='x') err.lowerCap(ctx, lower, y, radius);
+ else err.lowerCap(ctx, x, lower, radius);
+ }
+ }
+ }
+
+ function drawPath(ctx, pts){
+ ctx.beginPath();
+ ctx.moveTo(pts[0][0], pts[0][1]);
+ for (var p=1; p < pts.length; p++)
+ ctx.lineTo(pts[p][0], pts[p][1]);
+ ctx.stroke();
+ }
+
+ function draw(plot, ctx){
+ var plotOffset = plot.getPlotOffset();
+
+ ctx.save();
+ ctx.translate(plotOffset.left, plotOffset.top);
+ $.each(plot.getData(), function (i, s) {
+ if (s.points.errorbars && (s.points.xerr.show || s.points.yerr.show))
+ drawSeriesErrors(plot, ctx, s);
+ });
+ ctx.restore();
+ }
+
+ function init(plot) {
+ plot.hooks.processRawData.push(processRawData);
+ plot.hooks.draw.push(draw);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'errorbars',
+ version: '1.0'
+ });
+})(jQuery);
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-25 16:43:58 +0000