354 lines
12 KiB
JavaScript
354 lines
12 KiB
JavaScript
|
/* Flot plugin for plotting error bars.
|
||
|
|
|
||
|
|
Copyright (c) 2007-2014 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);
|