solocla/ppeasy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Primo commit: trasferimento del progetto PPEasy

Browse Source
This commit is contained in:
Claudio
2024-09-18 10:30:50 +02:00
commit eb475f257e
4233 changed files with 1043848 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/flot-chart/jquery.canvaswrapper.js
+550
View File
@@ -0,0 +1,550 @@
/** ## jquery.flot.canvaswrapper
This plugin contains the function for creating and manipulating both the canvas
layers and svg layers.
The Canvas object is a wrapper around an HTML5 canvas tag.
The constructor Canvas(cls, container) takes as parameters cls,
the list of classes to apply to the canvas adnd the containter,
element onto which to append the canvas. The canvas operations
don't work unless the canvas is attached to the DOM.
### jquery.canvaswrapper.js API functions
*/
(function($) {
var Canvas = function(cls, container) {
var element = container.getElementsByClassName(cls)[0];
if (!element) {
element = document.createElement('canvas');
element.className = cls;
element.style.direction = 'ltr';
element.style.position = 'absolute';
element.style.left = '0px';
element.style.top = '0px';
container.appendChild(element);
// If HTML5 Canvas isn't available, throw
if (!element.getContext) {
throw new Error('Canvas is not available.');
}
}
this.element = element;
var context = this.context = element.getContext('2d');
this.pixelRatio = $.plot.browser.getPixelRatio(context);
// Size the canvas to match the internal dimensions of its container
var width = $(container).width();
var height = $(container).height();
this.resize(width, height);
// Collection of HTML div layers for text overlaid onto the canvas
this.SVGContainer = null;
this.SVG = {};
// Cache of text fragments and metrics, so we can avoid expensively
// re-calculating them when the plot is re-rendered in a loop.
this._textCache = {};
}
/**
- resize(width, height)
Resizes the canvas to the given dimensions.
The width represents the new width of the canvas, meanwhile the height
is the new height of the canvas, both of them in pixels.
*/
Canvas.prototype.resize = function(width, height) {
var minSize = 10;
width = width < minSize ? minSize : width;
height = height < minSize ? minSize : height;
var element = this.element,
context = this.context,
pixelRatio = this.pixelRatio;
// Resize the canvas, increasing its density based on the display's
// pixel ratio; basically giving it more pixels without increasing the
// size of its element, to take advantage of the fact that retina
// displays have that many more pixels in the same advertised space.
// Resizing should reset the state (excanvas seems to be buggy though)
if (this.width !== width) {
element.width = width * pixelRatio;
element.style.width = width + 'px';
this.width = width;
}
if (this.height !== height) {
element.height = height * pixelRatio;
element.style.height = height + 'px';
this.height = height;
}
// Save the context, so we can reset in case we get replotted. The
// restore ensure that we're really back at the initial state, and
// should be safe even if we haven't saved the initial state yet.
context.restore();
context.save();
// Scale the coordinate space to match the display density; so even though we
// may have twice as many pixels, we still want lines and other drawing to
// appear at the same size; the extra pixels will just make them crisper.
context.scale(pixelRatio, pixelRatio);
};
/**
- clear()
Clears the entire canvas area, not including any overlaid HTML text
*/
Canvas.prototype.clear = function() {
this.context.clearRect(0, 0, this.width, this.height);
};
/**
- render()
Finishes rendering the canvas, including managing the text overlay.
*/
Canvas.prototype.render = function() {
var cache = this._textCache;
// For each text layer, add elements marked as active that haven't
// already been rendered, and remove those that are no longer active.
for (var layerKey in cache) {
if (hasOwnProperty.call(cache, layerKey)) {
var layer = this.getSVGLayer(layerKey),
layerCache = cache[layerKey];
var display = layer.style.display;
layer.style.display = 'none';
for (var styleKey in layerCache) {
if (hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey];
for (var key in styleCache) {
if (hasOwnProperty.call(styleCache, key)) {
var val = styleCache[key],
positions = val.positions;
for (var i = 0, position; positions[i]; i++) {
position = positions[i];
if (position.active) {
if (!position.rendered) {
layer.appendChild(position.element);
position.rendered = true;
}
} else {
positions.splice(i--, 1);
if (position.rendered) {
while (position.element.firstChild) {
position.element.removeChild(position.element.firstChild);
}
position.element.parentNode.removeChild(position.element);
}
}
}
if (positions.length === 0) {
if (val.measured) {
val.measured = false;
} else {
delete styleCache[key];
}
}
}
}
}
}
layer.style.display = display;
}
}
};
/**
- getSVGLayer(classes)
Creates (if necessary) and returns the SVG overlay container.
The classes string represents the string of space-separated CSS classes
used to uniquely identify the text layer. It return the svg-layer div.
*/
Canvas.prototype.getSVGLayer = function(classes) {
var layer = this.SVG[classes];
// Create the SVG layer if it doesn't exist
if (!layer) {
// Create the svg layer container, if it doesn't exist
var svgElement;
if (!this.SVGContainer) {
this.SVGContainer = document.createElement('div');
this.SVGContainer.className = 'flot-svg';
this.SVGContainer.style.position = 'absolute';
this.SVGContainer.style.top = '0px';
this.SVGContainer.style.left = '0px';
this.SVGContainer.style.height = '100%';
this.SVGContainer.style.width = '100%';
this.SVGContainer.style.pointerEvents = 'none';
this.element.parentNode.appendChild(this.SVGContainer);
svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.style.width = '100%';
svgElement.style.height = '100%';
this.SVGContainer.appendChild(svgElement);
} else {
svgElement = this.SVGContainer.firstChild;
}
layer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
layer.setAttribute('class', classes);
layer.style.position = 'absolute';
layer.style.top = '0px';
layer.style.left = '0px';
layer.style.bottom = '0px';
layer.style.right = '0px';
svgElement.appendChild(layer);
this.SVG[classes] = layer;
}
return layer;
};
/**
- getTextInfo(layer, text, font, angle, width)
Creates (if necessary) and returns a text info object.
The object looks like this:
```js
{
width //Width of the text's wrapper div.
height //Height of the text's wrapper div.
element //The HTML div containing the text.
positions //Array of positions at which this text is drawn.
}
```
The positions array contains objects that look like this:
```js
{
active //Flag indicating whether the text should be visible.
rendered //Flag indicating whether the text is currently visible.
element //The HTML div containing the text.
text //The actual text and is identical with element[0].textContent.
x //X coordinate at which to draw the text.
y //Y coordinate at which to draw the text.
}
```
Each position after the first receives a clone of the original element.
The idea is that that the width, height, and general 'identity' of the
text is constant no matter where it is placed; the placements are a
secondary property.
Canvas maintains a cache of recently-used text info objects; getTextInfo
either returns the cached element or creates a new entry.
The layer parameter is string of space-separated CSS classes uniquely
identifying the layer containing this text.
Text is the text string to retrieve info for.
Font is either a string of space-separated CSS classes or a font-spec object,
defining the text's font and style.
Angle is the angle at which to rotate the text, in degrees. Angle is currently unused,
it will be implemented in the future.
The last parameter is the Maximum width of the text before it wraps.
The method returns a text info object.
*/
Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
var textStyle, layerCache, styleCache, info;
// Cast the value to a string, in case we were given a number or such
text = '' + text;
// If the font is a font-spec object, generate a CSS font definition
if (typeof font === 'object') {
textStyle = font.style + ' ' + font.variant + ' ' + font.weight + ' ' + font.size + 'px/' + font.lineHeight + 'px ' + font.family;
} else {
textStyle = font;
}
// Retrieve (or create) the cache for the text's layer and styles
layerCache = this._textCache[layer];
if (layerCache == null) {
layerCache = this._textCache[layer] = {};
}
styleCache = layerCache[textStyle];
if (styleCache == null) {
styleCache = layerCache[textStyle] = {};
}
var key = generateKey(text);
info = styleCache[key];
// If we can't find a matching element in our cache, create a new one
if (!info) {
var element = document.createElementNS('http://www.w3.org/2000/svg', 'text');
if (text.indexOf('<br>') !== -1) {
addTspanElements(text, element, -9999);
} else {
var textNode = document.createTextNode(text);
element.appendChild(textNode);
}
element.style.position = 'absolute';
element.style.maxWidth = width;
element.setAttributeNS(null, 'x', -9999);
element.setAttributeNS(null, 'y', -9999);
if (typeof font === 'object') {
element.style.font = textStyle;
element.style.fill = font.fill;
} else if (typeof font === 'string') {
element.setAttribute('class', font);
}
this.getSVGLayer(layer).appendChild(element);
var elementRect = element.getBBox();
info = styleCache[key] = {
width: elementRect.width,
height: elementRect.height,
measured: true,
element: element,
positions: []
};
//remove elements from dom
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.parentNode.removeChild(element);
}
info.measured = true;
return info;
};
function updateTransforms (element, transforms) {
element.transform.baseVal.clear();
if (transforms) {
transforms.forEach(function(t) {
element.transform.baseVal.appendItem(t);
});
}
}
/**
- addText (layer, x, y, text, font, angle, width, halign, valign, transforms)
Adds a text string to the canvas text overlay.
The text isn't drawn immediately; it is marked as rendering, which will
result in its addition to the canvas on the next render pass.
The layer is string of space-separated CSS classes uniquely
identifying the layer containing this text.
X and Y represents the X and Y coordinate at which to draw the text.
and text is the string to draw
*/
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign, transforms) {
var info = this.getTextInfo(layer, text, font, angle, width),
positions = info.positions;
// Tweak the div's position to match the text's alignment
if (halign === 'center') {
x -= info.width / 2;
} else if (halign === 'right') {
x -= info.width;
}
if (valign === 'middle') {
y -= info.height / 2;
} else if (valign === 'bottom') {
y -= info.height;
}
y += 0.75 * info.height;
// Determine whether this text already exists at this position.
// If so, mark it for inclusion in the next render pass.
for (var i = 0, position; positions[i]; i++) {
position = positions[i];
if (position.x === x && position.y === y && position.text === text) {
position.active = true;
// update the transforms
updateTransforms(position.element, transforms);
return;
} else if (position.active === false) {
position.active = true;
position.text = text;
if (text.indexOf('<br>') !== -1) {
y -= 0.25 * info.height;
addTspanElements(text, position.element, x);
} else {
position.element.textContent = text;
}
position.element.setAttributeNS(null, 'x', x);
position.element.setAttributeNS(null, 'y', y);
position.x = x;
position.y = y;
// update the transforms
updateTransforms(position.element, transforms);
return;
}
}
// If the text doesn't exist at this position, create a new entry
// For the very first position we'll re-use the original element,
// while for subsequent ones we'll clone it.
position = {
active: true,
rendered: false,
element: positions.length ? info.element.cloneNode() : info.element,
text: text,
x: x,
y: y
};
positions.push(position);
if (text.indexOf('<br>') !== -1) {
y -= 0.25 * info.height;
addTspanElements(text, position.element, x);
} else {
position.element.textContent = text;
}
// Move the element to its final position within the container
position.element.setAttributeNS(null, 'x', x);
position.element.setAttributeNS(null, 'y', y);
position.element.style.textAlign = halign;
// update the transforms
updateTransforms(position.element, transforms);
};
var addTspanElements = function(text, element, x) {
var lines = text.split('<br>'),
tspan, i, offset;
for (i = 0; i < lines.length; i++) {
if (!element.childNodes[i]) {
tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
element.appendChild(tspan);
} else {
tspan = element.childNodes[i];
}
tspan.textContent = lines[i];
offset = i * 1 + 'em';
tspan.setAttributeNS(null, 'dy', offset);
tspan.setAttributeNS(null, 'x', x);
}
}
/**
- removeText (layer, x, y, text, font, angle)
The function removes one or more text strings from the canvas text overlay.
If no parameters are given, all text within the layer is removed.
Note that the text is not immediately removed; it is simply marked as
inactive, which will result in its removal on the next render pass.
This avoids the performance penalty for 'clear and redraw' behavior,
where we potentially get rid of all text on a layer, but will likely
add back most or all of it later, as when redrawing axes, for example.
The layer is a string of space-separated CSS classes uniquely
identifying the layer containing this text. The following parameter are
X and Y coordinate of the text.
Text is the string to remove, while the font is either a string of space-separated CSS
classes or a font-spec object, defining the text's font and style.
*/
Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
var info, htmlYCoord;
if (text == null) {
var layerCache = this._textCache[layer];
if (layerCache != null) {
for (var styleKey in layerCache) {
if (hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey];
for (var key in styleCache) {
if (hasOwnProperty.call(styleCache, key)) {
var positions = styleCache[key].positions;
positions.forEach(function(position) {
position.active = false;
});
}
}
}
}
}
} else {
info = this.getTextInfo(layer, text, font, angle);
positions = info.positions;
positions.forEach(function(position) {
htmlYCoord = y + 0.75 * info.height;
if (position.x === x && position.y === htmlYCoord && position.text === text) {
position.active = false;
}
});
}
};
/**
- clearCache()
Clears the cache used to speed up the text size measurements.
As an (unfortunate) side effect all text within the text Layer is removed.
Use this function before plot.setupGrid() and plot.draw() if the plot just
became visible or the styles changed.
*/
Canvas.prototype.clearCache = function() {
var cache = this._textCache;
for (var layerKey in cache) {
if (hasOwnProperty.call(cache, layerKey)) {
var layer = this.getSVGLayer(layerKey);
while (layer.firstChild) {
layer.removeChild(layer.firstChild);
}
}
};
this._textCache = {};
};
function generateKey(text) {
return text.replace(/0|1|2|3|4|5|6|7|8|9/g, '0');
}
if (!window.Flot) {
window.Flot = {};
}
window.Flot.Canvas = Canvas;
})(jQuery);
plugins/flot-chart/jquery.colorhelpers.js
+199
View File
@@ -0,0 +1,199 @@
/* 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 or root (have no parent)
if (c !== '' && c !== 'transparent') {
break;
}
elem = elem.parent();
} while (elem.length && !$.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)
res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str);
if (res) {
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
}
// Look for rgba(num,num,num,num)
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)
if (res) {
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
}
// Look for rgb(num%,num%,num%)
res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*\)/.exec(str);
if (res) {
return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55);
}
// Look for rgba(num%,num%,num%,num)
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);
if (res) {
return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55, parseFloat(res[4]));
}
// Look for #a0b1c2
res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str);
if (res) {
return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
}
// Look for #fff
res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str);
if (res) {
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);
plugins/flot-chart/jquery.flot-dataType.js
+328
View File
@@ -0,0 +1,328 @@
var flotDataType1 = [
[0, 48.11708650372481],
[1, 44.83834104995953],
[2, 45.727409628208974],
[3, 44.69213146554142],
[4, 44.92113232835135],
[5, 44.200874587557415],
[6, 41.750527715312444],
[7, 44.84511185791557],
[8, 46.04672992189592],
[9, 45.9480092098883],
[10, 46.9249480823427],
[11, 43.600609487921346],
[12, 40.29988975207692],
[13, 42.03310106988357],
[14, 39.457750445961125],
[15, 40.540159797957294],
[16, 37.277912393740806],
[17, 41.43887402339309],
[18, 39.47430428214318],
[19, 36.91189415889479],
[20, 36.42847097453014],
[21, 36.96844325047937],
[22, 35.54647151074562],
[23, 32.998974290143025],
[24, 30.43526314490385],
[25, 31.14797888879888],
[26, 27.20589032036549],
[27, 25.777592542626508],
[28, 30.052675048145275],
[29, 30.92837408600937],
[30, 34.190241658736014],
[31, 37.57718922878679],
[32, 41.18083316913268],
[33, 41.27110666976231],
[34, 36.33819281943194],
[35, 37.39239238651191],
[36, 37.046485292242615],
[37, 34.594801853250495],
[38, 31.488044618299227],
[39, 34.69970813498227],
[40, 39.66083111892072],
[41, 40.203292838001616],
[42, 36.089709320758985],
[43, 40.31141091738469],
[44, 44.170004784953846],
[45, 48.84998014705778],
[46, 43.93624560052546],
[47, 40.62473022491363],
[48, 39.154068738786684],
[49, 42.803089612673666],
[50, 40.6511024461858],
[51, 38.34516630158569],
[52, 39.546885205159555],
[53, 42.50715860274628],
[54, 38.1455129028495],
[55, 33.87761157196474],
[56, 37.30125615378047],
[57, 38.799409423316405],
[58, 39.185431079286275],
[59, 43.32737024276462],
[60, 41.52185070435002],
[61, 41.613587244137946],
[62, 44.23763577861365],
[63, 44.91439321362589],
[64, 42.18546432611939],
[65, 41.0624926886062],
[66, 44.24453261527582],
[67, 47.34794952778721],
[68, 48.10833243543891],
[69, 43.640893412371504],
[70, 40.614056030997666],
[71, 42.9374730102888],
[72, 46.1355421298619],
[73, 48.995759760197956],
[74, 52.19926195857424],
[75, 49.2778849176981],
[76, 52.46274689069702],
[77, 56.74969793098863],
[78, 60.92623317241021],
[79, 57.70969775380601],
[80, 57.35168105637668],
[81, 59.39818648636745],
[82, 58.87944453401413],
[83, 63.104976246068674],
[84, 60.16160410107729],
[85, 60.3461385910513],
[86, 63.41836851069141],
[87, 58.881150853965565],
[88, 54.25129328569841],
[89, 49.66170902762076],
[90, 45.671308451937406],
[91, 43.42038067966773],
[92, 46.505793156464286],
[93, 46.06001872195206],
[94, 50.91335602988896],
[95, 46.84735026131701],
[96, 47.41734754711108],
[97, 44.36126529495156],
[98, 41.99470503666513],
[99, 43.632976322955784],
[100, 46.36805334166653],
[101, 48.16660610657209],
[102, 50.56661518795267],
[103, 47.20511080729683],
[104, 51.57928093061832],
[105, 46.82629992437289],
[106, 43.71656947498538],
[107, 46.11727847268647],
[108, 46.239411607006936],
[109, 41.99170406788848],
[110, 44.59078988734815],
[111, 39.99864995462555],
[112, 39.59607991752385],
[113, 40.86135028690851],
[114, 39.81036719656035],
[115, 40.328012974674394],
[116, 41.65325716849331],
[117, 45.00093543523572],
[118, 46.04624698953661],
[119, 48.003663497054745],
[120, 50.17606274884235],
[121, 55.05679484483894],
[122, 55.96838640846091],
[123, 55.544955954661],
[124, 54.84832728252716],
[125, 52.55313725959578],
[126, 49.91965607013097],
[127, 54.037850934955415],
[128, 57.10789770988697],
[129, 58.48651605604872],
[130, 60.7485271818432],
[131, 65.34376786732726],
[132, 67.43791704755618],
[133, 62.787033615491154],
[134, 65.01110323823873],
[135, 66.76229363100968],
[136, 68.37430484004857],
[137, 71.70168521356638],
[138, 68.57137402747702],
[139, 67.39836039140941],
[140, 70.31406498879772],
[141, 70.32681376237582],
[142, 69.44430239433778],
[143, 68.41358873180461],
[144, 72.61057980411566],
[145, 70.04463291270768],
[146, 70.28596044322113],
[147, 65.6023891614268],
[148, 67.46401070074405],
[149, 62.80776411813089]
];
var flotDataType2 = [
[0, 40.42460652446133],
[1, 39.746131861430484],
[2, 35.95109348595284],
[3, 33.295567798337025],
[4, 28.87960054374564],
[5, 28.498853797438535],
[6, 24.44598918395687],
[7, 20.218403695742982],
[8, 17.498233218421312],
[9, 16.54060961040485],
[10, 19.002383747980975],
[11, 16.471725580977914],
[12, 13.155182881964787],
[13, 18.077483369454345],
[14, 17.938434631237822],
[15, 18.92413124205944],
[16, 18.461208995002494],
[17, 19.661876313219913],
[18, 18.042303047352455],
[19, 17.785290125636354],
[20, 20.151980264909543],
[21, 18.924923650083358],
[22, 17.088923942341232],
[23, 17.11745721938192],
[24, 15.703502004647063],
[25, 15.078540825575075],
[26, 14.510809401000387],
[27, 15.226574724712297],
[28, 18.01709489679379],
[29, 19.770761552221565],
[30, 23.670209769802682],
[31, 27.985742905483164],
[32, 30.80634374024116],
[33, 28.56215635604935],
[34, 29.459971127621614],
[35, 29.506514532069936],
[36, 27.289754685028775],
[37, 24.365568424856836],
[38, 22.893664052525622],
[39, 26.57527073377395],
[40, 28.04483981176638],
[41, 27.77031588135324],
[42, 30.245343380918406],
[43, 26.57479109054868],
[44, 22.18111812493286],
[45, 19.644777576179102],
[46, 16.745896664550347],
[47, 17.213789404459703],
[48, 20.056299583848645],
[49, 16.133489834808596],
[50, 12.954908672170685],
[51, 10.710124578123633],
[52, 7.99331653229623],
[53, 11.330824794029468],
[54, 15.366888531658518],
[55, 20.162146683566043],
[56, 22.56433862111984],
[57, 19.342499731952728],
[58, 18.325580989588303],
[59, 20.7511874504748],
[60, 17.099488390174667],
[61, 19.327912207799372],
[62, 18.31650048764758],
[63, 14.34889182281918],
[64, 9.939606691311928],
[65, 10.640765261408266],
[66, 6.184018402150329],
[67, 10.32603369640253],
[68, 12.800228260925913],
[69, 13.441825186707572],
[70, 18.356807970216398],
[71, 22.877870826719246],
[72, 22.265182194135164],
[73, 26.922230352208814],
[74, 22.50189449417149],
[75, 18.14060836488997],
[76, 19.06846754782137],
[77, 19.73961245162804],
[78, 18.82061647678131],
[79, 23.33852310774632],
[80, 20.4810751737507],
[81, 25.47004674625981],
[82, 28.842343230667943],
[83, 29.09658130355575],
[84, 27.714558649179516],
[85, 25.220943394214757],
[86, 25.43025835749838],
[87, 24.13072502126257],
[88, 20.020443915879174],
[89, 18.387986699568284],
[90, 18.307930265812836],
[91, 18.72058117598284],
[92, 22.46850401457292],
[93, 21.718447234477544],
[94, 26.488413058421976],
[95, 29.882771503348536],
[96, 26.94717052753741],
[97, 28.06481155716483],
[98, 30.40253552214977],
[99, 28.987765656899995],
[100, 30.13551373541587],
[101, 27.605418583328863],
[102, 30.214101672191696],
[103, 26.88133118194294],
[104, 25.727723710013045],
[105, 28.279900485071032],
[106, 27.89821646957165],
[107, 30.69854959893513],
[108, 31.4282872565538],
[109, 36.14975119379828],
[110, 32.0227980362552],
[111, 27.309945041337073],
[112, 29.51230564564233],
[113, 32.67035607222466],
[114, 28.82372957289023],
[115, 28.85242847072152],
[116, 29.63844624105993],
[117, 29.157219655397313],
[118, 27.90616896335908],
[119, 30.71160984027734],
[120, 28.026131698214115],
[121, 23.82439628518755],
[122, 18.83160453591808],
[123, 14.487027404093734],
[124, 11.761696821209515],
[125, 12.758521331246762],
[126, 11.367219794014758],
[127, 14.21423733022224],
[128, 11.602480291802959],
[129, 15.244397384751025],
[130, 13.050114582189945],
[131, 17.253378403411432],
[132, 18.506683542934038],
[133, 23.04087000728893],
[134, 21.87625260158983],
[135, 25.974296957094985],
[136, 22.463388750666468],
[137, 17.675052230498956],
[138, 14.806456821972226],
[139, 18.589538541056534],
[140, 20.005874168046084],
[141, 22.934846222699328],
[142, 25.155316598067426],
[143, 27.883126867602705],
[144, 27.76231130416712],
[145, 28.618896779193612],
[146, 26.413595554645298],
[147, 28.097785659338193],
[148, 29.502272077881898],
[149, 26.1165859635503]
];
function getRandomData(totalPoints = 150, start = 50) {
var data = [];
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : start;
var y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = Math.random() * 10;
} else if (y > 100) {
y = 80;
}
data.push(y);
}
return res;
}
plugins/flot-chart/jquery.flot.axislabels.js
+212
View File
@@ -0,0 +1,212 @@
/*
Axis label plugin for flot
Derived from:
Axis Labels Plugin for flot.
http://github.com/markrcote/flot-axislabels
Original code is Copyright (c) 2010 Xuan Luo.
Original code was released under the GPLv3 license by Xuan Luo, September 2010.
Original code was rereleased under the MIT license by Xuan Luo, April 2012.
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
(function($) {
"use strict";
var options = {
axisLabels: {
show: true
}
};
function AxisLabel(axisName, position, padding, placeholder, axisLabel, surface) {
this.axisName = axisName;
this.position = position;
this.padding = padding;
this.placeholder = placeholder;
this.axisLabel = axisLabel;
this.surface = surface;
this.width = 0;
this.height = 0;
this.elem = null;
}
AxisLabel.prototype.calculateSize = function() {
var axisId = this.axisName + 'Label',
layerId = axisId + 'Layer',
className = axisId + ' axisLabels';
var info = this.surface.getTextInfo(layerId, this.axisLabel, className);
this.labelWidth = info.width;
this.labelHeight = info.height;
if (this.position === 'left' || this.position === 'right') {
this.width = this.labelHeight + this.padding;
this.height = 0;
} else {
this.width = 0;
this.height = this.labelHeight + this.padding;
}
};
AxisLabel.prototype.transforms = function(degrees, x, y, svgLayer) {
var transforms = [], translate, rotate;
if (x !== 0 || y !== 0) {
translate = svgLayer.createSVGTransform();
translate.setTranslate(x, y);
transforms.push(translate);
}
if (degrees !== 0) {
rotate = svgLayer.createSVGTransform();
var centerX = Math.round(this.labelWidth / 2),
centerY = 0;
rotate.setRotate(degrees, centerX, centerY);
transforms.push(rotate);
}
return transforms;
};
AxisLabel.prototype.calculateOffsets = function(box) {
var offsets = {
x: 0,
y: 0,
degrees: 0
};
if (this.position === 'bottom') {
offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
offsets.y = box.top + box.height - this.labelHeight;
} else if (this.position === 'top') {
offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
offsets.y = box.top;
} else if (this.position === 'left') {
offsets.degrees = -90;
offsets.x = box.left - this.labelWidth / 2;
offsets.y = box.height / 2 + box.top;
} else if (this.position === 'right') {
offsets.degrees = 90;
offsets.x = box.left + box.width - this.labelWidth / 2;
offsets.y = box.height / 2 + box.top;
}
offsets.x = Math.round(offsets.x);
offsets.y = Math.round(offsets.y);
return offsets;
};
AxisLabel.prototype.cleanup = function() {
var axisId = this.axisName + 'Label',
layerId = axisId + 'Layer',
className = axisId + ' axisLabels';
this.surface.removeText(layerId, 0, 0, this.axisLabel, className);
};
AxisLabel.prototype.draw = function(box) {
var axisId = this.axisName + 'Label',
layerId = axisId + 'Layer',
className = axisId + ' axisLabels',
offsets = this.calculateOffsets(box),
style = {
position: 'absolute',
bottom: '',
right: '',
display: 'inline-block',
'white-space': 'nowrap'
};
var layer = this.surface.getSVGLayer(layerId);
var transforms = this.transforms(offsets.degrees, offsets.x, offsets.y, layer.parentNode);
this.surface.addText(layerId, 0, 0, this.axisLabel, className, undefined, undefined, undefined, undefined, transforms);
this.surface.render();
Object.keys(style).forEach(function(key) {
layer.style[key] = style[key];
});
};
function init(plot) {
plot.hooks.processOptions.push(function(plot, options) {
if (!options.axisLabels.show) {
return;
}
var axisLabels = {};
var defaultPadding = 2; // padding between axis and tick labels
plot.hooks.axisReserveSpace.push(function(plot, axis) {
var opts = axis.options;
var axisName = axis.direction + axis.n;
axis.labelHeight += axis.boxPosition.centerY;
axis.labelWidth += axis.boxPosition.centerX;
if (!opts || !opts.axisLabel || !axis.show) {
return;
}
var padding = opts.axisLabelPadding === undefined
? defaultPadding
: opts.axisLabelPadding;
var axisLabel = axisLabels[axisName];
if (!axisLabel) {
axisLabel = new AxisLabel(axisName,
opts.position, padding,
plot.getPlaceholder()[0], opts.axisLabel, plot.getSurface());
axisLabels[axisName] = axisLabel;
}
axisLabel.calculateSize();
// Incrementing the sizes of the tick labels.
axis.labelHeight += axisLabel.height;
axis.labelWidth += axisLabel.width;
});
// TODO - use the drawAxis hook
plot.hooks.draw.push(function(plot, ctx) {
$.each(plot.getAxes(), function(flotAxisName, axis) {
var opts = axis.options;
if (!opts || !opts.axisLabel || !axis.show) {
return;
}
var axisName = axis.direction + axis.n;
axisLabels[axisName].draw(axis.box);
});
});
plot.hooks.shutdown.push(function(plot, eventHolder) {
for (var axisName in axisLabels) {
axisLabels[axisName].cleanup();
}
});
});
};
$.plot.plugins.push({
init: init,
options: options,
name: 'axisLabels',
version: '3.0'
});
})(jQuery);
plugins/flot-chart/jquery.flot.browser.js
+98
View File
@@ -0,0 +1,98 @@
/** ## jquery.flot.browser.js
This plugin is used to make available some browser-related utility functions.
### Methods
*/
(function ($) {
'use strict';
var browser = {
/**
- getPageXY(e)
Calculates the pageX and pageY using the screenX, screenY properties of the event
and the scrolling of the page. This is needed because the pageX and pageY
properties of the event are not correct while running tests in Edge. */
getPageXY: function (e) {
// This code is inspired from https://stackoverflow.com/a/3464890
var doc = document.documentElement,
pageX = e.clientX + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
pageY = e.clientY + (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
return { X: pageX, Y: pageY };
},
/**
- getPixelRatio(context)
This function returns the current pixel ratio defined by the product of desktop
zoom and page zoom.
Additional info: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
*/
getPixelRatio: function(context) {
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio =
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return devicePixelRatio / backingStoreRatio;
},
/**
- isSafari, isMobileSafari, isOpera, isFirefox, isIE, isEdge, isChrome, isBlink
This is a collection of functions, used to check if the code is running in a
particular browser or Javascript engine.
*/
isSafari: function() {
// *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
// Safari 3.0+ "[object HTMLElementConstructor]"
return /constructor/i.test(window.top.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window.top['safari'] || (typeof window.top.safari !== 'undefined' && window.top.safari.pushNotification));
},
isMobileSafari: function() {
//isMobileSafari adapted from https://stackoverflow.com/questions/3007480/determine-if-user-navigated-from-mobile-safari
return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/);
},
isOpera: function() {
// *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
//Opera 8.0+
return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
},
isFirefox: function() {
// *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
// Firefox 1.0+
return typeof InstallTrigger !== 'undefined';
},
isIE: function() {
// *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
// Internet Explorer 6-11
return /*@cc_on!@*/false || !!document.documentMode;
},
isEdge: function() {
// *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
// Edge 20+
return !browser.isIE() && !!window.StyleMedia;
},
isChrome: function() {
// *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
// Chrome 1+
return !!window.chrome && !!window.chrome.webstore;
},
isBlink: function() {
// *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
return (browser.isChrome() || browser.isOpera()) && !!window.CSS;
}
};
$.plot.browser = browser;
})(jQuery);
plugins/flot-chart/jquery.flot.drawSeries.js
+663
View File
@@ -0,0 +1,663 @@
/**
## jquery.flot.drawSeries.js
This plugin is used by flot for drawing lines, plots, bars or area.
### Public methods
*/
(function($) {
"use strict";
function DrawSeries() {
function plotLine(datapoints, xoffset, yoffset, axisx, axisy, ctx, steps) {
var points = datapoints.points,
ps = datapoints.pointsize,
prevx = null,
prevy = null;
var x1 = 0.0,
y1 = 0.0,
x2 = 0.0,
y2 = 0.0,
mx = null,
my = null,
i = 0;
ctx.beginPath();
for (i = ps; i < points.length; i += ps) {
x1 = points[i - ps];
y1 = points[i - ps + 1];
x2 = points[i];
y2 = points[i + 1];
if (x1 === null || x2 === null) {
mx = null;
my = null;
continue;
}
if (isNaN(x1) || isNaN(x2) || isNaN(y1) || isNaN(y2)) {
prevx = null;
prevy = null;
continue;
}
if(steps){
if (mx !== null && my !== null) {
// if middle point exists, transfer p2 -> p1 and p1 -> mp
x2 = x1;
y2 = y1;
x1 = mx;
y1 = my;
// 'remove' middle point
mx = null;
my = null;
// subtract pointsize from i to have current point p1 handled again
i -= ps;
} else if (y1 !== y2 && x1 !== x2) {
// create a middle point
y2 = y1;
mx = x2;
my = y1;
}
}
// clip with ymin
if (y1 <= y2 && y1 < axisy.min) {
if (y2 < axisy.min) {
// line segment is outside
continue;
}
// compute new intersection point
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
y1 = axisy.min;
} else if (y2 <= y1 && y2 < axisy.min) {
if (y1 < axisy.min) {
continue;
}
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
y2 = axisy.min;
}
// clip with ymax
if (y1 >= y2 && y1 > axisy.max) {
if (y2 > axisy.max) {
continue;
}
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
y1 = axisy.max;
} else if (y2 >= y1 && y2 > axisy.max) {
if (y1 > axisy.max) {
continue;
}
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
y2 = axisy.max;
}
// clip with xmin
if (x1 <= x2 && x1 < axisx.min) {
if (x2 < axisx.min) {
continue;
}
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
x1 = axisx.min;
} else if (x2 <= x1 && x2 < axisx.min) {
if (x1 < axisx.min) {
continue;
}
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
x2 = axisx.min;
}
// clip with xmax
if (x1 >= x2 && x1 > axisx.max) {
if (x2 > axisx.max) {
continue;
}
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
x1 = axisx.max;
} else if (x2 >= x1 && x2 > axisx.max) {
if (x1 > axisx.max) {
continue;
}
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
x2 = axisx.max;
}
if (x1 !== prevx || y1 !== prevy) {
ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
}
prevx = x2;
prevy = y2;
ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
}
ctx.stroke();
}
function plotLineArea(datapoints, axisx, axisy, fillTowards, ctx, steps) {
var points = datapoints.points,
ps = datapoints.pointsize,
bottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min,
i = 0,
ypos = 1,
areaOpen = false,
segmentStart = 0,
segmentEnd = 0,
mx = null,
my = null;
// we process each segment in two turns, first forward
// direction to sketch out top, then once we hit the
// end we go backwards to sketch the bottom
while (true) {
if (ps > 0 && i > points.length + ps) {
break;
}
i += ps; // ps is negative if going backwards
var x1 = points[i - ps],
y1 = points[i - ps + ypos],
x2 = points[i],
y2 = points[i + ypos];
if (ps === -2) {
/* going backwards and no value for the bottom provided in the series*/
y1 = y2 = bottom;
}
if (areaOpen) {
if (ps > 0 && x1 != null && x2 == null) {
// at turning point
segmentEnd = i;
ps = -ps;
ypos = 2;
continue;
}
if (ps < 0 && i === segmentStart + ps) {
// done with the reverse sweep
ctx.fill();
areaOpen = false;
ps = -ps;
ypos = 1;
i = segmentStart = segmentEnd + ps;
continue;
}
}
if (x1 == null || x2 == null) {
mx = null;
my = null;
continue;
}
if(steps){
if (mx !== null && my !== null) {
// if middle point exists, transfer p2 -> p1 and p1 -> mp
x2 = x1;
y2 = y1;
x1 = mx;
y1 = my;
// 'remove' middle point
mx = null;
my = null;
// subtract pointsize from i to have current point p1 handled again
i -= ps;
} else if (y1 !== y2 && x1 !== x2) {
// create a middle point
y2 = y1;
mx = x2;
my = y1;
}
}
// clip x values
// clip with xmin
if (x1 <= x2 && x1 < axisx.min) {
if (x2 < axisx.min) {
continue;
}
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
x1 = axisx.min;
} else if (x2 <= x1 && x2 < axisx.min) {
if (x1 < axisx.min) {
continue;
}
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
x2 = axisx.min;
}
// clip with xmax
if (x1 >= x2 && x1 > axisx.max) {
if (x2 > axisx.max) {
continue;
}
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
x1 = axisx.max;
} else if (x2 >= x1 && x2 > axisx.max) {
if (x1 > axisx.max) {
continue;
}
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
x2 = axisx.max;
}
if (!areaOpen) {
// open area
ctx.beginPath();
ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom));
areaOpen = true;
}
// now first check the case where both is outside
if (y1 >= axisy.max && y2 >= axisy.max) {
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
continue;
} else if (y1 <= axisy.min && y2 <= axisy.min) {
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
continue;
}
// else it's a bit more complicated, there might
// be a flat maxed out rectangle first, then a
// triangular cutout or reverse; to find these
// keep track of the current x values
var x1old = x1,
x2old = x2;
// clip the y values, without shortcutting, we
// go through all cases in turn
// clip with ymin
if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
y1 = axisy.min;
} else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
y2 = axisy.min;
}
// clip with ymax
if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
y1 = axisy.max;
} else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
y2 = axisy.max;
}
// if the x value was changed we got a rectangle
// to fill
if (x1 !== x1old) {
ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1));
// it goes to (x1, y1), but we fill that below
}
// fill triangular section, this sometimes result
// in redundant points if (x1, y1) hasn't changed
// from previous line to, but we just ignore that
ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1));
ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
// fill the other rectangle if it's there
if (x2 !== x2old) {
ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2));
}
}
}
/**
- drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
This function is used for drawing lines or area fill. In case the series has line decimation function
attached, before starting to draw, as an optimization the points will first be decimated.
The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
plotHeight are the corresponding parameters of flot used to determine the drawing surface.
The function getColorOrGradient is used to compute the fill style of lines and area.
*/
function drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
ctx.lineJoin = "round";
if (series.lines.dashes && ctx.setLineDash) {
ctx.setLineDash(series.lines.dashes);
}
var datapoints = {
format: series.datapoints.format,
points: series.datapoints.points,
pointsize: series.datapoints.pointsize
};
if (series.decimate) {
datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight);
}
var lw = series.lines.lineWidth;
ctx.lineWidth = lw;
ctx.strokeStyle = series.color;
var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight, getColorOrGradient);
if (fillStyle) {
ctx.fillStyle = fillStyle;
plotLineArea(datapoints, series.xaxis, series.yaxis, series.lines.fillTowards || 0, ctx, series.lines.steps);
}
if (lw > 0) {
plotLine(datapoints, 0, 0, series.xaxis, series.yaxis, ctx, series.lines.steps);
}
ctx.restore();
}
/**
- drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
This function is used for drawing points using a given symbol. In case the series has points decimation
function attached, before starting to draw, as an optimization the points will first be decimated.
The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
plotHeight are the corresponding parameters of flot used to determine the drawing surface.
The function drawSymbol is used to compute and draw the symbol chosen for the points.
*/
function drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
function drawCircle(ctx, x, y, radius, shadow, fill) {
ctx.moveTo(x + radius, y);
ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
}
drawCircle.fill = true;
function plotPoints(datapoints, radius, fill, offset, shadow, axisx, axisy, drawSymbolFn) {
var points = datapoints.points,
ps = datapoints.pointsize;
ctx.beginPath();
for (var i = 0; i < points.length; i += ps) {
var x = points[i],
y = points[i + 1];
if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
continue;
}
x = axisx.p2c(x);
y = axisy.p2c(y) + offset;
drawSymbolFn(ctx, x, y, radius, shadow, fill);
}
if (drawSymbolFn.fill && !shadow) {
ctx.fill();
}
ctx.stroke();
}
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
var datapoints = {
format: series.datapoints.format,
points: series.datapoints.points,
pointsize: series.datapoints.pointsize
};
if (series.decimatePoints) {
datapoints.points = series.decimatePoints(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight);
}
var lw = series.points.lineWidth,
radius = series.points.radius,
symbol = series.points.symbol,
drawSymbolFn;
if (symbol === 'circle') {
drawSymbolFn = drawCircle;
} else if (typeof symbol === 'string' && drawSymbol && drawSymbol[symbol]) {
drawSymbolFn = drawSymbol[symbol];
} else if (typeof drawSymbol === 'function') {
drawSymbolFn = drawSymbol;
}
// If the user sets the line width to 0, we change it to a very
// small value. A line width of 0 seems to force the default of 1.
if (lw === 0) {
lw = 0.0001;
}
ctx.lineWidth = lw;
ctx.fillStyle = getFillStyle(series.points, series.color, null, null, getColorOrGradient);
ctx.strokeStyle = series.color;
plotPoints(datapoints, radius,
true, 0, false,
series.xaxis, series.yaxis, drawSymbolFn);
ctx.restore();
}
function drawBar(x, y, b, barLeft, barRight, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
var left = x + barLeft,
right = x + barRight,
bottom = b, top = y,
drawLeft, drawRight, drawTop, drawBottom = false,
tmp;
drawLeft = drawRight = drawTop = true;
// in horizontal mode, we start the bar from the left
// instead of from the bottom so it appears to be
// horizontal rather than vertical
if (horizontal) {
drawBottom = drawRight = drawTop = true;
drawLeft = false;
left = b;
right = x;
top = y + barLeft;
bottom = y + barRight;
// account for negative bars
if (right < left) {
tmp = right;
right = left;
left = tmp;
drawLeft = true;
drawRight = false;
}
}
else {
drawLeft = drawRight = drawTop = true;
drawBottom = false;
left = x + barLeft;
right = x + barRight;
bottom = b;
top = y;
// account for negative bars
if (top < bottom) {
tmp = top;
top = bottom;
bottom = tmp;
drawBottom = true;
drawTop = false;
}
}
// clip
if (right < axisx.min || left > axisx.max ||
top < axisy.min || bottom > axisy.max) {
return;
}
if (left < axisx.min) {
left = axisx.min;
drawLeft = false;
}
if (right > axisx.max) {
right = axisx.max;
drawRight = false;
}
if (bottom < axisy.min) {
bottom = axisy.min;
drawBottom = false;
}
if (top > axisy.max) {
top = axisy.max;
drawTop = false;
}
left = axisx.p2c(left);
bottom = axisy.p2c(bottom);
right = axisx.p2c(right);
top = axisy.p2c(top);
// fill the bar
if (fillStyleCallback) {
c.fillStyle = fillStyleCallback(bottom, top);
c.fillRect(left, top, right - left, bottom - top)
}
// draw outline
if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) {
c.beginPath();
// FIXME: inline moveTo is buggy with excanvas
c.moveTo(left, bottom);
if (drawLeft) {
c.lineTo(left, top);
} else {
c.moveTo(left, top);
}
if (drawTop) {
c.lineTo(right, top);
} else {
c.moveTo(right, top);
}
if (drawRight) {
c.lineTo(right, bottom);
} else {
c.moveTo(right, bottom);
}
if (drawBottom) {
c.lineTo(left, bottom);
} else {
c.moveTo(left, bottom);
}
c.stroke();
}
}
/**
- drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
This function is used for drawing series represented as bars. In case the series has decimation
function attached, before starting to draw, as an optimization the points will first be decimated.
The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
plotHeight are the corresponding parameters of flot used to determine the drawing surface.
The function getColorOrGradient is used to compute the fill style of bars.
*/
function drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
function plotBars(datapoints, barLeft, barRight, fillStyleCallback, axisx, axisy) {
var points = datapoints.points,
ps = datapoints.pointsize,
fillTowards = series.bars.fillTowards || 0,
defaultBottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min;
for (var i = 0; i < points.length; i += ps) {
if (points[i] == null) {
continue;
}
// Use third point as bottom if pointsize is 3
var bottom = ps === 3 ? points[i + 2] : defaultBottom;
drawBar(points[i], points[i + 1], bottom, barLeft, barRight, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
}
}
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
var datapoints = {
format: series.datapoints.format,
points: series.datapoints.points,
pointsize: series.datapoints.pointsize
};
if (series.decimate) {
datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth);
}
ctx.lineWidth = series.bars.lineWidth;
ctx.strokeStyle = series.color;
var barLeft;
var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
switch (series.bars.align) {
case "left":
barLeft = 0;
break;
case "right":
barLeft = -barWidth;
break;
default:
barLeft = -barWidth / 2;
}
var fillStyleCallback = series.bars.fill ? function(bottom, top) {
return getFillStyle(series.bars, series.color, bottom, top, getColorOrGradient);
} : null;
plotBars(datapoints, barLeft, barLeft + barWidth, fillStyleCallback, series.xaxis, series.yaxis);
ctx.restore();
}
function getFillStyle(filloptions, seriesColor, bottom, top, getColorOrGradient) {
var fill = filloptions.fill;
if (!fill) {
return null;
}
if (filloptions.fillColor) {
return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
}
var c = $.color.parse(seriesColor);
c.a = typeof fill === "number" ? fill : 0.4;
c.normalize();
return c.toString();
}
this.drawSeriesLines = drawSeriesLines;
this.drawSeriesPoints = drawSeriesPoints;
this.drawSeriesBars = drawSeriesBars;
this.drawBar = drawBar;
};
$.plot.drawSeries = new DrawSeries();
})(jQuery);
plugins/flot-chart/jquery.flot.js
+2819
View File
File diff suppressed because it is too large Load Diff
plugins/flot-chart/jquery.flot.legend.js
+437
View File
@@ -0,0 +1,437 @@
/* Flot plugin for drawing legends.
*/
(function($) {
var defaultOptions = {
legend: {
show: false,
noColumns: 1,
labelFormatter: null, // fn: string -> string
container: null, // container (as jQuery object) to put legend in, null means default on top of graph
position: 'ne', // position of default legend container within plot
margin: 5, // distance from grid edge to default legend container within plot
sorted: null // default to no legend sorting
}
};
function insertLegend(plot, options, placeholder, legendEntries) {
// clear before redraw
if (options.legend.container != null) {
$(options.legend.container).html('');
} else {
placeholder.find('.legend').remove();
}
if (!options.legend.show) {
return;
}
// Save the legend entries in legend options
var entries = options.legend.legendEntries = legendEntries,
plotOffset = options.legend.plotOffset = plot.getPlotOffset(),
html = [],
entry, labelHtml, iconHtml,
j = 0,
i,
pos = "",
p = options.legend.position,
m = options.legend.margin,
shape = {
name: '',
label: '',
xPos: '',
yPos: ''
};
html[j++] = '<svg class="legendLayer" style="width:inherit;height:inherit;">';
html[j++] = '<rect class="background" width="100%" height="100%"/>';
html[j++] = svgShapeDefs;
var left = 0;
var columnWidths = [];
var style = window.getComputedStyle(document.querySelector('body'));
for (i = 0; i < entries.length; ++i) {
var columnIndex = i % options.legend.noColumns;
entry = entries[i];
shape.label = entry.label;
var info = plot.getSurface().getTextInfo('', shape.label, {
style: style.fontStyle,
variant: style.fontVariant,
weight: style.fontWeight,
size: parseInt(style.fontSize),
lineHeight: parseInt(style.lineHeight),
family: style.fontFamily
});
var labelWidth = info.width;
// 36px = 1.5em + 6px margin
var iconWidth = 48;
if (columnWidths[columnIndex]) {
if (labelWidth > columnWidths[columnIndex]) {
columnWidths[columnIndex] = labelWidth + iconWidth;
}
} else {
columnWidths[columnIndex] = labelWidth + iconWidth;
}
}
// Generate html for icons and labels from a list of entries
for (i = 0; i < entries.length; ++i) {
var columnIndex = i % options.legend.noColumns;
entry = entries[i];
iconHtml = '';
shape.label = entry.label;
shape.xPos = (left + 3) + 'px';
left += columnWidths[columnIndex];
if ((i + 1) % options.legend.noColumns === 0) {
left = 0;
}
shape.yPos = Math.floor(i / options.legend.noColumns) * 1.5 + 'em';
// area
if (entry.options.lines.show && entry.options.lines.fill) {
shape.name = 'area';
shape.fillColor = entry.color;
iconHtml += getEntryIconHtml(shape);
}
// bars
if (entry.options.bars.show) {
shape.name = 'bar';
shape.fillColor = entry.color;
iconHtml += getEntryIconHtml(shape);
}
// lines
if (entry.options.lines.show && !entry.options.lines.fill) {
shape.name = 'line';
shape.strokeColor = entry.color;
shape.strokeWidth = entry.options.lines.lineWidth;
iconHtml += getEntryIconHtml(shape);
}
// points
if (entry.options.points.show) {
shape.name = entry.options.points.symbol;
shape.strokeColor = entry.color;
shape.fillColor = entry.options.points.fillColor;
shape.strokeWidth = entry.options.points.lineWidth;
iconHtml += getEntryIconHtml(shape);
}
labelHtml = '<text x="' + shape.xPos + '" y="' + shape.yPos + '" text-anchor="start"><tspan dx="2em" dy="1.2em">' + shape.label + '</tspan></text>'
html[j++] = '<g>' + iconHtml + labelHtml + '</g>';
}
html[j++] = '</svg>';
if (m[0] == null) {
m = [m, m];
}
if (p.charAt(0) === 'n') {
pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
} else if (p.charAt(0) === 's') {
pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
}
if (p.charAt(1) === 'e') {
pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
} else if (p.charAt(1) === 'w') {
pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
}
var width = 6;
for (i = 0; i < columnWidths.length; ++i) {
width += columnWidths[i];
}
var legendEl,
height = Math.ceil(entries.length / options.legend.noColumns) * 1.6;
if (!options.legend.container) {
legendEl = $('<div class="legend" style="position:absolute;' + pos + '">' + html.join('') + '</div>').appendTo(placeholder);
legendEl.css('width', width + 'px');
legendEl.css('height', height + 'em');
legendEl.css('pointerEvents', 'none');
} else {
legendEl = $(html.join('')).appendTo(options.legend.container)[0];
options.legend.container.style.width = width + 'px';
options.legend.container.style.height = height + 'em';
}
}
// Generate html for a shape
function getEntryIconHtml(shape) {
var html = '',
name = shape.name,
x = shape.xPos,
y = shape.yPos,
fill = shape.fillColor,
stroke = shape.strokeColor,
width = shape.strokeWidth;
switch (name) {
case 'circle':
html = '<use xlink:href="#circle" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
'fill="' + fill + '" ' +
'stroke="' + stroke + '" ' +
'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
case 'diamond':
html = '<use xlink:href="#diamond" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
'fill="' + fill + '" ' +
'stroke="' + stroke + '" ' +
'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
case 'cross':
html = '<use xlink:href="#cross" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
// 'fill="' + fill + '" ' +
'stroke="' + stroke + '" ' +
'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
case 'rectangle':
html = '<use xlink:href="#rectangle" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
'fill="' + fill + '" ' +
'stroke="' + stroke + '" ' +
'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
case 'plus':
html = '<use xlink:href="#plus" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
// 'fill="' + fill + '" ' +
'stroke="' + stroke + '" ' +
'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
case 'bar':
html = '<use xlink:href="#bars" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
'fill="' + fill + '" ' +
// 'stroke="' + stroke + '" ' +
// 'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
case 'area':
html = '<use xlink:href="#area" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
'fill="' + fill + '" ' +
// 'stroke="' + stroke + '" ' +
// 'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
case 'line':
html = '<use xlink:href="#line" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
// 'fill="' + fill + '" ' +
'stroke="' + stroke + '" ' +
'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
break;
default:
// default is circle
html = '<use xlink:href="#circle" class="legendIcon" ' +
'x="' + x + '" ' +
'y="' + y + '" ' +
'fill="' + fill + '" ' +
'stroke="' + stroke + '" ' +
'stroke-width="' + width + '" ' +
'width="1.5em" height="1.5em"' +
'/>';
}
return html;
}
// Define svg symbols for shapes
var svgShapeDefs = '' +
'<defs>' +
'<symbol id="line" fill="none" viewBox="-5 -5 25 25">' +
'<polyline points="0,15 5,5 10,10 15,0"/>' +
'</symbol>' +
'<symbol id="area" stroke-width="1" viewBox="-5 -5 25 25">' +
'<polyline points="0,15 5,5 10,10 15,0, 15,15, 0,15"/>' +
'</symbol>' +
'<symbol id="bars" stroke-width="1" viewBox="-5 -5 25 25">' +
'<polyline points="1.5,15.5 1.5,12.5, 4.5,12.5 4.5,15.5 6.5,15.5 6.5,3.5, 9.5,3.5 9.5,15.5 11.5,15.5 11.5,7.5 14.5,7.5 14.5,15.5 1.5,15.5"/>' +
'</symbol>' +
'<symbol id="circle" viewBox="-5 -5 25 25">' +
'<circle cx="0" cy="15" r="2.5"/>' +
'<circle cx="5" cy="5" r="2.5"/>' +
'<circle cx="10" cy="10" r="2.5"/>' +
'<circle cx="15" cy="0" r="2.5"/>' +
'</symbol>' +
'<symbol id="rectangle" viewBox="-5 -5 25 25">' +
'<rect x="-2.1" y="12.9" width="4.2" height="4.2"/>' +
'<rect x="2.9" y="2.9" width="4.2" height="4.2"/>' +
'<rect x="7.9" y="7.9" width="4.2" height="4.2"/>' +
'<rect x="12.9" y="-2.1" width="4.2" height="4.2"/>' +
'</symbol>' +
'<symbol id="diamond" viewBox="-5 -5 25 25">' +
'<path d="M-3,15 L0,12 L3,15, L0,18 Z"/>' +
'<path d="M2,5 L5,2 L8,5, L5,8 Z"/>' +
'<path d="M7,10 L10,7 L13,10, L10,13 Z"/>' +
'<path d="M12,0 L15,-3 L18,0, L15,3 Z"/>' +
'</symbol>' +
'<symbol id="cross" fill="none" viewBox="-5 -5 25 25">' +
'<path d="M-2.1,12.9 L2.1,17.1, M2.1,12.9 L-2.1,17.1 Z"/>' +
'<path d="M2.9,2.9 L7.1,7.1 M7.1,2.9 L2.9,7.1 Z"/>' +
'<path d="M7.9,7.9 L12.1,12.1 M12.1,7.9 L7.9,12.1 Z"/>' +
'<path d="M12.9,-2.1 L17.1,2.1 M17.1,-2.1 L12.9,2.1 Z"/>' +
'</symbol>' +
'<symbol id="plus" fill="none" viewBox="-5 -5 25 25">' +
'<path d="M0,12 L0,18, M-3,15 L3,15 Z"/>' +
'<path d="M5,2 L5,8 M2,5 L8,5 Z"/>' +
'<path d="M10,7 L10,13 M7,10 L13,10 Z"/>' +
'<path d="M15,-3 L15,3 M12,0 L18,0 Z"/>' +
'</symbol>' +
'</defs>';
// Generate a list of legend entries in their final order
function getLegendEntries(series, labelFormatter, sorted) {
var lf = labelFormatter,
legendEntries = series.reduce(function(validEntries, s, i) {
var labelEval = (lf ? lf(s.label, s) : s.label)
if (s.hasOwnProperty("label") ? labelEval : true) {
var entry = {
label: labelEval || 'Plot ' + (i + 1),
color: s.color,
options: {
lines: s.lines,
points: s.points,
bars: s.bars
}
}
validEntries.push(entry)
}
return validEntries;
}, []);
// Sort the legend using either the default or a custom comparator
if (sorted) {
if ($.isFunction(sorted)) {
legendEntries.sort(sorted);
} else if (sorted === 'reverse') {
legendEntries.reverse();
} else {
var ascending = (sorted !== 'descending');
legendEntries.sort(function(a, b) {
return a.label === b.label
? 0
: ((a.label < b.label) !== ascending ? 1 : -1 // Logical XOR
);
});
}
}
return legendEntries;
}
// return false if opts1 same as opts2
function checkOptions(opts1, opts2) {
for (var prop in opts1) {
if (opts1.hasOwnProperty(prop)) {
if (opts1[prop] !== opts2[prop]) {
return true;
}
}
}
return false;
}
// Compare two lists of legend entries
function shouldRedraw(oldEntries, newEntries) {
if (!oldEntries || !newEntries) {
return true;
}
if (oldEntries.length !== newEntries.length) {
return true;
}
var i, newEntry, oldEntry, newOpts, oldOpts;
for (i = 0; i < newEntries.length; i++) {
newEntry = newEntries[i];
oldEntry = oldEntries[i];
if (newEntry.label !== oldEntry.label) {
return true;
}
if (newEntry.color !== oldEntry.color) {
return true;
}
// check for changes in lines options
newOpts = newEntry.options.lines;
oldOpts = oldEntry.options.lines;
if (checkOptions(newOpts, oldOpts)) {
return true;
}
// check for changes in points options
newOpts = newEntry.options.points;
oldOpts = oldEntry.options.points;
if (checkOptions(newOpts, oldOpts)) {
return true;
}
// check for changes in bars options
newOpts = newEntry.options.bars;
oldOpts = oldEntry.options.bars;
if (checkOptions(newOpts, oldOpts)) {
return true;
}
}
return false;
}
function init(plot) {
plot.hooks.setupGrid.push(function (plot) {
var options = plot.getOptions();
var series = plot.getData(),
labelFormatter = options.legend.labelFormatter,
oldEntries = options.legend.legendEntries,
oldPlotOffset = options.legend.plotOffset,
newEntries = getLegendEntries(series, labelFormatter, options.legend.sorted),
newPlotOffset = plot.getPlotOffset();
if (shouldRedraw(oldEntries, newEntries) ||
checkOptions(oldPlotOffset, newPlotOffset)) {
insertLegend(plot, options, plot.getPlaceholder(), newEntries);
}
});
}
$.plot.plugins.push({
init: init,
options: defaultOptions,
name: 'legend',
version: '1.0'
});
})(jQuery);
plugins/flot-chart/jquery.flot.pie.js
+794
View File
@@ -0,0 +1,794 @@
/* Flot plugin for rendering pie charts.
Copyright (c) 2007-2014 IOLA and Ole Laursen.
Licensed under the MIT license.
The plugin assumes that each series has a single data value, and that each
value is a positive integer or zero. Negative numbers don't make sense for a
pie chart, and have unpredictable results. The values do NOT need to be
passed in as percentages; the plugin will calculate the total and per-slice
percentages internally.
* Created by Brian Medendorp
* Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars
The plugin supports these options:
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($) {
// Maximum redraw attempts when fitting labels within the plot
var REDRAW_ATTEMPTS = 10;
// Factor by which to shrink the pie when fitting labels within the plot
var REDRAW_SHRINK = 0.95;
function init(plot) {
var canvas = null,
target = null,
options = null,
maxRadius = null,
centerLeft = null,
centerTop = null,
processed = false,
ctx = null;
// interactive variables
var highlights = [];
// add hook to determine if pie plugin in enabled, and then perform necessary operations
plot.hooks.processOptions.push(function(plot, options) {
if (options.series.pie.show) {
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;
} else if (options.series.pie.tilt < 0) {
options.series.pie.tilt = 0;
}
}
});
plot.hooks.bindEvents.push(function(plot, eventHolder) {
var options = plot.getOptions();
if (options.series.pie.show) {
if (options.grid.hoverable) {
eventHolder.unbind("mousemove").mousemove(onMouseMove);
eventHolder.bind("mouseleave", onMouseMove);
}
if (options.grid.clickable) {
eventHolder.unbind("click").click(onClick);
}
}
});
plot.hooks.shutdown.push(function (plot, eventHolder) {
eventHolder.unbind("mousemove", onMouseMove);
eventHolder.unbind("mouseleave", onMouseMove);
eventHolder.unbind("click", onClick);
highlights = [];
});
plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) {
var options = plot.getOptions();
if (options.series.pie.show) {
processDatapoints(plot, series, data, datapoints);
}
});
plot.hooks.drawOverlay.push(function(plot, octx) {
var options = plot.getOptions();
if (options.series.pie.show) {
drawOverlay(plot, octx);
}
});
plot.hooks.draw.push(function(plot, newCtx) {
var options = plot.getOptions();
if (options.series.pie.show) {
draw(plot, newCtx);
}
});
function processDatapoints(plot, series, datapoints) {
if (!processed) {
processed = true;
canvas = plot.getCanvas();
target = $(canvas).parent();
options = plot.getOptions();
plot.setData(combine(plot.getData()));
}
}
function combine(data) {
var total = 0,
combined = 0,
numCombined = 0,
color = options.series.pie.combine.color,
newdata = [],
i,
value;
// Fix up the raw data from Flot, ensuring the data is numeric
for (i = 0; i < data.length; ++i) {
value = data[i].data;
// If the data is an array, we'll assume that it's a standard
// Flot x-y pair, and are concerned only with the second value.
// Note how we use the original array, rather than creating a
// new one; this is more efficient and preserves any extra data
// that the user may have stored in higher indexes.
if ($.isArray(value) && value.length === 1) {
value = value[0];
}
if ($.isArray(value)) {
// Equivalent to $.isNumeric() but compatible with jQuery < 1.7
if (!isNaN(parseFloat(value[1])) && isFinite(value[1])) {
value[1] = +value[1];
} else {
value[1] = 0;
}
} else if (!isNaN(parseFloat(value)) && isFinite(value)) {
value = [1, +value];
} else {
value = [1, 0];
}
data[i].data = [value];
}
// Sum up all the slices, so we can calculate percentages for each
for (i = 0; i < data.length; ++i) {
total += data[i].data[0][1];
}
// Count the number of slices with percentages below the combine
// threshold; if it turns out to be just one, we won't combine.
for (i = 0; i < data.length; ++i) {
value = data[i].data[0][1];
if (value / total <= options.series.pie.combine.threshold) {
combined += value;
numCombined++;
if (!color) {
color = data[i].color;
}
}
}
for (i = 0; i < data.length; ++i) {
value = data[i].data[0][1];
if (numCombined < 2 || value / total > options.series.pie.combine.threshold) {
newdata.push(
$.extend(data[i], { /* extend to allow keeping all other original data values
and using them e.g. in labelFormatter. */
data: [[1, value]],
color: data[i].color,
label: data[i].label,
angle: value * Math.PI * 2 / total,
percent: value / (total / 100)
})
);
}
}
if (numCombined > 1) {
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
}
var canvasWidth = plot.getPlaceholder().width(),
canvasHeight = plot.getPlaceholder().height(),
legendWidth = target.children().filter(".legend").children().width() || 0;
ctx = newCtx;
// WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE!
// When combining smaller slices into an 'other' slice, we need to
// add a new series. Since Flot gives plugins no way to modify the
// list of series, the pie plugin uses a hack where the first call
// to processDatapoints results in a call to setData with the new
// list of series, then subsequent processDatapoints do nothing.
// The plugin-global 'processed' flag is used to control this hack;
// it starts out false, and is set to true after the first call to
// processDatapoints.
// Unfortunately this turns future setData calls into no-ops; they
// call processDatapoints, the flag is true, and nothing happens.
// To fix this we'll set the flag back to false here in draw, when
// all series have been processed, so the next sequence of calls to
// processDatapoints once again starts out with a slice-combine.
// This is really a hack; in 0.9 we need to give plugins a proper
// way to modify series before any processing begins.
processed = false;
// calculate maximum radius and center point
maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2;
centerTop = canvasHeight / 2 + options.series.pie.offset.top;
centerLeft = canvasWidth / 2;
if (options.series.pie.offset.left === "auto") {
if (options.legend.position.match("w")) {
centerLeft += legendWidth / 2;
} else {
centerLeft -= legendWidth / 2;
}
if (centerLeft < maxRadius) {
centerLeft = maxRadius;
} else if (centerLeft > canvasWidth - maxRadius) {
centerLeft = canvasWidth - maxRadius;
}
} else {
centerLeft += options.series.pie.offset.left;
}
var slices = plot.getData(),
attempts = 0;
// Keep shrinking the pie's radius until drawPie returns true,
// indicating that all the labels fit, or we try too many times.
do {
if (attempts > 0) {
maxRadius *= REDRAW_SHRINK;
}
attempts += 1;
clear();
if (options.series.pie.tilt <= 0.8) {
drawShadow();
}
} while (!drawPie() && attempts < REDRAW_ATTEMPTS)
if (attempts >= REDRAW_ATTEMPTS) {
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, canvasWidth, canvasHeight);
target.children().filter(".pieLabel, .pieLabelBackground").remove();
}
function drawShadow() {
var shadowLeft = options.series.pie.shadow.left;
var shadowTop = options.series.pie.shadow.top;
var edge = 10;
var alpha = options.series.pie.shadow.alpha;
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 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() {
var startAngle = Math.PI * options.series.pie.startAngle;
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
var i;
// 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 (i = 0; i < slices.length; ++i) {
slices[i].startAngle = currentAngle;
drawSlice(slices[i].angle, slices[i].color, true);
}
ctx.restore();
// draw slice outlines
if (options.series.pie.stroke.width > 0) {
ctx.save();
ctx.lineWidth = options.series.pie.stroke.width;
currentAngle = startAngle;
for (i = 0; i < slices.length; ++i) {
drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
}
ctx.restore();
}
// draw donut hole
drawDonutHole(ctx);
ctx.restore();
// Draw the labels, returning true if they fit within the plot
if (options.series.pie.label.show) {
return drawLabels();
} else return true;
function drawSlice(angle, color, fill) {
if (angle <= 0 || isNaN(angle)) {
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
}
//ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera
ctx.arc(0, 0, radius, currentAngle, currentAngle + angle / 2, false);
ctx.arc(0, 0, radius, currentAngle + angle / 2, 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;
var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.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) {
if (!drawLabel(slices[i], currentAngle, i)) {
return false;
}
}
currentAngle += slices[i].angle;
}
return true;
function drawLabel(slice, startAngle, index) {
if (slice.data[0][1] === 0) {
return true;
}
// 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 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) {
return false;
}
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>")
.css("opacity", options.series.pie.label.background.opacity)
.insertBefore(label);
}
return true;
} // 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) {
if (options.series.pie.innerRadius > 0) {
// subtract the center
layer.save();
var 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,
x, y;
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 / 2, false);
ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false);
ctx.closePath();
x = mouseX - centerLeft;
y = mouseY - centerTop;
if (ctx.isPointInPath) {
if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) {
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.
var 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();
var canvasX = parseInt(e.pageX - offset.left);
var canvasY = parseInt(e.pageY - offset.top);
var 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) {
var options = plot.getOptions();
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 (var i = 0; i < highlights.length; ++i) {
drawHighlight(highlights[i].series);
}
drawDonutHole(octx);
octx.restore();
function drawHighlight(series) {
if (series.angle <= 0 || isNaN(series.angle)) {
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 / 2, false);
octx.arc(0, 0, radius, series.startAngle + series.angle / 2, 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,
shadow: {
left: 5, // shadow left offset
top: 15, // shadow top offset
alpha: 0.02 // shadow alpha
},
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.1"
});
})(jQuery);
plugins/flot-chart/jquery.flot.saturated.js
+43
View File
@@ -0,0 +1,43 @@
(function ($) {
'use strict';
var saturated = {
saturate: function (a) {
if (a === Infinity) {
return Number.MAX_VALUE;
}
if (a === -Infinity) {
return -Number.MAX_VALUE;
}
return a;
},
delta: function(min, max, noTicks) {
return ((max - min) / noTicks) === Infinity ? (max / noTicks - min / noTicks) : (max - min) / noTicks
},
multiply: function (a, b) {
return saturated.saturate(a * b);
},
// returns c * bInt * a. Beahves properly in the case where c is negative
// and bInt * a is bigger that Number.MAX_VALUE (Infinity)
multiplyAdd: function (a, bInt, c) {
if (isFinite(a * bInt)) {
return saturated.saturate(a * bInt + c);
} else {
var result = c;
for (var i = 0; i < bInt; i++) {
result += a;
}
return saturated.saturate(result);
}
},
// round to nearby lower multiple of base
floorInBase: function(n, base) {
return base * Math.floor(n / base);
}
};
$.plot.saturated = saturated;
})(jQuery);
plugins/flot-chart/jquery.flot.stack.js
+220
View File
@@ -0,0 +1,220 @@
/* Flot plugin for stacking data sets rather than overlaying them.
Copyright (c) 2007-2014 IOLA and Ole Laursen.
Licensed under the MIT license.
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 the stack option like this:
series: {
stack: null/false, true, or a key (number/string)
}
You can also specify it for a single series, like this:
$.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 addBottomPoints (s, datapoints) {
var formattedPoints = [];
for (var i = 0; i < datapoints.points.length; i += 2) {
formattedPoints.push(datapoints.points[i]);
formattedPoints.push(datapoints.points[i + 1]);
formattedPoints.push(0);
}
datapoints.format.push({
x: false,
y: true,
number: true,
required: false,
computeRange: s.yaxis.options.autoScale !== 'none',
defaultValue: 0
});
datapoints.points = formattedPoints;
datapoints.pointsize = 3;
}
function stackData(plot, s, datapoints) {
if (s.stack == null || s.stack === false) return;
var needsBottom = s.bars.show || (s.lines.show && s.lines.fill);
var hasBottom = datapoints.pointsize > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y);
// Series data is missing bottom points - need to format
if (needsBottom && !hasBottom) {
addBottomPoints(s, datapoints);
}
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,
withsteps = withlines && s.lines.steps,
fromgap = true,
keyOffset = horizontal ? 1 : 0,
accumulateOffset = horizontal ? 0 : 1,
i = 0, j = 0, l, m;
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 && needsBottom) {
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);
plugins/flot-chart/jquery.flot.tooltip.min.js
Vendored
+12
View File
@@ -0,0 +1,12 @@
/*
* jquery.flot.tooltip
*
* description: easy-to-use tooltips for Flot charts
* version: 0.6.2
* author: Krzysztof Urbas @krzysu [myviews.pl]
* website: https://github.com/krzysu/flot.tooltip
*
* build on 2013-09-30
* released under MIT License, 2012
*/
(function(t){var o={tooltip:!1,tooltipOpts:{content:"%s | X: %x | Y: %y",xDateFormat:null,yDateFormat:null,shifts:{x:10,y:20},defaultTheme:!0,onHover:function(){}}},i=function(t){this.tipPosition={x:0,y:0},this.init(t)};i.prototype.init=function(o){function i(t){var o={};o.x=t.pageX,o.y=t.pageY,s.updateTooltipPosition(o)}function e(t,o,i){var e=s.getDomElement();if(i){var n;n=s.stringFormat(s.tooltipOptions.content,i),e.html(n),s.updateTooltipPosition({x:o.pageX,y:o.pageY}),e.css({left:s.tipPosition.x+s.tooltipOptions.shifts.x,top:s.tipPosition.y+s.tooltipOptions.shifts.y}).show(),"function"==typeof s.tooltipOptions.onHover&&s.tooltipOptions.onHover(i,e)}else e.hide().html("")}var s=this;o.hooks.bindEvents.push(function(o,n){s.plotOptions=o.getOptions(),s.plotOptions.tooltip!==!1&&void 0!==s.plotOptions.tooltip&&(s.tooltipOptions=s.plotOptions.tooltipOpts,s.getDomElement(),t(o.getPlaceholder()).bind("plothover",e),t(n).bind("mousemove",i))}),o.hooks.shutdown.push(function(o,s){t(o.getPlaceholder()).unbind("plothover",e),t(s).unbind("mousemove",i)})},i.prototype.getDomElement=function(){var o;return t("#flotTip").length>0?o=t("#flotTip"):(o=t("<div />").attr("id","flotTip"),o.appendTo("body").hide().css({position:"absolute"}),this.tooltipOptions.defaultTheme&&o.css({background:"#fff","z-index":"100",padding:"0.4em 0.6em","border-radius":"0.5em","font-size":"0.8em",border:"1px solid #111",display:"none","white-space":"nowrap"})),o},i.prototype.updateTooltipPosition=function(o){var i=t("#flotTip").outerWidth()+this.tooltipOptions.shifts.x,e=t("#flotTip").outerHeight()+this.tooltipOptions.shifts.y;o.x-t(window).scrollLeft()>t(window).innerWidth()-i&&(o.x-=i),o.y-t(window).scrollTop()>t(window).innerHeight()-e&&(o.y-=e),this.tipPosition.x=o.x,this.tipPosition.y=o.y},i.prototype.stringFormat=function(t,o){var i=/%p\.{0,1}(\d{0,})/,e=/%s/,s=/%x\.{0,1}(?:\d{0,})/,n=/%y\.{0,1}(?:\d{0,})/;return"function"==typeof t&&(t=t(o.series.label,o.series.data[o.dataIndex][0],o.series.data[o.dataIndex][1],o)),o.series.percent!==void 0&&(t=this.adjustValPrecision(i,t,o.series.percent)),o.series.label!==void 0&&(t=t.replace(e,o.series.label)),this.isTimeMode("xaxis",o)&&this.isXDateFormat(o)&&(t=t.replace(s,this.timestampToDate(o.series.data[o.dataIndex][0],this.tooltipOptions.xDateFormat))),this.isTimeMode("yaxis",o)&&this.isYDateFormat(o)&&(t=t.replace(n,this.timestampToDate(o.series.data[o.dataIndex][1],this.tooltipOptions.yDateFormat))),"number"==typeof o.series.data[o.dataIndex][0]&&(t=this.adjustValPrecision(s,t,o.series.data[o.dataIndex][0])),"number"==typeof o.series.data[o.dataIndex][1]&&(t=this.adjustValPrecision(n,t,o.series.data[o.dataIndex][1])),o.series.xaxis.tickFormatter!==void 0&&(t=t.replace(s,o.series.xaxis.tickFormatter(o.series.data[o.dataIndex][0],o.series.xaxis))),o.series.yaxis.tickFormatter!==void 0&&(t=t.replace(n,o.series.yaxis.tickFormatter(o.series.data[o.dataIndex][1],o.series.yaxis))),t},i.prototype.isTimeMode=function(t,o){return o.series[t].options.mode!==void 0&&"time"===o.series[t].options.mode},i.prototype.isXDateFormat=function(){return this.tooltipOptions.xDateFormat!==void 0&&null!==this.tooltipOptions.xDateFormat},i.prototype.isYDateFormat=function(){return this.tooltipOptions.yDateFormat!==void 0&&null!==this.tooltipOptions.yDateFormat},i.prototype.timestampToDate=function(o,i){var e=new Date(o);return t.plot.formatDate(e,i)},i.prototype.adjustValPrecision=function(t,o,i){var e,s=o.match(t);return null!==s&&""!==RegExp.$1&&(e=RegExp.$1,i=i.toFixed(e),o=o.replace(t,i)),o};var e=function(t){new i(t)};t.plot.plugins.push({init:e,options:o,name:"tooltip",version:"0.6.1"})})(jQuery);
plugins/flot-chart/jquery.flot.uiConstants.js
+10
View File
@@ -0,0 +1,10 @@
(function ($) {
'use strict';
$.plot.uiConstants = {
SNAPPING_CONSTANT: 20,
PANHINT_LENGTH_CONSTANT: 10,
MINOR_TICKS_COUNT_CONSTANT: 4,
TICK_LENGTH_CONSTANT: 10,
ZOOM_DISTANCE_MARGIN: 25
};
})(jQuery);
plugins/flot-chart/jquery.js
Vendored
+9473
View File
File diff suppressed because it is too large Load Diff