3db5fc2f12
dash-stack orginally was tought as Python Flask project. After some heatet argument and strong considiration we have decided to move the project to Django. This commit is the initial commit for moving project to Django. Change-Id: Id28e3cf1dafbed7dd647b1020376bae893f5c3a2 Signed-off-by: Paarhati Ozkasgarli <ozkasgarli@gmail.com>
354 lines
12 KiB
JavaScript
354 lines
12 KiB
JavaScript
/* 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);
|