GitHub
13 changed files with 16 additions and 7042 deletions
@ -1,176 +0,0 @@
|
||||
/* Flot plugin for showing crosshairs when the mouse hovers over the plot. |
||||
|
||||
Copyright (c) 2007-2014 IOLA and Ole Laursen. |
||||
Licensed under the MIT license. |
||||
|
||||
The plugin supports these options: |
||||
|
||||
crosshair: { |
||||
mode: null or "x" or "y" or "xy" |
||||
color: color |
||||
lineWidth: number |
||||
} |
||||
|
||||
Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical |
||||
crosshair that lets you trace the values on the x axis, "y" enables a |
||||
horizontal crosshair and "xy" enables them both. "color" is the color of the |
||||
crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of |
||||
the drawn lines (default is 1). |
||||
|
||||
The plugin also adds four public methods: |
||||
|
||||
- setCrosshair( pos ) |
||||
|
||||
Set the position of the crosshair. Note that this is cleared if the user |
||||
moves the mouse. "pos" is in coordinates of the plot and should be on the |
||||
form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple |
||||
axes), which is coincidentally the same format as what you get from a |
||||
"plothover" event. If "pos" is null, the crosshair is cleared. |
||||
|
||||
- clearCrosshair() |
||||
|
||||
Clear the crosshair. |
||||
|
||||
- lockCrosshair(pos) |
||||
|
||||
Cause the crosshair to lock to the current location, no longer updating if |
||||
the user moves the mouse. Optionally supply a position (passed on to |
||||
setCrosshair()) to move it to. |
||||
|
||||
Example usage: |
||||
|
||||
var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; |
||||
$("#graph").bind( "plothover", function ( evt, position, item ) { |
||||
if ( item ) { |
||||
// Lock the crosshair to the data point being hovered
|
||||
myFlot.lockCrosshair({ |
||||
x: item.datapoint[ 0 ], |
||||
y: item.datapoint[ 1 ] |
||||
}); |
||||
} else { |
||||
// Return normal crosshair operation
|
||||
myFlot.unlockCrosshair(); |
||||
} |
||||
}); |
||||
|
||||
- unlockCrosshair() |
||||
|
||||
Free the crosshair to move again after locking it. |
||||
*/ |
||||
|
||||
(function ($) { |
||||
var options = { |
||||
crosshair: { |
||||
mode: null, // one of null, "x", "y" or "xy",
|
||||
color: "rgba(170, 0, 0, 0.80)", |
||||
lineWidth: 1 |
||||
} |
||||
}; |
||||
|
||||
function init(plot) { |
||||
// position of crosshair in pixels
|
||||
var crosshair = { x: -1, y: -1, locked: false }; |
||||
|
||||
plot.setCrosshair = function setCrosshair(pos) { |
||||
if (!pos) |
||||
crosshair.x = -1; |
||||
else { |
||||
var o = plot.p2c(pos); |
||||
crosshair.x = Math.max(0, Math.min(o.left, plot.width())); |
||||
crosshair.y = Math.max(0, Math.min(o.top, plot.height())); |
||||
} |
||||
|
||||
plot.triggerRedrawOverlay(); |
||||
}; |
||||
|
||||
plot.clearCrosshair = plot.setCrosshair; // passes null for pos
|
||||
|
||||
plot.lockCrosshair = function lockCrosshair(pos) { |
||||
if (pos) |
||||
plot.setCrosshair(pos); |
||||
crosshair.locked = true; |
||||
}; |
||||
|
||||
plot.unlockCrosshair = function unlockCrosshair() { |
||||
crosshair.locked = false; |
||||
}; |
||||
|
||||
function onMouseOut(e) { |
||||
if (crosshair.locked) |
||||
return; |
||||
|
||||
if (crosshair.x != -1) { |
||||
crosshair.x = -1; |
||||
plot.triggerRedrawOverlay(); |
||||
} |
||||
} |
||||
|
||||
function onMouseMove(e) { |
||||
if (crosshair.locked) |
||||
return; |
||||
|
||||
if (plot.getSelection && plot.getSelection()) { |
||||
crosshair.x = -1; // hide the crosshair while selecting
|
||||
return; |
||||
} |
||||
|
||||
var offset = plot.offset(); |
||||
crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); |
||||
crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); |
||||
plot.triggerRedrawOverlay(); |
||||
} |
||||
|
||||
plot.hooks.bindEvents.push(function (plot, eventHolder) { |
||||
if (!plot.getOptions().crosshair.mode) |
||||
return; |
||||
|
||||
eventHolder.mouseout(onMouseOut); |
||||
eventHolder.mousemove(onMouseMove); |
||||
}); |
||||
|
||||
plot.hooks.drawOverlay.push(function (plot, ctx) { |
||||
var c = plot.getOptions().crosshair; |
||||
if (!c.mode) |
||||
return; |
||||
|
||||
var plotOffset = plot.getPlotOffset(); |
||||
|
||||
ctx.save(); |
||||
ctx.translate(plotOffset.left, plotOffset.top); |
||||
|
||||
if (crosshair.x != -1) { |
||||
var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0; |
||||
|
||||
ctx.strokeStyle = c.color; |
||||
ctx.lineWidth = c.lineWidth; |
||||
ctx.lineJoin = "round"; |
||||
|
||||
ctx.beginPath(); |
||||
if (c.mode.indexOf("x") != -1) { |
||||
var drawX = Math.floor(crosshair.x) + adj; |
||||
ctx.moveTo(drawX, 0); |
||||
ctx.lineTo(drawX, plot.height()); |
||||
} |
||||
if (c.mode.indexOf("y") != -1) { |
||||
var drawY = Math.floor(crosshair.y) + adj; |
||||
ctx.moveTo(0, drawY); |
||||
ctx.lineTo(plot.width(), drawY); |
||||
} |
||||
ctx.stroke(); |
||||
} |
||||
ctx.restore(); |
||||
}); |
||||
|
||||
plot.hooks.shutdown.push(function (plot, eventHolder) { |
||||
eventHolder.unbind("mouseout", onMouseOut); |
||||
eventHolder.unbind("mousemove", onMouseMove); |
||||
}); |
||||
} |
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: options, |
||||
name: 'crosshair', |
||||
version: '1.0' |
||||
}); |
||||
})(jQuery); |
||||
@ -1,236 +0,0 @@
|
||||
/* |
||||
* jQuery.flot.dashes |
||||
* |
||||
* options = { |
||||
* series: { |
||||
* dashes: { |
||||
* |
||||
* // show
|
||||
* // default: false
|
||||
* // Whether to show dashes for the series.
|
||||
* show: <boolean>, |
||||
* |
||||
* // lineWidth
|
||||
* // default: 2
|
||||
* // The width of the dashed line in pixels.
|
||||
* lineWidth: <number>, |
||||
* |
||||
* // dashLength
|
||||
* // default: 10
|
||||
* // Controls the length of the individual dashes and the amount of
|
||||
* // space between them.
|
||||
* // If this is a number, the dashes and spaces will have that length.
|
||||
* // If this is an array, it is read as [ dashLength, spaceLength ]
|
||||
* dashLength: <number> or <array[2]> |
||||
* } |
||||
* } |
||||
* } |
||||
*/ |
||||
(function($){ |
||||
|
||||
function init(plot) { |
||||
|
||||
plot.hooks.processDatapoints.push(function(plot, series, datapoints) { |
||||
|
||||
if (!series.dashes.show) return; |
||||
|
||||
plot.hooks.draw.push(function(plot, ctx) { |
||||
|
||||
var plotOffset = plot.getPlotOffset(), |
||||
axisx = series.xaxis, |
||||
axisy = series.yaxis; |
||||
|
||||
function plotDashes(xoffset, yoffset) { |
||||
|
||||
var points = datapoints.points, |
||||
ps = datapoints.pointsize, |
||||
prevx = null, |
||||
prevy = null, |
||||
dashRemainder = 0, |
||||
dashOn = true, |
||||
dashOnLength, |
||||
dashOffLength; |
||||
|
||||
if (series.dashes.dashLength[0]) { |
||||
dashOnLength = series.dashes.dashLength[0]; |
||||
if (series.dashes.dashLength[1]) { |
||||
dashOffLength = series.dashes.dashLength[1]; |
||||
} else { |
||||
dashOffLength = dashOnLength; |
||||
} |
||||
} else { |
||||
dashOffLength = dashOnLength = series.dashes.dashLength; |
||||
} |
||||
|
||||
ctx.beginPath(); |
||||
|
||||
for (var i = ps; i < points.length; i += ps) { |
||||
|
||||
var x1 = points[i - ps], |
||||
y1 = points[i - ps + 1], |
||||
x2 = points[i], |
||||
y2 = points[i + 1]; |
||||
|
||||
if (x1 == null || x2 == null) continue; |
||||
|
||||
// clip with ymin
|
||||
if (y1 <= y2 && y1 < axisy.min) { |
||||
if (y2 < axisy.min) continue; // line segment is outside
|
||||
// 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); |
||||
} |
||||
|
||||
var ax1 = axisx.p2c(x1) + xoffset, |
||||
ay1 = axisy.p2c(y1) + yoffset, |
||||
ax2 = axisx.p2c(x2) + xoffset, |
||||
ay2 = axisy.p2c(y2) + yoffset, |
||||
dashOffset; |
||||
|
||||
function lineSegmentOffset(segmentLength) { |
||||
|
||||
var c = Math.sqrt(Math.pow(ax2 - ax1, 2) + Math.pow(ay2 - ay1, 2)); |
||||
|
||||
if (c <= segmentLength) { |
||||
return { |
||||
deltaX: ax2 - ax1, |
||||
deltaY: ay2 - ay1, |
||||
distance: c, |
||||
remainder: segmentLength - c |
||||
} |
||||
} else { |
||||
var xsign = ax2 > ax1 ? 1 : -1, |
||||
ysign = ay2 > ay1 ? 1 : -1; |
||||
return { |
||||
deltaX: xsign * Math.sqrt(Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))), |
||||
deltaY: ysign * Math.sqrt(Math.pow(segmentLength, 2) - Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))), |
||||
distance: segmentLength, |
||||
remainder: 0 |
||||
}; |
||||
} |
||||
} |
||||
//-end lineSegmentOffset
|
||||
|
||||
do { |
||||
|
||||
dashOffset = lineSegmentOffset( |
||||
dashRemainder > 0 ? dashRemainder : |
||||
dashOn ? dashOnLength : dashOffLength); |
||||
|
||||
if (dashOffset.deltaX != 0 || dashOffset.deltaY != 0) { |
||||
if (dashOn) { |
||||
ctx.lineTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY); |
||||
} else { |
||||
ctx.moveTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY); |
||||
} |
||||
} |
||||
|
||||
dashOn = !dashOn; |
||||
dashRemainder = dashOffset.remainder; |
||||
ax1 += dashOffset.deltaX; |
||||
ay1 += dashOffset.deltaY; |
||||
|
||||
} while (dashOffset.distance > 0); |
||||
|
||||
prevx = x2; |
||||
prevy = y2; |
||||
} |
||||
|
||||
ctx.stroke(); |
||||
} |
||||
//-end plotDashes
|
||||
|
||||
ctx.save(); |
||||
ctx.translate(plotOffset.left, plotOffset.top); |
||||
ctx.lineJoin = 'round'; |
||||
|
||||
var lw = series.dashes.lineWidth, |
||||
sw = series.shadowSize; |
||||
|
||||
// FIXME: consider another form of shadow when filling is turned on
|
||||
if (lw > 0 && sw > 0) { |
||||
// draw shadow as a thick and thin line with transparency
|
||||
ctx.lineWidth = sw; |
||||
ctx.strokeStyle = "rgba(0,0,0,0.1)"; |
||||
// position shadow at angle from the mid of line
|
||||
var angle = Math.PI/18; |
||||
plotDashes(Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2)); |
||||
ctx.lineWidth = sw/2; |
||||
plotDashes(Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4)); |
||||
} |
||||
|
||||
ctx.lineWidth = lw; |
||||
ctx.strokeStyle = series.color; |
||||
|
||||
if (lw > 0) { |
||||
plotDashes(0, 0); |
||||
} |
||||
|
||||
ctx.restore(); |
||||
|
||||
}); |
||||
//-end draw hook
|
||||
|
||||
}); |
||||
//-end processDatapoints hook
|
||||
|
||||
} |
||||
//-end init
|
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: { |
||||
series: { |
||||
dashes: { |
||||
show: false, |
||||
lineWidth: 2, |
||||
dashLength: 10 |
||||
} |
||||
} |
||||
}, |
||||
name: 'dashes', |
||||
version: '0.1' |
||||
}); |
||||
|
||||
})(jQuery) |
||||
@ -1,288 +0,0 @@
|
||||
(function($) { |
||||
"use strict"; |
||||
|
||||
var options = { |
||||
series: { |
||||
fillBelowTo: null |
||||
} |
||||
}; |
||||
|
||||
function init(plot) { |
||||
function findBelowSeries( series, allseries ) { |
||||
|
||||
var i; |
||||
|
||||
for ( i = 0; i < allseries.length; ++i ) { |
||||
if ( allseries[ i ].id === series.fillBelowTo ) { |
||||
return allseries[ i ]; |
||||
} |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
/* top and bottom doesn't actually matter for this, we're just using it to help make this easier to think about */ |
||||
/* this is a vector cross product operation */ |
||||
function segmentIntersection(top_left_x, top_left_y, top_right_x, top_right_y, bottom_left_x, bottom_left_y, bottom_right_x, bottom_right_y) { |
||||
var top_delta_x, top_delta_y, bottom_delta_x, bottom_delta_y, |
||||
s, t; |
||||
|
||||
top_delta_x = top_right_x - top_left_x; |
||||
top_delta_y = top_right_y - top_left_y; |
||||
bottom_delta_x = bottom_right_x - bottom_left_x; |
||||
bottom_delta_y = bottom_right_y - bottom_left_y; |
||||
|
||||
s = ( |
||||
(-top_delta_y * (top_left_x - bottom_left_x)) + (top_delta_x * (top_left_y - bottom_left_y)) |
||||
) / ( |
||||
-bottom_delta_x * top_delta_y + top_delta_x * bottom_delta_y |
||||
); |
||||
|
||||
t = ( |
||||
(bottom_delta_x * (top_left_y - bottom_left_y)) - (bottom_delta_y * (top_left_x - bottom_left_x)) |
||||
) / ( |
||||
-bottom_delta_x * top_delta_y + top_delta_x * bottom_delta_y |
||||
); |
||||
|
||||
// Collision detected
|
||||
if (s >= 0 && s <= 1 && t >= 0 && t <= 1) { |
||||
return [ |
||||
top_left_x + (t * top_delta_x), // X
|
||||
top_left_y + (t * top_delta_y) // Y
|
||||
]; |
||||
} |
||||
|
||||
// No collision
|
||||
return null; |
||||
} |
||||
|
||||
function plotDifferenceArea(plot, ctx, series) { |
||||
if ( series.fillBelowTo === null ) { |
||||
return; |
||||
} |
||||
|
||||
var otherseries, |
||||
|
||||
ps, |
||||
points, |
||||
|
||||
otherps, |
||||
otherpoints, |
||||
|
||||
plotOffset, |
||||
fillStyle; |
||||
|
||||
function openPolygon(x, y) { |
||||
ctx.beginPath(); |
||||
ctx.moveTo( |
||||
series.xaxis.p2c(x) + plotOffset.left, |
||||
series.yaxis.p2c(y) + plotOffset.top |
||||
); |
||||
|
||||
} |
||||
|
||||
function closePolygon() { |
||||
ctx.closePath(); |
||||
ctx.fill(); |
||||
} |
||||
|
||||
function validateInput() { |
||||
if (points.length/ps !== otherpoints.length/otherps) { |
||||
console.error("Refusing to graph inconsistent number of points"); |
||||
return false; |
||||
} |
||||
|
||||
var i; |
||||
for (i = 0; i < (points.length / ps); i++) { |
||||
if ( |
||||
points[i * ps] !== null && |
||||
otherpoints[i * otherps] !== null && |
||||
points[i * ps] !== otherpoints[i * otherps] |
||||
) { |
||||
console.error("Refusing to graph points without matching value"); |
||||
return false; |
||||
} |
||||
} |
||||
|
||||
return true; |
||||
} |
||||
|
||||
function findNextStart(start_i, end_i) { |
||||
console.assert(end_i > start_i, "expects the end index to be greater than the start index"); |
||||
|
||||
var start = ( |
||||
start_i === 0 || |
||||
points[start_i - 1] === null || |
||||
otherpoints[start_i - 1] === null |
||||
), |
||||
equal = false, |
||||
i, |
||||
intersect; |
||||
|
||||
for (i = start_i; i < end_i; i++) { |
||||
// Take note of null points
|
||||
if ( |
||||
points[(i * ps) + 1] === null || |
||||
otherpoints[(i * ps) + 1] === null |
||||
) { |
||||
equal = false; |
||||
start = true; |
||||
} |
||||
|
||||
// Take note of equal points
|
||||
else if (points[(i * ps) + 1] === otherpoints[(i * otherps) + 1]) { |
||||
equal = true; |
||||
start = false; |
||||
} |
||||
|
||||
|
||||
else if (points[(i * ps) + 1] > otherpoints[(i * otherps) + 1]) { |
||||
// If we begin above the desired point
|
||||
if (start) { |
||||
openPolygon(points[i * ps], points[(i * ps) + 1]); |
||||
} |
||||
|
||||
// If an equal point preceeds this, start the polygon at that equal point
|
||||
else if (equal) { |
||||
openPolygon(points[(i - 1) * ps], points[((i - 1) * ps) + 1]); |
||||
} |
||||
|
||||
// Otherwise, find the intersection point, and start it there
|
||||
else { |
||||
intersect = intersectionPoint(i); |
||||
openPolygon(intersect[0], intersect[1]); |
||||
} |
||||
|
||||
topTraversal(i, end_i); |
||||
return; |
||||
} |
||||
|
||||
// If we go below equal, equal at any preceeding point is irrelevant
|
||||
else { |
||||
start = false; |
||||
equal = false; |
||||
} |
||||
} |
||||
} |
||||
|
||||
function intersectionPoint(right_i) { |
||||
console.assert(right_i > 0, "expects the second point in the series line segment"); |
||||
|
||||
var i, intersect; |
||||
|
||||
for (i = 1; i < (otherpoints.length/otherps); i++) { |
||||
intersect = segmentIntersection( |
||||
points[(right_i - 1) * ps], points[((right_i - 1) * ps) + 1], |
||||
points[right_i * ps], points[(right_i * ps) + 1], |
||||
|
||||
otherpoints[(i - 1) * otherps], otherpoints[((i - 1) * otherps) + 1], |
||||
otherpoints[i * otherps], otherpoints[(i * otherps) + 1] |
||||
); |
||||
|
||||
if (intersect !== null) { |
||||
return intersect; |
||||
} |
||||
} |
||||
|
||||
console.error("intersectionPoint() should only be called when an intersection happens"); |
||||
} |
||||
|
||||
function bottomTraversal(start_i, end_i) { |
||||
console.assert(start_i >= end_i, "the start should be the rightmost point, and the end should be the leftmost (excluding the equal or intersecting point)"); |
||||
|
||||
var i; |
||||
|
||||
for (i = start_i; i >= end_i; i--) { |
||||
ctx.lineTo( |
||||
otherseries.xaxis.p2c(otherpoints[i * otherps]) + plotOffset.left, |
||||
otherseries.yaxis.p2c(otherpoints[(i * otherps) + 1]) + plotOffset.top |
||||
); |
||||
} |
||||
|
||||
closePolygon(); |
||||
} |
||||
|
||||
function topTraversal(start_i, end_i) { |
||||
console.assert(start_i <= end_i, "the start should be the rightmost point, and the end should be the leftmost (excluding the equal or intersecting point)"); |
||||
|
||||
var i, |
||||
intersect; |
||||
|
||||
for (i = start_i; i < end_i; i++) { |
||||
if (points[(i * ps) + 1] === null && i > start_i) { |
||||
bottomTraversal(i - 1, start_i); |
||||
findNextStart(i, end_i); |
||||
return; |
||||
} |
||||
|
||||
else if (points[(i * ps) + 1] === otherpoints[(i * otherps) + 1]) { |
||||
bottomTraversal(i, start_i); |
||||
findNextStart(i, end_i); |
||||
return; |
||||
} |
||||
|
||||
else if (points[(i * ps) + 1] < otherpoints[(i * otherps) + 1]) { |
||||
intersect = intersectionPoint(i); |
||||
ctx.lineTo( |
||||
series.xaxis.p2c(intersect[0]) + plotOffset.left, |
||||
series.yaxis.p2c(intersect[1]) + plotOffset.top |
||||
); |
||||
bottomTraversal(i, start_i); |
||||
findNextStart(i, end_i); |
||||
return; |
||||
|
||||
} |
||||
|
||||
else { |
||||
ctx.lineTo( |
||||
series.xaxis.p2c(points[i * ps]) + plotOffset.left, |
||||
series.yaxis.p2c(points[(i * ps) + 1]) + plotOffset.top |
||||
); |
||||
} |
||||
} |
||||
|
||||
bottomTraversal(end_i, start_i); |
||||
} |
||||
|
||||
|
||||
// Begin processing
|
||||
|
||||
otherseries = findBelowSeries( series, plot.getData() ); |
||||
|
||||
if ( !otherseries ) { |
||||
return; |
||||
} |
||||
|
||||
ps = series.datapoints.pointsize; |
||||
points = series.datapoints.points; |
||||
otherps = otherseries.datapoints.pointsize; |
||||
otherpoints = otherseries.datapoints.points; |
||||
plotOffset = plot.getPlotOffset(); |
||||
|
||||
if (!validateInput()) { |
||||
return; |
||||
} |
||||
|
||||
|
||||
// Flot's getFillStyle() should probably be exposed somewhere
|
||||
fillStyle = $.color.parse(series.color); |
||||
fillStyle.a = 0.4; |
||||
fillStyle.normalize(); |
||||
ctx.fillStyle = fillStyle.toString(); |
||||
|
||||
|
||||
// Begin recursive bi-directional traversal
|
||||
findNextStart(0, points.length/ps); |
||||
} |
||||
|
||||
plot.hooks.drawSeries.push(plotDifferenceArea); |
||||
} |
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: options, |
||||
name: "fillbelow", |
||||
version: "0.1.0" |
||||
}); |
||||
|
||||
})(jQuery); |
||||
@ -1,225 +0,0 @@
|
||||
/* Flot plugin for computing bottoms for filled line and bar charts. |
||||
|
||||
Copyright (c) 2007-2013 IOLA and Ole Laursen. |
||||
Licensed under the MIT license. |
||||
|
||||
The case: you've got two series that you want to fill the area between. In Flot |
||||
terms, you need to use one as the fill bottom of the other. You can specify the |
||||
bottom of each data point as the third coordinate manually, or you can use this |
||||
plugin to compute it for you. |
||||
|
||||
In order to name the other series, you need to give it an id, like this: |
||||
|
||||
var dataset = [ |
||||
{ data: [ ... ], id: "foo" } , // use default bottom
|
||||
{ data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
|
||||
]; |
||||
|
||||
$.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }}); |
||||
|
||||
As a convenience, if the id given is a number that doesn't appear as an id in |
||||
the series, it is interpreted as the index in the array instead (so fillBetween: |
||||
0 can also mean the first series). |
||||
|
||||
Internally, the plugin modifies the datapoints in each series. For line series, |
||||
extra data points might be inserted through interpolation. Note that at points |
||||
where the bottom line is not defined (due to a null point or start/end of line), |
||||
the current line will show a gap too. The algorithm comes from the |
||||
jquery.flot.stack.js plugin, possibly some code could be shared. |
||||
|
||||
*/ |
||||
|
||||
(function ( $ ) { |
||||
|
||||
var options = { |
||||
series: { |
||||
fillBetween: null // or number
|
||||
} |
||||
}; |
||||
|
||||
function init( plot ) { |
||||
|
||||
function findBottomSeries( s, allseries ) { |
||||
|
||||
var i; |
||||
|
||||
for ( i = 0; i < allseries.length; ++i ) { |
||||
if ( allseries[ i ].id === s.fillBetween ) { |
||||
return allseries[ i ]; |
||||
} |
||||
} |
||||
|
||||
if ( typeof s.fillBetween === "number" ) { |
||||
if ( s.fillBetween < 0 || s.fillBetween >= allseries.length ) { |
||||
return null; |
||||
} |
||||
return allseries[ s.fillBetween ]; |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function computeFillBottoms( plot, s, datapoints ) { |
||||
if ( s.fillBetween == null ) { |
||||
return; |
||||
} |
||||
|
||||
var other = findBottomSeries( s, plot.getData() ); |
||||
|
||||
if ( !other ) { |
||||
return; |
||||
} |
||||
|
||||
var ps = datapoints.pointsize, |
||||
points = datapoints.points, |
||||
otherps = other.datapoints.pointsize, |
||||
otherpoints = other.datapoints.points, |
||||
newpoints = [], |
||||
px, py, intery, qx, qy, bottom, |
||||
withlines = s.lines.show, |
||||
withbottom = ps > 2 && datapoints.format[2].y, |
||||
withsteps = withlines && s.lines.steps, |
||||
fromgap = true, |
||||
i = 0, |
||||
j = 0, |
||||
l, 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 ]; |
||||
py = points[ i + 1 ]; |
||||
qx = otherpoints[ j ]; |
||||
qy = otherpoints[ j + 1 ]; |
||||
bottom = 0; |
||||
|
||||
if ( px === qx ) { |
||||
|
||||
for ( m = 0; m < ps; ++m ) { |
||||
newpoints.push( points[ i + m ] ); |
||||
} |
||||
|
||||
//newpoints[ l + 1 ] += qy;
|
||||
bottom = qy; |
||||
|
||||
i += ps; |
||||
j += otherps; |
||||
|
||||
} else if ( px > qx ) { |
||||
|
||||
// we got past point below, might need to
|
||||
// insert interpolated extra point
|
||||
|
||||
if ( withlines && i > 0 && points[ i - ps ] != null ) { |
||||
intery = py + ( points[ i - ps + 1 ] - py ) * ( qx - px ) / ( points[ i - ps ] - px ); |
||||
newpoints.push( qx ); |
||||
newpoints.push( intery ); |
||||
for ( m = 2; m < ps; ++m ) { |
||||
newpoints.push( points[ i + m ] ); |
||||
} |
||||
bottom = qy; |
||||
} |
||||
|
||||
j += otherps; |
||||
|
||||
} else { // px < qx
|
||||
|
||||
// if we come from a gap, we just skip this point
|
||||
|
||||
if ( fromgap && withlines ) { |
||||
i += ps; |
||||
continue; |
||||
} |
||||
|
||||
for ( m = 0; m < ps; ++m ) { |
||||
newpoints.push( points[ i + m ] ); |
||||
} |
||||
|
||||
// we might be able to interpolate a point below,
|
||||
// this can give us a better y
|
||||
|
||||
if ( withlines && j > 0 && otherpoints[ j - otherps ] != null ) { |
||||
bottom = qy + ( otherpoints[ j - otherps + 1 ] - qy ) * ( px - qx ) / ( otherpoints[ j - otherps ] - qx ); |
||||
} |
||||
|
||||
//newpoints[l + 1] += bottom;
|
||||
|
||||
i += ps; |
||||
} |
||||
|
||||
fromgap = false; |
||||
|
||||
if ( l !== newpoints.length && withbottom ) { |
||||
newpoints[ l + 2 ] = bottom; |
||||
} |
||||
} |
||||
|
||||
// maintain the line steps invariant
|
||||
|
||||
if ( withsteps && l !== newpoints.length && l > 0 && |
||||
newpoints[ l ] !== null && |
||||
newpoints[ l ] !== newpoints[ l - ps ] && |
||||
newpoints[ l + 1 ] !== newpoints[ l - ps + 1 ] ) { |
||||
for (m = 0; m < ps; ++m) { |
||||
newpoints[ l + ps + m ] = newpoints[ l + m ]; |
||||
} |
||||
newpoints[ l + 1 ] = newpoints[ l - ps + 1 ]; |
||||
} |
||||
} |
||||
|
||||
datapoints.points = newpoints; |
||||
} |
||||
|
||||
plot.hooks.processDatapoints.push( computeFillBottoms ); |
||||
} |
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: options, |
||||
name: "fillbetween", |
||||
version: "1.0" |
||||
}); |
||||
|
||||
})(jQuery); |
||||
@ -1,960 +0,0 @@
|
||||
/*! |
||||
* jquery.flot.gauge v1.1.0 * |
||||
* |
||||
* Flot plugin for rendering gauge charts. |
||||
* |
||||
* Copyright (c) 2015 @toyoty99. |
||||
* Licensed under the MIT license. |
||||
*/ |
||||
|
||||
/** |
||||
* @module flot.gauge |
||||
*/ |
||||
(function($) { |
||||
|
||||
|
||||
/** |
||||
* Gauge class |
||||
* |
||||
* @class Gauge |
||||
*/ |
||||
var Gauge = (function() { |
||||
/** |
||||
* context of canvas |
||||
* |
||||
* @property context |
||||
* @type Object |
||||
*/ |
||||
var context; |
||||
/** |
||||
* placeholder of canvas |
||||
* |
||||
* @property placeholder |
||||
* @type Object |
||||
*/ |
||||
var placeholder; |
||||
/** |
||||
* options of plot |
||||
* |
||||
* @property options |
||||
* @type Object |
||||
*/ |
||||
var options; |
||||
/** |
||||
* options of gauge |
||||
* |
||||
* @property gaugeOptions |
||||
* @type Object |
||||
*/ |
||||
var gaugeOptions; |
||||
/** |
||||
* data series |
||||
* |
||||
* @property series |
||||
* @type Array |
||||
*/ |
||||
var series; |
||||
/** |
||||
* logger |
||||
* |
||||
* @property logger |
||||
* @type Object |
||||
*/ |
||||
var logger; |
||||
|
||||
/** |
||||
* constructor |
||||
* |
||||
* @class Gauge |
||||
* @constructor |
||||
* @param {Object} gaugeOptions gauge options |
||||
*/ |
||||
var Gauge = function(plot, ctx) { |
||||
context = ctx; |
||||
placeholder = plot.getPlaceholder(); |
||||
options = plot.getOptions(); |
||||
gaugeOptions = options.series.gauges; |
||||
series = plot.getData(); |
||||
logger = getLogger(gaugeOptions.debug); |
||||
} |
||||
|
||||
/** |
||||
* calculate layout |
||||
* |
||||
* @method calculateLayout |
||||
* @return the calculated layout properties |
||||
*/ |
||||
Gauge.prototype.calculateLayout = function() { |
||||
|
||||
var canvasWidth = placeholder.width(); |
||||
var canvasHeight = placeholder.height(); |
||||
|
||||
|
||||
|
||||
// calculate cell size
|
||||
var columns = Math.min(series.length, gaugeOptions.layout.columns); |
||||
var rows = Math.ceil(series.length / columns); |
||||
|
||||
|
||||
|
||||
var margin = gaugeOptions.layout.margin; |
||||
var hMargin = gaugeOptions.layout.hMargin; |
||||
var vMargin = gaugeOptions.layout.vMargin; |
||||
var cellWidth = (canvasWidth - (margin * 2) - (hMargin * (columns - 1))) / columns; |
||||
var cellHeight = (canvasHeight - (margin * 2) - (vMargin * (rows - 1))) / rows; |
||||
if (gaugeOptions.layout.square) { |
||||
var cell = Math.min(cellWidth, cellHeight); |
||||
cellWidth = cell; |
||||
cellHeight = cell; |
||||
} |
||||
|
||||
|
||||
|
||||
// calculate 'auto' values
|
||||
calculateAutoValues(gaugeOptions, cellWidth); |
||||
|
||||
// calculate maximum radius
|
||||
var cellMargin = gaugeOptions.cell.margin; |
||||
var labelMargin = 0; |
||||
var labelFontSize = 0; |
||||
if (gaugeOptions.label.show) { |
||||
labelMargin = gaugeOptions.label.margin; |
||||
labelFontSize = gaugeOptions.label.font.size; |
||||
} |
||||
var valueMargin = 0; |
||||
var valueFontSize = 0; |
||||
if (gaugeOptions.value.show) { |
||||
valueMargin = gaugeOptions.value.margin; |
||||
valueFontSize = gaugeOptions.value.font.size; |
||||
} |
||||
var thresholdWidth = 0; |
||||
if (gaugeOptions.threshold.show) { |
||||
thresholdWidth = gaugeOptions.threshold.width; |
||||
} |
||||
var thresholdLabelMargin = 0; |
||||
var thresholdLabelFontSize = 0; |
||||
if (gaugeOptions.threshold.label.show) { |
||||
thresholdLabelMargin = gaugeOptions.threshold.label.margin; |
||||
thresholdLabelFontSize = gaugeOptions.threshold.label.font.size; |
||||
} |
||||
|
||||
var maxRadiusH = (cellWidth / 2) - cellMargin - thresholdWidth - (thresholdLabelMargin * 2) - thresholdLabelFontSize; |
||||
|
||||
var startAngle = gaugeOptions.gauge.startAngle; |
||||
var endAngle = gaugeOptions.gauge.endAngle; |
||||
var dAngle = (endAngle - startAngle) / 100; |
||||
var heightRatioV = -1; |
||||
for (var a = startAngle; a < endAngle; a += dAngle) { |
||||
heightRatioV = Math.max(heightRatioV, Math.sin(toRad(a))); |
||||
} |
||||
heightRatioV = Math.max(heightRatioV, Math.sin(toRad(endAngle))); |
||||
var outerRadiusV = (cellHeight - (cellMargin * 2) - (labelMargin * 2) - labelFontSize) / (1 + heightRatioV); |
||||
if (outerRadiusV * heightRatioV < valueMargin + (valueFontSize / 2)) { |
||||
outerRadiusV = cellHeight - (cellMargin * 2) - (labelMargin * 2) - labelFontSize - valueMargin - (valueFontSize / 2); |
||||
} |
||||
var maxRadiusV = outerRadiusV - (thresholdLabelMargin * 2) - thresholdLabelFontSize - thresholdWidth; |
||||
|
||||
var radius = Math.min(maxRadiusH, maxRadiusV); |
||||
|
||||
|
||||
var width = gaugeOptions.gauge.width; |
||||
if (width >= radius) { |
||||
width = Math.max(3, radius / 3); |
||||
} |
||||
|
||||
|
||||
var outerRadius = (thresholdLabelMargin * 2) + thresholdLabelFontSize + thresholdWidth + radius; |
||||
var gaugeOuterHeight = Math.max(outerRadius * (1 + heightRatioV), outerRadius + valueMargin + (valueFontSize / 2)); |
||||
|
||||
return { |
||||
canvasWidth: canvasWidth, |
||||
canvasHeight: canvasHeight, |
||||
margin: margin, |
||||
hMargin: hMargin, |
||||
vMargin: vMargin, |
||||
columns: columns, |
||||
rows: rows, |
||||
cellWidth: cellWidth, |
||||
cellHeight: cellHeight, |
||||
cellMargin: cellMargin, |
||||
labelMargin: labelMargin, |
||||
labelFontSize: labelFontSize, |
||||
valueMargin: valueMargin, |
||||
valueFontSize: valueFontSize, |
||||
width: width, |
||||
radius: radius, |
||||
thresholdWidth: thresholdWidth, |
||||
thresholdLabelMargin: thresholdLabelMargin, |
||||
thresholdLabelFontSize: thresholdLabelFontSize, |
||||
gaugeOuterHeight: gaugeOuterHeight |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* calculate the values which are set as 'auto' |
||||
* |
||||
* @method calculateAutoValues |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Number} cellWidth the width of cell |
||||
*/ |
||||
function calculateAutoValues(gaugeOptionsi, cellWidth) { |
||||
|
||||
if (gaugeOptionsi.gauge.width === "auto") { |
||||
gaugeOptionsi.gauge.width = Math.max(5, cellWidth / 8); |
||||
} |
||||
if (gaugeOptionsi.label.margin === "auto") { |
||||
gaugeOptionsi.label.margin = Math.max(1, cellWidth / 20); |
||||
} |
||||
if (gaugeOptionsi.label.font.size === "auto") { |
||||
gaugeOptionsi.label.font.size = Math.max(5, cellWidth / 8); |
||||
} |
||||
if (gaugeOptionsi.value.margin === "auto") { |
||||
gaugeOptionsi.value.margin = Math.max(1, cellWidth / 30); |
||||
} |
||||
if (gaugeOptionsi.value.font.size === "auto") { |
||||
gaugeOptionsi.value.font.size = Math.max(5, cellWidth / 9); |
||||
} |
||||
if (gaugeOptionsi.threshold.width === "auto") { |
||||
gaugeOptionsi.threshold.width = Math.max(3, cellWidth / 100); |
||||
} |
||||
if (gaugeOptionsi.threshold.label.margin === "auto") { |
||||
gaugeOptionsi.threshold.label.margin = Math.max(3, cellWidth / 40); |
||||
} |
||||
if (gaugeOptionsi.threshold.label.font.size === "auto") { |
||||
gaugeOptionsi.threshold.label.font.size = Math.max(5, cellWidth / 15); |
||||
} |
||||
|
||||
} |
||||
Gauge.prototype.calculateAutoValues = calculateAutoValues; |
||||
|
||||
/** |
||||
* calculate the layout of the cell inside |
||||
* |
||||
* @method calculateCellLayout |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Number} cellWidth the width of cell |
||||
* @param {Number} i the index of the series |
||||
* @return the calculated cell layout properties |
||||
*/ |
||||
Gauge.prototype.calculateCellLayout = function(gaugeOptionsi, layout, i) { |
||||
|
||||
// calculate top, left and center
|
||||
var c = col(layout.columns, i); |
||||
var r = row(layout.columns, i); |
||||
var x = layout.margin + (layout.cellWidth + layout.hMargin) * c; |
||||
var y = layout.margin + (layout.cellHeight + layout.vMargin) * r; |
||||
var cx = x + (layout.cellWidth / 2); |
||||
var cy = y + layout.cellMargin + (layout.labelMargin * 2) + layout.labelFontSize + layout.thresholdWidth |
||||
+ layout.thresholdLabelFontSize + (layout.thresholdLabelMargin * 2) + layout.radius; |
||||
var blank = layout.cellHeight - (layout.cellMargin * 2) - (layout.labelMargin * 2) - layout.labelFontSize - layout.gaugeOuterHeight; |
||||
var offsetY = 0; |
||||
if (gaugeOptionsi.cell.vAlign === "middle") { |
||||
offsetY = (blank / 2); |
||||
} else if (gaugeOptionsi.cell.vAlign === "bottom") { |
||||
offsetY = blank; |
||||
} |
||||
cy += offsetY; |
||||
|
||||
return { |
||||
col: c, |
||||
row: r, |
||||
x: x, |
||||
y: y, |
||||
offsetY: offsetY, |
||||
cellWidth: layout.cellWidth, |
||||
cellHeight: layout.cellHeight, |
||||
cellMargin: layout.cellMargin, |
||||
cx: cx, |
||||
cy: cy |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* draw the background of chart |
||||
* |
||||
* @method drawBackground |
||||
* @param {Object} layout the layout properties |
||||
*/ |
||||
Gauge.prototype.drawBackground = function(layout) { |
||||
|
||||
if (!gaugeOptions.frame.show) { |
||||
return; |
||||
} |
||||
context.save(); |
||||
context.strokeStyle = options.grid.borderColor; |
||||
context.lineWidth = options.grid.borderWidth; |
||||
context.strokeRect(0, 0, layout.canvasWidth, layout.canvasHeight); |
||||
if (options.grid.backgroundColor) { |
||||
context.fillStyle = options.grid.backgroundColor; |
||||
context.fillRect(0, 0, layout.canvasWidth, layout.canvasHeight); |
||||
} |
||||
context.restore(); |
||||
} |
||||
|
||||
/** |
||||
* draw the background of cell |
||||
* |
||||
* @method drawCellBackground |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} cellLayout the cell layout properties |
||||
*/ |
||||
Gauge.prototype.drawCellBackground = function(gaugeOptionsi, cellLayout) { |
||||
|
||||
context.save(); |
||||
if (gaugeOptionsi.cell.border && gaugeOptionsi.cell.border.show && gaugeOptionsi.cell.border.color && gaugeOptionsi.cell.border.width) { |
||||
context.strokeStyle = gaugeOptionsi.cell.border.color; |
||||
context.lineWidth = gaugeOptionsi.cell.border.width; |
||||
context.strokeRect(cellLayout.x, cellLayout.y, cellLayout.cellWidth, cellLayout.cellHeight); |
||||
} |
||||
if (gaugeOptionsi.cell.background && gaugeOptionsi.cell.background.color) { |
||||
context.fillStyle = gaugeOptionsi.cell.background.color; |
||||
context.fillRect(cellLayout.x, cellLayout.y, cellLayout.cellWidth, cellLayout.cellHeight); |
||||
} |
||||
context.restore(); |
||||
} |
||||
|
||||
/** |
||||
* draw the gauge |
||||
* |
||||
* @method drawGauge |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} layout the layout properties |
||||
* @param {Object} cellLayout the cell layout properties |
||||
* @param {String} label the label of data |
||||
* @param {Number} data the value of the gauge |
||||
*/ |
||||
Gauge.prototype.drawGauge = function(gaugeOptionsi, layout, cellLayout, label, data) { |
||||
|
||||
|
||||
var blur = gaugeOptionsi.gauge.shadow.show ? gaugeOptionsi.gauge.shadow.blur : 0; |
||||
|
||||
|
||||
// draw gauge frame
|
||||
drawArcWithShadow( |
||||
cellLayout.cx, // center x
|
||||
cellLayout.cy, // center y
|
||||
layout.radius, |
||||
layout.width, |
||||
toRad(gaugeOptionsi.gauge.startAngle), |
||||
toRad(gaugeOptionsi.gauge.endAngle), |
||||
gaugeOptionsi.gauge.border.color, // line color
|
||||
gaugeOptionsi.gauge.border.width, // line width
|
||||
gaugeOptionsi.gauge.background.color, // fill color
|
||||
blur); |
||||
|
||||
// draw gauge
|
||||
var c1 = getColor(gaugeOptionsi, data); |
||||
var a2 = calculateAngle(gaugeOptionsi, layout, data); |
||||
drawArcWithShadow( |
||||
cellLayout.cx, // center x
|
||||
cellLayout.cy, // center y
|
||||
layout.radius - 1, |
||||
layout.width - 2, |
||||
toRad(gaugeOptionsi.gauge.startAngle), |
||||
toRad(a2), |
||||
c1, // line color
|
||||
1, // line width
|
||||
c1, // fill color
|
||||
blur); |
||||
} |
||||
|
||||
/** |
||||
* decide the color of the data from the threshold options |
||||
* |
||||
* @method getColor |
||||
* @private |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Number} data the value of the gauge |
||||
*/ |
||||
function getColor(gaugeOptionsi, data) { |
||||
var color; |
||||
for (var i = 0; i < gaugeOptionsi.threshold.values.length; i++) { |
||||
var threshold = gaugeOptionsi.threshold.values[i]; |
||||
color = threshold.color; |
||||
if (data < threshold.value) { |
||||
break; |
||||
} |
||||
} |
||||
return color; |
||||
} |
||||
|
||||
/** |
||||
* calculate the angle of the data |
||||
* |
||||
* @method calculateAngle |
||||
* @private |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} layout the layout properties |
||||
* @param {Number} data the value of the gauge |
||||
*/ |
||||
function calculateAngle(gaugeOptionsi, layout, data) { |
||||
var a = |
||||
gaugeOptionsi.gauge.startAngle |
||||
+ (gaugeOptionsi.gauge.endAngle - gaugeOptionsi.gauge.startAngle) |
||||
* ((data - gaugeOptionsi.gauge.min) / (gaugeOptionsi.gauge.max - gaugeOptionsi.gauge.min)); |
||||
|
||||
if (a < gaugeOptionsi.gauge.startAngle) { |
||||
a = gaugeOptionsi.gauge.startAngle; |
||||
} else if (a > gaugeOptionsi.gauge.endAngle) { |
||||
a = gaugeOptionsi.gauge.endAngle; |
||||
} |
||||
return a; |
||||
} |
||||
|
||||
/** |
||||
* draw the arc of the threshold |
||||
* |
||||
* @method drawThreshold |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} layout the layout properties |
||||
* @param {Object} cellLayout the cell layout properties |
||||
*/ |
||||
Gauge.prototype.drawThreshold = function(gaugeOptionsi, layout, cellLayout) { |
||||
|
||||
var a1 = gaugeOptionsi.gauge.startAngle; |
||||
for (var i = 0; i < gaugeOptionsi.threshold.values.length; i++) { |
||||
var threshold = gaugeOptionsi.threshold.values[i]; |
||||
c1 = threshold.color; |
||||
a2 = calculateAngle(gaugeOptionsi, layout, threshold.value); |
||||
drawArc( |
||||
context, |
||||
cellLayout.cx, // center x
|
||||
cellLayout.cy, // center y
|
||||
layout.radius + layout.thresholdWidth, |
||||
layout.thresholdWidth - 2, |
||||
toRad(a1), |
||||
toRad(a2), |
||||
c1, // line color
|
||||
1, // line width
|
||||
c1); // fill color
|
||||
a1 = a2; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* draw an arc with a shadow |
||||
* |
||||
* @method drawArcWithShadow |
||||
* @private |
||||
* @param {Number} cx the x position of the center |
||||
* @param {Number} cy the y position of the center |
||||
* @param {Number} r the radius of an arc |
||||
* @param {Number} w the width of an arc |
||||
* @param {Number} rd1 the start angle of an arc in radians |
||||
* @param {Number} rd2 the end angle of an arc in radians |
||||
* @param {String} lc the color of a line |
||||
* @param {Number} lw the widht of a line |
||||
* @param {String} fc the fill color of an arc |
||||
* @param {Number} blur the shdow blur |
||||
*/ |
||||
function drawArcWithShadow(cx, cy, r, w, rd1, rd2, lc, lw, fc, blur) { |
||||
if (rd1 === rd2) { |
||||
return; |
||||
} |
||||
context.save(); |
||||
|
||||
drawArc(context, cx, cy, r, w, rd1, rd2, lc, lw, fc); |
||||
|
||||
if (blur) { |
||||
drawArc(context, cx, cy, r, w, rd1, rd2); |
||||
context.clip(); |
||||
context.shadowOffsetX = 0; |
||||
context.shadowOffsetY = 0; |
||||
context.shadowBlur = 10; |
||||
context.shadowColor = "gray"; |
||||
drawArc(context, cx, cy, r + 1, w + 2, rd1, rd2, lc, 1); |
||||
} |
||||
context.restore(); |
||||
} |
||||
|
||||
/** |
||||
* draw the label of the gauge |
||||
* |
||||
* @method drawLable |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} layout the layout properties |
||||
* @param {Object} cellLayout the cell layout properties |
||||
* @param {Number} i the index of the series |
||||
* @param {Object} item the item of the series |
||||
*/ |
||||
Gauge.prototype.drawLable = function(gaugeOptionsi, layout, cellLayout, i, item) { |
||||
|
||||
drawText( |
||||
cellLayout.cx, |
||||
cellLayout.y + cellLayout.cellMargin + layout.labelMargin + cellLayout.offsetY, |
||||
"flotGagueLabel" + i, |
||||
gaugeOptionsi.label.formatter ? gaugeOptionsi.label.formatter(item.label, item.data[0][1]) : text, |
||||
gaugeOptionsi.label); |
||||
} |
||||
|
||||
/** |
||||
* draw the value of the gauge |
||||
* |
||||
* @method drawValue |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} layout the layout properties |
||||
* @param {Object} cellLayout the cell layout properties |
||||
* @param {Number} i the index of the series |
||||
* @param {Object} item the item of the series |
||||
*/ |
||||
Gauge.prototype.drawValue = function(gaugeOptionsi, layout, cellLayout, i, item) { |
||||
|
||||
drawText( |
||||
cellLayout.cx, |
||||
cellLayout.cy - (gaugeOptionsi.value.font.size / 2), |
||||
"flotGagueValue" + i, |
||||
gaugeOptionsi.value.formatter ? gaugeOptionsi.value.formatter(item.label, item.data[0][1]) : text, |
||||
gaugeOptionsi.value); |
||||
} |
||||
|
||||
/** |
||||
* draw the values of the threshold |
||||
* |
||||
* @method drawThresholdValues |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} layout the layout properties |
||||
* @param {Object} cellLayout the cell layout properties |
||||
* @param {Number} i the index of the series |
||||
*/ |
||||
Gauge.prototype.drawThresholdValues = function(gaugeOptionsi, layout, cellLayout, i) { |
||||
|
||||
// min, max
|
||||
drawThresholdValue(gaugeOptionsi, layout, cellLayout, "Min" + i, gaugeOptionsi.gauge.min, gaugeOptionsi.gauge.startAngle); |
||||
drawThresholdValue(gaugeOptionsi, layout, cellLayout, "Max" + i, gaugeOptionsi.gauge.max, gaugeOptionsi.gauge.endAngle); |
||||
// threshold values
|
||||
for (var j = 0; j < gaugeOptionsi.threshold.values.length; j++) { |
||||
var threshold = gaugeOptionsi.threshold.values[j]; |
||||
if (threshold.value > gaugeOptionsi.gauge.min && threshold.value < gaugeOptionsi.gauge.max) { |
||||
var a = calculateAngle(gaugeOptionsi, layout, threshold.value); |
||||
drawThresholdValue(gaugeOptionsi, layout, cellLayout, i + "_" + j, threshold.value, a); |
||||
} |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* draw the value of the threshold |
||||
* |
||||
* @method drawThresholdValue |
||||
* @param {Object} gaugeOptionsi the options of the gauge |
||||
* @param {Object} layout the layout properties |
||||
* @param {Object} cellLayout the cell layout properties |
||||
* @param {Number} i the index of the series |
||||
* @param {Number} value the value of the threshold |
||||
* @param {Number} a the angle of the value drawn |
||||
*/ |
||||
function drawThresholdValue(gaugeOptionsi, layout, cellLayout, i, value, a) { |
||||
drawText( |
||||
cellLayout.cx |
||||
+ ((layout.thresholdLabelMargin + (layout.thresholdLabelFontSize / 2) + layout.radius) |
||||
* Math.cos(toRad(a))), |
||||
cellLayout.cy |
||||
+ ((layout.thresholdLabelMargin + (layout.thresholdLabelFontSize / 2) + layout.radius) |
||||
* Math.sin(toRad(a))), |
||||
"flotGagueThresholdValue" + i, |
||||
gaugeOptionsi.threshold.label.formatter ? gaugeOptionsi.threshold.label.formatter(value) : value, |
||||
gaugeOptionsi.threshold.label, |
||||
a); |
||||
} |
||||
|
||||
/** |
||||
* draw a text |
||||
* |
||||
* the textOptions is assumed as follows: |
||||
* |
||||
* textOptions: { |
||||
* background: { |
||||
* color: null, |
||||
* opacity: 0 |
||||
* }, |
||||
* font: { |
||||
* size: "auto" |
||||
* family: "\"ＭＳ ゴシック\",sans-serif" |
||||
* }, |
||||
* color: null |
||||
* } |
||||
* |
||||
* @method drawText |
||||
* @private |
||||
* @param {Number} x the x position of the text drawn (left top) |
||||
* @param {Number} y the y position of the text drawn (left top) |
||||
* @param {String} id the id of the dom element |
||||
* @param {String} text the text drawn |
||||
* @param {Object} textOptions the option of the text |
||||
* @param {Number} [a] the angle of the value drawn |
||||
*/ |
||||
function drawText(x, y, id, text, textOptions, a) { |
||||
var span = $("." + id, placeholder); |
||||
var exists = span.length; |
||||
if (!exists) { |
||||
span = $("<span></span>") |
||||
span.attr("id", id); |
||||
span.css("position", "absolute"); |
||||
span.css("top", y + "px"); |
||||
if (textOptions.font.size) { |
||||
span.css("font-size", textOptions.font.size + "px"); |
||||
} |
||||
if (textOptions.font.family) { |
||||
span.css("font-family", textOptions.font.family); |
||||
} |
||||
if (textOptions.color) { |
||||
span.css("color", textOptions.color); |
||||
} |
||||
if (textOptions.background.color) { |
||||
span.css("background-color", textOptions.background.color); |
||||
} |
||||
if (textOptions.background.opacity) { |
||||
span.css("opacity", textOptions.background.opacity); |
||||
} |
||||
placeholder.append(span); |
||||
} |
||||
span.text(text); |
||||
// after append, readjust the left position
|
||||
span.css("left", x + "px"); // for redraw, resetting the left position is needed here
|
||||
span.css("left", (parseInt(span.css("left")) - (span.width()/ 2)) + "px"); |
||||
|
||||
// at last, set angle
|
||||
if (!exists && a) { |
||||
span.css("top", (parseInt(span.css("top")) - (span.height()/ 2)) + "px"); |
||||
span.css("transform", "rotate(" + ((180 * a) + 90) + "deg)"); // not supported for ie8
|
||||
} |
||||
} |
||||
|
||||
return Gauge; |
||||
})(); |
||||
/** |
||||
* get a instance of Logger |
||||
* |
||||
* @method getLogger |
||||
* @for flot.gauge |
||||
* @private |
||||
* @param {Object} debugOptions the options of debug |
||||
*/ |
||||
function getLogger(debugOptions) { |
||||
return typeof Logger !== "undefined" ? new Logger(debugOptions) : null; |
||||
} |
||||
|
||||
/** |
||||
* calculate the index of columns for the specified data |
||||
* |
||||
* @method col |
||||
* @for flot.gauge |
||||
* @param {Number} columns the number of columns |
||||
* @param {Number} i the index of the series |
||||
* @return the index of columns |
||||
*/ |
||||
function col(columns, i) { |
||||
return i % columns; |
||||
} |
||||
|
||||
/** |
||||
* calculate the index of rows for the specified data |
||||
* |
||||
* @method row |
||||
* @for flot.gauge |
||||
* @param {Number} columns the number of rows |
||||
* @param {Number} i the index of the series |
||||
* @return the index of rows |
||||
*/ |
||||
function row(columns, i) { |
||||
return Math.floor(i / columns); |
||||
} |
||||
|
||||
/** |
||||
* calculate the angle in radians |
||||
* |
||||
* internally, use a number without PI (0 - 2). |
||||
* so, in this function, multiply PI |
||||
* |
||||
* @method toRad |
||||
* @for flot.gauge |
||||
* @param {Number} a the number of angle without PI |
||||
* @return the angle in radians |
||||
*/ |
||||
function toRad(a) { |
||||
return a * Math.PI; |
||||
} |
||||
|
||||
/** |
||||
* draw an arc |
||||
* |
||||
* @method drawArc |
||||
* @for flot.gauge |
||||
* @param {Object} context the context of canvas |
||||
* @param {Number} cx the x position of the center |
||||
* @param {Number} cy the y position of the center |
||||
* @param {Number} r the radius of an arc |
||||
* @param {Number} w the width of an arc |
||||
* @param {Number} rd1 the start angle of an arc in radians |
||||
* @param {Number} rd2 the end angle of an arc in radians |
||||
* @param {String} lc the color of a line |
||||
* @param {Number} lw the widht of a line |
||||
* @param {String} fc the fill color of an arc |
||||
*/ |
||||
function drawArc(context, cx, cy, r, w, rd1, rd2, lc, lw, fc) { |
||||
if (rd1 === rd2) { |
||||
return; |
||||
} |
||||
var counterClockwise = false; |
||||
context.save(); |
||||
context.beginPath(); |
||||
context.arc(cx, cy, r, rd1, rd2, counterClockwise); |
||||
context.lineTo(cx + (r - w) * Math.cos(rd2), |
||||
cy + (r - w) * Math.sin(rd2)); |
||||
context.arc(cx, cy, r - w, rd2, rd1, !counterClockwise); |
||||
context.closePath(); |
||||
if (lw) { |
||||
context.lineWidth = lw; |
||||
} |
||||
if (lc) { |
||||
context.strokeStyle = lc; |
||||
context.stroke(); |
||||
} |
||||
if (fc) { |
||||
context.fillStyle = fc; |
||||
context.fill(); |
||||
} |
||||
context.restore(); |
||||
} |
||||
|
||||
/** |
||||
* initialize plugin |
||||
* |
||||
* @method init |
||||
* @for flot.gauge |
||||
* @private |
||||
* @param {Object} plot a instance of plot |
||||
*/ |
||||
function init (plot) { |
||||
// add processOptions hook
|
||||
plot.hooks.processOptions.push(function(plot, options) { |
||||
var logger = getLogger(options.series.gauges.debug); |
||||
|
||||
|
||||
|
||||
|
||||
// turn 'grid' and 'legend' off
|
||||
if (options.series.gauges.show) { |
||||
options.grid.show = false; |
||||
options.legend.show = false; |
||||
} |
||||
|
||||
// sort threshold
|
||||
var thresholds = options.series.gauges.threshold.values; |
||||
|
||||
thresholds.sort(function(a, b) { |
||||
if (a.value < b.value) { |
||||
return -1; |
||||
} else if (a.value > b.value) { |
||||
return 1; |
||||
} else { |
||||
return 0; |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
}); |
||||
|
||||
// add draw hook
|
||||
plot.hooks.draw.push(function(plot, context) { |
||||
var options = plot.getOptions(); |
||||
var gaugeOptions = options.series.gauges; |
||||
|
||||
var logger = getLogger(gaugeOptions.debug); |
||||
|
||||
|
||||
if (!gaugeOptions.show) { |
||||
return; |
||||
} |
||||
|
||||
var series = plot.getData(); |
||||
|
||||
if (!series || !series.length) { |
||||
return; // if no series were passed
|
||||
} |
||||
|
||||
var gauge = new Gauge(plot, context); |
||||
|
||||
// calculate layout
|
||||
var layout = gauge.calculateLayout(); |
||||
|
||||
// debug layout
|
||||
if (gaugeOptions.debug.layout) { |
||||
|
||||
} |
||||
|
||||
// draw background
|
||||
gauge.drawBackground(layout) |
||||
|
||||
// draw cells (label, gauge, value, threshold)
|
||||
for (var i = 0; i < series.length; i++) { |
||||
var item = series[i]; |
||||
|
||||
var gaugeOptionsi = $.extend({}, gaugeOptions, item.gauges); |
||||
if (item.gauges) { |
||||
// re-calculate 'auto' values
|
||||
gauge.calculateAutoValues(gaugeOptionsi, layout.cellWidth); |
||||
} |
||||
|
||||
// calculate cell layout
|
||||
var cellLayout = gauge.calculateCellLayout(gaugeOptionsi, layout, i); |
||||
|
||||
// draw cell background
|
||||
gauge.drawCellBackground(gaugeOptionsi, cellLayout) |
||||
// debug layout
|
||||
if (gaugeOptionsi.debug.layout) { |
||||
|
||||
} |
||||
// draw label
|
||||
if (gaugeOptionsi.label.show) { |
||||
gauge.drawLable(gaugeOptionsi, layout, cellLayout, i, item); |
||||
} |
||||
// draw gauge
|
||||
gauge.drawGauge(gaugeOptionsi, layout, cellLayout, item.label, item.data[0][1]); |
||||
// draw threshold
|
||||
if (gaugeOptionsi.threshold.show) { |
||||
gauge.drawThreshold(gaugeOptionsi, layout, cellLayout); |
||||
} |
||||
if (gaugeOptionsi.threshold.label.show) { |
||||
gauge.drawThresholdValues(gaugeOptionsi, layout, cellLayout, i) |
||||
} |
||||
// draw value
|
||||
if (gaugeOptionsi.value.show) { |
||||
gauge.drawValue(gaugeOptionsi, layout, cellLayout, i, item); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* [defaults description] |
||||
* |
||||
* @property defaults |
||||
* @type {Object} |
||||
*/ |
||||
var defaults = { |
||||
series: { |
||||
gauges: { |
||||
debug: { |
||||
log: false, |
||||
layout: false, |
||||
alert: false |
||||
}, |
||||
show: false, |
||||
layout: { |
||||
margin: 5, |
||||
columns: 3, |
||||
hMargin: 5, |
||||
vMargin: 5, |
||||
square: false |
||||
}, |
||||
frame: { |
||||
show: true |
||||
}, |
||||
cell: { |
||||
background: { |
||||
color: null |
||||
}, |
||||
border: { |
||||
show: true, |
||||
color: "black", |
||||
width: 1 |
||||
}, |
||||
margin: 5, |
||||
vAlign: "middle" // 'top' or 'middle' or 'bottom'
|
||||
}, |
||||
gauge: { |
||||
width: "auto", // a specified number, or 'auto'
|
||||
startAngle: 0.9, // 0 - 2 factor of the radians
|
||||
endAngle: 2.1, // 0 - 2 factor of the radians
|
||||
min: 0, |
||||
max: 100, |
||||
background: { |
||||
color: "white" |
||||
}, |
||||
border: { |
||||
color: "lightgray", |
||||
width: 2 |
||||
}, |
||||
shadow: { |
||||
show: true, |
||||
blur: 5 |
||||
} |
||||
}, |
||||
label: { |
||||
show: true, |
||||
margin: "auto", // a specified number, or 'auto'
|
||||
background: { |
||||
color: null, |
||||
opacity: 0 |
||||
}, |
||||
font: { |
||||
size: "auto", // a specified number, or 'auto'
|
||||
family: "sans-serif" |
||||
}, |
||||
color: null, |
||||
formatter: function(label, value) { |
||||
return label; |
||||
} |
||||
}, |
||||
value: { |
||||
show: true, |
||||
margin: "auto", // a specified number, or 'auto'
|
||||
background: { |
||||
color: null, |
||||
opacity: 0 |
||||
}, |
||||
font: { |
||||
size: "auto", // a specified number, or 'auto'
|
||||
family: "sans-serif" |
||||
}, |
||||
color: null, |
||||
formatter: function(label, value) { |
||||
return parseInt(value); |
||||
} |
||||
}, |
||||
threshold: { |
||||
show: true, |
||||
width: "auto", // a specified number, or 'auto'
|
||||
label: { |
||||
show: true, |
||||
margin: "auto", // a specified number, or 'auto'
|
||||
background: { |
||||
color: null, |
||||
opacity: 0 |
||||
}, |
||||
font: { |
||||
size: "auto", // a specified number, or 'auto'
|
||||
family: ",sans-serif" |
||||
}, |
||||
color: null, |
||||
formatter: function(value) { |
||||
return value; |
||||
} |
||||
}, |
||||
values: [ |
||||
{ |
||||
value: 50, |
||||
color: "lightgreen" |
||||
}, { |
||||
value: 80, |
||||
color: "yellow" |
||||
}, { |
||||
value: 100, |
||||
color: "red" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
// register the gauge plugin
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: defaults, |
||||
name: "gauge", |
||||
version: "1.1.0" |
||||
}); |
||||
|
||||
})(jQuery); |
||||
File diff suppressed because it is too large
Load Diff
@ -1,817 +0,0 @@
|
||||
/* Flot plugin for rendering pie charts. |
||||
|
||||
Copyright (c) 2007-2013 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, |
||||
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); |
||||
} |
||||
if (options.grid.clickable) { |
||||
eventHolder.unbind("click").click(onClick); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
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 = []; |
||||
|
||||
// Fix up the raw data from Flot, ensuring the data is numeric
|
||||
|
||||
for (var i = 0; i < data.length; ++i) { |
||||
|
||||
var 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 (var 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 (var i = 0; i < data.length; ++i) { |
||||
var value = data[i].data[0][1]; |
||||
if (value / total <= options.series.pie.combine.threshold) { |
||||
combined += value; |
||||
numCombined++; |
||||
if (!color) { |
||||
color = data[i].color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
for (var i = 0; i < data.length; ++i) { |
||||
var value = data[i].data[0][1]; |
||||
if (numCombined < 2 || value / total > options.series.pie.combine.threshold) { |
||||
newdata.push({ |
||||
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; |
||||
} |
||||
} else { |
||||
centerLeft += options.series.pie.offset.left; |
||||
} |
||||
|
||||
if (centerLeft < maxRadius) { |
||||
centerLeft = maxRadius; |
||||
} else if (centerLeft > canvasWidth - maxRadius) { |
||||
centerLeft = canvasWidth - maxRadius; |
||||
} |
||||
|
||||
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; |
||||
|
||||
// center and rotate to starting position
|
||||
|
||||
ctx.save(); |
||||
ctx.translate(centerLeft,centerTop); |
||||
ctx.scale(1, options.series.pie.tilt); |
||||
//ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
|
||||
|
||||
// draw slices
|
||||
|
||||
ctx.save(); |
||||
var currentAngle = startAngle; |
||||
for (var i = 0; i < slices.length; ++i) { |
||||
slices[i].startAngle = currentAngle; |
||||
drawSlice(slices[i].angle, slices[i].color, true); |
||||
} |
||||
ctx.restore(); |
||||
|
||||
// draw slice outlines
|
||||
|
||||
if (options.series.pie.stroke.width > 0) { |
||||
ctx.save(); |
||||
ctx.lineWidth = options.series.pie.stroke.width; |
||||
currentAngle = startAngle; |
||||
for (var i = 0; i < slices.length; ++i) { |
||||
drawSlice(slices[i].angle, options.series.pie.stroke.color, false); |
||||
} |
||||
ctx.restore(); |
||||
} |
||||
|
||||
// draw donut hole
|
||||
|
||||
drawDonutHole(ctx); |
||||
|
||||
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); |
||||
@ -1,380 +0,0 @@
|
||||
/* Flot plugin for selecting regions of a plot. |
||||
|
||||
Copyright (c) 2007-2013 IOLA and Ole Laursen. |
||||
Licensed under the MIT license. |
||||
|
||||
The plugin supports these options: |
||||
|
||||
selection: { |
||||
mode: null or "x" or "y" or "xy", |
||||
color: color, |
||||
shape: "round" or "miter" or "bevel", |
||||
minSize: number of pixels |
||||
} |
||||
|
||||
Selection support is enabled by setting the mode to one of "x", "y" or "xy". |
||||
In "x" mode, the user will only be able to specify the x range, similarly for |
||||
"y" mode. For "xy", the selection becomes a rectangle where both ranges can be |
||||
specified. "color" is color of the selection (if you need to change the color |
||||
later on, you can get to it with plot.getOptions().selection.color). "shape" |
||||
is the shape of the corners of the selection. |
||||
|
||||
"minSize" is the minimum size a selection can be in pixels. This value can |
||||
be customized to determine the smallest size a selection can be and still |
||||
have the selection rectangle be displayed. When customizing this value, the |
||||
fact that it refers to pixels, not axis units must be taken into account. |
||||
Thus, for example, if there is a bar graph in time mode with BarWidth set to 1 |
||||
minute, setting "minSize" to 1 will not make the minimum selection size 1 |
||||
minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent |
||||
"plotunselected" events from being fired when the user clicks the mouse without |
||||
dragging. |
||||
|
||||
When selection support is enabled, a "plotselected" event will be emitted on |
||||
the DOM element you passed into the plot function. The event handler gets a |
||||
parameter with the ranges selected on the axes, like this: |
||||
|
||||
placeholder.bind( "plotselected", function( event, ranges ) { |
||||
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to) |
||||
// similar for yaxis - with multiple axes, the extra ones are in
|
||||
// x2axis, x3axis, ...
|
||||
}); |
||||
|
||||
The "plotselected" event is only fired when the user has finished making the |
||||
selection. A "plotselecting" event is fired during the process with the same |
||||
parameters as the "plotselected" event, in case you want to know what's |
||||
happening while it's happening, |
||||
|
||||
A "plotunselected" event with no arguments is emitted when the user clicks the |
||||
mouse to remove the selection. As stated above, setting "minSize" to 0 will |
||||
destroy this behavior. |
||||
|
||||
The plugin allso adds the following methods to the plot object: |
||||
|
||||
- setSelection( ranges, preventEvent ) |
||||
|
||||
Set the selection rectangle. The passed in ranges is on the same form as |
||||
returned in the "plotselected" event. If the selection mode is "x", you |
||||
should put in either an xaxis range, if the mode is "y" you need to put in |
||||
an yaxis range and both xaxis and yaxis if the selection mode is "xy", like |
||||
this: |
||||
|
||||
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } }); |
||||
|
||||
setSelection will trigger the "plotselected" event when called. If you don't |
||||
want that to happen, e.g. if you're inside a "plotselected" handler, pass |
||||
true as the second parameter. If you are using multiple axes, you can |
||||
specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of |
||||
xaxis, the plugin picks the first one it sees. |
||||
|
||||
- clearSelection( preventEvent ) |
||||
|
||||
Clear the selection rectangle. Pass in true to avoid getting a |
||||
"plotunselected" event. |
||||
|
||||
- getSelection() |
||||
|
||||
Returns the current selection in the same format as the "plotselected" |
||||
event. If there's currently no selection, the function returns null. |
||||
|
||||
*/ |
||||
|
||||
(function ($) { |
||||
function init(plot) { |
||||
var selection = { |
||||
first: { x: -1, y: -1}, second: { x: -1, y: -1}, |
||||
show: false, |
||||
active: false |
||||
}; |
||||
|
||||
// FIXME: The drag handling implemented here should be
|
||||
// abstracted out, there's some similar code from a library in
|
||||
// the navigation plugin, this should be massaged a bit to fit
|
||||
// the Flot cases here better and reused. Doing this would
|
||||
// make this plugin much slimmer.
|
||||
var savedhandlers = {}; |
||||
|
||||
var mouseUpHandler = null; |
||||
|
||||
function onMouseMove(e) { |
||||
if (selection.active) { |
||||
updateSelection(e); |
||||
|
||||
plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]); |
||||
} |
||||
} |
||||
|
||||
function onMouseDown(e) { |
||||
if (e.which != 1) // only accept left-click
|
||||
return; |
||||
|
||||
// cancel out any text selections
|
||||
document.body.focus(); |
||||
|
||||
// prevent text selection and drag in old-school browsers
|
||||
if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) { |
||||
savedhandlers.onselectstart = document.onselectstart; |
||||
document.onselectstart = function () { return false; }; |
||||
} |
||||
if (document.ondrag !== undefined && savedhandlers.ondrag == null) { |
||||
savedhandlers.ondrag = document.ondrag; |
||||
document.ondrag = function () { return false; }; |
||||
} |
||||
|
||||
setSelectionPos(selection.first, e); |
||||
|
||||
selection.active = true; |
||||
|
||||
// this is a bit silly, but we have to use a closure to be
|
||||
// able to whack the same handler again
|
||||
mouseUpHandler = function (e) { onMouseUp(e); }; |
||||
|
||||
$(document).one("mouseup", mouseUpHandler); |
||||
} |
||||
|
||||
function onMouseUp(e) { |
||||
mouseUpHandler = null; |
||||
|
||||
// revert drag stuff for old-school browsers
|
||||
if (document.onselectstart !== undefined) |
||||
document.onselectstart = savedhandlers.onselectstart; |
||||
if (document.ondrag !== undefined) |
||||
document.ondrag = savedhandlers.ondrag; |
||||
|
||||
// no more dragging
|
||||
selection.active = false; |
||||
updateSelection(e); |
||||
|
||||
if (selectionIsSane()) |
||||
triggerSelectedEvent(e); |
||||
else { |
||||
// this counts as a clear
|
||||
plot.getPlaceholder().trigger("plotunselected", [ ]); |
||||
plot.getPlaceholder().trigger("plotselecting", [ null ]); |
||||
} |
||||
|
||||
setTimeout(function() { |
||||
plot.isSelecting = false; |
||||
}, 10); |
||||
|
||||
return false; |
||||
} |
||||
|
||||
function getSelection() { |
||||
if (!selectionIsSane()) |
||||
return null; |
||||
|
||||
if (!selection.show) return null; |
||||
|
||||
var r = {}, c1 = selection.first, c2 = selection.second; |
||||
var axes = plot.getAxes(); |
||||
// look if no axis is used
|
||||
var noAxisInUse = true; |
||||
$.each(axes, function (name, axis) { |
||||
if (axis.used) { |
||||
anyUsed = false; |
||||
} |
||||
}) |
||||
|
||||
$.each(axes, function (name, axis) { |
||||
if (axis.used || noAxisInUse) { |
||||
var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]); |
||||
r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) }; |
||||
} |
||||
}); |
||||
return r; |
||||
} |
||||
|
||||
function triggerSelectedEvent(event) { |
||||
var r = getSelection(); |
||||
|
||||
// Add ctrlKey and metaKey to event
|
||||
r.ctrlKey = event.ctrlKey; |
||||
r.metaKey = event.metaKey; |
||||
|
||||
plot.getPlaceholder().trigger("plotselected", [ r ]); |
||||
|
||||
// backwards-compat stuff, to be removed in future
|
||||
if (r.xaxis && r.yaxis) |
||||
plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]); |
||||
} |
||||
|
||||
function clamp(min, value, max) { |
||||
return value < min ? min: (value > max ? max: value); |
||||
} |
||||
|
||||
function setSelectionPos(pos, e) { |
||||
var o = plot.getOptions(); |
||||
var offset = plot.getPlaceholder().offset(); |
||||
var plotOffset = plot.getPlotOffset(); |
||||
pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width()); |
||||
pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height()); |
||||
|
||||
if (o.selection.mode == "y") |
||||
pos.x = pos == selection.first ? 0 : plot.width(); |
||||
|
||||
if (o.selection.mode == "x") |
||||
pos.y = pos == selection.first ? 0 : plot.height(); |
||||
} |
||||
|
||||
function updateSelection(pos) { |
||||
if (pos.pageX == null) |
||||
return; |
||||
|
||||
setSelectionPos(selection.second, pos); |
||||
if (selectionIsSane()) { |
||||
plot.isSelecting = true; |
||||
selection.show = true; |
||||
plot.triggerRedrawOverlay(); |
||||
} |
||||
else |
||||
clearSelection(true); |
||||
} |
||||
|
||||
function clearSelection(preventEvent) { |
||||
if (selection.show) { |
||||
selection.show = false; |
||||
plot.triggerRedrawOverlay(); |
||||
if (!preventEvent) |
||||
plot.getPlaceholder().trigger("plotunselected", [ ]); |
||||
} |
||||
} |
||||
|
||||
// function taken from markings support in Flot
|
||||
function extractRange(ranges, coord) { |
||||
var axis, from, to, key, axes = plot.getAxes(); |
||||
|
||||
for (var k in axes) { |
||||
axis = axes[k]; |
||||
if (axis.direction == coord) { |
||||
key = coord + axis.n + "axis"; |
||||
if (!ranges[key] && axis.n == 1) |
||||
key = coord + "axis"; // support x1axis as xaxis
|
||||
if (ranges[key]) { |
||||
from = ranges[key].from; |
||||
to = ranges[key].to; |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// backwards-compat stuff - to be removed in future
|
||||
if (!ranges[key]) { |
||||
axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0]; |
||||
from = ranges[coord + "1"]; |
||||
to = ranges[coord + "2"]; |
||||
} |
||||
|
||||
// auto-reverse as an added bonus
|
||||
if (from != null && to != null && from > to) { |
||||
var tmp = from; |
||||
from = to; |
||||
to = tmp; |
||||
} |
||||
|
||||
return { from: from, to: to, axis: axis }; |
||||
} |
||||
|
||||
function setSelection(ranges, preventEvent) { |
||||
var axis, range, o = plot.getOptions(); |
||||
|
||||
if (o.selection.mode == "y") { |
||||
selection.first.x = 0; |
||||
selection.second.x = plot.width(); |
||||
} |
||||
else { |
||||
range = extractRange(ranges, "x"); |
||||
|
||||
selection.first.x = range.axis.p2c(range.from); |
||||
selection.second.x = range.axis.p2c(range.to); |
||||
} |
||||
|
||||
if (o.selection.mode == "x") { |
||||
selection.first.y = 0; |
||||
selection.second.y = plot.height(); |
||||
} |
||||
else { |
||||
range = extractRange(ranges, "y"); |
||||
|
||||
selection.first.y = range.axis.p2c(range.from); |
||||
selection.second.y = range.axis.p2c(range.to); |
||||
} |
||||
|
||||
selection.show = true; |
||||
plot.triggerRedrawOverlay(); |
||||
if (!preventEvent && selectionIsSane()) |
||||
triggerSelectedEvent(); |
||||
} |
||||
|
||||
function selectionIsSane() { |
||||
var minSize = plot.getOptions().selection.minSize; |
||||
return Math.abs(selection.second.x - selection.first.x) >= minSize && |
||||
Math.abs(selection.second.y - selection.first.y) >= minSize; |
||||
} |
||||
|
||||
plot.clearSelection = clearSelection; |
||||
plot.setSelection = setSelection; |
||||
plot.getSelection = getSelection; |
||||
|
||||
plot.hooks.bindEvents.push(function(plot, eventHolder) { |
||||
var o = plot.getOptions(); |
||||
if (o.selection.mode != null) { |
||||
eventHolder.mousemove(onMouseMove); |
||||
eventHolder.mousedown(onMouseDown); |
||||
} |
||||
}); |
||||
|
||||
|
||||
plot.hooks.drawOverlay.push(function (plot, ctx) { |
||||
// draw selection
|
||||
if (selection.show && selectionIsSane()) { |
||||
var plotOffset = plot.getPlotOffset(); |
||||
var o = plot.getOptions(); |
||||
|
||||
ctx.save(); |
||||
ctx.translate(plotOffset.left, plotOffset.top); |
||||
|
||||
var c = $.color.parse(o.selection.color); |
||||
|
||||
ctx.strokeStyle = c.scale('a', o.selection.strokeAlpha).toString(); |
||||
ctx.lineWidth = 1; |
||||
ctx.lineJoin = o.selection.shape; |
||||
ctx.fillStyle = c.scale('a', o.selection.fillAlpha).toString(); |
||||
|
||||
var x = Math.min(selection.first.x, selection.second.x) + 0.5, |
||||
y = Math.min(selection.first.y, selection.second.y) + 0.5, |
||||
w = Math.abs(selection.second.x - selection.first.x) - 1, |
||||
h = Math.abs(selection.second.y - selection.first.y) - 1; |
||||
|
||||
ctx.fillRect(x, y, w, h); |
||||
ctx.strokeRect(x, y, w, h); |
||||
|
||||
ctx.restore(); |
||||
} |
||||
}); |
||||
|
||||
plot.hooks.shutdown.push(function (plot, eventHolder) { |
||||
eventHolder.unbind("mousemove", onMouseMove); |
||||
eventHolder.unbind("mousedown", onMouseDown); |
||||
|
||||
if (mouseUpHandler) |
||||
$(document).unbind("mouseup", mouseUpHandler); |
||||
}); |
||||
|
||||
} |
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: { |
||||
selection: { |
||||
mode: null, // one of null, "x", "y" or "xy"
|
||||
color: "#e8cfac", |
||||
shape: "round", // one of "round", "miter", or "bevel"
|
||||
minSize: 5, // minimum number of pixels
|
||||
strokeAlpha: 0.8, |
||||
fillAlpha: 0.4, |
||||
} |
||||
}, |
||||
name: 'selection', |
||||
version: '1.1' |
||||
}); |
||||
})(jQuery); |
||||
@ -1,190 +0,0 @@
|
||||
/* Flot plugin for stacking data sets rather than overlyaing 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 stackData(plot, s, datapoints) { |
||||
if (s.stack == null || s.stack === false) |
||||
return; |
||||
|
||||
var other = findMatchingSeries(s, plot.getData()); |
||||
if (!other) |
||||
return; |
||||
|
||||
var ps = datapoints.pointsize, |
||||
points = datapoints.points, |
||||
otherps = other.datapoints.pointsize, |
||||
otherpoints = other.datapoints.points, |
||||
newpoints = [], |
||||
px, py, intery, qx, qy, bottom, |
||||
withlines = s.lines.show, |
||||
horizontal = s.bars.horizontal, |
||||
withbottom = ps > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y), |
||||
withsteps = withlines && s.lines.steps, |
||||
keyOffset = horizontal ? 1 : 0, |
||||
accumulateOffset = horizontal ? 0 : 1, |
||||
i = 0, j = 0, l, m; |
||||
|
||||
while (true) { |
||||
if (i >= points.length && j >= otherpoints.length) |
||||
break; |
||||
|
||||
l = newpoints.length; |
||||
|
||||
if (i < points.length && points[i] == null) { |
||||
// copy gaps
|
||||
for (m = 0; m < ps; ++m) |
||||
newpoints.push(points[i + m]); |
||||
i += ps; |
||||
} |
||||
else if (i >= points.length) { |
||||
// take the remaining points from the previous series
|
||||
for (m = 0; m < ps; ++m) |
||||
newpoints.push(otherpoints[j + m]); |
||||
if (withbottom) |
||||
newpoints[l + 2] = otherpoints[j + accumulateOffset]; |
||||
j += otherps; |
||||
} |
||||
else if (j >= otherpoints.length) { |
||||
// take the remaining points from the current series
|
||||
for (m = 0; m < ps; ++m) |
||||
newpoints.push(points[i + m]); |
||||
i += ps; |
||||
} |
||||
else if (j < otherpoints.length && otherpoints[j] == null) { |
||||
// ignore point
|
||||
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) { |
||||
// take the point from the previous series so that next series will correctly stack
|
||||
if (i == 0) { |
||||
for (m = 0; m < ps; ++m) |
||||
newpoints.push(otherpoints[j + m]); |
||||
bottom = qy; |
||||
} |
||||
// we got past point below, might need to
|
||||
// insert interpolated extra point
|
||||
if (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
|
||||
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 (j > 0 && otherpoints[j - otherps] != null) |
||||
bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx); |
||||
|
||||
newpoints[l + accumulateOffset] += bottom; |
||||
|
||||
i += ps; |
||||
} |
||||
|
||||
fromgap = false; |
||||
|
||||
if (l != newpoints.length && withbottom) |
||||
newpoints[l + 2] = bottom; |
||||
} |
||||
|
||||
// maintain the line steps invariant
|
||||
if (withsteps && l != newpoints.length && l > 0 |
||||
&& newpoints[l] != null |
||||
&& newpoints[l] != newpoints[l - ps] |
||||
&& newpoints[l + 1] != newpoints[l - ps + 1]) { |
||||
for (m = 0; m < ps; ++m) |
||||
newpoints[l + ps + m] = newpoints[l + m]; |
||||
newpoints[l + 1] = newpoints[l - ps + 1]; |
||||
} |
||||
} |
||||
|
||||
datapoints.points = newpoints; |
||||
} |
||||
|
||||
plot.hooks.processDatapoints.push(stackData); |
||||
} |
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: options, |
||||
name: 'stack', |
||||
version: '1.2' |
||||
}); |
||||
})(jQuery); |
||||
@ -1,126 +0,0 @@
|
||||
(function ($) { |
||||
var options = { |
||||
series: { |
||||
stackpercent: null |
||||
} // or number/string
|
||||
}; |
||||
|
||||
function init(plot) { |
||||
|
||||
// will be built up dynamically as a hash from x-value, or y-value if horizontal
|
||||
var stackBases = {}; |
||||
var processed = false; |
||||
var stackSums = {}; |
||||
|
||||
//set percentage for stacked chart
|
||||
function processRawData(plot, series, data, datapoints) { |
||||
if (!processed) { |
||||
processed = true; |
||||
stackSums = getStackSums(plot.getData()); |
||||
} |
||||
if (series.stackpercent == true) { |
||||
var num = data.length; |
||||
series.percents = []; |
||||
var key_idx = 0; |
||||
var value_idx = 1; |
||||
if (series.bars && series.bars.horizontal && series.bars.horizontal === true) { |
||||
key_idx = 1; |
||||
value_idx = 0; |
||||
} |
||||
for (var j = 0; j < num; j++) { |
||||
var sum = stackSums[data[j][key_idx] + ""]; |
||||
if (sum > 0) { |
||||
series.percents.push(data[j][value_idx] * 100 / sum); |
||||
} else { |
||||
series.percents.push(0); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//calculate summary
|
||||
function getStackSums(_data) { |
||||
var data_len = _data.length; |
||||
var sums = {}; |
||||
if (data_len > 0) { |
||||
//caculate summary
|
||||
for (var i = 0; i < data_len; i++) { |
||||
if (_data[i].stackpercent) { |
||||
var key_idx = 0; |
||||
var value_idx = 1; |
||||
if (_data[i].bars && _data[i].bars.horizontal && _data[i].bars.horizontal === true) { |
||||
key_idx = 1; |
||||
value_idx = 0; |
||||
} |
||||
var num = _data[i].data.length; |
||||
for (var j = 0; j < num; j++) { |
||||
var value = 0; |
||||
if (_data[i].data[j][1] != null) { |
||||
value = _data[i].data[j][value_idx]; |
||||
} |
||||
if (sums[_data[i].data[j][key_idx] + ""]) { |
||||
sums[_data[i].data[j][key_idx] + ""] += value; |
||||
} else { |
||||
sums[_data[i].data[j][key_idx] + ""] = value; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
return sums; |
||||
} |
||||
|
||||
function stackData(plot, s, datapoints) { |
||||
if (!s.stackpercent) return; |
||||
if (!processed) { |
||||
stackSums = getStackSums(plot.getData()); |
||||
} |
||||
var newPoints = []; |
||||
|
||||
|
||||
var key_idx = 0; |
||||
var value_idx = 1; |
||||
if (s.bars && s.bars.horizontal && s.bars.horizontal === true) { |
||||
key_idx = 1; |
||||
value_idx = 0; |
||||
} |
||||
|
||||
for (var i = 0; i < datapoints.points.length; i += 3) { |
||||
// note that the values need to be turned into absolute y-values.
|
||||
// in other words, if you were to stack (x, y1), (x, y2), and (x, y3),
|
||||
// (each from different series, which is where stackBases comes in),
|
||||
// you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2)
|
||||
// generally, (x, thisValue + (base up to this point), + (base up to this point))
|
||||
if (!stackBases[datapoints.points[i + key_idx]]) { |
||||
stackBases[datapoints.points[i + key_idx]] = 0; |
||||
} |
||||
newPoints[i + key_idx] = datapoints.points[i + key_idx]; |
||||
newPoints[i + value_idx] = datapoints.points[i + value_idx] + stackBases[datapoints.points[i + key_idx]]; |
||||
newPoints[i + 2] = stackBases[datapoints.points[i + key_idx]]; |
||||
stackBases[datapoints.points[i + key_idx]] += datapoints.points[i + value_idx]; |
||||
// change points to percentage values
|
||||
// you may need to set yaxis:{ max = 100 }
|
||||
if ( stackSums[newPoints[i+key_idx]+""] > 0 ){ |
||||
newPoints[i + value_idx] = newPoints[i + value_idx] * 100 / stackSums[newPoints[i + key_idx] + ""]; |
||||
newPoints[i + 2] = newPoints[i + 2] * 100 / stackSums[newPoints[i + key_idx] + ""]; |
||||
} else { |
||||
newPoints[i + value_idx] = 0; |
||||
newPoints[i + 2] = 0; |
||||
} |
||||
} |
||||
|
||||
datapoints.points = newPoints; |
||||
} |
||||
|
||||
plot.hooks.processRawData.push(processRawData); |
||||
plot.hooks.processDatapoints.push(stackData); |
||||
} |
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: options, |
||||
name: 'stackpercent', |
||||
version: '0.1' |
||||
}); |
||||
})(jQuery); |
||||
@ -1,431 +0,0 @@
|
||||
/* Pretty handling of time axes. |
||||
|
||||
Copyright (c) 2007-2013 IOLA and Ole Laursen. |
||||
Licensed under the MIT license. |
||||
|
||||
Set axis.mode to "time" to enable. See the section "Time series data" in |
||||
API.txt for details. |
||||
|
||||
*/ |
||||
|
||||
(function($) { |
||||
|
||||
var options = { |
||||
xaxis: { |
||||
timezone: null, // "browser" for local to the client or timezone for timezone-js
|
||||
timeformat: null, // format string to use
|
||||
twelveHourClock: false, // 12 or 24 time in time mode
|
||||
monthNames: null // list of names of months
|
||||
} |
||||
}; |
||||
|
||||
// round to nearby lower multiple of base
|
||||
|
||||
function floorInBase(n, base) { |
||||
return base * Math.floor(n / base); |
||||
} |
||||
|
||||
// Returns a string with the date d formatted according to fmt.
|
||||
// A subset of the Open Group's strftime format is supported.
|
||||
|
||||
function formatDate(d, fmt, monthNames, dayNames) { |
||||
|
||||
if (typeof d.strftime == "function") { |
||||
return d.strftime(fmt); |
||||
} |
||||
|
||||
var leftPad = function(n, pad) { |
||||
n = "" + n; |
||||
pad = "" + (pad == null ? "0" : pad); |
||||
return n.length == 1 ? pad + n : n; |
||||
}; |
||||
|
||||
var r = []; |
||||
var escape = false; |
||||
var hours = d.getHours(); |
||||
var isAM = hours < 12; |
||||
|
||||
if (monthNames == null) { |
||||
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; |
||||
} |
||||
|
||||
if (dayNames == null) { |
||||
dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; |
||||
} |
||||
|
||||
var hours12; |
||||
|
||||
if (hours > 12) { |
||||
hours12 = hours - 12; |
||||
} else if (hours == 0) { |
||||
hours12 = 12; |
||||
} else { |
||||
hours12 = hours; |
||||
} |
||||
|
||||
for (var i = 0; i < fmt.length; ++i) { |
||||
|
||||
var c = fmt.charAt(i); |
||||
|
||||
if (escape) { |
||||
switch (c) { |
||||
case 'a': c = "" + dayNames[d.getDay()]; break; |
||||
case 'b': c = "" + monthNames[d.getMonth()]; break; |
||||
case 'd': c = leftPad(d.getDate(), ""); break; |
||||
case 'e': c = leftPad(d.getDate(), " "); break; |
||||
case 'h': // For back-compat with 0.7; remove in 1.0
|
||||
case 'H': c = leftPad(hours); break; |
||||
case 'I': c = leftPad(hours12); break; |
||||
case 'l': c = leftPad(hours12, " "); break; |
||||
case 'm': c = leftPad(d.getMonth() + 1, ""); break; |
||||
case 'M': c = leftPad(d.getMinutes()); break; |
||||
// quarters not in Open Group's strftime specification
|
||||
case 'q': |
||||
c = "" + (Math.floor(d.getMonth() / 3) + 1); break; |
||||
case 'S': c = leftPad(d.getSeconds()); break; |
||||
case 'y': c = leftPad(d.getFullYear() % 100); break; |
||||
case 'Y': c = "" + d.getFullYear(); break; |
||||
case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break; |
||||
case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break; |
||||
case 'w': c = "" + d.getDay(); break; |
||||
} |
||||
r.push(c); |
||||
escape = false; |
||||
} else { |
||||
if (c == "%") { |
||||
escape = true; |
||||
} else { |
||||
r.push(c); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return r.join(""); |
||||
} |
||||
|
||||
// To have a consistent view of time-based data independent of which time
|
||||
// zone the client happens to be in we need a date-like object independent
|
||||
// of time zones. This is done through a wrapper that only calls the UTC
|
||||
// versions of the accessor methods.
|
||||
|
||||
function makeUtcWrapper(d) { |
||||
|
||||
function addProxyMethod(sourceObj, sourceMethod, targetObj, targetMethod) { |
||||
sourceObj[sourceMethod] = function() { |
||||
return targetObj[targetMethod].apply(targetObj, arguments); |
||||
}; |
||||
}; |
||||
|
||||
var utc = { |
||||
date: d |
||||
}; |
||||
|
||||
// support strftime, if found
|
||||
|
||||
if (d.strftime != undefined) { |
||||
addProxyMethod(utc, "strftime", d, "strftime"); |
||||
} |
||||
|
||||
addProxyMethod(utc, "getTime", d, "getTime"); |
||||
addProxyMethod(utc, "setTime", d, "setTime"); |
||||
|
||||
var props = ["Date", "Day", "FullYear", "Hours", "Milliseconds", "Minutes", "Month", "Seconds"]; |
||||
|
||||
for (var p = 0; p < props.length; p++) { |
||||
addProxyMethod(utc, "get" + props[p], d, "getUTC" + props[p]); |
||||
addProxyMethod(utc, "set" + props[p], d, "setUTC" + props[p]); |
||||
} |
||||
|
||||
return utc; |
||||
}; |
||||
|
||||
// select time zone strategy. This returns a date-like object tied to the
|
||||
// desired timezone
|
||||
|
||||
function dateGenerator(ts, opts) { |
||||
if (opts.timezone == "browser") { |
||||
return new Date(ts); |
||||
} else if (!opts.timezone || opts.timezone == "utc") { |
||||
return makeUtcWrapper(new Date(ts)); |
||||
} else if (typeof timezoneJS != "undefined" && typeof timezoneJS.Date != "undefined") { |
||||
var d = new timezoneJS.Date(); |
||||
// timezone-js is fickle, so be sure to set the time zone before
|
||||
// setting the time.
|
||||
d.setTimezone(opts.timezone); |
||||
d.setTime(ts); |
||||
return d; |
||||
} else { |
||||
return makeUtcWrapper(new Date(ts)); |
||||
} |
||||
} |
||||
|
||||
// map of app. size of time units in milliseconds
|
||||
|
||||
var timeUnitSize = { |
||||
"second": 1000, |
||||
"minute": 60 * 1000, |
||||
"hour": 60 * 60 * 1000, |
||||
"day": 24 * 60 * 60 * 1000, |
||||
"month": 30 * 24 * 60 * 60 * 1000, |
||||
"quarter": 3 * 30 * 24 * 60 * 60 * 1000, |
||||
"year": 365.2425 * 24 * 60 * 60 * 1000 |
||||
}; |
||||
|
||||
// the allowed tick sizes, after 1 year we use
|
||||
// an integer algorithm
|
||||
|
||||
var baseSpec = [ |
||||
[1, "second"], [2, "second"], [5, "second"], [10, "second"], |
||||
[30, "second"], |
||||
[1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], |
||||
[30, "minute"], |
||||
[1, "hour"], [2, "hour"], [4, "hour"], |
||||
[8, "hour"], [12, "hour"], |
||||
[1, "day"], [2, "day"], [3, "day"], |
||||
[0.25, "month"], [0.5, "month"], [1, "month"], |
||||
[2, "month"] |
||||
]; |
||||
|
||||
// we don't know which variant(s) we'll need yet, but generating both is
|
||||
// cheap
|
||||
|
||||
var specMonths = baseSpec.concat([[3, "month"], [6, "month"], |
||||
[1, "year"]]); |
||||
var specQuarters = baseSpec.concat([[1, "quarter"], [2, "quarter"], |
||||
[1, "year"]]); |
||||
|
||||
function init(plot) { |
||||
plot.hooks.processOptions.push(function (plot, options) { |
||||
$.each(plot.getAxes(), function(axisName, axis) { |
||||
|
||||
var opts = axis.options; |
||||
|
||||
if (opts.mode == "time") { |
||||
axis.tickGenerator = function(axis) { |
||||
|
||||
var ticks = []; |
||||
var d = dateGenerator(axis.min, opts); |
||||
var minSize = 0; |
||||
|
||||
// make quarter use a possibility if quarters are
|
||||
// mentioned in either of these options
|
||||
|
||||
var spec = (opts.tickSize && opts.tickSize[1] === |
||||
"quarter") || |
||||
(opts.minTickSize && opts.minTickSize[1] === |
||||
"quarter") ? specQuarters : specMonths; |
||||
|
||||
if (opts.minTickSize != null) { |
||||
if (typeof opts.tickSize == "number") { |
||||
minSize = opts.tickSize; |
||||
} else { |
||||
minSize = opts.minTickSize[0] * timeUnitSize[opts.minTickSize[1]]; |
||||
} |
||||
} |
||||
|
||||
for (var i = 0; i < spec.length - 1; ++i) { |
||||
if (axis.delta < (spec[i][0] * timeUnitSize[spec[i][1]] |
||||
+ spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 |
||||
&& spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) { |
||||
break; |
||||
} |
||||
} |
||||
|
||||
var size = spec[i][0]; |
||||
var unit = spec[i][1]; |
||||
|
||||
// special-case the possibility of several years
|
||||
|
||||
if (unit == "year") { |
||||
|
||||
// if given a minTickSize in years, just use it,
|
||||
// ensuring that it's an integer
|
||||
|
||||
if (opts.minTickSize != null && opts.minTickSize[1] == "year") { |
||||
size = Math.floor(opts.minTickSize[0]); |
||||
} else { |
||||
|
||||
var magn = Math.pow(10, Math.floor(Math.log(axis.delta / timeUnitSize.year) / Math.LN10)); |
||||
var norm = (axis.delta / timeUnitSize.year) / magn; |
||||
|
||||
if (norm < 1.5) { |
||||
size = 1; |
||||
} else if (norm < 3) { |
||||
size = 2; |
||||
} else if (norm < 7.5) { |
||||
size = 5; |
||||
} else { |
||||
size = 10; |
||||
} |
||||
|
||||
size *= magn; |
||||
} |
||||
|
||||
// minimum size for years is 1
|
||||
|
||||
if (size < 1) { |
||||
size = 1; |
||||
} |
||||
} |
||||
|
||||
axis.tickSize = opts.tickSize || [size, unit]; |
||||
var tickSize = axis.tickSize[0]; |
||||
unit = axis.tickSize[1]; |
||||
|
||||
var step = tickSize * timeUnitSize[unit]; |
||||
|
||||
if (unit == "second") { |
||||
d.setSeconds(floorInBase(d.getSeconds(), tickSize)); |
||||
} else if (unit == "minute") { |
||||
d.setMinutes(floorInBase(d.getMinutes(), tickSize)); |
||||
} else if (unit == "hour") { |
||||
d.setHours(floorInBase(d.getHours(), tickSize)); |
||||
} else if (unit == "month") { |
||||
d.setMonth(floorInBase(d.getMonth(), tickSize)); |
||||
} else if (unit == "quarter") { |
||||
d.setMonth(3 * floorInBase(d.getMonth() / 3, |
||||
tickSize)); |
||||
} else if (unit == "year") { |
||||
d.setFullYear(floorInBase(d.getFullYear(), tickSize)); |
||||
} |
||||
|
||||
// reset smaller components
|
||||
|
||||
d.setMilliseconds(0); |
||||
|
||||
if (step >= timeUnitSize.minute) { |
||||
d.setSeconds(0); |
||||
} |
||||
if (step >= timeUnitSize.hour) { |
||||
d.setMinutes(0); |
||||
} |
||||
if (step >= timeUnitSize.day) { |
||||
d.setHours(0); |
||||
} |
||||
if (step >= timeUnitSize.day * 4) { |
||||
d.setDate(1); |
||||
} |
||||
if (step >= timeUnitSize.month * 2) { |
||||
d.setMonth(floorInBase(d.getMonth(), 3)); |
||||
} |
||||
if (step >= timeUnitSize.quarter * 2) { |
||||
d.setMonth(floorInBase(d.getMonth(), 6)); |
||||
} |
||||
if (step >= timeUnitSize.year) { |
||||
d.setMonth(0); |
||||
} |
||||
|
||||
var carry = 0; |
||||
var v = Number.NaN; |
||||
var prev; |
||||
|
||||
do { |
||||
|
||||
prev = v; |
||||
v = d.getTime(); |
||||
ticks.push(v); |
||||
|
||||
if (unit == "month" || unit == "quarter") { |
||||
if (tickSize < 1) { |
||||
|
||||
// a bit complicated - we'll divide the
|
||||
// month/quarter up but we need to take
|
||||
// care of fractions so we don't end up in
|
||||
// the middle of a day
|
||||
|
||||
d.setDate(1); |
||||
var start = d.getTime(); |
||||
d.setMonth(d.getMonth() + |
||||
(unit == "quarter" ? 3 : 1)); |
||||
var end = d.getTime(); |
||||
d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize); |
||||
carry = d.getHours(); |
||||
d.setHours(0); |
||||
} else { |
||||
d.setMonth(d.getMonth() + |
||||
tickSize * (unit == "quarter" ? 3 : 1)); |
||||
} |
||||
} else if (unit == "year") { |
||||
d.setFullYear(d.getFullYear() + tickSize); |
||||
} else { |
||||
d.setTime(v + step); |
||||
} |
||||
} while (v < axis.max && v != prev); |
||||
|
||||
return ticks; |
||||
}; |
||||
|
||||
axis.tickFormatter = function (v, axis) { |
||||
|
||||
var d = dateGenerator(v, axis.options); |
||||
|
||||
// first check global format
|
||||
|
||||
if (opts.timeformat != null) { |
||||
return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames); |
||||
} |
||||
|
||||
// possibly use quarters if quarters are mentioned in
|
||||
// any of these places
|
||||
|
||||
var useQuarters = (axis.options.tickSize && |
||||
axis.options.tickSize[1] == "quarter") || |
||||
(axis.options.minTickSize && |
||||
axis.options.minTickSize[1] == "quarter"); |
||||
|
||||
var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; |
||||
var span = axis.max - axis.min; |
||||
var suffix = (opts.twelveHourClock) ? " %p" : ""; |
||||
var hourCode = (opts.twelveHourClock) ? "%I" : "%H"; |
||||
var fmt; |
||||
|
||||
if (t < timeUnitSize.minute) { |
||||
fmt = hourCode + ":%M:%S" + suffix; |
||||
} else if (t < timeUnitSize.day) { |
||||
if (span < 2 * timeUnitSize.day) { |
||||
fmt = hourCode + ":%M" + suffix; |
||||
} else { |
||||
fmt = "%b %d " + hourCode + ":%M" + suffix; |
||||
} |
||||
} else if (t < timeUnitSize.month) { |
||||
fmt = "%b %d"; |
||||
} else if ((useQuarters && t < timeUnitSize.quarter) || |
||||
(!useQuarters && t < timeUnitSize.year)) { |
||||
if (span < timeUnitSize.year) { |
||||
fmt = "%b"; |
||||
} else { |
||||
fmt = "%b %Y"; |
||||
} |
||||
} else if (useQuarters && t < timeUnitSize.year) { |
||||
if (span < timeUnitSize.year) { |
||||
fmt = "Q%q"; |
||||
} else { |
||||
fmt = "Q%q %Y"; |
||||
} |
||||
} else { |
||||
fmt = "%Y"; |
||||
} |
||||
|
||||
var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames); |
||||
|
||||
return rt; |
||||
}; |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
$.plot.plugins.push({ |
||||
init: init, |
||||
options: options, |
||||
name: 'time', |
||||
version: '1.0' |
||||
}); |
||||
|
||||
// Time-axis support used to be in Flot core, which exposed the
|
||||
// formatDate function on the plot object. Various plugins depend
|
||||
// on the function, so we need to re-expose it here.
|
||||
|
||||
$.plot.formatDate = formatDate; |
||||
|
||||
})(jQuery); |
||||
Loading…
Reference in new issue