Convert remaining tabs to spaces

pull/1/head
Nick Schonning 13 years ago
parent 8e2f09a97c
commit 7c52f44431

@ -29,313 +29,313 @@ browser, but needs to redraw with canvas text when exporting as an image.
(function($) {
var options = {
canvas: true
};
var render, getTextInfo, addText;
function init(plot, classes) {
var Canvas = classes.Canvas;
// We only want to replace the functions once; the second time around
// we would just get our new function back. This whole replacing of
// prototype functions is a disaster, and needs to be changed ASAP.
if (render == null) {
getTextInfo = Canvas.prototype.getTextInfo,
addText = Canvas.prototype.addText,
render = Canvas.prototype.render;
}
// Finishes rendering the canvas, including overlaid text
Canvas.prototype.render = function() {
if (!plot.getOptions().canvas) {
return render.call(this);
}
var context = this.context,
cache = this._textCache;
// For each text layer, render elements marked as active
context.save();
context.textBaseline = "middle";
for (var layerKey in cache) {
if (Object.prototype.hasOwnProperty.call(cache, layerKey)) {
var layerCache = cache[layerKey];
for (var styleKey in layerCache) {
if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey],
updateStyles = true;
for (var key in styleCache) {
if (Object.prototype.hasOwnProperty.call(styleCache, key)) {
var info = styleCache[key],
positions = info.positions,
lines = info.lines;
// Since every element at this level of the cache have the
// same font and fill styles, we can just change them once
// using the values from the first element.
if (updateStyles) {
context.fillStyle = info.font.color;
context.font = info.font.definition;
updateStyles = false;
}
for (var i = 0, position; position = positions[i]; i++) {
if (position.active) {
for (var j = 0, line; line = position.lines[j]; j++) {
context.fillText(lines[j].text, line[0], line[1]);
}
} else {
positions.splice(i--, 1);
}
}
if (positions.length === 0) {
delete styleCache[key];
}
}
}
}
}
}
}
context.restore();
};
// Creates (if necessary) and returns a text info object.
//
// When the canvas option is set, the object looks like this:
//
// {
// width: Width of the text's bounding box.
// height: Height of the text's bounding box.
// positions: Array of positions at which this text is drawn.
// lines: [{
// height: Height of this line.
// widths: Width of this line.
// text: Text on this line.
// }],
// font: {
// definition: Canvas font property string.
// color: Color of the text.
// },
// }
//
// The positions array contains objects that look like this:
//
// {
// active: Flag indicating whether the text should be visible.
// lines: Array of [x, y] coordinates at which to draw the line.
// x: X coordinate at which to draw the text.
// y: Y coordinate at which to draw the text.
// }
Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
if (!plot.getOptions().canvas) {
return getTextInfo.call(this, layer, text, font, angle, width);
}
var textStyle, layerCache, styleCache, info;
// Cast the value to a string, in case we were given a number
text = "" + text;
// If the font is a font-spec object, generate a CSS definition
if (typeof font === "object") {
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family;
} else {
textStyle = font;
}
// Retrieve (or create) the cache for the text's layer and styles
layerCache = this._textCache[layer];
if (layerCache == null) {
layerCache = this._textCache[layer] = {};
}
styleCache = layerCache[textStyle];
if (styleCache == null) {
styleCache = layerCache[textStyle] = {};
}
info = styleCache[text];
if (info == null) {
var context = this.context;
// If the font was provided as CSS, create a div with those
// classes and examine it to generate a canvas font spec.
if (typeof font !== "object") {
var element = $("<div>&nbsp;</div>")
.css("position", "absolute")
.addClass(typeof font === "string" ? font : null)
.appendTo(this.getTextLayer(layer));
font = {
lineHeight: element.height(),
style: element.css("font-style"),
variant: element.css("font-variant"),
weight: element.css("font-weight"),
family: element.css("font-family"),
color: element.css("color")
};
var options = {
canvas: true
};
var render, getTextInfo, addText;
function init(plot, classes) {
var Canvas = classes.Canvas;
// We only want to replace the functions once; the second time around
// we would just get our new function back. This whole replacing of
// prototype functions is a disaster, and needs to be changed ASAP.
if (render == null) {
getTextInfo = Canvas.prototype.getTextInfo,
addText = Canvas.prototype.addText,
render = Canvas.prototype.render;
}
// Finishes rendering the canvas, including overlaid text
Canvas.prototype.render = function() {
if (!plot.getOptions().canvas) {
return render.call(this);
}
var context = this.context,
cache = this._textCache;
// For each text layer, render elements marked as active
context.save();
context.textBaseline = "middle";
for (var layerKey in cache) {
if (Object.prototype.hasOwnProperty.call(cache, layerKey)) {
var layerCache = cache[layerKey];
for (var styleKey in layerCache) {
if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey],
updateStyles = true;
for (var key in styleCache) {
if (Object.prototype.hasOwnProperty.call(styleCache, key)) {
var info = styleCache[key],
positions = info.positions,
lines = info.lines;
// Since every element at this level of the cache have the
// same font and fill styles, we can just change them once
// using the values from the first element.
if (updateStyles) {
context.fillStyle = info.font.color;
context.font = info.font.definition;
updateStyles = false;
}
for (var i = 0, position; position = positions[i]; i++) {
if (position.active) {
for (var j = 0, line; line = position.lines[j]; j++) {
context.fillText(lines[j].text, line[0], line[1]);
}
} else {
positions.splice(i--, 1);
}
}
if (positions.length === 0) {
delete styleCache[key];
}
}
}
}
}
}
}
context.restore();
};
// Creates (if necessary) and returns a text info object.
//
// When the canvas option is set, the object looks like this:
//
// {
// width: Width of the text's bounding box.
// height: Height of the text's bounding box.
// positions: Array of positions at which this text is drawn.
// lines: [{
// height: Height of this line.
// widths: Width of this line.
// text: Text on this line.
// }],
// font: {
// definition: Canvas font property string.
// color: Color of the text.
// },
// }
//
// The positions array contains objects that look like this:
//
// {
// active: Flag indicating whether the text should be visible.
// lines: Array of [x, y] coordinates at which to draw the line.
// x: X coordinate at which to draw the text.
// y: Y coordinate at which to draw the text.
// }
Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
if (!plot.getOptions().canvas) {
return getTextInfo.call(this, layer, text, font, angle, width);
}
var textStyle, layerCache, styleCache, info;
// Cast the value to a string, in case we were given a number
text = "" + text;
// If the font is a font-spec object, generate a CSS definition
if (typeof font === "object") {
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family;
} else {
textStyle = font;
}
// Retrieve (or create) the cache for the text's layer and styles
layerCache = this._textCache[layer];
if (layerCache == null) {
layerCache = this._textCache[layer] = {};
}
styleCache = layerCache[textStyle];
if (styleCache == null) {
styleCache = layerCache[textStyle] = {};
}
info = styleCache[text];
if (info == null) {
var context = this.context;
// If the font was provided as CSS, create a div with those
// classes and examine it to generate a canvas font spec.
if (typeof font !== "object") {
var element = $("<div>&nbsp;</div>")
.css("position", "absolute")
.addClass(typeof font === "string" ? font : null)
.appendTo(this.getTextLayer(layer));
font = {
lineHeight: element.height(),
style: element.css("font-style"),
variant: element.css("font-variant"),
weight: element.css("font-weight"),
family: element.css("font-family"),
color: element.css("color")
};
// Setting line-height to 1, without units, sets it equal
// to the font-size, even if the font-size is abstract,
// like 'smaller'. This enables us to read the real size
// via the element's height, working around browsers that
// return the literal 'smaller' value.
// Setting line-height to 1, without units, sets it equal
// to the font-size, even if the font-size is abstract,
// like 'smaller'. This enables us to read the real size
// via the element's height, working around browsers that
// return the literal 'smaller' value.
font.size = element.css("line-height", 1).height();
font.size = element.css("line-height", 1).height();
element.remove();
}
element.remove();
}
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family;
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family;
// Create a new info object, initializing the dimensions to
// zero so we can count them up line-by-line.
// Create a new info object, initializing the dimensions to
// zero so we can count them up line-by-line.
info = styleCache[text] = {
width: 0,
height: 0,
positions: [],
lines: [],
font: {
definition: textStyle,
color: font.color
}
};
info = styleCache[text] = {
width: 0,
height: 0,
positions: [],
lines: [],
font: {
definition: textStyle,
color: font.color
}
};
context.save();
context.font = textStyle;
context.save();
context.font = textStyle;
// Canvas can't handle multi-line strings; break on various
// newlines, including HTML brs, to build a list of lines.
// Note that we could split directly on regexps, but IE < 9 is
// broken; revisit when we drop IE 7/8 support.
// Canvas can't handle multi-line strings; break on various
// newlines, including HTML brs, to build a list of lines.
// Note that we could split directly on regexps, but IE < 9 is
// broken; revisit when we drop IE 7/8 support.
var lines = (text + "").replace(/<br ?\/?>|\r\n|\r/g, "\n").split("\n");
var lines = (text + "").replace(/<br ?\/?>|\r\n|\r/g, "\n").split("\n");
for (var i = 0; i < lines.length; ++i) {
for (var i = 0; i < lines.length; ++i) {
var lineText = lines[i],
measured = context.measureText(lineText);
var lineText = lines[i],
measured = context.measureText(lineText);
info.width = Math.max(measured.width, info.width);
info.height += font.lineHeight;
info.width = Math.max(measured.width, info.width);
info.height += font.lineHeight;
info.lines.push({
text: lineText,
width: measured.width,
height: font.lineHeight
});
}
info.lines.push({
text: lineText,
width: measured.width,
height: font.lineHeight
});
}
context.restore();
}
context.restore();
}
return info;
};
return info;
};
// Adds a text string to the canvas text overlay.
// Adds a text string to the canvas text overlay.
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
if (!plot.getOptions().canvas) {
return addText.call(this, layer, x, y, text, font, angle, width, halign, valign);
}
if (!plot.getOptions().canvas) {
return addText.call(this, layer, x, y, text, font, angle, width, halign, valign);
}
var info = this.getTextInfo(layer, text, font, angle, width),
positions = info.positions,
lines = info.lines;
var info = this.getTextInfo(layer, text, font, angle, width),
positions = info.positions,
lines = info.lines;
// Text is drawn with baseline 'middle', which we need to account
// for by adding half a line's height to the y position.
// Text is drawn with baseline 'middle', which we need to account
// for by adding half a line's height to the y position.
y += info.height / lines.length / 2;
y += info.height / lines.length / 2;
// Tweak the initial y-position to match vertical alignment
// Tweak the initial y-position to match vertical alignment
if (valign === "middle") {
y = Math.round(y - info.height / 2);
} else if (valign === "bottom") {
y = Math.round(y - info.height);
} else {
y = Math.round(y);
}
// FIXME: LEGACY BROWSER FIX
// AFFECTS: Opera < 12.00
// Offset the y coordinate, since Opera is off pretty
// consistently compared to the other browsers.
if (!!(window.opera && window.opera.version().split(".")[0] < 12)) {
y -= 2;
}
// Determine whether this text already exists at this position.
// If so, mark it for inclusion in the next render pass.
for (var i = 0, position; position = positions[i]; i++) {
if (position.x === x && position.y === y) {
position.active = true;
return;
}
}
if (valign === "middle") {
y = Math.round(y - info.height / 2);
} else if (valign === "bottom") {
y = Math.round(y - info.height);
} else {
y = Math.round(y);
}
// FIXME: LEGACY BROWSER FIX
// AFFECTS: Opera < 12.00
// Offset the y coordinate, since Opera is off pretty
// consistently compared to the other browsers.
if (!!(window.opera && window.opera.version().split(".")[0] < 12)) {
y -= 2;
}
// Determine whether this text already exists at this position.
// If so, mark it for inclusion in the next render pass.
for (var i = 0, position; position = positions[i]; i++) {
if (position.x === x && position.y === y) {
position.active = true;
return;
}
}
// If the text doesn't exist at this position, create a new entry
position = {
active: true,
lines: [],
x: x,
y: y
};
positions.push(position);
// Fill in the x & y positions of each line, adjusting them
// individually for horizontal alignment.
for (var j = 0, line; line = lines[j]; j++) {
if (halign === "center") {
position.lines.push([Math.round(x - line.width / 2), y]);
} else if (halign === "right") {
position.lines.push([Math.round(x - line.width), y]);
} else {
position.lines.push([Math.round(x), y]);
}
y += line.height;
}
};
}
// If the text doesn't exist at this position, create a new entry
position = {
active: true,
lines: [],
x: x,
y: y
};
positions.push(position);
// Fill in the x & y positions of each line, adjusting them
// individually for horizontal alignment.
for (var j = 0, line; line = lines[j]; j++) {
if (halign === "center") {
position.lines.push([Math.round(x - line.width / 2), y]);
} else if (halign === "right") {
position.lines.push([Math.round(x - line.width), y]);
} else {
position.lines.push([Math.round(x), y]);
}
y += line.height;
}
};
}
$.plot.plugins.push({
init: init,
options: options,
name: "canvas",
version: "1.0"
});
$.plot.plugins.push({
init: init,
options: options,
name: "canvas",
version: "1.0"
});
})(jQuery);

@ -9,24 +9,24 @@ allows you to plot such a dataset directly.
To enable it, you must specify mode: "categories" on the axis with the textual
labels, e.g.
$.plot("#placeholder", data, { xaxis: { mode: "categories" } });
$.plot("#placeholder", data, { xaxis: { mode: "categories" } });
By default, the labels are ordered as they are met in the data series. If you
need a different ordering, you can specify "categories" on the axis options
and list the categories there:
xaxis: {
mode: "categories",
categories: ["February", "March", "April"]
}
xaxis: {
mode: "categories",
categories: ["February", "March", "April"]
}
If you need to customize the distances between the categories, you can specify
"categories" as an object mapping labels to values
xaxis: {
mode: "categories",
categories: { "February": 1, "March": 3, "April": 4 }
}
xaxis: {
mode: "categories",
categories: { "February": 1, "March": 3, "April": 4 }
}
If you don't specify all categories, the remaining categories will be numbered
from the max value plus 1 (with a spacing of 1 between each).

@ -5,11 +5,11 @@ Licensed under the MIT license.
The plugin supports these options:
crosshair: {
mode: null or "x" or "y" or "xy"
color: color
lineWidth: number
}
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
@ -39,19 +39,19 @@ The plugin also adds four public methods:
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();
}
});
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()

@ -15,44 +15,44 @@ your data array (*even* if you do not intend to plot them later, by setting
The plugin supports these options:
series: {
points: {
errorbars: "x" or "y" or "xy",
xerr: {
show: null/false or true,
asymmetric: null/false or true,
upperCap: null or "-" or function,
lowerCap: null or "-" or function,
color: null or color,
radius: null or number
},
yerr: { same options as xerr }
}
}
series: {
points: {
errorbars: "x" or "y" or "xy",
xerr: {
show: null/false or true,
asymmetric: null/false or true,
upperCap: null or "-" or function,
lowerCap: null or "-" or function,
color: null or color,
radius: null or number
},
yerr: { same options as xerr }
}
}
Each data point array is expected to be of the type:
"x" [ x, y, xerr ]
"y" [ x, y, yerr ]
"xy" [ x, y, xerr, yerr ]
"x" [ x, y, xerr ]
"y" [ x, y, yerr ]
"xy" [ x, y, xerr, yerr ]
Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
error-bars on X and asymmetric on Y would be:
[ x, y, xerr, yerr_lower, yerr_upper ]
[ x, y, xerr, yerr_lower, yerr_upper ]
By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
draw a small cap perpendicular to the error bar. They can also be set to a
user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.
function drawSemiCircle( ctx, x, y, radius ) {
ctx.beginPath();
ctx.arc( x, y, radius, 0, Math.PI, false );
ctx.moveTo( x - radius, y );
ctx.lineTo( x + radius, y );
ctx.stroke();
}
function drawSemiCircle( ctx, x, y, radius ) {
ctx.beginPath();
ctx.arc( x, y, radius, 0, Math.PI, false );
ctx.moveTo( x - radius, y );
ctx.lineTo( x + radius, y );
ctx.stroke();
}
Color and radius both default to the same ones of the points series if not
set. The independent radius parameter on xerr/yerr is useful for the case when

@ -10,12 +10,12 @@ 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
];
var dataset = [
{ data: [ ... ], id: "foo" } , // use default bottom
{ data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
];
$.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }});
$.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:
@ -31,196 +31,196 @@ jquery.flot.stack.js plugin, possibly some code could be shared.
(function ($) {
var options = {
series: {
fillBetween: null // or number
}
};
var options = {
series: {
fillBetween: null // or number
}
};
function init(plot) {
function init(plot) {
function findBottomSeries(s, allseries) {
function findBottomSeries(s, allseries) {
var i;
var i;
for (i = 0; i < allseries.length; ++i) {
if (allseries[i].id === s.fillBetween) {
return allseries[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];
}
if (typeof s.fillBetween === "number") {
if (s.fillBetween < 0 || s.fillBetween >= allseries.length) {
return null;
}
return allseries[s.fillBetween];
}
return null;
}
return null;
}
function computeFillBottoms(plot, s, datapoints) {
function computeFillBottoms(plot, s, datapoints) {
if (s.fillBetween == null) {
return;
}
if (s.fillBetween == null) {
return;
}
var other = findBottomSeries(s, plot.getData());
var other = findBottomSeries(s, plot.getData());
if (!other) {
return;
}
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;
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) {
while (true) {
if (i >= points.length) {
break;
}
if (i >= points.length) {
break;
}
l = newpoints.length;
l = newpoints.length;
if (points[i] == null) {
if (points[i] == null) {
// copy gaps
// copy gaps
for (m = 0; m < ps; ++m) {
newpoints.push(points[i + m]);
}
for (m = 0; m < ps; ++m) {
newpoints.push(points[i + m]);
}
i += ps;
i += ps;
} else if (j >= otherpoints.length) {
} else if (j >= otherpoints.length) {
// for lines, we can't use the rest of the points
// for lines, we can't use the rest of the points
if (!withlines) {
for (m = 0; m < ps; ++m) {
newpoints.push(points[i + m]);
}
}
if (!withlines) {
for (m = 0; m < ps; ++m) {
newpoints.push(points[i + m]);
}
}
i += ps;
i += ps;
} else if (otherpoints[j] == null) {
} else if (otherpoints[j] == null) {
// oops, got a gap
// oops, got a gap
for (m = 0; m < ps; ++m) {
newpoints.push(null);
}
for (m = 0; m < ps; ++m) {
newpoints.push(null);
}
fromgap = true;
j += otherps;
fromgap = true;
j += otherps;
} else {
} else {
// cases where we actually got two points
// cases where we actually got two points
px = points[i];
py = points[i + 1];
qx = otherpoints[j];
qy = otherpoints[j + 1];
bottom = 0;
px = points[i];
py = points[i + 1];
qx = otherpoints[j];
qy = otherpoints[j + 1];
bottom = 0;
if (px === qx) {
if (px === qx) {
for (m = 0; m < ps; ++m) {
newpoints.push(points[i + m]);
}
for (m = 0; m < ps; ++m) {
newpoints.push(points[i + m]);
}
//newpoints[l + 1] += qy;
bottom = qy;
//newpoints[l + 1] += qy;
bottom = qy;
i += ps;
j += otherps;
i += ps;
j += otherps;
} else if (px > qx) {
} else if (px > qx) {
// we got past point below, might need to
// insert interpolated extra point
// 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;
}
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;
j += otherps;
} else { // px < qx
} else { // px < qx
// if we come from a gap, we just skip this point
// if we come from a gap, we just skip this point
if (fromgap && withlines) {
i += ps;
continue;
}
if (fromgap && withlines) {
i += ps;
continue;
}
for (m = 0; m < ps; ++m) {
newpoints.push(points[i + m]);
}
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
// 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);
}
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;
//newpoints[l + 1] += bottom;
i += ps;
}
i += ps;
}
fromgap = false;
fromgap = false;
if (l !== newpoints.length && withbottom) {
newpoints[l + 2] = bottom;
}
}
if (l !== newpoints.length && withbottom) {
newpoints[l + 2] = bottom;
}
}
// maintain the line steps invariant
// 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];
}
}
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;
}
datapoints.points = newpoints;
}
plot.hooks.processDatapoints.push(computeFillBottoms);
}
plot.hooks.processDatapoints.push(computeFillBottoms);
}
$.plot.plugins.push({
init: init,
options: options,
name: "fillbetween",
version: "1.0"
});
$.plot.plugins.push({
init: init,
options: options,
name: "fillbetween",
version: "1.0"
});
})(jQuery);

@ -11,7 +11,7 @@ with new Image()). If the image is not complete, it's skipped when plotting.
There are two helpers included for retrieving images. The easiest work the way
that you put in URLs instead of images in the data, like this:
[ "myimage.png", 0, 0, 10, 10 ]
[ "myimage.png", 0, 0, 10, 10 ]
Then call $.plot.image.loadData( data, options, callback ) where data and
options are the same as you pass in to $.plot. This loads the images, replaces
@ -25,20 +25,20 @@ Image object when all images are loaded or have failed loading.
The plugin supports these options:
series: {
images: {
show: boolean
anchor: "corner" or "center"
alpha: [ 0, 1 ]
}
}
series: {
images: {
show: boolean
anchor: "corner" or "center"
alpha: [ 0, 1 ]
}
}
They can be specified for a specific series:
$.plot( $("#placeholder"), [{
data: [ ... ],
images: { ... }
])
$.plot( $("#placeholder"), [{
data: [ ... ],
images: { ... }
])
Note that because the data format is different from usual data points, you
can't use images with anything else in a specific data series.

@ -7,150 +7,150 @@ Licensed under the MIT license.
(function($) {
///////////////////////////////////////////////////////////////////////////
// The Canvas object is a wrapper around an HTML5 <canvas> tag.
//
// @constructor
// @param {string} cls List of classes to apply to the canvas.
// @param {element} container Element onto which to append the canvas.
//
// Requiring a container is a little iffy, but unfortunately canvas
// operations don't work unless the canvas is attached to the DOM.
///////////////////////////////////////////////////////////////////////////
// The Canvas object is a wrapper around an HTML5 <canvas> tag.
//
// @constructor
// @param {string} cls List of classes to apply to the canvas.
// @param {element} container Element onto which to append the canvas.
//
// Requiring a container is a little iffy, but unfortunately canvas
// operations don't work unless the canvas is attached to the DOM.
function Canvas(cls, container) {
function Canvas(cls, container) {
var element = container.children("." + cls)[0];
var element = container.children("." + cls)[0];
if (element == null) {
if (element == null) {
element = document.createElement("canvas");
element.className = cls;
element = document.createElement("canvas");
element.className = cls;
$(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
.appendTo(container);
$(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
.appendTo(container);
// If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas
// If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas
if (!element.getContext) {
if (window.G_vmlCanvasManager) {
element = window.G_vmlCanvasManager.initElement(element);
} else {
throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
}
}
}
if (!element.getContext) {
if (window.G_vmlCanvasManager) {
element = window.G_vmlCanvasManager.initElement(element);
} else {
throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
}
}
}
this.element = element;
this.element = element;
var context = this.context = element.getContext("2d");
var context = this.context = element.getContext("2d");
// Determine the screen's ratio of physical to device-independent
// pixels. This is the ratio between the canvas width that the browser
// advertises and the number of pixels actually present in that space.
// Determine the screen's ratio of physical to device-independent
// pixels. This is the ratio between the canvas width that the browser
// advertises and the number of pixels actually present in that space.
// The iPhone 4, for example, has a device-independent width of 320px,
// but its screen is actually 640px wide. It therefore has a pixel
// ratio of 2, while most normal devices have a ratio of 1.
// The iPhone 4, for example, has a device-independent width of 320px,
// but its screen is actually 640px wide. It therefore has a pixel
// ratio of 2, while most normal devices have a ratio of 1.
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio =
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio =
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
this.pixelRatio = devicePixelRatio / backingStoreRatio;
this.pixelRatio = devicePixelRatio / backingStoreRatio;
// Size the canvas to match the internal dimensions of its container
// Size the canvas to match the internal dimensions of its container
this.resize(container.width(), container.height());
this.resize(container.width(), container.height());
// Collection of HTML div layers for text overlaid onto the canvas
// Collection of HTML div layers for text overlaid onto the canvas
this.textContainer = null;
this.text = {};
this.textContainer = null;
this.text = {};
// Cache of text fragments and metrics, so we can avoid expensively
// re-calculating them when the plot is re-rendered in a loop.
// Cache of text fragments and metrics, so we can avoid expensively
// re-calculating them when the plot is re-rendered in a loop.
this._textCache = {};
}
this._textCache = {};
}
// Resizes the canvas to the given dimensions.
//
// @param {number} width New width of the canvas, in pixels.
// @param {number} width New height of the canvas, in pixels.
// Resizes the canvas to the given dimensions.
//
// @param {number} width New width of the canvas, in pixels.
// @param {number} width New height of the canvas, in pixels.
Canvas.prototype.resize = function(width, height) {
Canvas.prototype.resize = function(width, height) {
if (width <= 0 || height <= 0) {
throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
}
if (width <= 0 || height <= 0) {
throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
}
var element = this.element,
context = this.context,
pixelRatio = this.pixelRatio;
var element = this.element,
context = this.context,
pixelRatio = this.pixelRatio;
// Resize the canvas, increasing its density based on the display's
// pixel ratio; basically giving it more pixels without increasing the
// size of its element, to take advantage of the fact that retina
// displays have that many more pixels in the same advertised space.
// Resize the canvas, increasing its density based on the display's
// pixel ratio; basically giving it more pixels without increasing the
// size of its element, to take advantage of the fact that retina
// displays have that many more pixels in the same advertised space.
// Resizing should reset the state (excanvas seems to be buggy though)
// Resizing should reset the state (excanvas seems to be buggy though)
if (this.width !== width) {
element.width = width * pixelRatio;
element.style.width = width + "px";
this.width = width;
}
if (this.width !== width) {
element.width = width * pixelRatio;
element.style.width = width + "px";
this.width = width;
}
if (this.height !== height) {
element.height = height * pixelRatio;
element.style.height = height + "px";
this.height = height;
}
if (this.height !== height) {
element.height = height * pixelRatio;
element.style.height = height + "px";
this.height = height;
}
// Save the context, so we can reset in case we get replotted. The
// restore ensure that we're really back at the initial state, and
// should be safe even if we haven't saved the initial state yet.
// Save the context, so we can reset in case we get replotted. The
// restore ensure that we're really back at the initial state, and
// should be safe even if we haven't saved the initial state yet.
context.restore();
context.save();
context.restore();
context.save();
// Scale the coordinate space to match the display density; so even though we
// may have twice as many pixels, we still want lines and other drawing to
// appear at the same size; the extra pixels will just make them crisper.
// Scale the coordinate space to match the display density; so even though we
// may have twice as many pixels, we still want lines and other drawing to
// appear at the same size; the extra pixels will just make them crisper.
context.scale(pixelRatio, pixelRatio);
};
context.scale(pixelRatio, pixelRatio);
};
// Clears the entire canvas area, not including any overlaid HTML text
// Clears the entire canvas area, not including any overlaid HTML text
Canvas.prototype.clear = function() {
this.context.clearRect(0, 0, this.width, this.height);
};
Canvas.prototype.clear = function() {
this.context.clearRect(0, 0, this.width, this.height);
};
// Finishes rendering the canvas, including managing the text overlay.
// Finishes rendering the canvas, including managing the text overlay.
Canvas.prototype.render = function() {
Canvas.prototype.render = function() {
var cache = this._textCache;
var cache = this._textCache;
// For each text layer, add elements marked as active that haven't
// already been rendered, and remove those that are no longer active.
// For each text layer, add elements marked as active that haven't
// already been rendered, and remove those that are no longer active.
for (var layerKey in cache) {
if (Object.prototype.hasOwnProperty.call(cache, layerKey)) {
for (var layerKey in cache) {
if (Object.prototype.hasOwnProperty.call(cache, layerKey)) {
var layer = this.getTextLayer(layerKey),
layerCache = cache[layerKey];
var layer = this.getTextLayer(layerKey),
layerCache = cache[layerKey];
layer.hide();
layer.hide();
for (var styleKey in layerCache) {
if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey];
for (var styleKey in layerCache) {
if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey];
for (var angleKey in styleCache) {
if (Object.prototype.hasOwnProperty.call(styleCache, angleKey)) {
var angleCache = styleCache[angleKey];
@ -178,126 +178,126 @@ Licensed under the MIT license.
}
}
}
}
}
}
}
layer.show();
}
}
};
// Creates (if necessary) and returns the text overlay container.
//
// @param {string} classes String of space-separated CSS classes used to
// uniquely identify the text layer.
// @return {object} The jQuery-wrapped text-layer div.
Canvas.prototype.getTextLayer = function(classes) {
var layer = this.text[classes];
// Create the text layer if it doesn't exist
if (layer == null) {
// Create the text layer container, if it doesn't exist
if (this.textContainer == null) {
this.textContainer = $("<div class='flot-text'></div>")
.css({
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
"font-size": "smaller",
color: "#545454"
})
.insertAfter(this.element);
}
layer = this.text[classes] = $("<div></div>")
.addClass(classes)
.css({
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
})
.appendTo(this.textContainer);
}
return layer;
};
// Creates (if necessary) and returns a text info object.
//
// The object looks like this:
//
// {
// width: Width of the text's wrapper div.
// height: Height of the text's wrapper div.
// element: The jQuery-wrapped HTML div containing the text.
// positions: Array of positions at which this text is drawn.
// }
//
// The positions array contains objects that look like this:
//
// {
// active: Flag indicating whether the text should be visible.
// rendered: Flag indicating whether the text is currently visible.
// element: The jQuery-wrapped HTML div containing the text.
// x: X coordinate at which to draw the text.
// y: Y coordinate at which to draw the text.
// }
//
// Each position after the first receives a clone of the original element.
//
// The idea is that that the width, height, and general 'identity' of the
// text is constant no matter where it is placed; the placements are a
// secondary property.
//
// Canvas maintains a cache of recently-used text info objects; getTextInfo
// either returns the cached element or creates a new entry.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {string} text Text string to retrieve info for.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which to rotate the text, in degrees.
// @param {number=} width Maximum width of the text before it wraps.
// @return {object} a text info object.
Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
}
}
}
}
layer.show();
}
}
};
// Creates (if necessary) and returns the text overlay container.
//
// @param {string} classes String of space-separated CSS classes used to
// uniquely identify the text layer.
// @return {object} The jQuery-wrapped text-layer div.
Canvas.prototype.getTextLayer = function(classes) {
var layer = this.text[classes];
// Create the text layer if it doesn't exist
if (layer == null) {
// Create the text layer container, if it doesn't exist
if (this.textContainer == null) {
this.textContainer = $("<div class='flot-text'></div>")
.css({
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
"font-size": "smaller",
color: "#545454"
})
.insertAfter(this.element);
}
layer = this.text[classes] = $("<div></div>")
.addClass(classes)
.css({
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
})
.appendTo(this.textContainer);
}
return layer;
};
// Creates (if necessary) and returns a text info object.
//
// The object looks like this:
//
// {
// width: Width of the text's wrapper div.
// height: Height of the text's wrapper div.
// element: The jQuery-wrapped HTML div containing the text.
// positions: Array of positions at which this text is drawn.
// }
//
// The positions array contains objects that look like this:
//
// {
// active: Flag indicating whether the text should be visible.
// rendered: Flag indicating whether the text is currently visible.
// element: The jQuery-wrapped HTML div containing the text.
// x: X coordinate at which to draw the text.
// y: Y coordinate at which to draw the text.
// }
//
// Each position after the first receives a clone of the original element.
//
// The idea is that that the width, height, and general 'identity' of the
// text is constant no matter where it is placed; the placements are a
// secondary property.
//
// Canvas maintains a cache of recently-used text info objects; getTextInfo
// either returns the cached element or creates a new entry.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {string} text Text string to retrieve info for.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which to rotate the text, in degrees.
// @param {number=} width Maximum width of the text before it wraps.
// @return {object} a text info object.
Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
var textStyle, layerCache, styleCache, angleCache, info;
text = "" + text; // Cast to string in case we have a number or such
angle = (360 + (angle || 0)) % 360; // Normalize the angle to 0...359
// If the font is a font-spec object, generate a CSS font definition
// If the font is a font-spec object, generate a CSS font definition
if (typeof font === "object") {
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;
} else {
textStyle = font;
}
if (typeof font === "object") {
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;
} else {
textStyle = font;
}
// Retrieve or create the caches for the text's layer, style, and angle
layerCache = this._textCache[layer];
if (layerCache == null) {
layerCache = this._textCache[layer] = {};
}
layerCache = this._textCache[layer];
if (layerCache == null) {
layerCache = this._textCache[layer] = {};
}
styleCache = layerCache[textStyle];
if (styleCache == null) {
styleCache = layerCache[textStyle] = {};
}
styleCache = layerCache[textStyle];
if (styleCache == null) {
styleCache = layerCache[textStyle] = {};
}
angleCache = styleCache[angle];
if (angleCache == null) {
@ -306,26 +306,26 @@ Licensed under the MIT license.
info = angleCache[text];
// If we can't find a matching element in our cache, create a new one
// If we can't find a matching element in our cache, create a new one
if (info == null) {
if (info == null) {
var element = $("<div></div>").html(text)
.css({
position: "absolute",
"max-width": width,
top: -9999
})
.appendTo(this.getTextLayer(layer));
var element = $("<div></div>").html(text)
.css({
position: "absolute",
"max-width": width,
top: -9999
})
.appendTo(this.getTextLayer(layer));
if (typeof font === "object") {
element.css({
font: textStyle,
color: font.color
});
} else if (typeof font === "string") {
element.addClass(font);
}
if (typeof font === "object") {
element.css({
font: textStyle,
color: font.color
});
} else if (typeof font === "string") {
element.addClass(font);
}
// Save the original dimensions of the text; we'll modify these
// later to take into account rotation, if there is any.
@ -435,119 +435,119 @@ Licensed under the MIT license.
textHeight = Math.round(as * originalWidth + ac * textHeight);
}
info = angleCache[text] = {
width: textWidth,
height: textHeight,
element: element,
positions: []
};
element.detach();
}
return info;
};
// Adds a text string to the canvas text overlay.
//
// The text isn't drawn immediately; it is marked as rendering, which will
// result in its addition to the canvas on the next render pass.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {number} x X coordinate at which to draw the text.
// @param {number} y Y coordinate at which to draw the text.
// @param {string} text Text string to draw.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which to rotate the text, in degrees.
// @param {number=} width Maximum width of the text before it wraps.
// @param {string=} halign Horizontal alignment of the text; either "left",
// "center" or "right".
// @param {string=} valign Vertical alignment of the text; either "top",
// "middle" or "bottom".
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
var info = this.getTextInfo(layer, text, font, angle, width),
positions = info.positions;
// Tweak the div's position to match the text's alignment
if (halign === "center") {
x -= info.width / 2;
} else if (halign === "right") {
x -= info.width;
}
if (valign === "middle") {
y -= info.height / 2;
} else if (valign === "bottom") {
y -= info.height;
}
// Determine whether this text already exists at this position.
// If so, mark it for inclusion in the next render pass.
for (var i = 0, position; position = positions[i]; i++) {
if (position.x === x && position.y === y) {
position.active = true;
return;
}
}
// If the text doesn't exist at this position, create a new entry
// For the very first position we'll re-use the original element,
// while for subsequent ones we'll clone it.
position = {
active: true,
rendered: false,
element: positions.length ? info.element.clone() : info.element,
x: x,
y: y
};
positions.push(position);
// Move the element to its final position within the container
position.element.css({
top: Math.round(y),
left: Math.round(x),
"text-align": halign // In case the text wraps
});
};
// Removes one or more text strings from the canvas text overlay.
//
// If no parameters are given, all text within the layer is removed.
//
// Note that the text is not immediately removed; it is simply marked as
// inactive, which will result in its removal on the next render pass.
// This avoids the performance penalty for 'clear and redraw' behavior,
// where we potentially get rid of all text on a layer, but will likely
// add back most or all of it later, as when redrawing axes, for example.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {number=} x X coordinate of the text.
// @param {number=} y Y coordinate of the text.
// @param {string=} text Text string to remove.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which the text is rotated, in degrees.
// Angle is currently unused, it will be implemented in the future.
Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
var i, positions, position;
if (text == null) {
var layerCache = this._textCache[layer];
if (layerCache != null) {
for (var styleKey in layerCache) {
if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey];
info = angleCache[text] = {
width: textWidth,
height: textHeight,
element: element,
positions: []
};
element.detach();
}
return info;
};
// Adds a text string to the canvas text overlay.
//
// The text isn't drawn immediately; it is marked as rendering, which will
// result in its addition to the canvas on the next render pass.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {number} x X coordinate at which to draw the text.
// @param {number} y Y coordinate at which to draw the text.
// @param {string} text Text string to draw.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which to rotate the text, in degrees.
// @param {number=} width Maximum width of the text before it wraps.
// @param {string=} halign Horizontal alignment of the text; either "left",
// "center" or "right".
// @param {string=} valign Vertical alignment of the text; either "top",
// "middle" or "bottom".
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
var info = this.getTextInfo(layer, text, font, angle, width),
positions = info.positions;
// Tweak the div's position to match the text's alignment
if (halign === "center") {
x -= info.width / 2;
} else if (halign === "right") {
x -= info.width;
}
if (valign === "middle") {
y -= info.height / 2;
} else if (valign === "bottom") {
y -= info.height;
}
// Determine whether this text already exists at this position.
// If so, mark it for inclusion in the next render pass.
for (var i = 0, position; position = positions[i]; i++) {
if (position.x === x && position.y === y) {
position.active = true;
return;
}
}
// If the text doesn't exist at this position, create a new entry
// For the very first position we'll re-use the original element,
// while for subsequent ones we'll clone it.
position = {
active: true,
rendered: false,
element: positions.length ? info.element.clone() : info.element,
x: x,
y: y
};
positions.push(position);
// Move the element to its final position within the container
position.element.css({
top: Math.round(y),
left: Math.round(x),
"text-align": halign // In case the text wraps
});
};
// Removes one or more text strings from the canvas text overlay.
//
// If no parameters are given, all text within the layer is removed.
//
// Note that the text is not immediately removed; it is simply marked as
// inactive, which will result in its removal on the next render pass.
// This avoids the performance penalty for 'clear and redraw' behavior,
// where we potentially get rid of all text on a layer, but will likely
// add back most or all of it later, as when redrawing axes, for example.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {number=} x X coordinate of the text.
// @param {number=} y Y coordinate of the text.
// @param {string=} text Text string to remove.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which the text is rotated, in degrees.
// Angle is currently unused, it will be implemented in the future.
Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
var i, positions, position;
if (text == null) {
var layerCache = this._textCache[layer];
if (layerCache != null) {
for (var styleKey in layerCache) {
if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey];
for (var angleKey in styleCache) {
if (Object.prototype.hasOwnProperty.call(styleCache, angleKey)) {
var angleCache = styleCache[angleKey];
@ -561,21 +561,21 @@ Licensed under the MIT license.
}
}
}
}
}
}
} else {
positions = this.getTextInfo(layer, text, font, angle).positions;
for (i = 0; position = positions[i]; i++) {
if (position.x === x && position.y === y) {
position.active = false;
}
}
}
};
///////////////////////////////////////////////////////////////////////////
// The top-level container for the entire plot.
}
}
}
} else {
positions = this.getTextInfo(layer, text, font, angle).positions;
for (i = 0; position = positions[i]; i++) {
if (position.x === x && position.y === y) {
position.active = false;
}
}
}
};
///////////////////////////////////////////////////////////////////////////
// The top-level container for the entire plot.
function Plot(placeholder, data_, options_, plugins) {
// data is on the form:
@ -1892,21 +1892,21 @@ Licensed under the MIT license.
return ticks;
};
axis.tickFormatter = function (value, axis) {
axis.tickFormatter = function (value, axis) {
var factor = axis.tickDecimals ? Math.pow(10, axis.tickDecimals) : 1;
var formatted = "" + Math.round(value * factor) / factor;
var factor = axis.tickDecimals ? Math.pow(10, axis.tickDecimals) : 1;
var formatted = "" + Math.round(value * factor) / factor;
// If tickDecimals was specified, ensure that we have exactly that
// much precision; otherwise default to the value's own precision.
// If tickDecimals was specified, ensure that we have exactly that
// much precision; otherwise default to the value's own precision.
if (axis.tickDecimals != null) {
var decimal = formatted.indexOf(".");
var precision = decimal === -1 ? 0 : formatted.length - decimal - 1;
if (precision < axis.tickDecimals) {
return (precision ? formatted : formatted + ".") + ("" + factor).substr(1, axis.tickDecimals - precision);
}
}
if (axis.tickDecimals != null) {
var decimal = formatted.indexOf(".");
var precision = decimal === -1 ? 0 : formatted.length - decimal - 1;
if (precision < axis.tickDecimals) {
return (precision ? formatted : formatted + ".") + ("" + factor).substr(1, axis.tickDecimals - precision);
}
}
return formatted;
};

@ -10,22 +10,22 @@ plot.pan( offset ) so you easily can add custom controls. It also fires
The plugin supports these options:
zoom: {
interactive: false
trigger: "dblclick" // or "click" for single click
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
}
pan: {
interactive: false
cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer"
frameRate: 20
}
xaxis, yaxis, x2axis, y2axis: {
zoomRange: null // or [ number, number ] (min range, max range) or false
panRange: null // or [ number, number ] (min, max) or false
}
zoom: {
interactive: false
trigger: "dblclick" // or "click" for single click
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
}
pan: {
interactive: false
cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer"
frameRate: 20
}
xaxis, yaxis, x2axis, y2axis: {
zoomRange: null // or [ number, number ] (min range, max range) or false
panRange: null // or [ number, number ] (min, max) or false
}
"interactive" enables the built-in drag/click behaviour. If you enable
interactive for pan, then you'll have a basic plot that supports moving
@ -55,19 +55,19 @@ will be disabled.
Example API usage:
plot = $.plot(...);
plot = $.plot(...);
// zoom default amount in on the pixel ( 10, 20 )
plot.zoom({ center: { left: 10, top: 20 } });
// zoom default amount in on the pixel ( 10, 20 )
plot.zoom({ center: { left: 10, top: 20 } });
// zoom out again
plot.zoomOut({ center: { left: 10, top: 20 } });
// zoom out again
plot.zoomOut({ center: { left: 10, top: 20 } });
// zoom 200% in on the pixel (10, 20)
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
// zoom 200% in on the pixel (10, 20)
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
// pan 100 pixels to the left and 20 down
plot.pan({ left: -100, top: 20 })
// pan 100 pixels to the left and 20 down
plot.pan({ left: -100, top: 20 })
Here, "center" specifies where the center of the zooming should happen. Note
that this is defined in pixel space, not the space of the data points (you can

File diff suppressed because it is too large Load Diff

@ -6,10 +6,10 @@ 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
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".
@ -33,11 +33,11 @@ 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, ...
});
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
@ -58,7 +58,7 @@ The plugin allso adds the following methods to the plot object:
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({ 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

@ -14,16 +14,16 @@ 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)
}
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
}])
$.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).

@ -5,11 +5,11 @@ Licensed under the MIT license.
The symbols are accessed as strings through the standard symbol options:
series: {
points: {
symbol: "square" // or "diamond", "triangle", "cross"
}
}
series: {
points: {
symbol: "square" // or "diamond", "triangle", "cross"
}
}
*/

@ -5,30 +5,30 @@ Licensed under the MIT license.
The plugin supports these options:
series: {
threshold: {
below: number,
above: mumber,
color: colorspec
}
}
series: {
threshold: {
below: number,
above: mumber,
color: colorspec
}
}
It can also be applied to a single series, like this:
$.plot( $("#placeholder"), [{
data: [ ... ],
threshold: { ... }
}])
$.plot( $("#placeholder"), [{
data: [ ... ],
threshold: { ... }
}])
An array can be passed for multiple thresholding, like this:
threshold: [{
below: number1,
color: color1
},{
above: number2,
color: color2
}]
threshold: [{
below: number1,
color: color1
},{
above: number2,
color: color2
}]
These multiple threshold objects can be passed in any order since they are
sorted by the processing function.

@ -10,65 +10,65 @@ 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
}
};
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
// round to nearby lower multiple of base
function floorInBase(n, base) {
return base * Math.floor(n / 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.
// 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) {
function formatDate(d, fmt, monthNames, dayNames) {
if ($.isFunction(d.strftime)) {
return d.strftime(fmt);
}
if ($.isFunction(d.strftime)) {
return d.strftime(fmt);
}
var leftPad = function(n, pad) {
n = "" + n;
pad = "" + (pad == null ? "0" : pad);
return n.length === 1 ? pad + n : n;
};
var leftPad = function(n, pad) {
n = "" + n;
pad = "" + (pad == null ? "0" : pad);
return n.length === 1 ? pad + n : n;
};
var r = [],
escape = false,
hours = d.getHours(),
isAM = hours < 12;
var r = [],
escape = false,
hours = d.getHours(),
isAM = hours < 12;
if (monthNames == null) {
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
}
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"];
}
if (dayNames == null) {
dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
}
var hours12;
var hours12;
if (hours > 12) {
hours12 = hours - 12;
} else if (hours === 0) {
hours12 = 12;
} else {
hours12 = hours;
}
if (hours > 12) {
hours12 = hours - 12;
} else if (hours === 0) {
hours12 = 12;
} else {
hours12 = hours;
}
for (var i = 0; i < fmt.length; ++i) {
for (var i = 0; i < fmt.length; ++i) {
var c = fmt.charAt(i);
var c = fmt.charAt(i);
if (escape) {
switch (c) {
if (escape) {
switch (c) {
case "a":
c = "" + dayNames[d.getDay()];
break;
@ -119,342 +119,342 @@ API.txt for details.
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) {
$.each(plot.getAxes(), function(axisName, axis) {
var opts = axis.options;
if (opts.mode === "time") {
axis.tickGenerator = function(axis) {
var ticks = [],
d = dateGenerator(axis.min, opts),
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],
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)),
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,
v = Number.NaN,
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"),
t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]],
span = axis.max - axis.min,
suffix = (opts.twelveHourClock) ? " %p" : "",
hourCode = (opts.twelveHourClock) ? "%I" : "%H",
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;
}
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) {
$.each(plot.getAxes(), function(axisName, axis) {
var opts = axis.options;
if (opts.mode === "time") {
axis.tickGenerator = function(axis) {
var ticks = [],
d = dateGenerator(axis.min, opts),
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],
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)),
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,
v = Number.NaN,
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"),
t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]],
span = axis.max - axis.min,
suffix = (opts.twelveHourClock) ? " %p" : "",
hourCode = (opts.twelveHourClock) ? "%I" : "%H",
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…
Cancel
Save