Browse Source
* Install jquery and imports-loader for loading flot-plugins * Remove jquery from externals and load flot-plugins using imports-loader * Fix imports * Add flot-plugins to vendor/flotmaster
GitHub
16 changed files with 5395 additions and 112 deletions
@ -0,0 +1,178 @@
|
||||
/* 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. |
||||
*/ |
||||
|
||||
( |
||||
// the actual Flot code
|
||||
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); |
||||
@ -0,0 +1,238 @@
|
||||
/* |
||||
* 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]> |
||||
* } |
||||
* } |
||||
* } |
||||
*/ |
||||
( |
||||
// the actual Flot code
|
||||
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); |
||||
@ -0,0 +1,289 @@
|
||||
( |
||||
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); |
||||
@ -0,0 +1,226 @@
|
||||
/* 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); |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,379 @@
|
||||
/* 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', 0.8).toString(); |
||||
ctx.lineWidth = 1; |
||||
ctx.lineJoin = o.selection.shape; |
||||
ctx.fillStyle = c.scale('a', 0.4).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
|
||||
} |
||||
}, |
||||
name: 'selection', |
||||
version: '1.1' |
||||
}); |
||||
})(jQuery); |
||||
@ -0,0 +1,190 @@
|
||||
/* 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); |
||||
@ -0,0 +1,127 @@
|
||||
( |
||||
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); |
||||
@ -0,0 +1,432 @@
|
||||
/* 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