Added flot.
This commit is contained in:
Martin Edenhofer
parent
af0bbe3168
commit
79bfde2fab
15 changed files with 6645 additions and 0 deletions
1427
app/assets/javascripts/app/lib/flot/excanvas.js
Executable file
1427
app/assets/javascripts/app/lib/flot/excanvas.js
Executable file
File diff suppressed because it is too large
Load diff
1
app/assets/javascripts/app/lib/flot/excanvas.min.js
vendored
Executable file
1
app/assets/javascripts/app/lib/flot/excanvas.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
179
app/assets/javascripts/app/lib/flot/jquery.colorhelpers.js
Executable file
179
app/assets/javascripts/app/lib/flot/jquery.colorhelpers.js
Executable file
|
|
@ -0,0 +1,179 @@
|
||||||
|
/* Plugin for jQuery for working with colors.
|
||||||
|
*
|
||||||
|
* Version 1.1.
|
||||||
|
*
|
||||||
|
* Inspiration from jQuery color animation plugin by John Resig.
|
||||||
|
*
|
||||||
|
* Released under the MIT license by Ole Laursen, October 2009.
|
||||||
|
*
|
||||||
|
* Examples:
|
||||||
|
*
|
||||||
|
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
|
||||||
|
* var c = $.color.extract($("#mydiv"), 'background-color');
|
||||||
|
* console.log(c.r, c.g, c.b, c.a);
|
||||||
|
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
|
||||||
|
*
|
||||||
|
* Note that .scale() and .add() return the same modified object
|
||||||
|
* instead of making a new one.
|
||||||
|
*
|
||||||
|
* V. 1.1: Fix error handling so e.g. parsing an empty string does
|
||||||
|
* produce a color rather than just crashing.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
$.color = {};
|
||||||
|
|
||||||
|
// construct color object with some convenient chainable helpers
|
||||||
|
$.color.make = function (r, g, b, a) {
|
||||||
|
var o = {};
|
||||||
|
o.r = r || 0;
|
||||||
|
o.g = g || 0;
|
||||||
|
o.b = b || 0;
|
||||||
|
o.a = a != null ? a : 1;
|
||||||
|
|
||||||
|
o.add = function (c, d) {
|
||||||
|
for (var i = 0; i < c.length; ++i)
|
||||||
|
o[c.charAt(i)] += d;
|
||||||
|
return o.normalize();
|
||||||
|
};
|
||||||
|
|
||||||
|
o.scale = function (c, f) {
|
||||||
|
for (var i = 0; i < c.length; ++i)
|
||||||
|
o[c.charAt(i)] *= f;
|
||||||
|
return o.normalize();
|
||||||
|
};
|
||||||
|
|
||||||
|
o.toString = function () {
|
||||||
|
if (o.a >= 1.0) {
|
||||||
|
return "rgb("+[o.r, o.g, o.b].join(",")+")";
|
||||||
|
} else {
|
||||||
|
return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
o.normalize = function () {
|
||||||
|
function clamp(min, value, max) {
|
||||||
|
return value < min ? min: (value > max ? max: value);
|
||||||
|
}
|
||||||
|
|
||||||
|
o.r = clamp(0, parseInt(o.r), 255);
|
||||||
|
o.g = clamp(0, parseInt(o.g), 255);
|
||||||
|
o.b = clamp(0, parseInt(o.b), 255);
|
||||||
|
o.a = clamp(0, o.a, 1);
|
||||||
|
return o;
|
||||||
|
};
|
||||||
|
|
||||||
|
o.clone = function () {
|
||||||
|
return $.color.make(o.r, o.b, o.g, o.a);
|
||||||
|
};
|
||||||
|
|
||||||
|
return o.normalize();
|
||||||
|
}
|
||||||
|
|
||||||
|
// extract CSS color property from element, going up in the DOM
|
||||||
|
// if it's "transparent"
|
||||||
|
$.color.extract = function (elem, css) {
|
||||||
|
var c;
|
||||||
|
do {
|
||||||
|
c = elem.css(css).toLowerCase();
|
||||||
|
// keep going until we find an element that has color, or
|
||||||
|
// we hit the body
|
||||||
|
if (c != '' && c != 'transparent')
|
||||||
|
break;
|
||||||
|
elem = elem.parent();
|
||||||
|
} while (!$.nodeName(elem.get(0), "body"));
|
||||||
|
|
||||||
|
// catch Safari's way of signalling transparent
|
||||||
|
if (c == "rgba(0, 0, 0, 0)")
|
||||||
|
c = "transparent";
|
||||||
|
|
||||||
|
return $.color.parse(c);
|
||||||
|
}
|
||||||
|
|
||||||
|
// parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
|
||||||
|
// returns color object, if parsing failed, you get black (0, 0,
|
||||||
|
// 0) out
|
||||||
|
$.color.parse = function (str) {
|
||||||
|
var res, m = $.color.make;
|
||||||
|
|
||||||
|
// Look for rgb(num,num,num)
|
||||||
|
if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
|
||||||
|
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
|
||||||
|
|
||||||
|
// Look for rgba(num,num,num,num)
|
||||||
|
if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
|
||||||
|
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
|
||||||
|
|
||||||
|
// Look for rgb(num%,num%,num%)
|
||||||
|
if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
|
||||||
|
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55);
|
||||||
|
|
||||||
|
// Look for rgba(num%,num%,num%,num)
|
||||||
|
if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
|
||||||
|
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4]));
|
||||||
|
|
||||||
|
// Look for #a0b1c2
|
||||||
|
if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
|
||||||
|
return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
|
||||||
|
|
||||||
|
// Look for #fff
|
||||||
|
if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
|
||||||
|
return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16));
|
||||||
|
|
||||||
|
// Otherwise, we're most likely dealing with a named color
|
||||||
|
var name = $.trim(str).toLowerCase();
|
||||||
|
if (name == "transparent")
|
||||||
|
return m(255, 255, 255, 0);
|
||||||
|
else {
|
||||||
|
// default to black
|
||||||
|
res = lookupColors[name] || [0, 0, 0];
|
||||||
|
return m(res[0], res[1], res[2]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var lookupColors = {
|
||||||
|
aqua:[0,255,255],
|
||||||
|
azure:[240,255,255],
|
||||||
|
beige:[245,245,220],
|
||||||
|
black:[0,0,0],
|
||||||
|
blue:[0,0,255],
|
||||||
|
brown:[165,42,42],
|
||||||
|
cyan:[0,255,255],
|
||||||
|
darkblue:[0,0,139],
|
||||||
|
darkcyan:[0,139,139],
|
||||||
|
darkgrey:[169,169,169],
|
||||||
|
darkgreen:[0,100,0],
|
||||||
|
darkkhaki:[189,183,107],
|
||||||
|
darkmagenta:[139,0,139],
|
||||||
|
darkolivegreen:[85,107,47],
|
||||||
|
darkorange:[255,140,0],
|
||||||
|
darkorchid:[153,50,204],
|
||||||
|
darkred:[139,0,0],
|
||||||
|
darksalmon:[233,150,122],
|
||||||
|
darkviolet:[148,0,211],
|
||||||
|
fuchsia:[255,0,255],
|
||||||
|
gold:[255,215,0],
|
||||||
|
green:[0,128,0],
|
||||||
|
indigo:[75,0,130],
|
||||||
|
khaki:[240,230,140],
|
||||||
|
lightblue:[173,216,230],
|
||||||
|
lightcyan:[224,255,255],
|
||||||
|
lightgreen:[144,238,144],
|
||||||
|
lightgrey:[211,211,211],
|
||||||
|
lightpink:[255,182,193],
|
||||||
|
lightyellow:[255,255,224],
|
||||||
|
lime:[0,255,0],
|
||||||
|
magenta:[255,0,255],
|
||||||
|
maroon:[128,0,0],
|
||||||
|
navy:[0,0,128],
|
||||||
|
olive:[128,128,0],
|
||||||
|
orange:[255,165,0],
|
||||||
|
pink:[255,192,203],
|
||||||
|
purple:[128,0,128],
|
||||||
|
violet:[128,0,128],
|
||||||
|
red:[255,0,0],
|
||||||
|
silver:[192,192,192],
|
||||||
|
white:[255,255,255],
|
||||||
|
yellow:[255,255,0]
|
||||||
|
};
|
||||||
|
})(jQuery);
|
||||||
167
app/assets/javascripts/app/lib/flot/jquery.flot.crosshair.js
Executable file
167
app/assets/javascripts/app/lib/flot/jquery.flot.crosshair.js
Executable file
|
|
@ -0,0 +1,167 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for showing crosshairs, thin lines, when the mouse hovers
|
||||||
|
over the plot.
|
||||||
|
|
||||||
|
crosshair: {
|
||||||
|
mode: null or "x" or "y" or "xy"
|
||||||
|
color: color
|
||||||
|
lineWidth: number
|
||||||
|
}
|
||||||
|
|
||||||
|
Set the mode to one of "x", "y" or "xy". The "x" mode enables a
|
||||||
|
vertical crosshair that lets you trace the values on the x axis, "y"
|
||||||
|
enables a horizontal crosshair and "xy" enables them both. "color" is
|
||||||
|
the color of the crosshair (default is "rgba(170, 0, 0, 0.80)"),
|
||||||
|
"lineWidth" is the width of the drawn lines (default is 1).
|
||||||
|
|
||||||
|
The plugin also adds four public methods:
|
||||||
|
|
||||||
|
- setCrosshair(pos)
|
||||||
|
|
||||||
|
Set the position of the crosshair. Note that this is cleared if
|
||||||
|
the user moves the mouse. "pos" is in coordinates of the plot and
|
||||||
|
should be on the form { x: xpos, y: ypos } (you can use x2/x3/...
|
||||||
|
if you're using multiple axes), which is coincidentally the same
|
||||||
|
format as what you get from a "plothover" event. If "pos" is null,
|
||||||
|
the crosshair is cleared.
|
||||||
|
|
||||||
|
- clearCrosshair()
|
||||||
|
|
||||||
|
Clear the crosshair.
|
||||||
|
|
||||||
|
- lockCrosshair(pos)
|
||||||
|
|
||||||
|
Cause the crosshair to lock to the current location, no longer
|
||||||
|
updating if the user moves the mouse. Optionally supply a position
|
||||||
|
(passed on to setCrosshair()) to move it to.
|
||||||
|
|
||||||
|
Example usage:
|
||||||
|
var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
|
||||||
|
$("#graph").bind("plothover", function (evt, position, item) {
|
||||||
|
if (item) {
|
||||||
|
// Lock the crosshair to the data point being hovered
|
||||||
|
myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] });
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Return normal crosshair operation
|
||||||
|
myFlot.unlockCrosshair();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
- unlockCrosshair()
|
||||||
|
|
||||||
|
Free the crosshair to move again after locking it.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = {
|
||||||
|
crosshair: {
|
||||||
|
mode: null, // one of null, "x", "y" or "xy",
|
||||||
|
color: "rgba(170, 0, 0, 0.80)",
|
||||||
|
lineWidth: 1
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
// position of crosshair in pixels
|
||||||
|
var crosshair = { x: -1, y: -1, locked: false };
|
||||||
|
|
||||||
|
plot.setCrosshair = function setCrosshair(pos) {
|
||||||
|
if (!pos)
|
||||||
|
crosshair.x = -1;
|
||||||
|
else {
|
||||||
|
var o = plot.p2c(pos);
|
||||||
|
crosshair.x = Math.max(0, Math.min(o.left, plot.width()));
|
||||||
|
crosshair.y = Math.max(0, Math.min(o.top, plot.height()));
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
};
|
||||||
|
|
||||||
|
plot.clearCrosshair = plot.setCrosshair; // passes null for pos
|
||||||
|
|
||||||
|
plot.lockCrosshair = function lockCrosshair(pos) {
|
||||||
|
if (pos)
|
||||||
|
plot.setCrosshair(pos);
|
||||||
|
crosshair.locked = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.unlockCrosshair = function unlockCrosshair() {
|
||||||
|
crosshair.locked = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseOut(e) {
|
||||||
|
if (crosshair.locked)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (crosshair.x != -1) {
|
||||||
|
crosshair.x = -1;
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseMove(e) {
|
||||||
|
if (crosshair.locked)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (plot.getSelection && plot.getSelection()) {
|
||||||
|
crosshair.x = -1; // hide the crosshair while selecting
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var offset = plot.offset();
|
||||||
|
crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
|
||||||
|
crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(function (plot, eventHolder) {
|
||||||
|
if (!plot.getOptions().crosshair.mode)
|
||||||
|
return;
|
||||||
|
|
||||||
|
eventHolder.mouseout(onMouseOut);
|
||||||
|
eventHolder.mousemove(onMouseMove);
|
||||||
|
});
|
||||||
|
|
||||||
|
plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||||||
|
var c = plot.getOptions().crosshair;
|
||||||
|
if (!c.mode)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var plotOffset = plot.getPlotOffset();
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(plotOffset.left, plotOffset.top);
|
||||||
|
|
||||||
|
if (crosshair.x != -1) {
|
||||||
|
ctx.strokeStyle = c.color;
|
||||||
|
ctx.lineWidth = c.lineWidth;
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
if (c.mode.indexOf("x") != -1) {
|
||||||
|
ctx.moveTo(crosshair.x, 0);
|
||||||
|
ctx.lineTo(crosshair.x, plot.height());
|
||||||
|
}
|
||||||
|
if (c.mode.indexOf("y") != -1) {
|
||||||
|
ctx.moveTo(0, crosshair.y);
|
||||||
|
ctx.lineTo(plot.width(), crosshair.y);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
plot.hooks.shutdown.push(function (plot, eventHolder) {
|
||||||
|
eventHolder.unbind("mouseout", onMouseOut);
|
||||||
|
eventHolder.unbind("mousemove", onMouseMove);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'crosshair',
|
||||||
|
version: '1.0'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
183
app/assets/javascripts/app/lib/flot/jquery.flot.fillbetween.js
Executable file
183
app/assets/javascripts/app/lib/flot/jquery.flot.fillbetween.js
Executable file
|
|
@ -0,0 +1,183 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for computing bottoms for filled line and bar charts.
|
||||||
|
|
||||||
|
The case: you've got two series that you want to fill the area
|
||||||
|
between. In Flot terms, you need to use one as the fill bottom of the
|
||||||
|
other. You can specify the bottom of each data point as the third
|
||||||
|
coordinate manually, or you can use this plugin to compute it for you.
|
||||||
|
|
||||||
|
In order to name the other series, you need to give it an id, like this
|
||||||
|
|
||||||
|
var dataset = [
|
||||||
|
{ data: [ ... ], id: "foo" } , // use default bottom
|
||||||
|
{ data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
|
||||||
|
];
|
||||||
|
|
||||||
|
$.plot($("#placeholder"), dataset, { line: { show: true, fill: true }});
|
||||||
|
|
||||||
|
As a convenience, if the id given is a number that doesn't appear as
|
||||||
|
an id in the series, it is interpreted as the index in the array
|
||||||
|
instead (so fillBetween: 0 can also mean the first series).
|
||||||
|
|
||||||
|
Internally, the plugin modifies the datapoints in each series. For
|
||||||
|
line series, extra data points might be inserted through
|
||||||
|
interpolation. Note that at points where the bottom line is not
|
||||||
|
defined (due to a null point or start/end of line), the current line
|
||||||
|
will show a gap too. The algorithm comes from the jquery.flot.stack.js
|
||||||
|
plugin, possibly some code could be shared.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = {
|
||||||
|
series: { fillBetween: null } // or number
|
||||||
|
};
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
function findBottomSeries(s, allseries) {
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < allseries.length; ++i) {
|
||||||
|
if (allseries[i].id == s.fillBetween)
|
||||||
|
return allseries[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof s.fillBetween == "number") {
|
||||||
|
i = s.fillBetween;
|
||||||
|
|
||||||
|
if (i < 0 || i >= allseries.length)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
return allseries[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeFillBottoms(plot, s, datapoints) {
|
||||||
|
if (s.fillBetween == null)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var other = findBottomSeries(s, plot.getData());
|
||||||
|
if (!other)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var ps = datapoints.pointsize,
|
||||||
|
points = datapoints.points,
|
||||||
|
otherps = other.datapoints.pointsize,
|
||||||
|
otherpoints = other.datapoints.points,
|
||||||
|
newpoints = [],
|
||||||
|
px, py, intery, qx, qy, bottom,
|
||||||
|
withlines = s.lines.show,
|
||||||
|
withbottom = ps > 2 && datapoints.format[2].y,
|
||||||
|
withsteps = withlines && s.lines.steps,
|
||||||
|
fromgap = true,
|
||||||
|
i = 0, j = 0, l;
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
if (i >= points.length)
|
||||||
|
break;
|
||||||
|
|
||||||
|
l = newpoints.length;
|
||||||
|
|
||||||
|
if (points[i] == null) {
|
||||||
|
// copy gaps
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
i += ps;
|
||||||
|
}
|
||||||
|
else if (j >= otherpoints.length) {
|
||||||
|
// for lines, we can't use the rest of the points
|
||||||
|
if (!withlines) {
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
}
|
||||||
|
i += ps;
|
||||||
|
}
|
||||||
|
else if (otherpoints[j] == null) {
|
||||||
|
// oops, got a gap
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(null);
|
||||||
|
fromgap = true;
|
||||||
|
j += otherps;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// cases where we actually got two points
|
||||||
|
px = points[i];
|
||||||
|
py = points[i + 1];
|
||||||
|
qx = otherpoints[j];
|
||||||
|
qy = otherpoints[j + 1];
|
||||||
|
bottom = 0;
|
||||||
|
|
||||||
|
if (px == qx) {
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
|
||||||
|
//newpoints[l + 1] += qy;
|
||||||
|
bottom = qy;
|
||||||
|
|
||||||
|
i += ps;
|
||||||
|
j += otherps;
|
||||||
|
}
|
||||||
|
else if (px > qx) {
|
||||||
|
// we got past point below, might need to
|
||||||
|
// insert interpolated extra point
|
||||||
|
if (withlines && i > 0 && points[i - ps] != null) {
|
||||||
|
intery = py + (points[i - ps + 1] - py) * (qx - px) / (points[i - ps] - px);
|
||||||
|
newpoints.push(qx);
|
||||||
|
newpoints.push(intery)
|
||||||
|
for (m = 2; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
bottom = qy;
|
||||||
|
}
|
||||||
|
|
||||||
|
j += otherps;
|
||||||
|
}
|
||||||
|
else { // px < qx
|
||||||
|
if (fromgap && withlines) {
|
||||||
|
// if we come from a gap, we just skip this point
|
||||||
|
i += ps;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
|
||||||
|
// we might be able to interpolate a point below,
|
||||||
|
// this can give us a better y
|
||||||
|
if (withlines && j > 0 && otherpoints[j - otherps] != null)
|
||||||
|
bottom = qy + (otherpoints[j - otherps + 1] - qy) * (px - qx) / (otherpoints[j - otherps] - qx);
|
||||||
|
|
||||||
|
//newpoints[l + 1] += bottom;
|
||||||
|
|
||||||
|
i += ps;
|
||||||
|
}
|
||||||
|
|
||||||
|
fromgap = false;
|
||||||
|
|
||||||
|
if (l != newpoints.length && withbottom)
|
||||||
|
newpoints[l + 2] = bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// maintain the line steps invariant
|
||||||
|
if (withsteps && l != newpoints.length && l > 0
|
||||||
|
&& newpoints[l] != null
|
||||||
|
&& newpoints[l] != newpoints[l - ps]
|
||||||
|
&& newpoints[l + 1] != newpoints[l - ps + 1]) {
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints[l + ps + m] = newpoints[l + m];
|
||||||
|
newpoints[l + 1] = newpoints[l - ps + 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
datapoints.points = newpoints;
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.hooks.processDatapoints.push(computeFillBottoms);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'fillbetween',
|
||||||
|
version: '1.0'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
238
app/assets/javascripts/app/lib/flot/jquery.flot.image.js
Executable file
238
app/assets/javascripts/app/lib/flot/jquery.flot.image.js
Executable file
|
|
@ -0,0 +1,238 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for plotting images, e.g. useful for putting ticks on a
|
||||||
|
prerendered complex visualization.
|
||||||
|
|
||||||
|
The data syntax is [[image, x1, y1, x2, y2], ...] where (x1, y1) and
|
||||||
|
(x2, y2) are where you intend the two opposite corners of the image to
|
||||||
|
end up in the plot. Image must be a fully loaded Javascript image (you
|
||||||
|
can make one with new Image()). If the image is not complete, it's
|
||||||
|
skipped when plotting.
|
||||||
|
|
||||||
|
There are two helpers included for retrieving images. The easiest work
|
||||||
|
the way that you put in URLs instead of images in the data (like
|
||||||
|
["myimage.png", 0, 0, 10, 10]), then call $.plot.image.loadData(data,
|
||||||
|
options, callback) where data and options are the same as you pass in
|
||||||
|
to $.plot. This loads the images, replaces the URLs in the data with
|
||||||
|
the corresponding images and calls "callback" when all images are
|
||||||
|
loaded (or failed loading). In the callback, you can then call $.plot
|
||||||
|
with the data set. See the included example.
|
||||||
|
|
||||||
|
A more low-level helper, $.plot.image.load(urls, callback) is also
|
||||||
|
included. Given a list of URLs, it calls callback with an object
|
||||||
|
mapping from URL to Image object when all images are loaded or have
|
||||||
|
failed loading.
|
||||||
|
|
||||||
|
Options for the plugin are
|
||||||
|
|
||||||
|
series: {
|
||||||
|
images: {
|
||||||
|
show: boolean
|
||||||
|
anchor: "corner" or "center"
|
||||||
|
alpha: [0,1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
which can be specified for a specific series
|
||||||
|
|
||||||
|
$.plot($("#placeholder"), [{ data: [ ... ], images: { ... } ])
|
||||||
|
|
||||||
|
Note that because the data format is different from usual data points,
|
||||||
|
you can't use images with anything else in a specific data series.
|
||||||
|
|
||||||
|
Setting "anchor" to "center" causes the pixels in the image to be
|
||||||
|
anchored at the corner pixel centers inside of at the pixel corners,
|
||||||
|
effectively letting half a pixel stick out to each side in the plot.
|
||||||
|
|
||||||
|
|
||||||
|
A possible future direction could be support for tiling for large
|
||||||
|
images (like Google Maps).
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = {
|
||||||
|
series: {
|
||||||
|
images: {
|
||||||
|
show: false,
|
||||||
|
alpha: 1,
|
||||||
|
anchor: "corner" // or "center"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.plot.image = {};
|
||||||
|
|
||||||
|
$.plot.image.loadDataImages = function (series, options, callback) {
|
||||||
|
var urls = [], points = [];
|
||||||
|
|
||||||
|
var defaultShow = options.series.images.show;
|
||||||
|
|
||||||
|
$.each(series, function (i, s) {
|
||||||
|
if (!(defaultShow || s.images.show))
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (s.data)
|
||||||
|
s = s.data;
|
||||||
|
|
||||||
|
$.each(s, function (i, p) {
|
||||||
|
if (typeof p[0] == "string") {
|
||||||
|
urls.push(p[0]);
|
||||||
|
points.push(p);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$.plot.image.load(urls, function (loadedImages) {
|
||||||
|
$.each(points, function (i, p) {
|
||||||
|
var url = p[0];
|
||||||
|
if (loadedImages[url])
|
||||||
|
p[0] = loadedImages[url];
|
||||||
|
});
|
||||||
|
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.image.load = function (urls, callback) {
|
||||||
|
var missing = urls.length, loaded = {};
|
||||||
|
if (missing == 0)
|
||||||
|
callback({});
|
||||||
|
|
||||||
|
$.each(urls, function (i, url) {
|
||||||
|
var handler = function () {
|
||||||
|
--missing;
|
||||||
|
|
||||||
|
loaded[url] = this;
|
||||||
|
|
||||||
|
if (missing == 0)
|
||||||
|
callback(loaded);
|
||||||
|
};
|
||||||
|
|
||||||
|
$('<img />').load(handler).error(handler).attr('src', url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawSeries(plot, ctx, series) {
|
||||||
|
var plotOffset = plot.getPlotOffset();
|
||||||
|
|
||||||
|
if (!series.images || !series.images.show)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var points = series.datapoints.points,
|
||||||
|
ps = series.datapoints.pointsize;
|
||||||
|
|
||||||
|
for (var i = 0; i < points.length; i += ps) {
|
||||||
|
var img = points[i],
|
||||||
|
x1 = points[i + 1], y1 = points[i + 2],
|
||||||
|
x2 = points[i + 3], y2 = points[i + 4],
|
||||||
|
xaxis = series.xaxis, yaxis = series.yaxis,
|
||||||
|
tmp;
|
||||||
|
|
||||||
|
// actually we should check img.complete, but it
|
||||||
|
// appears to be a somewhat unreliable indicator in
|
||||||
|
// IE6 (false even after load event)
|
||||||
|
if (!img || img.width <= 0 || img.height <= 0)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
if (x1 > x2) {
|
||||||
|
tmp = x2;
|
||||||
|
x2 = x1;
|
||||||
|
x1 = tmp;
|
||||||
|
}
|
||||||
|
if (y1 > y2) {
|
||||||
|
tmp = y2;
|
||||||
|
y2 = y1;
|
||||||
|
y1 = tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if the anchor is at the center of the pixel, expand the
|
||||||
|
// image by 1/2 pixel in each direction
|
||||||
|
if (series.images.anchor == "center") {
|
||||||
|
tmp = 0.5 * (x2-x1) / (img.width - 1);
|
||||||
|
x1 -= tmp;
|
||||||
|
x2 += tmp;
|
||||||
|
tmp = 0.5 * (y2-y1) / (img.height - 1);
|
||||||
|
y1 -= tmp;
|
||||||
|
y2 += tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
// clip
|
||||||
|
if (x1 == x2 || y1 == y2 ||
|
||||||
|
x1 >= xaxis.max || x2 <= xaxis.min ||
|
||||||
|
y1 >= yaxis.max || y2 <= yaxis.min)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
|
||||||
|
if (x1 < xaxis.min) {
|
||||||
|
sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
|
||||||
|
x1 = xaxis.min;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x2 > xaxis.max) {
|
||||||
|
sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
|
||||||
|
x2 = xaxis.max;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (y1 < yaxis.min) {
|
||||||
|
sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
|
||||||
|
y1 = yaxis.min;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (y2 > yaxis.max) {
|
||||||
|
sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
|
||||||
|
y2 = yaxis.max;
|
||||||
|
}
|
||||||
|
|
||||||
|
x1 = xaxis.p2c(x1);
|
||||||
|
x2 = xaxis.p2c(x2);
|
||||||
|
y1 = yaxis.p2c(y1);
|
||||||
|
y2 = yaxis.p2c(y2);
|
||||||
|
|
||||||
|
// the transformation may have swapped us
|
||||||
|
if (x1 > x2) {
|
||||||
|
tmp = x2;
|
||||||
|
x2 = x1;
|
||||||
|
x1 = tmp;
|
||||||
|
}
|
||||||
|
if (y1 > y2) {
|
||||||
|
tmp = y2;
|
||||||
|
y2 = y1;
|
||||||
|
y1 = tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
tmp = ctx.globalAlpha;
|
||||||
|
ctx.globalAlpha *= series.images.alpha;
|
||||||
|
ctx.drawImage(img,
|
||||||
|
sx1, sy1, sx2 - sx1, sy2 - sy1,
|
||||||
|
x1 + plotOffset.left, y1 + plotOffset.top,
|
||||||
|
x2 - x1, y2 - y1);
|
||||||
|
ctx.globalAlpha = tmp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function processRawData(plot, series, data, datapoints) {
|
||||||
|
if (!series.images.show)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// format is Image, x1, y1, x2, y2 (opposite corners)
|
||||||
|
datapoints.format = [
|
||||||
|
{ required: true },
|
||||||
|
{ x: true, number: true, required: true },
|
||||||
|
{ y: true, number: true, required: true },
|
||||||
|
{ x: true, number: true, required: true },
|
||||||
|
{ y: true, number: true, required: true }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
plot.hooks.processRawData.push(processRawData);
|
||||||
|
plot.hooks.drawSeries.push(drawSeries);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'image',
|
||||||
|
version: '1.1'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
2599
app/assets/javascripts/app/lib/flot/jquery.flot.js
Executable file
2599
app/assets/javascripts/app/lib/flot/jquery.flot.js
Executable file
File diff suppressed because it is too large
Load diff
336
app/assets/javascripts/app/lib/flot/jquery.flot.navigate.js
Executable file
336
app/assets/javascripts/app/lib/flot/jquery.flot.navigate.js
Executable file
|
|
@ -0,0 +1,336 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for adding panning and zooming capabilities to a plot.
|
||||||
|
|
||||||
|
The default behaviour is double click and scrollwheel up/down to zoom
|
||||||
|
in, drag to pan. The plugin defines plot.zoom({ center }),
|
||||||
|
plot.zoomOut() and plot.pan(offset) so you easily can add custom
|
||||||
|
controls. It also fires a "plotpan" and "plotzoom" event when
|
||||||
|
something happens, useful for synchronizing plots.
|
||||||
|
|
||||||
|
Options:
|
||||||
|
|
||||||
|
zoom: {
|
||||||
|
interactive: false
|
||||||
|
trigger: "dblclick" // or "click" for single click
|
||||||
|
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||||
|
}
|
||||||
|
|
||||||
|
pan: {
|
||||||
|
interactive: false
|
||||||
|
cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer"
|
||||||
|
frameRate: 20
|
||||||
|
}
|
||||||
|
|
||||||
|
xaxis, yaxis, x2axis, y2axis: {
|
||||||
|
zoomRange: null // or [number, number] (min range, max range) or false
|
||||||
|
panRange: null // or [number, number] (min, max) or false
|
||||||
|
}
|
||||||
|
|
||||||
|
"interactive" enables the built-in drag/click behaviour. If you enable
|
||||||
|
interactive for pan, then you'll have a basic plot that supports
|
||||||
|
moving around; the same for zoom.
|
||||||
|
|
||||||
|
"amount" specifies the default amount to zoom in (so 1.5 = 150%)
|
||||||
|
relative to the current viewport.
|
||||||
|
|
||||||
|
"cursor" is a standard CSS mouse cursor string used for visual
|
||||||
|
feedback to the user when dragging.
|
||||||
|
|
||||||
|
"frameRate" specifies the maximum number of times per second the plot
|
||||||
|
will update itself while the user is panning around on it (set to null
|
||||||
|
to disable intermediate pans, the plot will then not update until the
|
||||||
|
mouse button is released).
|
||||||
|
|
||||||
|
"zoomRange" is the interval in which zooming can happen, e.g. with
|
||||||
|
zoomRange: [1, 100] the zoom will never scale the axis so that the
|
||||||
|
difference between min and max is smaller than 1 or larger than 100.
|
||||||
|
You can set either end to null to ignore, e.g. [1, null]. If you set
|
||||||
|
zoomRange to false, zooming on that axis will be disabled.
|
||||||
|
|
||||||
|
"panRange" confines the panning to stay within a range, e.g. with
|
||||||
|
panRange: [-10, 20] panning stops at -10 in one end and at 20 in the
|
||||||
|
other. Either can be null, e.g. [-10, null]. If you set
|
||||||
|
panRange to false, panning on that axis will be disabled.
|
||||||
|
|
||||||
|
Example API usage:
|
||||||
|
|
||||||
|
plot = $.plot(...);
|
||||||
|
|
||||||
|
// zoom default amount in on the pixel (10, 20)
|
||||||
|
plot.zoom({ center: { left: 10, top: 20 } });
|
||||||
|
|
||||||
|
// zoom out again
|
||||||
|
plot.zoomOut({ center: { left: 10, top: 20 } });
|
||||||
|
|
||||||
|
// zoom 200% in on the pixel (10, 20)
|
||||||
|
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
|
||||||
|
|
||||||
|
// pan 100 pixels to the left and 20 down
|
||||||
|
plot.pan({ left: -100, top: 20 })
|
||||||
|
|
||||||
|
Here, "center" specifies where the center of the zooming should
|
||||||
|
happen. Note that this is defined in pixel space, not the space of the
|
||||||
|
data points (you can use the p2c helpers on the axes in Flot to help
|
||||||
|
you convert between these).
|
||||||
|
|
||||||
|
"amount" is the amount to zoom the viewport relative to the current
|
||||||
|
range, so 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is
|
||||||
|
70% (zoom out). You can set the default in the options.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// First two dependencies, jquery.event.drag.js and
|
||||||
|
// jquery.mousewheel.js, we put them inline here to save people the
|
||||||
|
// effort of downloading them.
|
||||||
|
|
||||||
|
/*
|
||||||
|
jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
|
||||||
|
Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
|
||||||
|
*/
|
||||||
|
(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
|
||||||
|
|
||||||
|
|
||||||
|
/* jquery.mousewheel.min.js
|
||||||
|
* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
|
||||||
|
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||||
|
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
||||||
|
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||||
|
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||||
|
*
|
||||||
|
* Version: 3.0.2
|
||||||
|
*
|
||||||
|
* Requires: 1.2.2+
|
||||||
|
*/
|
||||||
|
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = {
|
||||||
|
xaxis: {
|
||||||
|
zoomRange: null, // or [number, number] (min range, max range)
|
||||||
|
panRange: null // or [number, number] (min, max)
|
||||||
|
},
|
||||||
|
zoom: {
|
||||||
|
interactive: false,
|
||||||
|
trigger: "dblclick", // or "click" for single click
|
||||||
|
amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||||
|
},
|
||||||
|
pan: {
|
||||||
|
interactive: false,
|
||||||
|
cursor: "move",
|
||||||
|
frameRate: 20
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
function onZoomClick(e, zoomOut) {
|
||||||
|
var c = plot.offset();
|
||||||
|
c.left = e.pageX - c.left;
|
||||||
|
c.top = e.pageY - c.top;
|
||||||
|
if (zoomOut)
|
||||||
|
plot.zoomOut({ center: c });
|
||||||
|
else
|
||||||
|
plot.zoom({ center: c });
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseWheel(e, delta) {
|
||||||
|
onZoomClick(e, delta < 0);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var prevCursor = 'default', prevPageX = 0, prevPageY = 0,
|
||||||
|
panTimeout = null;
|
||||||
|
|
||||||
|
function onDragStart(e) {
|
||||||
|
if (e.which != 1) // only accept left-click
|
||||||
|
return false;
|
||||||
|
var c = plot.getPlaceholder().css('cursor');
|
||||||
|
if (c)
|
||||||
|
prevCursor = c;
|
||||||
|
plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor);
|
||||||
|
prevPageX = e.pageX;
|
||||||
|
prevPageY = e.pageY;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDrag(e) {
|
||||||
|
var frameRate = plot.getOptions().pan.frameRate;
|
||||||
|
if (panTimeout || !frameRate)
|
||||||
|
return;
|
||||||
|
|
||||||
|
panTimeout = setTimeout(function () {
|
||||||
|
plot.pan({ left: prevPageX - e.pageX,
|
||||||
|
top: prevPageY - e.pageY });
|
||||||
|
prevPageX = e.pageX;
|
||||||
|
prevPageY = e.pageY;
|
||||||
|
|
||||||
|
panTimeout = null;
|
||||||
|
}, 1 / frameRate * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDragEnd(e) {
|
||||||
|
if (panTimeout) {
|
||||||
|
clearTimeout(panTimeout);
|
||||||
|
panTimeout = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.getPlaceholder().css('cursor', prevCursor);
|
||||||
|
plot.pan({ left: prevPageX - e.pageX,
|
||||||
|
top: prevPageY - e.pageY });
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvents(plot, eventHolder) {
|
||||||
|
var o = plot.getOptions();
|
||||||
|
if (o.zoom.interactive) {
|
||||||
|
eventHolder[o.zoom.trigger](onZoomClick);
|
||||||
|
eventHolder.mousewheel(onMouseWheel);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (o.pan.interactive) {
|
||||||
|
eventHolder.bind("dragstart", { distance: 10 }, onDragStart);
|
||||||
|
eventHolder.bind("drag", onDrag);
|
||||||
|
eventHolder.bind("dragend", onDragEnd);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.zoomOut = function (args) {
|
||||||
|
if (!args)
|
||||||
|
args = {};
|
||||||
|
|
||||||
|
if (!args.amount)
|
||||||
|
args.amount = plot.getOptions().zoom.amount
|
||||||
|
|
||||||
|
args.amount = 1 / args.amount;
|
||||||
|
plot.zoom(args);
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.zoom = function (args) {
|
||||||
|
if (!args)
|
||||||
|
args = {};
|
||||||
|
|
||||||
|
var c = args.center,
|
||||||
|
amount = args.amount || plot.getOptions().zoom.amount,
|
||||||
|
w = plot.width(), h = plot.height();
|
||||||
|
|
||||||
|
if (!c)
|
||||||
|
c = { left: w / 2, top: h / 2 };
|
||||||
|
|
||||||
|
var xf = c.left / w,
|
||||||
|
yf = c.top / h,
|
||||||
|
minmax = {
|
||||||
|
x: {
|
||||||
|
min: c.left - xf * w / amount,
|
||||||
|
max: c.left + (1 - xf) * w / amount
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
min: c.top - yf * h / amount,
|
||||||
|
max: c.top + (1 - yf) * h / amount
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.each(plot.getAxes(), function(_, axis) {
|
||||||
|
var opts = axis.options,
|
||||||
|
min = minmax[axis.direction].min,
|
||||||
|
max = minmax[axis.direction].max,
|
||||||
|
zr = opts.zoomRange;
|
||||||
|
|
||||||
|
if (zr === false) // no zooming on this axis
|
||||||
|
return;
|
||||||
|
|
||||||
|
min = axis.c2p(min);
|
||||||
|
max = axis.c2p(max);
|
||||||
|
if (min > max) {
|
||||||
|
// make sure min < max
|
||||||
|
var tmp = min;
|
||||||
|
min = max;
|
||||||
|
max = tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
var range = max - min;
|
||||||
|
if (zr &&
|
||||||
|
((zr[0] != null && range < zr[0]) ||
|
||||||
|
(zr[1] != null && range > zr[1])))
|
||||||
|
return;
|
||||||
|
|
||||||
|
opts.min = min;
|
||||||
|
opts.max = max;
|
||||||
|
});
|
||||||
|
|
||||||
|
plot.setupGrid();
|
||||||
|
plot.draw();
|
||||||
|
|
||||||
|
if (!args.preventEvent)
|
||||||
|
plot.getPlaceholder().trigger("plotzoom", [ plot ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.pan = function (args) {
|
||||||
|
var delta = {
|
||||||
|
x: +args.left,
|
||||||
|
y: +args.top
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isNaN(delta.x))
|
||||||
|
delta.x = 0;
|
||||||
|
if (isNaN(delta.y))
|
||||||
|
delta.y = 0;
|
||||||
|
|
||||||
|
$.each(plot.getAxes(), function (_, axis) {
|
||||||
|
var opts = axis.options,
|
||||||
|
min, max, d = delta[axis.direction];
|
||||||
|
|
||||||
|
min = axis.c2p(axis.p2c(axis.min) + d),
|
||||||
|
max = axis.c2p(axis.p2c(axis.max) + d);
|
||||||
|
|
||||||
|
var pr = opts.panRange;
|
||||||
|
if (pr === false) // no panning on this axis
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (pr) {
|
||||||
|
// check whether we hit the wall
|
||||||
|
if (pr[0] != null && pr[0] > min) {
|
||||||
|
d = pr[0] - min;
|
||||||
|
min += d;
|
||||||
|
max += d;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pr[1] != null && pr[1] < max) {
|
||||||
|
d = pr[1] - max;
|
||||||
|
min += d;
|
||||||
|
max += d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
opts.min = min;
|
||||||
|
opts.max = max;
|
||||||
|
});
|
||||||
|
|
||||||
|
plot.setupGrid();
|
||||||
|
plot.draw();
|
||||||
|
|
||||||
|
if (!args.preventEvent)
|
||||||
|
plot.getPlaceholder().trigger("plotpan", [ plot ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function shutdown(plot, eventHolder) {
|
||||||
|
eventHolder.unbind(plot.getOptions().zoom.trigger, onZoomClick);
|
||||||
|
eventHolder.unbind("mousewheel", onMouseWheel);
|
||||||
|
eventHolder.unbind("dragstart", onDragStart);
|
||||||
|
eventHolder.unbind("drag", onDrag);
|
||||||
|
eventHolder.unbind("dragend", onDragEnd);
|
||||||
|
if (panTimeout)
|
||||||
|
clearTimeout(panTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(bindEvents);
|
||||||
|
plot.hooks.shutdown.push(shutdown);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'navigate',
|
||||||
|
version: '1.3'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
750
app/assets/javascripts/app/lib/flot/jquery.flot.pie.js
Executable file
750
app/assets/javascripts/app/lib/flot/jquery.flot.pie.js
Executable file
|
|
@ -0,0 +1,750 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for rendering pie charts. The plugin assumes the data is
|
||||||
|
coming is as a single data value for each series, and each of those
|
||||||
|
values is a positive value or zero (negative numbers don't make
|
||||||
|
any sense and will cause strange effects). The data values do
|
||||||
|
NOT need to be passed in as percentage values because it
|
||||||
|
internally calculates the total and percentages.
|
||||||
|
|
||||||
|
* Created by Brian Medendorp, June 2009
|
||||||
|
* Updated November 2009 with contributions from: btburnett3, Anthony Aragues and Xavi Ivars
|
||||||
|
|
||||||
|
* Changes:
|
||||||
|
2009-10-22: lineJoin set to round
|
||||||
|
2009-10-23: IE full circle fix, donut
|
||||||
|
2009-11-11: Added basic hover from btburnett3 - does not work in IE, and center is off in Chrome and Opera
|
||||||
|
2009-11-17: Added IE hover capability submitted by Anthony Aragues
|
||||||
|
2009-11-18: Added bug fix submitted by Xavi Ivars (issues with arrays when other JS libraries are included as well)
|
||||||
|
|
||||||
|
|
||||||
|
Available options are:
|
||||||
|
series: {
|
||||||
|
pie: {
|
||||||
|
show: true/false
|
||||||
|
radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
|
||||||
|
innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
|
||||||
|
startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
|
||||||
|
tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
|
||||||
|
offset: {
|
||||||
|
top: integer value to move the pie up or down
|
||||||
|
left: integer value to move the pie left or right, or 'auto'
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
|
||||||
|
width: integer pixel width of the stroke
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true/false, or 'auto'
|
||||||
|
formatter: a user-defined function that modifies the text/style of the label text
|
||||||
|
radius: 0-1 for percentage of fullsize, or a specified pixel length
|
||||||
|
background: {
|
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
|
||||||
|
opacity: 0-1
|
||||||
|
},
|
||||||
|
threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
|
||||||
|
},
|
||||||
|
combine: {
|
||||||
|
threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
|
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
|
||||||
|
label: any text value of what the combined slice should be labeled
|
||||||
|
}
|
||||||
|
highlight: {
|
||||||
|
opacity: 0-1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
More detail and specific examples can be found in the included HTML file.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($)
|
||||||
|
{
|
||||||
|
function init(plot) // this is the "body" of the plugin
|
||||||
|
{
|
||||||
|
var canvas = null;
|
||||||
|
var target = null;
|
||||||
|
var maxRadius = null;
|
||||||
|
var centerLeft = null;
|
||||||
|
var centerTop = null;
|
||||||
|
var total = 0;
|
||||||
|
var redraw = true;
|
||||||
|
var redrawAttempts = 10;
|
||||||
|
var shrink = 0.95;
|
||||||
|
var legendWidth = 0;
|
||||||
|
var processed = false;
|
||||||
|
var raw = false;
|
||||||
|
|
||||||
|
// interactive variables
|
||||||
|
var highlights = [];
|
||||||
|
|
||||||
|
// add hook to determine if pie plugin in enabled, and then perform necessary operations
|
||||||
|
plot.hooks.processOptions.push(checkPieEnabled);
|
||||||
|
plot.hooks.bindEvents.push(bindEvents);
|
||||||
|
|
||||||
|
// check to see if the pie plugin is enabled
|
||||||
|
function checkPieEnabled(plot, options)
|
||||||
|
{
|
||||||
|
if (options.series.pie.show)
|
||||||
|
{
|
||||||
|
//disable grid
|
||||||
|
options.grid.show = false;
|
||||||
|
|
||||||
|
// set labels.show
|
||||||
|
if (options.series.pie.label.show=='auto')
|
||||||
|
if (options.legend.show)
|
||||||
|
options.series.pie.label.show = false;
|
||||||
|
else
|
||||||
|
options.series.pie.label.show = true;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.radius=='auto')
|
||||||
|
if (options.series.pie.label.show)
|
||||||
|
options.series.pie.radius = 3/4;
|
||||||
|
else
|
||||||
|
options.series.pie.radius = 1;
|
||||||
|
|
||||||
|
// ensure sane tilt
|
||||||
|
if (options.series.pie.tilt>1)
|
||||||
|
options.series.pie.tilt=1;
|
||||||
|
if (options.series.pie.tilt<0)
|
||||||
|
options.series.pie.tilt=0;
|
||||||
|
|
||||||
|
// add processData hook to do transformations on the data
|
||||||
|
plot.hooks.processDatapoints.push(processDatapoints);
|
||||||
|
plot.hooks.drawOverlay.push(drawOverlay);
|
||||||
|
|
||||||
|
// add draw hook
|
||||||
|
plot.hooks.draw.push(draw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// bind hoverable events
|
||||||
|
function bindEvents(plot, eventHolder)
|
||||||
|
{
|
||||||
|
var options = plot.getOptions();
|
||||||
|
|
||||||
|
if (options.series.pie.show && options.grid.hoverable)
|
||||||
|
eventHolder.unbind('mousemove').mousemove(onMouseMove);
|
||||||
|
|
||||||
|
if (options.series.pie.show && options.grid.clickable)
|
||||||
|
eventHolder.unbind('click').click(onClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// debugging function that prints out an object
|
||||||
|
function alertObject(obj)
|
||||||
|
{
|
||||||
|
var msg = '';
|
||||||
|
function traverse(obj, depth)
|
||||||
|
{
|
||||||
|
if (!depth)
|
||||||
|
depth = 0;
|
||||||
|
for (var i = 0; i < obj.length; ++i)
|
||||||
|
{
|
||||||
|
for (var j=0; j<depth; j++)
|
||||||
|
msg += '\t';
|
||||||
|
|
||||||
|
if( typeof obj[i] == "object")
|
||||||
|
{ // its an object
|
||||||
|
msg += ''+i+':\n';
|
||||||
|
traverse(obj[i], depth+1);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{ // its a value
|
||||||
|
msg += ''+i+': '+obj[i]+'\n';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
traverse(obj);
|
||||||
|
alert(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calcTotal(data)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < data.length; ++i)
|
||||||
|
{
|
||||||
|
var item = parseFloat(data[i].data[0][1]);
|
||||||
|
if (item)
|
||||||
|
total += item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function processDatapoints(plot, series, data, datapoints)
|
||||||
|
{
|
||||||
|
if (!processed)
|
||||||
|
{
|
||||||
|
processed = true;
|
||||||
|
|
||||||
|
canvas = plot.getCanvas();
|
||||||
|
target = $(canvas).parent();
|
||||||
|
options = plot.getOptions();
|
||||||
|
|
||||||
|
plot.setData(combine(plot.getData()));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupPie()
|
||||||
|
{
|
||||||
|
legendWidth = target.children().filter('.legend').children().width();
|
||||||
|
|
||||||
|
// calculate maximum radius and center point
|
||||||
|
maxRadius = Math.min(canvas.width,(canvas.height/options.series.pie.tilt))/2;
|
||||||
|
centerTop = (canvas.height/2)+options.series.pie.offset.top;
|
||||||
|
centerLeft = (canvas.width/2);
|
||||||
|
|
||||||
|
if (options.series.pie.offset.left=='auto')
|
||||||
|
if (options.legend.position.match('w'))
|
||||||
|
centerLeft += legendWidth/2;
|
||||||
|
else
|
||||||
|
centerLeft -= legendWidth/2;
|
||||||
|
else
|
||||||
|
centerLeft += options.series.pie.offset.left;
|
||||||
|
|
||||||
|
if (centerLeft<maxRadius)
|
||||||
|
centerLeft = maxRadius;
|
||||||
|
else if (centerLeft>canvas.width-maxRadius)
|
||||||
|
centerLeft = canvas.width-maxRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fixData(data)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < data.length; ++i)
|
||||||
|
{
|
||||||
|
if (typeof(data[i].data)=='number')
|
||||||
|
data[i].data = [[1,data[i].data]];
|
||||||
|
else if (typeof(data[i].data)=='undefined' || typeof(data[i].data[0])=='undefined')
|
||||||
|
{
|
||||||
|
if (typeof(data[i].data)!='undefined' && typeof(data[i].data.label)!='undefined')
|
||||||
|
data[i].label = data[i].data.label; // fix weirdness coming from flot
|
||||||
|
data[i].data = [[1,0]];
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function combine(data)
|
||||||
|
{
|
||||||
|
data = fixData(data);
|
||||||
|
calcTotal(data);
|
||||||
|
var combined = 0;
|
||||||
|
var numCombined = 0;
|
||||||
|
var color = options.series.pie.combine.color;
|
||||||
|
|
||||||
|
var newdata = [];
|
||||||
|
for (var i = 0; i < data.length; ++i)
|
||||||
|
{
|
||||||
|
// make sure its a number
|
||||||
|
data[i].data[0][1] = parseFloat(data[i].data[0][1]);
|
||||||
|
if (!data[i].data[0][1])
|
||||||
|
data[i].data[0][1] = 0;
|
||||||
|
|
||||||
|
if (data[i].data[0][1]/total<=options.series.pie.combine.threshold)
|
||||||
|
{
|
||||||
|
combined += data[i].data[0][1];
|
||||||
|
numCombined++;
|
||||||
|
if (!color)
|
||||||
|
color = data[i].color;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
newdata.push({
|
||||||
|
data: [[1,data[i].data[0][1]]],
|
||||||
|
color: data[i].color,
|
||||||
|
label: data[i].label,
|
||||||
|
angle: (data[i].data[0][1]*(Math.PI*2))/total,
|
||||||
|
percent: (data[i].data[0][1]/total*100)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (numCombined>0)
|
||||||
|
newdata.push({
|
||||||
|
data: [[1,combined]],
|
||||||
|
color: color,
|
||||||
|
label: options.series.pie.combine.label,
|
||||||
|
angle: (combined*(Math.PI*2))/total,
|
||||||
|
percent: (combined/total*100)
|
||||||
|
});
|
||||||
|
return newdata;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(plot, newCtx)
|
||||||
|
{
|
||||||
|
if (!target) return; // if no series were passed
|
||||||
|
ctx = newCtx;
|
||||||
|
|
||||||
|
setupPie();
|
||||||
|
var slices = plot.getData();
|
||||||
|
|
||||||
|
var attempts = 0;
|
||||||
|
while (redraw && attempts<redrawAttempts)
|
||||||
|
{
|
||||||
|
redraw = false;
|
||||||
|
if (attempts>0)
|
||||||
|
maxRadius *= shrink;
|
||||||
|
attempts += 1;
|
||||||
|
clear();
|
||||||
|
if (options.series.pie.tilt<=0.8)
|
||||||
|
drawShadow();
|
||||||
|
drawPie();
|
||||||
|
}
|
||||||
|
if (attempts >= redrawAttempts) {
|
||||||
|
clear();
|
||||||
|
target.prepend('<div class="error">Could not draw pie with labels contained inside canvas</div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( plot.setSeries && plot.insertLegend )
|
||||||
|
{
|
||||||
|
plot.setSeries(slices);
|
||||||
|
plot.insertLegend();
|
||||||
|
}
|
||||||
|
|
||||||
|
// we're actually done at this point, just defining internal functions at this point
|
||||||
|
|
||||||
|
function clear()
|
||||||
|
{
|
||||||
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||||
|
target.children().filter('.pieLabel, .pieLabelBackground').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawShadow()
|
||||||
|
{
|
||||||
|
var shadowLeft = 5;
|
||||||
|
var shadowTop = 15;
|
||||||
|
var edge = 10;
|
||||||
|
var alpha = 0.02;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.radius>1)
|
||||||
|
var radius = options.series.pie.radius;
|
||||||
|
else
|
||||||
|
var radius = maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
if (radius>=(canvas.width/2)-shadowLeft || radius*options.series.pie.tilt>=(canvas.height/2)-shadowTop || radius<=edge)
|
||||||
|
return; // shadow would be outside canvas, so don't draw it
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(shadowLeft,shadowTop);
|
||||||
|
ctx.globalAlpha = alpha;
|
||||||
|
ctx.fillStyle = '#000';
|
||||||
|
|
||||||
|
// center and rotate to starting position
|
||||||
|
ctx.translate(centerLeft,centerTop);
|
||||||
|
ctx.scale(1, options.series.pie.tilt);
|
||||||
|
|
||||||
|
//radius -= edge;
|
||||||
|
for (var i=1; i<=edge; i++)
|
||||||
|
{
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(0,0,radius,0,Math.PI*2,false);
|
||||||
|
ctx.fill();
|
||||||
|
radius -= i;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPie()
|
||||||
|
{
|
||||||
|
startAngle = Math.PI*options.series.pie.startAngle;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.radius>1)
|
||||||
|
var radius = options.series.pie.radius;
|
||||||
|
else
|
||||||
|
var radius = maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
// center and rotate to starting position
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(centerLeft,centerTop);
|
||||||
|
ctx.scale(1, options.series.pie.tilt);
|
||||||
|
//ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
|
||||||
|
|
||||||
|
// draw slices
|
||||||
|
ctx.save();
|
||||||
|
var currentAngle = startAngle;
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
{
|
||||||
|
slices[i].startAngle = currentAngle;
|
||||||
|
drawSlice(slices[i].angle, slices[i].color, true);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
// draw slice outlines
|
||||||
|
ctx.save();
|
||||||
|
ctx.lineWidth = options.series.pie.stroke.width;
|
||||||
|
currentAngle = startAngle;
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
// draw donut hole
|
||||||
|
drawDonutHole(ctx);
|
||||||
|
|
||||||
|
// draw labels
|
||||||
|
if (options.series.pie.label.show)
|
||||||
|
drawLabels();
|
||||||
|
|
||||||
|
// restore to original state
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
function drawSlice(angle, color, fill)
|
||||||
|
{
|
||||||
|
if (angle<=0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (fill)
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
else
|
||||||
|
{
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.lineJoin = 'round';
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
if (Math.abs(angle - Math.PI*2) > 0.000000001)
|
||||||
|
ctx.moveTo(0,0); // Center of the pie
|
||||||
|
else if ($.browser.msie)
|
||||||
|
angle -= 0.0001;
|
||||||
|
//ctx.arc(0,0,radius,0,angle,false); // This doesn't work properly in Opera
|
||||||
|
ctx.arc(0,0,radius,currentAngle,currentAngle+angle,false);
|
||||||
|
ctx.closePath();
|
||||||
|
//ctx.rotate(angle); // This doesn't work properly in Opera
|
||||||
|
currentAngle += angle;
|
||||||
|
|
||||||
|
if (fill)
|
||||||
|
ctx.fill();
|
||||||
|
else
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLabels()
|
||||||
|
{
|
||||||
|
var currentAngle = startAngle;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.label.radius>1)
|
||||||
|
var radius = options.series.pie.label.radius;
|
||||||
|
else
|
||||||
|
var radius = maxRadius * options.series.pie.label.radius;
|
||||||
|
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
{
|
||||||
|
if (slices[i].percent >= options.series.pie.label.threshold*100)
|
||||||
|
drawLabel(slices[i], currentAngle, i);
|
||||||
|
currentAngle += slices[i].angle;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLabel(slice, startAngle, index)
|
||||||
|
{
|
||||||
|
if (slice.data[0][1]==0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// format label text
|
||||||
|
var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
|
||||||
|
if (lf)
|
||||||
|
text = lf(slice.label, slice);
|
||||||
|
else
|
||||||
|
text = slice.label;
|
||||||
|
if (plf)
|
||||||
|
text = plf(text, slice);
|
||||||
|
|
||||||
|
var halfAngle = ((startAngle+slice.angle) + startAngle)/2;
|
||||||
|
var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
|
||||||
|
var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
|
||||||
|
|
||||||
|
var html = '<span class="pieLabel" id="pieLabel'+index+'" style="position:absolute;top:' + y + 'px;left:' + x + 'px;">' + text + "</span>";
|
||||||
|
target.append(html);
|
||||||
|
var label = target.children('#pieLabel'+index);
|
||||||
|
var labelTop = (y - label.height()/2);
|
||||||
|
var labelLeft = (x - label.width()/2);
|
||||||
|
label.css('top', labelTop);
|
||||||
|
label.css('left', labelLeft);
|
||||||
|
|
||||||
|
// check to make sure that the label is not outside the canvas
|
||||||
|
if (0-labelTop>0 || 0-labelLeft>0 || canvas.height-(labelTop+label.height())<0 || canvas.width-(labelLeft+label.width())<0)
|
||||||
|
redraw = true;
|
||||||
|
|
||||||
|
if (options.series.pie.label.background.opacity != 0) {
|
||||||
|
// put in the transparent background separately to avoid blended labels and label boxes
|
||||||
|
var c = options.series.pie.label.background.color;
|
||||||
|
if (c == null) {
|
||||||
|
c = slice.color;
|
||||||
|
}
|
||||||
|
var pos = 'top:'+labelTop+'px;left:'+labelLeft+'px;';
|
||||||
|
$('<div class="pieLabelBackground" style="position:absolute;width:' + label.width() + 'px;height:' + label.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').insertBefore(label).css('opacity', options.series.pie.label.background.opacity);
|
||||||
|
}
|
||||||
|
} // end individual label function
|
||||||
|
} // end drawLabels function
|
||||||
|
} // end drawPie function
|
||||||
|
} // end draw function
|
||||||
|
|
||||||
|
// Placed here because it needs to be accessed from multiple locations
|
||||||
|
function drawDonutHole(layer)
|
||||||
|
{
|
||||||
|
// draw donut hole
|
||||||
|
if(options.series.pie.innerRadius > 0)
|
||||||
|
{
|
||||||
|
// subtract the center
|
||||||
|
layer.save();
|
||||||
|
innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
|
||||||
|
layer.globalCompositeOperation = 'destination-out'; // this does not work with excanvas, but it will fall back to using the stroke color
|
||||||
|
layer.beginPath();
|
||||||
|
layer.fillStyle = options.series.pie.stroke.color;
|
||||||
|
layer.arc(0,0,innerRadius,0,Math.PI*2,false);
|
||||||
|
layer.fill();
|
||||||
|
layer.closePath();
|
||||||
|
layer.restore();
|
||||||
|
|
||||||
|
// add inner stroke
|
||||||
|
layer.save();
|
||||||
|
layer.beginPath();
|
||||||
|
layer.strokeStyle = options.series.pie.stroke.color;
|
||||||
|
layer.arc(0,0,innerRadius,0,Math.PI*2,false);
|
||||||
|
layer.stroke();
|
||||||
|
layer.closePath();
|
||||||
|
layer.restore();
|
||||||
|
// TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//-- Additional Interactive related functions --
|
||||||
|
|
||||||
|
function isPointInPoly(poly, pt)
|
||||||
|
{
|
||||||
|
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
|
||||||
|
((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
|
||||||
|
&& (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
|
||||||
|
&& (c = !c);
|
||||||
|
return c;
|
||||||
|
}
|
||||||
|
|
||||||
|
function findNearbySlice(mouseX, mouseY)
|
||||||
|
{
|
||||||
|
var slices = plot.getData(),
|
||||||
|
options = plot.getOptions(),
|
||||||
|
radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
{
|
||||||
|
var s = slices[i];
|
||||||
|
|
||||||
|
if(s.pie.show)
|
||||||
|
{
|
||||||
|
ctx.save();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0,0); // Center of the pie
|
||||||
|
//ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
|
||||||
|
ctx.arc(0,0,radius,s.startAngle,s.startAngle+s.angle,false);
|
||||||
|
ctx.closePath();
|
||||||
|
x = mouseX-centerLeft;
|
||||||
|
y = mouseY-centerTop;
|
||||||
|
if(ctx.isPointInPath)
|
||||||
|
{
|
||||||
|
if (ctx.isPointInPath(mouseX-centerLeft, mouseY-centerTop))
|
||||||
|
{
|
||||||
|
//alert('found slice!');
|
||||||
|
ctx.restore();
|
||||||
|
return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// excanvas for IE doesn;t support isPointInPath, this is a workaround.
|
||||||
|
p1X = (radius * Math.cos(s.startAngle));
|
||||||
|
p1Y = (radius * Math.sin(s.startAngle));
|
||||||
|
p2X = (radius * Math.cos(s.startAngle+(s.angle/4)));
|
||||||
|
p2Y = (radius * Math.sin(s.startAngle+(s.angle/4)));
|
||||||
|
p3X = (radius * Math.cos(s.startAngle+(s.angle/2)));
|
||||||
|
p3Y = (radius * Math.sin(s.startAngle+(s.angle/2)));
|
||||||
|
p4X = (radius * Math.cos(s.startAngle+(s.angle/1.5)));
|
||||||
|
p4Y = (radius * Math.sin(s.startAngle+(s.angle/1.5)));
|
||||||
|
p5X = (radius * Math.cos(s.startAngle+s.angle));
|
||||||
|
p5Y = (radius * Math.sin(s.startAngle+s.angle));
|
||||||
|
arrPoly = [[0,0],[p1X,p1Y],[p2X,p2Y],[p3X,p3Y],[p4X,p4Y],[p5X,p5Y]];
|
||||||
|
arrPoint = [x,y];
|
||||||
|
// TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
|
||||||
|
if(isPointInPoly(arrPoly, arrPoint))
|
||||||
|
{
|
||||||
|
ctx.restore();
|
||||||
|
return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseMove(e)
|
||||||
|
{
|
||||||
|
triggerClickHoverEvent('plothover', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick(e)
|
||||||
|
{
|
||||||
|
triggerClickHoverEvent('plotclick', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// trigger click or hover event (they send the same parameters so we share their code)
|
||||||
|
function triggerClickHoverEvent(eventname, e)
|
||||||
|
{
|
||||||
|
var offset = plot.offset(),
|
||||||
|
canvasX = parseInt(e.pageX - offset.left),
|
||||||
|
canvasY = parseInt(e.pageY - offset.top),
|
||||||
|
item = findNearbySlice(canvasX, canvasY);
|
||||||
|
|
||||||
|
if (options.grid.autoHighlight)
|
||||||
|
{
|
||||||
|
// clear auto-highlights
|
||||||
|
for (var i = 0; i < highlights.length; ++i)
|
||||||
|
{
|
||||||
|
var h = highlights[i];
|
||||||
|
if (h.auto == eventname && !(item && h.series == item.series))
|
||||||
|
unhighlight(h.series);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// highlight the slice
|
||||||
|
if (item)
|
||||||
|
highlight(item.series, eventname);
|
||||||
|
|
||||||
|
// trigger any hover bind events
|
||||||
|
var pos = { pageX: e.pageX, pageY: e.pageY };
|
||||||
|
target.trigger(eventname, [ pos, item ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlight(s, auto)
|
||||||
|
{
|
||||||
|
if (typeof s == "number")
|
||||||
|
s = series[s];
|
||||||
|
|
||||||
|
var i = indexOfHighlight(s);
|
||||||
|
if (i == -1)
|
||||||
|
{
|
||||||
|
highlights.push({ series: s, auto: auto });
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
else if (!auto)
|
||||||
|
highlights[i].auto = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function unhighlight(s)
|
||||||
|
{
|
||||||
|
if (s == null)
|
||||||
|
{
|
||||||
|
highlights = [];
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof s == "number")
|
||||||
|
s = series[s];
|
||||||
|
|
||||||
|
var i = indexOfHighlight(s);
|
||||||
|
if (i != -1)
|
||||||
|
{
|
||||||
|
highlights.splice(i, 1);
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexOfHighlight(s)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < highlights.length; ++i)
|
||||||
|
{
|
||||||
|
var h = highlights[i];
|
||||||
|
if (h.series == s)
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawOverlay(plot, octx)
|
||||||
|
{
|
||||||
|
//alert(options.series.pie.radius);
|
||||||
|
var options = plot.getOptions();
|
||||||
|
//alert(options.series.pie.radius);
|
||||||
|
|
||||||
|
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
octx.save();
|
||||||
|
octx.translate(centerLeft, centerTop);
|
||||||
|
octx.scale(1, options.series.pie.tilt);
|
||||||
|
|
||||||
|
for (i = 0; i < highlights.length; ++i)
|
||||||
|
drawHighlight(highlights[i].series);
|
||||||
|
|
||||||
|
drawDonutHole(octx);
|
||||||
|
|
||||||
|
octx.restore();
|
||||||
|
|
||||||
|
function drawHighlight(series)
|
||||||
|
{
|
||||||
|
if (series.angle < 0) return;
|
||||||
|
|
||||||
|
//octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
|
||||||
|
octx.fillStyle = "rgba(255, 255, 255, "+options.series.pie.highlight.opacity+")"; // this is temporary until we have access to parseColor
|
||||||
|
|
||||||
|
octx.beginPath();
|
||||||
|
if (Math.abs(series.angle - Math.PI*2) > 0.000000001)
|
||||||
|
octx.moveTo(0,0); // Center of the pie
|
||||||
|
octx.arc(0,0,radius,series.startAngle,series.startAngle+series.angle,false);
|
||||||
|
octx.closePath();
|
||||||
|
octx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} // end init (plugin body)
|
||||||
|
|
||||||
|
// define pie specific options and their default values
|
||||||
|
var options = {
|
||||||
|
series: {
|
||||||
|
pie: {
|
||||||
|
show: false,
|
||||||
|
radius: 'auto', // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
|
||||||
|
innerRadius:0, /* for donut */
|
||||||
|
startAngle: 3/2,
|
||||||
|
tilt: 1,
|
||||||
|
offset: {
|
||||||
|
top: 0,
|
||||||
|
left: 'auto'
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
color: '#FFF',
|
||||||
|
width: 1
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: 'auto',
|
||||||
|
formatter: function(label, slice){
|
||||||
|
return '<div style="font-size:x-small;text-align:center;padding:2px;color:'+slice.color+';">'+label+'<br/>'+Math.round(slice.percent)+'%</div>';
|
||||||
|
}, // formatter function
|
||||||
|
radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
|
||||||
|
background: {
|
||||||
|
color: null,
|
||||||
|
opacity: 0
|
||||||
|
},
|
||||||
|
threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
|
||||||
|
},
|
||||||
|
combine: {
|
||||||
|
threshold: -1, // percentage at which to combine little slices into one larger slice
|
||||||
|
color: null, // color to give the new slice (auto-generated if null)
|
||||||
|
label: 'Other' // label to give the new slice
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
//color: '#FFF', // will add this functionality once parseColor is available
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: "pie",
|
||||||
|
version: "1.0"
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
60
app/assets/javascripts/app/lib/flot/jquery.flot.resize.js
Executable file
60
app/assets/javascripts/app/lib/flot/jquery.flot.resize.js
Executable file
|
|
@ -0,0 +1,60 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for automatically redrawing plots when the placeholder
|
||||||
|
size changes, e.g. on window resizes.
|
||||||
|
|
||||||
|
It works by listening for changes on the placeholder div (through the
|
||||||
|
jQuery resize event plugin) - if the size changes, it will redraw the
|
||||||
|
plot.
|
||||||
|
|
||||||
|
There are no options. If you need to disable the plugin for some
|
||||||
|
plots, you can just fix the size of their placeholders.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Inline dependency:
|
||||||
|
* jQuery resize event - v1.1 - 3/14/2010
|
||||||
|
* http://benalman.com/projects/jquery-resize-plugin/
|
||||||
|
*
|
||||||
|
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||||
|
* Dual licensed under the MIT and GPL licenses.
|
||||||
|
* http://benalman.com/about/license/
|
||||||
|
*/
|
||||||
|
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
|
||||||
|
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = { }; // no options
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
function onResize() {
|
||||||
|
var placeholder = plot.getPlaceholder();
|
||||||
|
|
||||||
|
// somebody might have hidden us and we can't plot
|
||||||
|
// when we don't have the dimensions
|
||||||
|
if (placeholder.width() == 0 || placeholder.height() == 0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
plot.resize();
|
||||||
|
plot.setupGrid();
|
||||||
|
plot.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvents(plot, eventHolder) {
|
||||||
|
plot.getPlaceholder().resize(onResize);
|
||||||
|
}
|
||||||
|
|
||||||
|
function shutdown(plot, eventHolder) {
|
||||||
|
plot.getPlaceholder().unbind("resize", onResize);
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(bindEvents);
|
||||||
|
plot.hooks.shutdown.push(shutdown);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'resize',
|
||||||
|
version: '1.0'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
344
app/assets/javascripts/app/lib/flot/jquery.flot.selection.js
Executable file
344
app/assets/javascripts/app/lib/flot/jquery.flot.selection.js
Executable file
|
|
@ -0,0 +1,344 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for selecting regions.
|
||||||
|
|
||||||
|
The plugin defines the following options:
|
||||||
|
|
||||||
|
selection: {
|
||||||
|
mode: null or "x" or "y" or "xy",
|
||||||
|
color: color
|
||||||
|
}
|
||||||
|
|
||||||
|
Selection support is enabled by setting the mode to one of "x", "y" or
|
||||||
|
"xy". In "x" mode, the user will only be able to specify the x range,
|
||||||
|
similarly for "y" mode. For "xy", the selection becomes a rectangle
|
||||||
|
where both ranges can be specified. "color" is color of the selection
|
||||||
|
(if you need to change the color later on, you can get to it with
|
||||||
|
plot.getOptions().selection.color).
|
||||||
|
|
||||||
|
When selection support is enabled, a "plotselected" event will be
|
||||||
|
emitted on the DOM element you passed into the plot function. The
|
||||||
|
event handler gets a parameter with the ranges selected on the axes,
|
||||||
|
like this:
|
||||||
|
|
||||||
|
placeholder.bind("plotselected", function(event, ranges) {
|
||||||
|
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
|
||||||
|
// similar for yaxis - with multiple axes, the extra ones are in
|
||||||
|
// x2axis, x3axis, ...
|
||||||
|
});
|
||||||
|
|
||||||
|
The "plotselected" event is only fired when the user has finished
|
||||||
|
making the selection. A "plotselecting" event is fired during the
|
||||||
|
process with the same parameters as the "plotselected" event, in case
|
||||||
|
you want to know what's happening while it's happening,
|
||||||
|
|
||||||
|
A "plotunselected" event with no arguments is emitted when the user
|
||||||
|
clicks the mouse to remove the selection.
|
||||||
|
|
||||||
|
The plugin allso adds the following methods to the plot object:
|
||||||
|
|
||||||
|
- setSelection(ranges, preventEvent)
|
||||||
|
|
||||||
|
Set the selection rectangle. The passed in ranges is on the same
|
||||||
|
form as returned in the "plotselected" event. If the selection mode
|
||||||
|
is "x", you should put in either an xaxis range, if the mode is "y"
|
||||||
|
you need to put in an yaxis range and both xaxis and yaxis if the
|
||||||
|
selection mode is "xy", like this:
|
||||||
|
|
||||||
|
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
|
||||||
|
|
||||||
|
setSelection will trigger the "plotselected" event when called. If
|
||||||
|
you don't want that to happen, e.g. if you're inside a
|
||||||
|
"plotselected" handler, pass true as the second parameter. If you
|
||||||
|
are using multiple axes, you can specify the ranges on any of those,
|
||||||
|
e.g. as x2axis/x3axis/... instead of xaxis, the plugin picks the
|
||||||
|
first one it sees.
|
||||||
|
|
||||||
|
- clearSelection(preventEvent)
|
||||||
|
|
||||||
|
Clear the selection rectangle. Pass in true to avoid getting a
|
||||||
|
"plotunselected" event.
|
||||||
|
|
||||||
|
- getSelection()
|
||||||
|
|
||||||
|
Returns the current selection in the same format as the
|
||||||
|
"plotselected" event. If there's currently no selection, the
|
||||||
|
function returns null.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
function init(plot) {
|
||||||
|
var selection = {
|
||||||
|
first: { x: -1, y: -1}, second: { x: -1, y: -1},
|
||||||
|
show: false,
|
||||||
|
active: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// FIXME: The drag handling implemented here should be
|
||||||
|
// abstracted out, there's some similar code from a library in
|
||||||
|
// the navigation plugin, this should be massaged a bit to fit
|
||||||
|
// the Flot cases here better and reused. Doing this would
|
||||||
|
// make this plugin much slimmer.
|
||||||
|
var savedhandlers = {};
|
||||||
|
|
||||||
|
var mouseUpHandler = null;
|
||||||
|
|
||||||
|
function onMouseMove(e) {
|
||||||
|
if (selection.active) {
|
||||||
|
updateSelection(e);
|
||||||
|
|
||||||
|
plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseDown(e) {
|
||||||
|
if (e.which != 1) // only accept left-click
|
||||||
|
return;
|
||||||
|
|
||||||
|
// cancel out any text selections
|
||||||
|
document.body.focus();
|
||||||
|
|
||||||
|
// prevent text selection and drag in old-school browsers
|
||||||
|
if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
|
||||||
|
savedhandlers.onselectstart = document.onselectstart;
|
||||||
|
document.onselectstart = function () { return false; };
|
||||||
|
}
|
||||||
|
if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
|
||||||
|
savedhandlers.ondrag = document.ondrag;
|
||||||
|
document.ondrag = function () { return false; };
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectionPos(selection.first, e);
|
||||||
|
|
||||||
|
selection.active = true;
|
||||||
|
|
||||||
|
// this is a bit silly, but we have to use a closure to be
|
||||||
|
// able to whack the same handler again
|
||||||
|
mouseUpHandler = function (e) { onMouseUp(e); };
|
||||||
|
|
||||||
|
$(document).one("mouseup", mouseUpHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseUp(e) {
|
||||||
|
mouseUpHandler = null;
|
||||||
|
|
||||||
|
// revert drag stuff for old-school browsers
|
||||||
|
if (document.onselectstart !== undefined)
|
||||||
|
document.onselectstart = savedhandlers.onselectstart;
|
||||||
|
if (document.ondrag !== undefined)
|
||||||
|
document.ondrag = savedhandlers.ondrag;
|
||||||
|
|
||||||
|
// no more dragging
|
||||||
|
selection.active = false;
|
||||||
|
updateSelection(e);
|
||||||
|
|
||||||
|
if (selectionIsSane())
|
||||||
|
triggerSelectedEvent();
|
||||||
|
else {
|
||||||
|
// this counts as a clear
|
||||||
|
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||||
|
plot.getPlaceholder().trigger("plotselecting", [ null ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSelection() {
|
||||||
|
if (!selectionIsSane())
|
||||||
|
return null;
|
||||||
|
|
||||||
|
var r = {}, c1 = selection.first, c2 = selection.second;
|
||||||
|
$.each(plot.getAxes(), function (name, axis) {
|
||||||
|
if (axis.used) {
|
||||||
|
var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]);
|
||||||
|
r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return r;
|
||||||
|
}
|
||||||
|
|
||||||
|
function triggerSelectedEvent() {
|
||||||
|
var r = getSelection();
|
||||||
|
|
||||||
|
plot.getPlaceholder().trigger("plotselected", [ r ]);
|
||||||
|
|
||||||
|
// backwards-compat stuff, to be removed in future
|
||||||
|
if (r.xaxis && r.yaxis)
|
||||||
|
plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp(min, value, max) {
|
||||||
|
return value < min ? min: (value > max ? max: value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSelectionPos(pos, e) {
|
||||||
|
var o = plot.getOptions();
|
||||||
|
var offset = plot.getPlaceholder().offset();
|
||||||
|
var plotOffset = plot.getPlotOffset();
|
||||||
|
pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
|
||||||
|
pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
|
||||||
|
|
||||||
|
if (o.selection.mode == "y")
|
||||||
|
pos.x = pos == selection.first ? 0 : plot.width();
|
||||||
|
|
||||||
|
if (o.selection.mode == "x")
|
||||||
|
pos.y = pos == selection.first ? 0 : plot.height();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelection(pos) {
|
||||||
|
if (pos.pageX == null)
|
||||||
|
return;
|
||||||
|
|
||||||
|
setSelectionPos(selection.second, pos);
|
||||||
|
if (selectionIsSane()) {
|
||||||
|
selection.show = true;
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
clearSelection(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSelection(preventEvent) {
|
||||||
|
if (selection.show) {
|
||||||
|
selection.show = false;
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
if (!preventEvent)
|
||||||
|
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// function taken from markings support in Flot
|
||||||
|
function extractRange(ranges, coord) {
|
||||||
|
var axis, from, to, key, axes = plot.getAxes();
|
||||||
|
|
||||||
|
for (var k in axes) {
|
||||||
|
axis = axes[k];
|
||||||
|
if (axis.direction == coord) {
|
||||||
|
key = coord + axis.n + "axis";
|
||||||
|
if (!ranges[key] && axis.n == 1)
|
||||||
|
key = coord + "axis"; // support x1axis as xaxis
|
||||||
|
if (ranges[key]) {
|
||||||
|
from = ranges[key].from;
|
||||||
|
to = ranges[key].to;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// backwards-compat stuff - to be removed in future
|
||||||
|
if (!ranges[key]) {
|
||||||
|
axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
|
||||||
|
from = ranges[coord + "1"];
|
||||||
|
to = ranges[coord + "2"];
|
||||||
|
}
|
||||||
|
|
||||||
|
// auto-reverse as an added bonus
|
||||||
|
if (from != null && to != null && from > to) {
|
||||||
|
var tmp = from;
|
||||||
|
from = to;
|
||||||
|
to = tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { from: from, to: to, axis: axis };
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSelection(ranges, preventEvent) {
|
||||||
|
var axis, range, o = plot.getOptions();
|
||||||
|
|
||||||
|
if (o.selection.mode == "y") {
|
||||||
|
selection.first.x = 0;
|
||||||
|
selection.second.x = plot.width();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
range = extractRange(ranges, "x");
|
||||||
|
|
||||||
|
selection.first.x = range.axis.p2c(range.from);
|
||||||
|
selection.second.x = range.axis.p2c(range.to);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (o.selection.mode == "x") {
|
||||||
|
selection.first.y = 0;
|
||||||
|
selection.second.y = plot.height();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
range = extractRange(ranges, "y");
|
||||||
|
|
||||||
|
selection.first.y = range.axis.p2c(range.from);
|
||||||
|
selection.second.y = range.axis.p2c(range.to);
|
||||||
|
}
|
||||||
|
|
||||||
|
selection.show = true;
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
if (!preventEvent && selectionIsSane())
|
||||||
|
triggerSelectedEvent();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectionIsSane() {
|
||||||
|
var minSize = 5;
|
||||||
|
return Math.abs(selection.second.x - selection.first.x) >= minSize &&
|
||||||
|
Math.abs(selection.second.y - selection.first.y) >= minSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.clearSelection = clearSelection;
|
||||||
|
plot.setSelection = setSelection;
|
||||||
|
plot.getSelection = getSelection;
|
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(function(plot, eventHolder) {
|
||||||
|
var o = plot.getOptions();
|
||||||
|
if (o.selection.mode != null) {
|
||||||
|
eventHolder.mousemove(onMouseMove);
|
||||||
|
eventHolder.mousedown(onMouseDown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||||||
|
// draw selection
|
||||||
|
if (selection.show && selectionIsSane()) {
|
||||||
|
var plotOffset = plot.getPlotOffset();
|
||||||
|
var o = plot.getOptions();
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(plotOffset.left, plotOffset.top);
|
||||||
|
|
||||||
|
var c = $.color.parse(o.selection.color);
|
||||||
|
|
||||||
|
ctx.strokeStyle = c.scale('a', 0.8).toString();
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
ctx.fillStyle = c.scale('a', 0.4).toString();
|
||||||
|
|
||||||
|
var x = Math.min(selection.first.x, selection.second.x),
|
||||||
|
y = Math.min(selection.first.y, selection.second.y),
|
||||||
|
w = Math.abs(selection.second.x - selection.first.x),
|
||||||
|
h = Math.abs(selection.second.y - selection.first.y);
|
||||||
|
|
||||||
|
ctx.fillRect(x, y, w, h);
|
||||||
|
ctx.strokeRect(x, y, w, h);
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
plot.hooks.shutdown.push(function (plot, eventHolder) {
|
||||||
|
eventHolder.unbind("mousemove", onMouseMove);
|
||||||
|
eventHolder.unbind("mousedown", onMouseDown);
|
||||||
|
|
||||||
|
if (mouseUpHandler)
|
||||||
|
$(document).unbind("mouseup", mouseUpHandler);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: {
|
||||||
|
selection: {
|
||||||
|
mode: null, // one of null, "x", "y" or "xy"
|
||||||
|
color: "#e8cfac"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: 'selection',
|
||||||
|
version: '1.1'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
184
app/assets/javascripts/app/lib/flot/jquery.flot.stack.js
Executable file
184
app/assets/javascripts/app/lib/flot/jquery.flot.stack.js
Executable file
|
|
@ -0,0 +1,184 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for stacking data sets, i.e. putting them on top of each
|
||||||
|
other, for accumulative graphs.
|
||||||
|
|
||||||
|
The plugin assumes the data is sorted on x (or y if stacking
|
||||||
|
horizontally). For line charts, it is assumed that if a line has an
|
||||||
|
undefined gap (from a null point), then the line above it should have
|
||||||
|
the same gap - insert zeros instead of "null" if you want another
|
||||||
|
behaviour. This also holds for the start and end of the chart. Note
|
||||||
|
that stacking a mix of positive and negative values in most instances
|
||||||
|
doesn't make sense (so it looks weird).
|
||||||
|
|
||||||
|
Two or more series are stacked when their "stack" attribute is set to
|
||||||
|
the same key (which can be any number or string or just "true"). To
|
||||||
|
specify the default stack, you can set
|
||||||
|
|
||||||
|
series: {
|
||||||
|
stack: null or true or key (number/string)
|
||||||
|
}
|
||||||
|
|
||||||
|
or specify it for a specific series
|
||||||
|
|
||||||
|
$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])
|
||||||
|
|
||||||
|
The stacking order is determined by the order of the data series in
|
||||||
|
the array (later series end up on top of the previous).
|
||||||
|
|
||||||
|
Internally, the plugin modifies the datapoints in each series, adding
|
||||||
|
an offset to the y value. For line series, extra data points are
|
||||||
|
inserted through interpolation. If there's a second y value, it's also
|
||||||
|
adjusted (e.g for bar charts or filled areas).
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = {
|
||||||
|
series: { stack: null } // or number/string
|
||||||
|
};
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
function findMatchingSeries(s, allseries) {
|
||||||
|
var res = null
|
||||||
|
for (var i = 0; i < allseries.length; ++i) {
|
||||||
|
if (s == allseries[i])
|
||||||
|
break;
|
||||||
|
|
||||||
|
if (allseries[i].stack == s.stack)
|
||||||
|
res = allseries[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
function stackData(plot, s, datapoints) {
|
||||||
|
if (s.stack == null)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var other = findMatchingSeries(s, plot.getData());
|
||||||
|
if (!other)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var ps = datapoints.pointsize,
|
||||||
|
points = datapoints.points,
|
||||||
|
otherps = other.datapoints.pointsize,
|
||||||
|
otherpoints = other.datapoints.points,
|
||||||
|
newpoints = [],
|
||||||
|
px, py, intery, qx, qy, bottom,
|
||||||
|
withlines = s.lines.show,
|
||||||
|
horizontal = s.bars.horizontal,
|
||||||
|
withbottom = ps > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y),
|
||||||
|
withsteps = withlines && s.lines.steps,
|
||||||
|
fromgap = true,
|
||||||
|
keyOffset = horizontal ? 1 : 0,
|
||||||
|
accumulateOffset = horizontal ? 0 : 1,
|
||||||
|
i = 0, j = 0, l;
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
if (i >= points.length)
|
||||||
|
break;
|
||||||
|
|
||||||
|
l = newpoints.length;
|
||||||
|
|
||||||
|
if (points[i] == null) {
|
||||||
|
// copy gaps
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
i += ps;
|
||||||
|
}
|
||||||
|
else if (j >= otherpoints.length) {
|
||||||
|
// for lines, we can't use the rest of the points
|
||||||
|
if (!withlines) {
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
}
|
||||||
|
i += ps;
|
||||||
|
}
|
||||||
|
else if (otherpoints[j] == null) {
|
||||||
|
// oops, got a gap
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(null);
|
||||||
|
fromgap = true;
|
||||||
|
j += otherps;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// cases where we actually got two points
|
||||||
|
px = points[i + keyOffset];
|
||||||
|
py = points[i + accumulateOffset];
|
||||||
|
qx = otherpoints[j + keyOffset];
|
||||||
|
qy = otherpoints[j + accumulateOffset];
|
||||||
|
bottom = 0;
|
||||||
|
|
||||||
|
if (px == qx) {
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
|
||||||
|
newpoints[l + accumulateOffset] += qy;
|
||||||
|
bottom = qy;
|
||||||
|
|
||||||
|
i += ps;
|
||||||
|
j += otherps;
|
||||||
|
}
|
||||||
|
else if (px > qx) {
|
||||||
|
// we got past point below, might need to
|
||||||
|
// insert interpolated extra point
|
||||||
|
if (withlines && i > 0 && points[i - ps] != null) {
|
||||||
|
intery = py + (points[i - ps + accumulateOffset] - py) * (qx - px) / (points[i - ps + keyOffset] - px);
|
||||||
|
newpoints.push(qx);
|
||||||
|
newpoints.push(intery + qy);
|
||||||
|
for (m = 2; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
bottom = qy;
|
||||||
|
}
|
||||||
|
|
||||||
|
j += otherps;
|
||||||
|
}
|
||||||
|
else { // px < qx
|
||||||
|
if (fromgap && withlines) {
|
||||||
|
// if we come from a gap, we just skip this point
|
||||||
|
i += ps;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints.push(points[i + m]);
|
||||||
|
|
||||||
|
// we might be able to interpolate a point below,
|
||||||
|
// this can give us a better y
|
||||||
|
if (withlines && j > 0 && otherpoints[j - otherps] != null)
|
||||||
|
bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx);
|
||||||
|
|
||||||
|
newpoints[l + accumulateOffset] += bottom;
|
||||||
|
|
||||||
|
i += ps;
|
||||||
|
}
|
||||||
|
|
||||||
|
fromgap = false;
|
||||||
|
|
||||||
|
if (l != newpoints.length && withbottom)
|
||||||
|
newpoints[l + 2] += bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// maintain the line steps invariant
|
||||||
|
if (withsteps && l != newpoints.length && l > 0
|
||||||
|
&& newpoints[l] != null
|
||||||
|
&& newpoints[l] != newpoints[l - ps]
|
||||||
|
&& newpoints[l + 1] != newpoints[l - ps + 1]) {
|
||||||
|
for (m = 0; m < ps; ++m)
|
||||||
|
newpoints[l + ps + m] = newpoints[l + m];
|
||||||
|
newpoints[l + 1] = newpoints[l - ps + 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
datapoints.points = newpoints;
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.hooks.processDatapoints.push(stackData);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'stack',
|
||||||
|
version: '1.2'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
70
app/assets/javascripts/app/lib/flot/jquery.flot.symbol.js
Executable file
70
app/assets/javascripts/app/lib/flot/jquery.flot.symbol.js
Executable file
|
|
@ -0,0 +1,70 @@
|
||||||
|
/*
|
||||||
|
Flot plugin that adds some extra symbols for plotting points.
|
||||||
|
|
||||||
|
The symbols are accessed as strings through the standard symbol
|
||||||
|
choice:
|
||||||
|
|
||||||
|
series: {
|
||||||
|
points: {
|
||||||
|
symbol: "square" // or "diamond", "triangle", "cross"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
function processRawData(plot, series, datapoints) {
|
||||||
|
// we normalize the area of each symbol so it is approximately the
|
||||||
|
// same as a circle of the given radius
|
||||||
|
|
||||||
|
var handlers = {
|
||||||
|
square: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||||
|
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||||
|
ctx.rect(x - size, y - size, size + size, size + size);
|
||||||
|
},
|
||||||
|
diamond: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = 2s^2 => s = r * sqrt(pi/2)
|
||||||
|
var size = radius * Math.sqrt(Math.PI / 2);
|
||||||
|
ctx.moveTo(x - size, y);
|
||||||
|
ctx.lineTo(x, y - size);
|
||||||
|
ctx.lineTo(x + size, y);
|
||||||
|
ctx.lineTo(x, y + size);
|
||||||
|
ctx.lineTo(x - size, y);
|
||||||
|
},
|
||||||
|
triangle: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3))
|
||||||
|
var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
|
||||||
|
var height = size * Math.sin(Math.PI / 3);
|
||||||
|
ctx.moveTo(x - size/2, y + height/2);
|
||||||
|
ctx.lineTo(x + size/2, y + height/2);
|
||||||
|
if (!shadow) {
|
||||||
|
ctx.lineTo(x, y - height/2);
|
||||||
|
ctx.lineTo(x - size/2, y + height/2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cross: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||||
|
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||||
|
ctx.moveTo(x - size, y - size);
|
||||||
|
ctx.lineTo(x + size, y + size);
|
||||||
|
ctx.moveTo(x - size, y + size);
|
||||||
|
ctx.lineTo(x + size, y - size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var s = series.points.symbol;
|
||||||
|
if (handlers[s])
|
||||||
|
series.points.symbol = handlers[s];
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
plot.hooks.processDatapoints.push(processRawData);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
name: 'symbols',
|
||||||
|
version: '1.0'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
103
app/assets/javascripts/app/lib/flot/jquery.flot.threshold.js
Executable file
103
app/assets/javascripts/app/lib/flot/jquery.flot.threshold.js
Executable file
|
|
@ -0,0 +1,103 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for thresholding data. Controlled through the option
|
||||||
|
"threshold" in either the global series options
|
||||||
|
|
||||||
|
series: {
|
||||||
|
threshold: {
|
||||||
|
below: number
|
||||||
|
color: colorspec
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
or in a specific series
|
||||||
|
|
||||||
|
$.plot($("#placeholder"), [{ data: [ ... ], threshold: { ... }}])
|
||||||
|
|
||||||
|
The data points below "below" are drawn with the specified color. This
|
||||||
|
makes it easy to mark points below 0, e.g. for budget data.
|
||||||
|
|
||||||
|
Internally, the plugin works by splitting the data into two series,
|
||||||
|
above and below the threshold. The extra series below the threshold
|
||||||
|
will have its label cleared and the special "originSeries" attribute
|
||||||
|
set to the original series. You may need to check for this in hover
|
||||||
|
events.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = {
|
||||||
|
series: { threshold: null } // or { below: number, color: color spec}
|
||||||
|
};
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
function thresholdData(plot, s, datapoints) {
|
||||||
|
if (!s.threshold)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var ps = datapoints.pointsize, i, x, y, p, prevp,
|
||||||
|
thresholded = $.extend({}, s); // note: shallow copy
|
||||||
|
|
||||||
|
thresholded.datapoints = { points: [], pointsize: ps };
|
||||||
|
thresholded.label = null;
|
||||||
|
thresholded.color = s.threshold.color;
|
||||||
|
thresholded.threshold = null;
|
||||||
|
thresholded.originSeries = s;
|
||||||
|
thresholded.data = [];
|
||||||
|
|
||||||
|
var below = s.threshold.below,
|
||||||
|
origpoints = datapoints.points,
|
||||||
|
addCrossingPoints = s.lines.show;
|
||||||
|
|
||||||
|
threspoints = [];
|
||||||
|
newpoints = [];
|
||||||
|
|
||||||
|
for (i = 0; i < origpoints.length; i += ps) {
|
||||||
|
x = origpoints[i]
|
||||||
|
y = origpoints[i + 1];
|
||||||
|
|
||||||
|
prevp = p;
|
||||||
|
if (y < below)
|
||||||
|
p = threspoints;
|
||||||
|
else
|
||||||
|
p = newpoints;
|
||||||
|
|
||||||
|
if (addCrossingPoints && prevp != p && x != null
|
||||||
|
&& i > 0 && origpoints[i - ps] != null) {
|
||||||
|
var interx = (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]) * (below - y) + x;
|
||||||
|
prevp.push(interx);
|
||||||
|
prevp.push(below);
|
||||||
|
for (m = 2; m < ps; ++m)
|
||||||
|
prevp.push(origpoints[i + m]);
|
||||||
|
|
||||||
|
p.push(null); // start new segment
|
||||||
|
p.push(null);
|
||||||
|
for (m = 2; m < ps; ++m)
|
||||||
|
p.push(origpoints[i + m]);
|
||||||
|
p.push(interx);
|
||||||
|
p.push(below);
|
||||||
|
for (m = 2; m < ps; ++m)
|
||||||
|
p.push(origpoints[i + m]);
|
||||||
|
}
|
||||||
|
|
||||||
|
p.push(x);
|
||||||
|
p.push(y);
|
||||||
|
}
|
||||||
|
|
||||||
|
datapoints.points = newpoints;
|
||||||
|
thresholded.datapoints.points = threspoints;
|
||||||
|
|
||||||
|
if (thresholded.datapoints.points.length > 0)
|
||||||
|
plot.getData().push(thresholded);
|
||||||
|
|
||||||
|
// FIXME: there are probably some edge cases left in bars
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.hooks.processDatapoints.push(thresholdData);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'threshold',
|
||||||
|
version: '1.0'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -14,6 +14,9 @@
|
||||||
//= require ./app/lib/spine/ajax.js
|
//= require ./app/lib/spine/ajax.js
|
||||||
//= require ./app/lib/spine/route.js
|
//= require ./app/lib/spine/route.js
|
||||||
|
|
||||||
|
//= require ./app/lib/flot/jquery.flot.js
|
||||||
|
//= require ./app/lib/flot/jquery.flot.selection.js
|
||||||
|
|
||||||
//not_used= require_tree ./app/lib/bootstrap
|
//not_used= require_tree ./app/lib/bootstrap
|
||||||
//= require ./app/lib/bootstrap/bootstrap-dropdown.js
|
//= require ./app/lib/bootstrap/bootstrap-dropdown.js
|
||||||
//= require ./app/lib/bootstrap/bootstrap-tooltip.js
|
//= require ./app/lib/bootstrap/bootstrap-tooltip.js
|
||||||
|
|
@ -22,6 +25,7 @@
|
||||||
//= require ./app/lib/bootstrap/bootstrap-tab.js
|
//= require ./app/lib/bootstrap/bootstrap-tab.js
|
||||||
//= require ./app/lib/bootstrap/bootstrap-transition.js
|
//= require ./app/lib/bootstrap/bootstrap-transition.js
|
||||||
//= require ./app/lib/bootstrap/bootstrap-button.js
|
//= require ./app/lib/bootstrap/bootstrap-button.js
|
||||||
|
//= require ./app/lib/bootstrap/bootstrap-collapse.js
|
||||||
|
|
||||||
//= require_tree ./app/lib/base
|
//= require_tree ./app/lib/base
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue