From 17ceb51d919d5ce7e71b0529be75b80cf831f3ef Mon Sep 17 00:00:00 2001 From: Ivan Novikov Date: Fri, 18 Jan 2013 16:53:17 +0400 Subject: [PATCH 001/419] flot.threshold: insert generated series after original, not in the end Thus, prevent it from becoming topmost (it may cause strange looks if original series is not topmost: some part of it becomes topmost and overwrites some lines and points that should be above it instead). --- jquery.flot.threshold.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/jquery.flot.threshold.js b/jquery.flot.threshold.js index 70ac8f4a8..f265bc247 100644 --- a/jquery.flot.threshold.js +++ b/jquery.flot.threshold.js @@ -103,8 +103,11 @@ You may need to check for this in hover events. datapoints.points = newpoints; thresholded.datapoints.points = threspoints; - if (thresholded.datapoints.points.length > 0) - plot.getData().push(thresholded); + if (thresholded.datapoints.points.length > 0) { + var origIndex = $.inArray(s, plot.getData()); + // Insert newly-generated series right after original one (to prevent it from becoming top-most) + plot.getData().splice(origIndex + 1, 0, thresholded); + } // FIXME: there are probably some edge cases left in bars } From f66c9ae3d625c18e4a3d09ca8ccc97ee4f28bee9 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Mon, 24 Dec 2012 18:44:18 -0500 Subject: [PATCH 002/419] Renamed the 'canvas' variable to 'surface'. Renaming the variable gives us room to create a new class called Canvas. --- jquery.flot.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 918352a5c..157d9d90f 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -148,7 +148,7 @@ Licensed under the MIT license. }, hooks: {} }, - canvas = null, // the canvas for the plot itself + surface = null, // the canvas for the plot itself overlay = null, // canvas for interactive stuff on top of plot eventHolder = null, // jQuery object that events should be bound to ctx = null, octx = null, @@ -175,7 +175,7 @@ Licensed under the MIT license. plot.setupGrid = setupGrid; plot.draw = draw; plot.getPlaceholder = function() { return placeholder; }; - plot.getCanvas = function() { return canvas; }; + plot.getCanvas = function() { return surface; }; plot.getPlotOffset = function() { return plotOffset; }; plot.width = function () { return plotWidth; }; plot.height = function () { return plotHeight; }; @@ -211,7 +211,7 @@ Licensed under the MIT license. plot.shutdown = shutdown; plot.resize = function () { getCanvasDimensions(); - resizeCanvas(canvas); + resizeCanvas(surface); resizeCanvas(overlay); }; @@ -837,10 +837,10 @@ Licensed under the MIT license. function setupCanvases() { var reused, - existingCanvas = placeholder.children("canvas.flot-base"), + existingSurface = placeholder.children("canvas.flot-base"), existingOverlay = placeholder.children("canvas.flot-overlay"); - if (existingCanvas.length == 0 || existingOverlay == 0) { + if (existingSurface.length == 0 || existingOverlay == 0) { // init everything placeholder.html(""); // make sure placeholder is clear @@ -852,7 +852,7 @@ Licensed under the MIT license. getCanvasDimensions(); - canvas = makeCanvas("flot-base"); + surface = makeCanvas("flot-base"); overlay = makeCanvas("flot-overlay"); // overlay canvas for interactive features reused = false; @@ -860,13 +860,13 @@ Licensed under the MIT license. else { // reuse existing elements - canvas = existingCanvas.get(0); + surface = existingSurface.get(0); overlay = existingOverlay.get(0); reused = true; } - ctx = canvas.getContext("2d"); + ctx = surface.getContext("2d"); octx = overlay.getContext("2d"); // define which element we're listening for events on @@ -884,7 +884,7 @@ Licensed under the MIT license. // then whack any remaining obvious garbage left eventHolder.unbind(); - placeholder.children().not([canvas, overlay]).remove(); + placeholder.children().not([surface, overlay]).remove(); } // save in case we get replotted From a9be4d559da2507c15f5a8231489c178dbfc47bc Mon Sep 17 00:00:00 2001 From: David Schnur Date: Mon, 24 Dec 2012 20:01:07 -0500 Subject: [PATCH 003/419] Abstract-out canvas creation into an object. Moved canvas creation and size management into a new Canvas class. This is the first step towards a more object-oriented architecture. Since we create multiple canvases, and have to maintain several module-global variables to track their properties, they are the ideal place to start. This commit also removes sizing code that was duplicated between makeCanvas and resizeCanvas. --- jquery.flot.js | 270 +++++++++++++++++++++++++------------------------ 1 file changed, 140 insertions(+), 130 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 157d9d90f..0e1540758 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -33,6 +33,121 @@ Licensed under the MIT license. // the actual Flot code (function($) { + + /////////////////////////////////////////////////////////////////////////// + // The Canvas object is a wrapper around an HTML5 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) { + + var element = document.createElement("canvas"); + element.className = cls; + + $(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 }) + .data("canvas", this) + .appendTo(container); + + // If HTML5 Canvas isn't available, fall back to Excanvas + + 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."); + } + } + + var context = element.getContext("2d"); + + this.element = element; + this.context = context; + + // 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. + + var devicePixelRatio = window.devicePixelRatio || 1, + backingStoreRatio = + context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + + this.pixelRatio = devicePixelRatio / backingStoreRatio; + + // Size the canvas to match the internal dimensions of its container + + this.resize(container.width(), container.height()); + }; + + // 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) { + + 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; + + // Resize the canvas, increasing its density based on the display's + // pixel ratio; basically giving it more pixels without increasing the + // size of its element, to take advantage of the fact that retina + // displays have that many more pixels in the same advertised space. + + // Resizing should reset the state (excanvas seems to be buggy though) + + if (this.width != width) { + element.width = width * pixelRatio; + element.style.width = width + "px"; + this.width = width; + } + + if (this.height != height) { + element.height = height * pixelRatio; + element.style.height = height + "px"; + this.height = height; + } + + // Save the context, so we can reset in case we get replotted. The + // restore ensure that we're really back at the initial state, and + // should be safe even if we haven't saved the initial state yet. + + context.restore(); + context.save(); + + // Scale the coordinate space to match the display density; so even though we + // may have twice as many pixels, we still want lines and other drawing to + // appear at the same size; the extra pixels will just make them crisper. + + context.scale(pixelRatio, pixelRatio); + } + + // Clears the entire canvas area. + + Canvas.prototype.clear = function() { + this.context.clearRect(0, 0, this.width, this.height); + } + + /////////////////////////////////////////////////////////////////////////// + // The top-level container for the entire plot. + function Plot(placeholder, data_, options_, plugins) { // data is on the form: // [ series1, series2 ... ] @@ -154,7 +269,6 @@ Licensed under the MIT license. ctx = null, octx = null, xaxes = [], yaxes = [], plotOffset = { left: 0, right: 0, top: 0, bottom: 0}, - canvasWidth = 0, canvasHeight = 0, plotWidth = 0, plotHeight = 0, hooks = { processOptions: [], @@ -175,7 +289,7 @@ Licensed under the MIT license. plot.setupGrid = setupGrid; plot.draw = draw; plot.getPlaceholder = function() { return placeholder; }; - plot.getCanvas = function() { return surface; }; + plot.getCanvas = function() { return surface.element; }; plot.getPlotOffset = function() { return plotOffset; }; plot.width = function () { return plotWidth; }; plot.height = function () { return plotHeight; }; @@ -210,9 +324,10 @@ Licensed under the MIT license. }; plot.shutdown = shutdown; plot.resize = function () { - getCanvasDimensions(); - resizeCanvas(surface); - resizeCanvas(overlay); + var width = placeholder.width(), + height = placeholder.height(); + surface.resize(width, height); + overlay.resize(width, height); }; // public attributes @@ -730,111 +845,6 @@ Licensed under the MIT license. }); } - ////////////////////////////////////////////////////////////////////////////////// - // Returns the display's ratio between physical and device-independent pixels. - // - // This is the ratio between the width that the browser advertises and the number - // of pixels actually available 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. - - function getPixelRatio(cctx) { - var devicePixelRatio = window.devicePixelRatio || 1; - var backingStoreRatio = - cctx.webkitBackingStorePixelRatio || - cctx.mozBackingStorePixelRatio || - cctx.msBackingStorePixelRatio || - cctx.oBackingStorePixelRatio || - cctx.backingStorePixelRatio || 1; - - return devicePixelRatio / backingStoreRatio; - } - - function makeCanvas(cls) { - - var c = document.createElement('canvas'); - c.className = cls; - - $(c).css({ direction: "ltr", position: "absolute", left: 0, top: 0 }) - .appendTo(placeholder); - - // If HTML5 Canvas isn't available, fall back to Excanvas - - if (!c.getContext) { - if (window.G_vmlCanvasManager) { - c = window.G_vmlCanvasManager.initElement(c); - } 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."); - } - } - - var cctx = c.getContext("2d"); - - // Increase the canvas density based on the display's pixel ratio; basically - // giving the canvas more pixels without increasing the size of its element, - // to take advantage of the fact that retina displays have that many more - // pixels than they actually use for page & element widths. - - var pixelRatio = getPixelRatio(cctx); - - c.width = canvasWidth * pixelRatio; - c.height = canvasHeight * pixelRatio; - c.style.width = canvasWidth + "px"; - c.style.height = canvasHeight + "px"; - - // Save the context so we can reset in case we get replotted - - cctx.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. - - cctx.scale(pixelRatio, pixelRatio); - - return c; - } - - function getCanvasDimensions() { - canvasWidth = placeholder.width(); - canvasHeight = placeholder.height(); - - if (canvasWidth <= 0 || canvasHeight <= 0) - throw new Error("Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight); - } - - function resizeCanvas(c) { - - var cctx = c.getContext("2d"); - - // Handle pixel ratios > 1 for retina displays, as explained in makeCanvas - - var pixelRatio = getPixelRatio(cctx); - - // Resizing should reset the state (excanvas seems to be buggy though) - - if (c.style.width != canvasWidth) { - c.width = canvasWidth * pixelRatio; - c.style.width = canvasWidth + "px"; - } - - if (c.style.height != canvasHeight) { - c.height = canvasHeight * pixelRatio; - c.style.height = canvasHeight + "px"; - } - - // so try to get back to the initial state (even if it's - // gone now, this should be safe according to the spec) - cctx.restore(); - - // and save again - cctx.save(); - - // Apply scaling for retina displays, as explained in makeCanvas - - cctx.scale(pixelRatio, pixelRatio); - } - function setupCanvases() { var reused, existingSurface = placeholder.children("canvas.flot-base"), @@ -850,27 +860,25 @@ Licensed under the MIT license. if (placeholder.css("position") == 'static') placeholder.css("position", "relative"); // for positioning labels and overlay - getCanvasDimensions(); - - surface = makeCanvas("flot-base"); - overlay = makeCanvas("flot-overlay"); // overlay canvas for interactive features + surface = new Canvas("flot-base", placeholder); + overlay = new Canvas("flot-overlay", placeholder); // overlay canvas for interactive features reused = false; } else { // reuse existing elements - surface = existingSurface.get(0); - overlay = existingOverlay.get(0); + surface = existingSurface.data("canvas"); + overlay = existingOverlay.data("canvas"); reused = true; } - ctx = surface.getContext("2d"); - octx = overlay.getContext("2d"); + ctx = surface.context; + octx = overlay.context; // define which element we're listening for events on - eventHolder = $(overlay); + eventHolder = $(overlay.element); if (reused) { // run shutdown in the old plot object @@ -880,11 +888,12 @@ Licensed under the MIT license. plot.resize(); // make sure overlay pixels are cleared (canvas is cleared when we redraw) - octx.clearRect(0, 0, canvasWidth, canvasHeight); + + overlay.clear(); // then whack any remaining obvious garbage left eventHolder.unbind(); - placeholder.children().not([surface, overlay]).remove(); + placeholder.children().not([surface.element, overlay.element]).remove(); } // save in case we get replotted @@ -1053,7 +1062,7 @@ Licensed under the MIT license. if (pos == "bottom") { plotOffset.bottom += lh + axisMargin; - axis.box = { top: canvasHeight - plotOffset.bottom, height: lh }; + axis.box = { top: surface.height - plotOffset.bottom, height: lh }; } else { axis.box = { top: plotOffset.top + axisMargin, height: lh }; @@ -1069,7 +1078,7 @@ Licensed under the MIT license. } else { plotOffset.right += lw + axisMargin; - axis.box = { left: canvasWidth - plotOffset.right, width: lw }; + axis.box = { left: surface.width - plotOffset.right, width: lw }; } } @@ -1085,11 +1094,11 @@ Licensed under the MIT license. // dimension, we can set the remaining dimension coordinates if (axis.direction == "x") { axis.box.left = plotOffset.left - axis.labelWidth / 2; - axis.box.width = canvasWidth - plotOffset.left - plotOffset.right + axis.labelWidth; + axis.box.width = surface.width - plotOffset.left - plotOffset.right + axis.labelWidth; } else { axis.box.top = plotOffset.top - axis.labelHeight / 2; - axis.box.height = canvasHeight - plotOffset.bottom - plotOffset.top + axis.labelHeight; + axis.box.height = surface.height - plotOffset.bottom - plotOffset.top + axis.labelHeight; } } @@ -1198,8 +1207,8 @@ Licensed under the MIT license. }); } - plotWidth = canvasWidth - plotOffset.left - plotOffset.right; - plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top; + plotWidth = surface.width - plotOffset.left - plotOffset.right; + plotHeight = surface.height - plotOffset.bottom - plotOffset.top; // now we got the proper plot dimensions, we can compute the scaling $.each(axes, function (_, axis) { @@ -1258,7 +1267,7 @@ Licensed under the MIT license. else // heuristic based on the model a*sqrt(x) fitted to // some data points that seemed reasonable - noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? canvasWidth : canvasHeight); + noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? surface.width : surface.height); axis.delta = (axis.max - axis.min) / noTicks; @@ -1429,7 +1438,8 @@ Licensed under the MIT license. } function draw() { - ctx.clearRect(0, 0, canvasWidth, canvasHeight); + + surface.clear(); executeHooks(hooks.drawBackground, [ctx]); @@ -2543,7 +2553,7 @@ Licensed under the MIT license. // draw highlights octx.save(); - octx.clearRect(0, 0, canvasWidth, canvasHeight); + overlay.clear(); octx.translate(plotOffset.left, plotOffset.top); var i, hi; From 42d5592add1d96ec93a37d62a6b49dd88ce1d94e Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 13 Jan 2013 10:08:06 -0500 Subject: [PATCH 004/419] Added a basic frame for the canvas-drawing plugin. --- jquery.flot.canvas.js | 68 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 jquery.flot.canvas.js diff --git a/jquery.flot.canvas.js b/jquery.flot.canvas.js new file mode 100644 index 000000000..8a006837c --- /dev/null +++ b/jquery.flot.canvas.js @@ -0,0 +1,68 @@ +/* Flot plugin for drawing all elements of a plot on the canvas. + +Copyright (c) 2007-2012 IOLA and Ole Laursen. +Licensed under the MIT license. + +Flot normally produces certain elements, like axis labels and the legend, using +HTML elements. This permits greater interactivity and customization, and often +looks better, due to cross-browser canvas text inconsistencies and limitations. + +It can also be desirable to render the plot entirely in canvas, particularly +if the goal is to save it as an image, or if Flot is being used in a context +where the HTML DOM does not exist, as is the case within Node.js. This plugin +switches out Flot's standard drawing operations for canvas-only replacements. + +Currently the plugin supports only axis labels, but it will eventually allow +every element of the plot to be rendered directly to canvas. + +The plugin supports these options: + + canvas: boolean, + xaxis, yaxis: { + font: null or font spec object + } + +The top-level "canvas" option controls whether full canvas drawing is enabled, +making it easy to toggle on and off. + +By default the plugin extracts font settings from the same CSS styles that the +default HTML text implementation uses. If *.tickLabel* has a *font-size* of +20px, then the canvas text will be drawn at the same size. + +One can also use the "font" option to control these properties directly. The +format of the font spec object is as follows: + + { + size: 11, + style: "italic", + weight: "bold", + family: "sans-serif", + variant: "small-caps" + } + +*/ + +(function($) { + + var options = { + canvas: true, + xaxis: { + font: null + }, + yaxis: { + font: null + } + }; + + function init(plot) { + + } + + $.plot.plugins.push({ + init: init, + options: options, + name: "canvas", + version: "1.0" + }); + +})(jQuery); From edc2bbd9922999ddcde3303bfdb629cda8a46f09 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Fri, 18 Jan 2013 16:08:14 -0500 Subject: [PATCH 005/419] Added methods to draw and measure text. These methods provide a common way to draw HTML text above a canvas. The getTextInfo method generates div HTML for text with a given font style/class and angle, measures the element's dimensions, and saves everything in a cache. The drawText method takes the resulting entry, finishes generating the inline styles necessary to position the div, and adds the result to a buffer. The render method dumps the buffer into an overlay and expires unused cache entries. --- jquery.flot.js | 197 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 194 insertions(+), 3 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 0e1540758..f9c5b7dd9 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -46,8 +46,11 @@ Licensed under the MIT license. function Canvas(cls, container) { + this.container = container; + var element = document.createElement("canvas"); element.className = cls; + this.element = element; $(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 }) .data("canvas", this) @@ -64,8 +67,6 @@ Licensed under the MIT license. } var context = element.getContext("2d"); - - this.element = element; this.context = context; // Determine the screen's ratio of physical to device-independent @@ -89,6 +90,31 @@ Licensed under the MIT license. // Size the canvas to match the internal dimensions of its container this.resize(container.width(), container.height()); + + // Container for HTML text overlaid onto the canvas; created on demand + + this.text = null; + + // Buffer for HTML text fragments, so we can add them all at once + + this._textBuffer = ""; + + // 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 = {}; + + // A 'hot' copy of the text cache; it holds only info that has been + // accessed in the past render cycle. With each render it is saved as + // the new text cache, as an alternative to more complicated ways of + // expiring items that are no longer needed. + + // NOTE: It's unclear how this compares performance-wise to keeping a + // single cache and looping over it to delete expired items. This way + // is certainly less operations, but seems like it might result in more + // garbage collection and possibly increased cache-insert times. + + this._activeTextCache = {}; }; // Resizes the canvas to the given dimensions. @@ -139,10 +165,175 @@ Licensed under the MIT license. context.scale(pixelRatio, pixelRatio); } - // Clears the entire canvas area. + // Clears the entire canvas area, including overlaid text. Canvas.prototype.clear = function() { this.context.clearRect(0, 0, this.width, this.height); + if (this.text) { + this.text.empty(); + } + } + + // Finishes rendering the canvas, including populating the text overlay. + + Canvas.prototype.render = function() { + + if (this._textBuffer.length) { + + // Add the HTML text layer, if it doesn't already exist + + if (!this.text) { + this.text = $("
").css({ + position: "absolute", + top: 0, + left: 0, + bottom: 0, + right: 0 + }).insertAfter(this.element); + } + + this.text.append(this._textBuffer); + this._textBuffer = ""; + } + + // Swap out the text cache for the 'hot cache' that we've been filling + // out since the last call to render. + + this._textCache = this._activeTextCache; + this._activeTextCache = {}; + } + + // Creates (if necessary) and returns a text info object. + // + // The object looks like this: + // + // { + // prefix: First half of the HTML for the text's div wrapper. + // suffix: Second half of the HTML for the text's div wrapper. + // dimensions: { + // width: Width of the text's wrapper div. + // height: Height of the text's wrapper div. + // } + // } + // + // The prefix and suffix are divided at the 'top' inline style definition, + // so the top and left positions can be added when creating the real div. + // + // Canvas maintains a cache of recently-used text info objects; getTextInfo + // either returns the cached element or creates a new entry. + // + // @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. + // Angle is currently unused, it will be implemented in the future. + // @return {object} a text info object. + + Canvas.prototype.getTextInfo = function(text, font, angle) { + + var textStyle, cacheKey, info; + + // Cast the value to a string, in case we were given a number or such + + text = "" + text; + + // If the font is a font-spec object, generate a CSS font definition + + if (typeof font === "object") { + textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family; + } else { + textStyle = font; + } + + // The text + style + angle uniquely identify the text's dimensions and + // content; we'll use them to build this entry's text cache key. + + cacheKey = text + "-" + textStyle + "-" + angle; + + info = this._textCache[cacheKey] || this._activeTextCache[cacheKey]; + + if (info == null) { + + var prefix, + suffix = "px;'>" + text + "", + element; + + // If the font is a font-spec object, generate an inline-style string + + if (typeof font === "object") { + prefix = "
Date: Fri, 18 Jan 2013 16:45:28 -0500 Subject: [PATCH 006/419] Provide a way for plugins to override classes. --- jquery.flot.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/jquery.flot.js b/jquery.flot.js index f9c5b7dd9..d6f330677 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -541,9 +541,16 @@ Licensed under the MIT license. } function initPlugins() { + + // References to key classes, allowing plugins to modify them + + var classes = { + Canvas: Canvas + }; + for (var i = 0; i < plugins.length; ++i) { var p = plugins[i]; - p.init(plot); + p.init(plot, classes); if (p.options) $.extend(true, options, p.options); } From a0529ee8b18d1b6dfe2079f528f999c3451252ff Mon Sep 17 00:00:00 2001 From: David Schnur Date: Fri, 18 Jan 2013 23:26:56 -0500 Subject: [PATCH 007/419] Moved canvas tick rendering into a plugin. The base implementation uses the new drawText and getTextInfo methods to draw text in HTML. Canvas rendering has been moved to overrides of these methods within the canvas-render plugin. --- jquery.flot.canvas.js | 262 +++++++++++++++++++++++++++++++++++++----- jquery.flot.js | 137 ++++++++-------------- 2 files changed, 280 insertions(+), 119 deletions(-) diff --git a/jquery.flot.canvas.js b/jquery.flot.canvas.js index 8a006837c..36e187316 100644 --- a/jquery.flot.canvas.js +++ b/jquery.flot.canvas.js @@ -17,45 +17,249 @@ every element of the plot to be rendered directly to canvas. The plugin supports these options: - canvas: boolean, - xaxis, yaxis: { - font: null or font spec object - } +{ + canvas: boolean +} -The top-level "canvas" option controls whether full canvas drawing is enabled, -making it easy to toggle on and off. - -By default the plugin extracts font settings from the same CSS styles that the -default HTML text implementation uses. If *.tickLabel* has a *font-size* of -20px, then the canvas text will be drawn at the same size. - -One can also use the "font" option to control these properties directly. The -format of the font spec object is as follows: - - { - size: 11, - style: "italic", - weight: "bold", - family: "sans-serif", - variant: "small-caps" - } +The "canvas" option controls whether full canvas drawing is enabled, making it +possible to toggle on and off. This is useful when a plot uses HTML text in the +browser, but needs to redraw with canvas text when exporting as an image. */ (function($) { var options = { - canvas: true, - xaxis: { - font: null - }, - yaxis: { - font: null - } + canvas: true }; - function init(plot) { + function init(plot, classes) { + + var Canvas = classes.Canvas, + getTextInfo = Canvas.prototype.getTextInfo, + drawText = Canvas.prototype.drawText; + + // Creates (if necessary) and returns a text info object. + // + // When the canvas option is set, this override returns an object + // that looks like this: + // + // { + // lines: { + // height: Height of each line in the text. + // widths: List of widths for each line in the text. + // texts: List of lines in the text. + // }, + // font: { + // definition: Canvas font property string. + // color: Color of the text. + // }, + // dimensions: { + // width: Width of the text's bounding box. + // height: Height of the text's bounding box. + // } + // } + + Canvas.prototype.getTextInfo = function(text, font, angle) { + if (plot.getOptions().canvas) { + + var textStyle, cacheKey, 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; + } + + // The text + style + angle uniquely identify the text's + // dimensions and content; we'll use them to build this entry's + // text cache key. + + cacheKey = text + "-" + textStyle + "-" + angle; + + info = this._textCache[cacheKey] || this._activeTextCache[cacheKey]; + + 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; + if (typeof font === "string") { + element = $("
" + text + "
") + .appendTo(this.container); + } else { + element = $("
" + text + "
") + .appendTo(this.container); + } + + font = { + style: element.css("font-style"), + variant: element.css("font-variant"), + weight: element.css("font-weight"), + size: parseInt(element.css("font-size")), + family: element.css("font-family"), + color: element.css("color") + }; + + textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family; + + element.remove(); + } + + // Create a new info object, initializing the dimensions to + // zero so we can count them up line-by-line. + + info = { + lines: [], + font: { + definition: textStyle, + color: font.color + }, + dimensions: { + width: 0, + height: 0 + } + }; + + 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. + + var lines = (text + "").replace(/
|\r\n|\r/g, "\n").split("\n"); + + for (var i = 0; i < lines.length; ++i) { + + var lineText = lines[i], + measured = context.measureText(lineText), + lineWidth, lineHeight; + + lineWidth = measured.width; + + // Height might not be defined; not in the standard yet + lineHeight = measured.height || font.size; + + // Add a bit of margin since font rendering is not + // pixel perfect and cut off letters look bad. This + // also doubles as spacing between lines. + + lineHeight += Math.round(font.size * 0.15); + + info.dimensions.width = Math.max(lineWidth, info.dimensions.width); + info.dimensions.height += lineHeight; + + info.lines.push({ + text: lineText, + width: lineWidth, + height: lineHeight + }); + } + + context.restore; + } + + // Save the entry to the 'hot' text cache, marking it as active + // and preserving it for the next render pass. + + this._activeTextCache[cacheKey] = info; + + return info; + + } else { + return getTextInfo.call(this, text, font, angle); + } + } + + // Draws a text string onto the canvas. + // + // When the canvas option is set, this override draws directly to the + // canvas using fillText. + + Canvas.prototype.drawText = function(x, y, text, font, angle, halign, valign) { + if (plot.getOptions().canvas) { + + var info = this.getTextInfo(text, font, angle), + dimensions = info.dimensions, + context = this.context, + lines = info.lines; + + // Apply alignment to the vertical position of the entire text + + if (valign == "middle") { + y -= dimensions.height / 2; + } else if (valign == "bottom") { + y -= dimensions.height; + } + + context.save(); + + context.fillStyle = info.font.color; + context.font = info.font.definition; + + // TODO: Comments in Ole's implementation indicate that some + // browsers differ in their interpretation of 'top'; so far I + // don't see this, but it requires more testing. We'll stick + // with top until this can be verified. Original comment was: + + // Top alignment would be more natural, but browsers can differ + // a pixel or two in where they consider the top to be, so + // instead we middle align to minimize variation between + // browsers and compensate when calculating the coordinates. + + context.textBaseline = "top"; + + for (var i = 0; i < lines.length; ++i) { + + var line = lines[i], + linex = x; + + // Apply alignment to the horizontal position per-line + + if (halign == "center") { + linex -= line.width / 2; + } else if (halign == "right") { + linex -= line.width; + } + + // FIXME: LEGACY BROWSER FIX + // AFFECTS: Opera < 12.00 + + // Round the coordinates, since Opera otherwise + // switches to more ugly rendering (probably + // non-hinted) and offset the y coordinates since + // it seems to be off pretty consistently compared + // to the other browsers + + if (!!(window.opera && window.opera.version().split(".")[0] < 12)) { + linex = Math.floor(linex); + y = Math.ceil(y - 2); + } + + context.fillText(line.text, linex, y); + y += line.height; + } + + context.restore(); + + } else { + drawText.call(this, x, y, text, font, angle, halign, valign); + } + } } $.plot.plugins.push({ diff --git a/jquery.flot.js b/jquery.flot.js index d6f330677..65715984a 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -34,6 +34,12 @@ Licensed under the MIT license. // the actual Flot code (function($) { + // Add default styles for tick labels and other text + + $(function() { + $("head").prepend(""); + }); + /////////////////////////////////////////////////////////////////////////// // The Canvas object is a wrapper around an HTML5 tag. // @@ -1091,7 +1097,7 @@ Licensed under the MIT license. // then whack any remaining obvious garbage left eventHolder.unbind(); - placeholder.children().not([surface.element, overlay.element]).remove(); + placeholder.children().not([surface.element, surface.text, overlay.element, overlay.text]).remove(); } // save in case we get replotted @@ -1163,53 +1169,26 @@ Licensed under the MIT license. } function measureTickLabels(axis) { + var opts = axis.options, ticks = axis.ticks || [], axisw = opts.labelWidth || 0, axish = opts.labelHeight || 0, - f = axis.font; - - ctx.save(); - ctx.font = f.style + " " + f.variant + " " + f.weight + " " + f.size + "px '" + f.family + "'"; + font = axis.font || "flot-tick-label flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis"; for (var i = 0; i < ticks.length; ++i) { - var t = ticks[i]; - t.lines = []; - t.width = t.height = 0; + var t = ticks[i], + dimensions; if (!t.label) continue; - // accept various kinds of newlines, including HTML ones - // (you can actually split directly on regexps in Javascript, - // but IE < 9 is unfortunately broken) - var lines = (t.label + "").replace(/
|\r\n|\r/g, "\n").split("\n"); - for (var j = 0; j < lines.length; ++j) { - var line = { text: lines[j] }, - m = ctx.measureText(line.text); - - line.width = m.width; - // m.height might not be defined, not in the - // standard yet - line.height = m.height != null ? m.height : f.size; - - // add a bit of margin since font rendering is - // not pixel perfect and cut off letters look - // bad, this also doubles as spacing between - // lines - line.height += Math.round(f.size * 0.15); - - t.width = Math.max(line.width, t.width); - t.height += line.height; - - t.lines.push(line); - } + dimensions = surface.getTextInfo(t.label, font).dimensions; if (opts.labelWidth == null) - axisw = Math.max(axisw, t.width); + axisw = Math.max(axisw, dimensions.width); if (opts.labelHeight == null) - axish = Math.max(axish, t.height); + axish = Math.max(axish, dimensions.height); } - ctx.restore(); axis.labelWidth = Math.ceil(axisw); axis.labelHeight = Math.ceil(axish); @@ -1368,7 +1347,7 @@ Licensed under the MIT license. }); if (showGrid) { - // determine from the placeholder the font size ~ height of font ~ 1 em + var fontDefaults = { style: placeholder.css("font-style"), size: Math.round(0.8 * (+placeholder.css("font-size").replace("px", "") || 13)), @@ -1385,8 +1364,14 @@ Licensed under the MIT license. setTicks(axis); snapRangeToTicks(axis, axis.ticks); + // If a font-spec object was provided, use font defaults + // to fill out any unspecified settings. + + if (axis.font) { + axis.font = $.extend({}, fontDefaults, axis.options.font); + } + // find labelWidth/Height for axis - axis.font = $.extend({}, fontDefaults, axis.options.font); measureTickLabels(axis); }); @@ -1663,6 +1648,8 @@ Licensed under the MIT license. drawGrid(); drawAxisLabels(); } + + surface.render(); } function extractRange(ranges, coord) { @@ -1934,74 +1921,44 @@ Licensed under the MIT license. } function drawAxisLabels() { - ctx.save(); $.each(allAxes(), function (_, axis) { if (!axis.show || axis.ticks.length == 0) return; - var box = axis.box, f = axis.font; - // placeholder.append('
') // debug - - ctx.fillStyle = axis.options.color; - // Important: Don't use quotes around axis.font.family! Just around single - // font names like 'Times New Roman' that have a space or special character in it. - ctx.font = f.style + " " + f.variant + " " + f.weight + " " + f.size + "px " + f.family; - ctx.textAlign = "start"; - // middle align the labels - top would be more - // natural, but browsers can differ a pixel or two in - // where they consider the top to be, so instead we - // middle align to minimize variation between browsers - // and compensate when calculating the coordinates - ctx.textBaseline = "middle"; + var box = axis.box, + font = axis.font || "flot-tick-label flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis", + tick, x, y, halign, valign; for (var i = 0; i < axis.ticks.length; ++i) { - var tick = axis.ticks[i]; + + tick = axis.ticks[i]; if (!tick.label || tick.v < axis.min || tick.v > axis.max) continue; - var x, y, offset = 0, line; - for (var k = 0; k < tick.lines.length; ++k) { - line = tick.lines[k]; - - if (axis.direction == "x") { - x = plotOffset.left + axis.p2c(tick.v) - line.width/2; - if (axis.position == "bottom") - y = box.top + box.padding; - else - y = box.top + box.height - box.padding - tick.height; - } - else { - y = plotOffset.top + axis.p2c(tick.v) - tick.height/2; - if (axis.position == "left") - x = box.left + box.width - box.padding - line.width; - else - x = box.left + box.padding; + if (axis.direction == "x") { + halign = "center"; + x = plotOffset.left + axis.p2c(tick.v); + if (axis.position == "bottom") { + y = box.top + box.padding; + } else { + y = box.top + box.height - box.padding; + valign = "bottom"; } - - // account for middle aligning and line number - y += line.height/2 + offset; - offset += line.height; - - if (!!(window.opera && window.opera.version().split('.')[0] < 12)) { - // FIXME: LEGACY BROWSER FIX - // AFFECTS: Opera < 12.00 - - // round the coordinates since Opera - // otherwise switches to more ugly - // rendering (probably non-hinted) and - // offset the y coordinates since it seems - // to be off pretty consistently compared - // to the other browsers - x = Math.floor(x); - y = Math.ceil(y - 2); + } else { + valign = "middle"; + y = plotOffset.top + axis.p2c(tick.v); + if (axis.position == "left") { + x = box.left + box.width - box.padding; + halign = "right"; + } else { + x = box.left + box.padding; } - ctx.fillText(line.text, x, y); } + + surface.drawText(x, y, tick.label, font, null, halign, valign); } }); - - ctx.restore(); } function drawSeries(series) { From c833511431875685e91e1d7abbb94205dc1f8b72 Mon Sep 17 00:00:00 2001 From: Jamie Hamel-Smith Date: Sat, 19 Jan 2013 20:22:26 -0800 Subject: [PATCH 008/419] Adding a fix for the inability to set the point line width to 0. It's a bit of a hack, but it seems like an acceptable workaround. --- jquery.flot.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/jquery.flot.js b/jquery.flot.js index 918352a5c..f8139fbc2 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -2092,6 +2092,15 @@ Licensed under the MIT license. sw = series.shadowSize, radius = series.points.radius, symbol = series.points.symbol; + + // If the user sets the line width to 0, we change it to a very + // small value. A line width of 0 seems to force the default of 1. + // Doing the conditional here allows the shadow setting to still be + // optional even with a lineWidth of 0. + + if( lw == 0 ) + lw = 0.0001; + if (lw > 0 && sw > 0) { // draw shadow in two steps var w = sw / 2; From 707c8ed8451f0e06f565efaf3b19c717b9d34dde Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 20 Jan 2013 15:19:51 -0500 Subject: [PATCH 009/419] Reorganized examples into subdirectories. To improve organization with the increasing number of examples, every example page is now the index of its own subdirectory, which contains all the files specific to that example. --- examples/{ => ajax}/data-eu-gdp-growth-1.json | 0 examples/{ => ajax}/data-eu-gdp-growth-2.json | 0 examples/{ => ajax}/data-eu-gdp-growth-3.json | 0 examples/{ => ajax}/data-eu-gdp-growth-4.json | 0 examples/{ => ajax}/data-eu-gdp-growth-5.json | 0 examples/{ => ajax}/data-eu-gdp-growth.json | 0 examples/{ => ajax}/data-japan-gdp-growth.json | 0 examples/{ => ajax}/data-usa-gdp-growth.json | 0 examples/{ajax.html => ajax/index.html} | 0 examples/{annotating.html => annotating/index.html} | 0 .../index.html} | 0 .../index.html} | 0 examples/{ => axes-time-zones}/date.js | 0 .../{timezones.html => axes-time-zones/index.html} | 0 examples/{ => axes-time-zones}/tz/africa | 0 examples/{ => axes-time-zones}/tz/antarctica | 0 examples/{ => axes-time-zones}/tz/asia | 0 examples/{ => axes-time-zones}/tz/australasia | 0 examples/{ => axes-time-zones}/tz/backward | 0 examples/{ => axes-time-zones}/tz/etcetera | 0 examples/{ => axes-time-zones}/tz/europe | 0 examples/{ => axes-time-zones}/tz/factory | 0 examples/{ => axes-time-zones}/tz/iso3166.tab | 0 examples/{ => axes-time-zones}/tz/leapseconds | 0 examples/{ => axes-time-zones}/tz/northamerica | 0 examples/{ => axes-time-zones}/tz/pacificnew | 0 examples/{ => axes-time-zones}/tz/solar87 | 0 examples/{ => axes-time-zones}/tz/solar88 | 0 examples/{ => axes-time-zones}/tz/solar89 | 0 examples/{ => axes-time-zones}/tz/southamerica | 0 examples/{ => axes-time-zones}/tz/systemv | 0 examples/{ => axes-time-zones}/tz/yearistype.sh | 0 examples/{ => axes-time-zones}/tz/zone.tab | 0 examples/{time.html => axes-time/index.html} | 0 .../index.html} | 0 examples/{basic.html => basic-usage/index.html} | 0 examples/{categories.html => categories/index.html} | 0 .../hs-2004-27-a-large-web.jpg} | Bin examples/{image.html => image/index.html} | 0 .../{interacting.html => interacting/index.html} | 0 examples/{ => navigate}/arrow-down.gif | Bin examples/{ => navigate}/arrow-left.gif | Bin examples/{ => navigate}/arrow-right.gif | Bin examples/{ => navigate}/arrow-up.gif | Bin examples/{navigate.html => navigate/index.html} | 0 .../{percentiles.html => percentiles/index.html} | 0 examples/{realtime.html => realtime/index.html} | 0 examples/{resize.html => resize/index.html} | 0 examples/{selection.html => selection/index.html} | 0 .../{errorbars.html => series-errorbars/index.html} | 0 examples/{pie.html => series-pie/index.html} | 0 .../index.html} | 0 .../{graph-types.html => series-types/index.html} | 0 examples/{stacking.html => stacking/index.html} | 0 examples/{symbols.html => symbols/index.html} | 0 .../{thresholding.html => threshold/index.html} | 0 examples/{tracking.html => tracking/index.html} | 0 examples/{visitors.html => visitors/index.html} | 0 examples/{zooming.html => zooming/index.html} | 0 59 files changed, 0 insertions(+), 0 deletions(-) rename examples/{ => ajax}/data-eu-gdp-growth-1.json (100%) rename examples/{ => ajax}/data-eu-gdp-growth-2.json (100%) rename examples/{ => ajax}/data-eu-gdp-growth-3.json (100%) rename examples/{ => ajax}/data-eu-gdp-growth-4.json (100%) rename examples/{ => ajax}/data-eu-gdp-growth-5.json (100%) rename examples/{ => ajax}/data-eu-gdp-growth.json (100%) rename examples/{ => ajax}/data-japan-gdp-growth.json (100%) rename examples/{ => ajax}/data-usa-gdp-growth.json (100%) rename examples/{ajax.html => ajax/index.html} (100%) rename examples/{annotating.html => annotating/index.html} (100%) rename examples/{interacting-axes.html => axes-interacting/index.html} (100%) rename examples/{multiple-axes.html => axes-multiple/index.html} (100%) rename examples/{ => axes-time-zones}/date.js (100%) rename examples/{timezones.html => axes-time-zones/index.html} (100%) rename examples/{ => axes-time-zones}/tz/africa (100%) rename examples/{ => axes-time-zones}/tz/antarctica (100%) rename examples/{ => axes-time-zones}/tz/asia (100%) rename examples/{ => axes-time-zones}/tz/australasia (100%) rename examples/{ => axes-time-zones}/tz/backward (100%) rename examples/{ => axes-time-zones}/tz/etcetera (100%) rename examples/{ => axes-time-zones}/tz/europe (100%) rename examples/{ => axes-time-zones}/tz/factory (100%) rename examples/{ => axes-time-zones}/tz/iso3166.tab (100%) rename examples/{ => axes-time-zones}/tz/leapseconds (100%) rename examples/{ => axes-time-zones}/tz/northamerica (100%) rename examples/{ => axes-time-zones}/tz/pacificnew (100%) rename examples/{ => axes-time-zones}/tz/solar87 (100%) rename examples/{ => axes-time-zones}/tz/solar88 (100%) rename examples/{ => axes-time-zones}/tz/solar89 (100%) rename examples/{ => axes-time-zones}/tz/southamerica (100%) rename examples/{ => axes-time-zones}/tz/systemv (100%) rename examples/{ => axes-time-zones}/tz/yearistype.sh (100%) rename examples/{ => axes-time-zones}/tz/zone.tab (100%) rename examples/{time.html => axes-time/index.html} (100%) rename examples/{setting-options.html => basic-options/index.html} (100%) rename examples/{basic.html => basic-usage/index.html} (100%) rename examples/{categories.html => categories/index.html} (100%) rename examples/{hs-2004-27-a-large_web.jpg => image/hs-2004-27-a-large-web.jpg} (100%) rename examples/{image.html => image/index.html} (100%) rename examples/{interacting.html => interacting/index.html} (100%) rename examples/{ => navigate}/arrow-down.gif (100%) rename examples/{ => navigate}/arrow-left.gif (100%) rename examples/{ => navigate}/arrow-right.gif (100%) rename examples/{ => navigate}/arrow-up.gif (100%) rename examples/{navigate.html => navigate/index.html} (100%) rename examples/{percentiles.html => percentiles/index.html} (100%) rename examples/{realtime.html => realtime/index.html} (100%) rename examples/{resize.html => resize/index.html} (100%) rename examples/{selection.html => selection/index.html} (100%) rename examples/{errorbars.html => series-errorbars/index.html} (100%) rename examples/{pie.html => series-pie/index.html} (100%) rename examples/{turning-series.html => series-toggle/index.html} (100%) rename examples/{graph-types.html => series-types/index.html} (100%) rename examples/{stacking.html => stacking/index.html} (100%) rename examples/{symbols.html => symbols/index.html} (100%) rename examples/{thresholding.html => threshold/index.html} (100%) rename examples/{tracking.html => tracking/index.html} (100%) rename examples/{visitors.html => visitors/index.html} (100%) rename examples/{zooming.html => zooming/index.html} (100%) diff --git a/examples/data-eu-gdp-growth-1.json b/examples/ajax/data-eu-gdp-growth-1.json similarity index 100% rename from examples/data-eu-gdp-growth-1.json rename to examples/ajax/data-eu-gdp-growth-1.json diff --git a/examples/data-eu-gdp-growth-2.json b/examples/ajax/data-eu-gdp-growth-2.json similarity index 100% rename from examples/data-eu-gdp-growth-2.json rename to examples/ajax/data-eu-gdp-growth-2.json diff --git a/examples/data-eu-gdp-growth-3.json b/examples/ajax/data-eu-gdp-growth-3.json similarity index 100% rename from examples/data-eu-gdp-growth-3.json rename to examples/ajax/data-eu-gdp-growth-3.json diff --git a/examples/data-eu-gdp-growth-4.json b/examples/ajax/data-eu-gdp-growth-4.json similarity index 100% rename from examples/data-eu-gdp-growth-4.json rename to examples/ajax/data-eu-gdp-growth-4.json diff --git a/examples/data-eu-gdp-growth-5.json b/examples/ajax/data-eu-gdp-growth-5.json similarity index 100% rename from examples/data-eu-gdp-growth-5.json rename to examples/ajax/data-eu-gdp-growth-5.json diff --git a/examples/data-eu-gdp-growth.json b/examples/ajax/data-eu-gdp-growth.json similarity index 100% rename from examples/data-eu-gdp-growth.json rename to examples/ajax/data-eu-gdp-growth.json diff --git a/examples/data-japan-gdp-growth.json b/examples/ajax/data-japan-gdp-growth.json similarity index 100% rename from examples/data-japan-gdp-growth.json rename to examples/ajax/data-japan-gdp-growth.json diff --git a/examples/data-usa-gdp-growth.json b/examples/ajax/data-usa-gdp-growth.json similarity index 100% rename from examples/data-usa-gdp-growth.json rename to examples/ajax/data-usa-gdp-growth.json diff --git a/examples/ajax.html b/examples/ajax/index.html similarity index 100% rename from examples/ajax.html rename to examples/ajax/index.html diff --git a/examples/annotating.html b/examples/annotating/index.html similarity index 100% rename from examples/annotating.html rename to examples/annotating/index.html diff --git a/examples/interacting-axes.html b/examples/axes-interacting/index.html similarity index 100% rename from examples/interacting-axes.html rename to examples/axes-interacting/index.html diff --git a/examples/multiple-axes.html b/examples/axes-multiple/index.html similarity index 100% rename from examples/multiple-axes.html rename to examples/axes-multiple/index.html diff --git a/examples/date.js b/examples/axes-time-zones/date.js similarity index 100% rename from examples/date.js rename to examples/axes-time-zones/date.js diff --git a/examples/timezones.html b/examples/axes-time-zones/index.html similarity index 100% rename from examples/timezones.html rename to examples/axes-time-zones/index.html diff --git a/examples/tz/africa b/examples/axes-time-zones/tz/africa similarity index 100% rename from examples/tz/africa rename to examples/axes-time-zones/tz/africa diff --git a/examples/tz/antarctica b/examples/axes-time-zones/tz/antarctica similarity index 100% rename from examples/tz/antarctica rename to examples/axes-time-zones/tz/antarctica diff --git a/examples/tz/asia b/examples/axes-time-zones/tz/asia similarity index 100% rename from examples/tz/asia rename to examples/axes-time-zones/tz/asia diff --git a/examples/tz/australasia b/examples/axes-time-zones/tz/australasia similarity index 100% rename from examples/tz/australasia rename to examples/axes-time-zones/tz/australasia diff --git a/examples/tz/backward b/examples/axes-time-zones/tz/backward similarity index 100% rename from examples/tz/backward rename to examples/axes-time-zones/tz/backward diff --git a/examples/tz/etcetera b/examples/axes-time-zones/tz/etcetera similarity index 100% rename from examples/tz/etcetera rename to examples/axes-time-zones/tz/etcetera diff --git a/examples/tz/europe b/examples/axes-time-zones/tz/europe similarity index 100% rename from examples/tz/europe rename to examples/axes-time-zones/tz/europe diff --git a/examples/tz/factory b/examples/axes-time-zones/tz/factory similarity index 100% rename from examples/tz/factory rename to examples/axes-time-zones/tz/factory diff --git a/examples/tz/iso3166.tab b/examples/axes-time-zones/tz/iso3166.tab similarity index 100% rename from examples/tz/iso3166.tab rename to examples/axes-time-zones/tz/iso3166.tab diff --git a/examples/tz/leapseconds b/examples/axes-time-zones/tz/leapseconds similarity index 100% rename from examples/tz/leapseconds rename to examples/axes-time-zones/tz/leapseconds diff --git a/examples/tz/northamerica b/examples/axes-time-zones/tz/northamerica similarity index 100% rename from examples/tz/northamerica rename to examples/axes-time-zones/tz/northamerica diff --git a/examples/tz/pacificnew b/examples/axes-time-zones/tz/pacificnew similarity index 100% rename from examples/tz/pacificnew rename to examples/axes-time-zones/tz/pacificnew diff --git a/examples/tz/solar87 b/examples/axes-time-zones/tz/solar87 similarity index 100% rename from examples/tz/solar87 rename to examples/axes-time-zones/tz/solar87 diff --git a/examples/tz/solar88 b/examples/axes-time-zones/tz/solar88 similarity index 100% rename from examples/tz/solar88 rename to examples/axes-time-zones/tz/solar88 diff --git a/examples/tz/solar89 b/examples/axes-time-zones/tz/solar89 similarity index 100% rename from examples/tz/solar89 rename to examples/axes-time-zones/tz/solar89 diff --git a/examples/tz/southamerica b/examples/axes-time-zones/tz/southamerica similarity index 100% rename from examples/tz/southamerica rename to examples/axes-time-zones/tz/southamerica diff --git a/examples/tz/systemv b/examples/axes-time-zones/tz/systemv similarity index 100% rename from examples/tz/systemv rename to examples/axes-time-zones/tz/systemv diff --git a/examples/tz/yearistype.sh b/examples/axes-time-zones/tz/yearistype.sh similarity index 100% rename from examples/tz/yearistype.sh rename to examples/axes-time-zones/tz/yearistype.sh diff --git a/examples/tz/zone.tab b/examples/axes-time-zones/tz/zone.tab similarity index 100% rename from examples/tz/zone.tab rename to examples/axes-time-zones/tz/zone.tab diff --git a/examples/time.html b/examples/axes-time/index.html similarity index 100% rename from examples/time.html rename to examples/axes-time/index.html diff --git a/examples/setting-options.html b/examples/basic-options/index.html similarity index 100% rename from examples/setting-options.html rename to examples/basic-options/index.html diff --git a/examples/basic.html b/examples/basic-usage/index.html similarity index 100% rename from examples/basic.html rename to examples/basic-usage/index.html diff --git a/examples/categories.html b/examples/categories/index.html similarity index 100% rename from examples/categories.html rename to examples/categories/index.html diff --git a/examples/hs-2004-27-a-large_web.jpg b/examples/image/hs-2004-27-a-large-web.jpg similarity index 100% rename from examples/hs-2004-27-a-large_web.jpg rename to examples/image/hs-2004-27-a-large-web.jpg diff --git a/examples/image.html b/examples/image/index.html similarity index 100% rename from examples/image.html rename to examples/image/index.html diff --git a/examples/interacting.html b/examples/interacting/index.html similarity index 100% rename from examples/interacting.html rename to examples/interacting/index.html diff --git a/examples/arrow-down.gif b/examples/navigate/arrow-down.gif similarity index 100% rename from examples/arrow-down.gif rename to examples/navigate/arrow-down.gif diff --git a/examples/arrow-left.gif b/examples/navigate/arrow-left.gif similarity index 100% rename from examples/arrow-left.gif rename to examples/navigate/arrow-left.gif diff --git a/examples/arrow-right.gif b/examples/navigate/arrow-right.gif similarity index 100% rename from examples/arrow-right.gif rename to examples/navigate/arrow-right.gif diff --git a/examples/arrow-up.gif b/examples/navigate/arrow-up.gif similarity index 100% rename from examples/arrow-up.gif rename to examples/navigate/arrow-up.gif diff --git a/examples/navigate.html b/examples/navigate/index.html similarity index 100% rename from examples/navigate.html rename to examples/navigate/index.html diff --git a/examples/percentiles.html b/examples/percentiles/index.html similarity index 100% rename from examples/percentiles.html rename to examples/percentiles/index.html diff --git a/examples/realtime.html b/examples/realtime/index.html similarity index 100% rename from examples/realtime.html rename to examples/realtime/index.html diff --git a/examples/resize.html b/examples/resize/index.html similarity index 100% rename from examples/resize.html rename to examples/resize/index.html diff --git a/examples/selection.html b/examples/selection/index.html similarity index 100% rename from examples/selection.html rename to examples/selection/index.html diff --git a/examples/errorbars.html b/examples/series-errorbars/index.html similarity index 100% rename from examples/errorbars.html rename to examples/series-errorbars/index.html diff --git a/examples/pie.html b/examples/series-pie/index.html similarity index 100% rename from examples/pie.html rename to examples/series-pie/index.html diff --git a/examples/turning-series.html b/examples/series-toggle/index.html similarity index 100% rename from examples/turning-series.html rename to examples/series-toggle/index.html diff --git a/examples/graph-types.html b/examples/series-types/index.html similarity index 100% rename from examples/graph-types.html rename to examples/series-types/index.html diff --git a/examples/stacking.html b/examples/stacking/index.html similarity index 100% rename from examples/stacking.html rename to examples/stacking/index.html diff --git a/examples/symbols.html b/examples/symbols/index.html similarity index 100% rename from examples/symbols.html rename to examples/symbols/index.html diff --git a/examples/thresholding.html b/examples/threshold/index.html similarity index 100% rename from examples/thresholding.html rename to examples/threshold/index.html diff --git a/examples/tracking.html b/examples/tracking/index.html similarity index 100% rename from examples/tracking.html rename to examples/tracking/index.html diff --git a/examples/visitors.html b/examples/visitors/index.html similarity index 100% rename from examples/visitors.html rename to examples/visitors/index.html diff --git a/examples/zooming.html b/examples/zooming/index.html similarity index 100% rename from examples/zooming.html rename to examples/zooming/index.html From 21e252ea8f0de68d79b5a194304a53397e5b44f4 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 20 Jan 2013 15:22:21 -0500 Subject: [PATCH 010/419] Renamed layout.css to examples.css. --- examples/{layout.css => examples.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename examples/{layout.css => examples.css} (100%) diff --git a/examples/layout.css b/examples/examples.css similarity index 100% rename from examples/layout.css rename to examples/examples.css From a4ad4707d5e8bacc1c7cf071c99f00de118b90b5 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 20 Jan 2013 18:15:12 -0600 Subject: [PATCH 011/419] Updated credits for #934 threshold overlapping. --- NEWS.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/NEWS.md b/NEWS.md index ddae80fde..10c768e8d 100644 --- a/NEWS.md +++ b/NEWS.md @@ -179,6 +179,9 @@ The base and overlay canvas are now using the CSS classes "flot-base" and - Fixed sub-pixel rendering issues with crosshair and selection lines. (patches by alanayoub and Daniel Shapiro, pull requests #17 and #925) + - Fixed rendering issues when using the threshold plugin with several series. + (patch by Ivan Novikov, pull request #934) + ## Flot 0.7 ## From 6bdc88c1f9947ad1f1409c96567562ea94a43143 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Tue, 22 Jan 2013 20:24:52 -0600 Subject: [PATCH 012/419] Beautified CSS used by the examples pages. Slightly widened the page to account for the fact that most people have widescreen monitors these days. Also made text larger and more legible, and created a nice 'clipping' effect for the placeholder. --- examples/background.png | Bin 0 -> 231 bytes examples/examples.css | 74 +++++++++++++++++++++++++++++++++++++--- 2 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 examples/background.png diff --git a/examples/background.png b/examples/background.png new file mode 100644 index 0000000000000000000000000000000000000000..47a4a4c51463b82c4da5b54c2ad8acf0b78d2b59 GIT binary patch literal 231 zcmeAS@N?(olHy`uVBq!ia0vp^j6gh%g9%7Z5Ghp!QY`6?zK#qG>ra@ocD)4hB}-f* zN`mv#O3D+9QW+dm@{>{(JaZG%Q-e|yQz{EjrrH1%ReHKOhE&{|5*W?bV8D@G{=fOx zbHP_}8XDfujyo-2-4)aq%<7O>tDAK!F8Qpf!N-Rwf973&C{_9T_>p)2js?$=uevMu zCZTxR!=hh}^2J}T%=oZr*4LDK3B~&}mp$&hczpZwlHVs+-2FZ2<^MZ*3xikNr*7X| e&HqmI0K@!DMXgQ~-?u Date: Tue, 22 Jan 2013 21:25:10 -0600 Subject: [PATCH 013/419] Fix plot legend padding. Added explicit border-spacing to compensate for global removal of padding. Flot should really take care of this itself; layout-critical styles shouldn't depend on the user-agent defaults. --- examples/examples.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/examples.css b/examples/examples.css index 147465c1d..8616754e0 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -69,4 +69,10 @@ p { #placeholder { width: 100%; height: 100%; + font-size: 14px; + line-height: 14px; } + +.legend table { + border-spacing: 5px; +} \ No newline at end of file From 8a1180579cb70ddaf85e7e0ed29c1a72f8ce9b57 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Wed, 23 Jan 2013 22:00:43 -0600 Subject: [PATCH 014/419] Expand buttons to match the new page font size. --- examples/examples.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/examples/examples.css b/examples/examples.css index 8616754e0..e282d214a 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -17,6 +17,11 @@ p { margin-top: 10px; } +button { + font-size: 18px; + padding: 1px 7px; +} + #header { position: relative; width: 900px; From eeb1b9df28d6e9577e9a2e971f950740db66ba3a Mon Sep 17 00:00:00 2001 From: David Schnur Date: Thu, 24 Jan 2013 21:06:43 -0600 Subject: [PATCH 015/419] Expand inputs to match the new page font size. --- examples/examples.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/examples.css b/examples/examples.css index e282d214a..ab356c23f 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -22,6 +22,10 @@ button { padding: 1px 7px; } +input { + font-size: 18px; +} + #header { position: relative; width: 900px; From 2eccabcf8ccf8d68aea71accfc8fdc2d978f55eb Mon Sep 17 00:00:00 2001 From: David Schnur Date: Thu, 24 Jan 2013 21:38:25 -0600 Subject: [PATCH 016/419] Generalize placeholder styles. Give any direct child of demo-containre the same style, so it can be used for both #placeholder and #overview. --- examples/examples.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/examples.css b/examples/examples.css index ab356c23f..dd69436f1 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -75,7 +75,7 @@ input { -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); } -#placeholder { +.demo-container > div { width: 100%; height: 100%; font-size: 14px; From 0f23d23118e738c277dccb034ce27ee25ba0444a Mon Sep 17 00:00:00 2001 From: David Schnur Date: Thu, 24 Jan 2013 21:43:28 -0600 Subject: [PATCH 017/419] Pad check boxes to match the new page font size. --- examples/examples.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/examples.css b/examples/examples.css index dd69436f1..882face5d 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -26,6 +26,10 @@ input { font-size: 18px; } +input[type=checkbox] { + margin: 7px; +} + #header { position: relative; width: 900px; From 8e8327f5d9ecdaee03271d4dd0bd2f3badb8437c Mon Sep 17 00:00:00 2001 From: David Schnur Date: Fri, 25 Jan 2013 16:52:49 -0600 Subject: [PATCH 018/419] Add a sub-header style for per-plot labels. --- examples/examples.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/examples.css b/examples/examples.css index 882face5d..c6ef030c0 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -13,6 +13,12 @@ h2 { font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif; } +h3 { + margin-left: 10px; + font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif; + color: #666; +} + p { margin-top: 10px; } From ed791745c733b3d5a88eeb570a03622a9ab2e5be Mon Sep 17 00:00:00 2001 From: David Schnur Date: Fri, 25 Jan 2013 23:29:32 -0500 Subject: [PATCH 019/419] Re-styled and cleaned up all the examples. --- examples/ajax/index.html | 304 +++--- examples/annotating/index.html | 154 +-- examples/axes-interacting/index.html | 167 +-- examples/axes-multiple/index.html | 130 ++- examples/axes-time-zones/index.html | 172 +-- examples/axes-time/index.html | 252 ++--- examples/basic-options/index.html | 132 +-- examples/basic-usage/index.html | 84 +- examples/categories/index.html | 97 +- examples/image/index.html | 106 +- examples/interacting/index.html | 220 ++-- examples/navigate/index.html | 263 +++-- examples/percentiles/index.html | 128 ++- examples/realtime/index.html | 194 ++-- examples/resize/index.html | 129 ++- examples/selection/index.html | 247 +++-- examples/series-errorbars/index.html | 222 ++-- examples/series-pie/index.html | 1500 +++++++++++++------------- examples/series-toggle/index.html | 211 ++-- examples/series-types/index.html | 157 +-- examples/stacking/index.html | 176 +-- examples/symbols/index.html | 117 +- examples/threshold/index.html | 122 ++- examples/tracking/index.html | 220 ++-- examples/visitors/index.html | 229 ++-- examples/zooming/index.html | 234 ++-- 26 files changed, 3281 insertions(+), 2686 deletions(-) diff --git a/examples/ajax/index.html b/examples/ajax/index.html index eb0ef9ad0..493b02270 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -1,143 +1,165 @@ - + - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

Example of loading data dynamically with AJAX. Percentage change in GDP (source: Eurostat). Click the buttons below.

- -

The data is fetched over HTTP, in this case directly from text - files. Usually the URL would point to some web server handler - (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that - extracts it from a database and serializes it to JSON.

- -

- - - data - - -

- -

- - - data - - -

- -

- - - data - - -

- -

If you combine AJAX with setTimeout, you can poll the server - for new data.

- -

- -

- - - - + + + Flot Examples: AJAX + + + + + + + + + + +
+ +
+
+
+ +

Example of loading data dynamically with AJAX. Percentage change in GDP (source: Eurostat). Click the buttons below:

+ +

The data is fetched over HTTP, in this case directly from text files. Usually the URL would point to some web server handler (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that extracts it from a database and serializes it to JSON.

+ +

+ + [ see data ] + +

+ +

+ + [ see data ] + +

+ +

+ + [ see data ] + +

+ +

If you combine AJAX with setTimeout, you can poll the server for new data.

+ +

+ +

+ +
+ + + + diff --git a/examples/annotating/index.html b/examples/annotating/index.html index 72c212b3d..41dcb9509 100644 --- a/examples/annotating/index.html +++ b/examples/annotating/index.html @@ -1,75 +1,83 @@ - + - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

Flot has support for simple background decorations such as - lines and rectangles. They can be useful for marking up certain - areas. You can easily add any HTML you need with standard DOM - manipulation, e.g. for labels. For drawing custom shapes there is - also direct access to the canvas.

- - - - + + + Flot Examples: Adding Annotations + + + + + + + + + + +
+ +
+
+
+ +

Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.

+ +
+ + + + diff --git a/examples/axes-interacting/index.html b/examples/axes-interacting/index.html index 9995c26cc..dbd9ee6f1 100644 --- a/examples/axes-interacting/index.html +++ b/examples/axes-interacting/index.html @@ -1,79 +1,92 @@ - + - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

With multiple axes, you sometimes need to interact with them. A - simple way to do this is to draw the plot, deduce the axis - placements and insert a couple of divs on top to catch events. - Try clicking an axis.

- -

- - - + + + Flot Examples: Interacting with axes + + + + + + + + + + +
+ +
+
+
+ +

With multiple axes, you sometimes need to interact with them. A simple way to do this is to draw the plot, deduce the axis placements and insert a couple of divs on top to catch events.

+ +

Try clicking an axis.

+ +

+ +
+ + + + diff --git a/examples/axes-multiple/index.html b/examples/axes-multiple/index.html index fc4ba2200..734550af9 100644 --- a/examples/axes-multiple/index.html +++ b/examples/axes-multiple/index.html @@ -1,61 +1,73 @@ - + - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

Multiple axis support showing the raw oil price in US $/barrel of - crude oil vs. the exchange rate from US $ to €.

- -

As illustrated, you can put in multiple axes if you - need to. For each data series, simply specify the axis number. - In the options, you can then configure where you want the extra - axes to appear.

- -

Position axis or .

- - - + + + Flot Examples: Multiple Axes + + + + + + + + + + + +
+ +
+
+
+ +

Multiple axis support showing the raw oil price in US $/barrel of crude oil vs. the exchange rate from US $ to €.

+ +

As illustrated, you can put in multiple axes if you need to. For each data series, simply specify the axis number. In the options, you can then configure where you want the extra axes to appear.

+ +

Position axis or .

+ +
+ + + + diff --git a/examples/axes-time-zones/index.html b/examples/axes-time-zones/index.html index 97c4bd9c2..7938cc1b1 100644 --- a/examples/axes-time-zones/index.html +++ b/examples/axes-time-zones/index.html @@ -1,74 +1,110 @@ - - - - - Flot Example - - - + + + + + Flot Examples: Time zones + + + + + + + - - - - -

Timezone Examples

- - - - -
UTC
Browser
Chicago
- - - - + var plot = $.plot("#placeholderLocal", [d], { + xaxis: { + mode: "time", + timezone: "browser" + } + }); + + var plot = $.plot("#placeholderChicago", [d], { + xaxis: { + mode: "time", + timezone: "America/Chicago" + } + }); + }); + + + + + + + +
+ +

UTC

+
+
+
+ +

Browser

+
+
+
+ +

Chicago

+
+
+
+ +
+ + + + diff --git a/examples/axes-time/index.html b/examples/axes-time/index.html index 0c66c377c..f047a71b0 100644 --- a/examples/axes-time/index.html +++ b/examples/axes-time/index.html @@ -1,122 +1,134 @@ - + - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

Monthly mean atmospheric CO2 in PPM at Mauna Loa, Hawaii (source: NOAA/ESRL).

- -

If you tell Flot that an axis represents time, the data will - be interpreted as timestamps and the ticks adjusted and - formatted accordingly.

- -

Zoom to: - - - - - -

- -

The timestamps must be specified as Javascript timestamps, as - milliseconds since January 1, 1970 00:00. This is like Unix - timestamps, but in milliseconds instead of seconds (remember to - multiply with 1000!).

- -

As an extra caveat, the timestamps are interpreted according to - UTC and, by default, displayed as such. You can set the axis - "timezone" option to "browser" to display the timestamps in the - user's timezone, or, if you use timezoneJS, you can specify a - time zone.

- - - - + + + Flot Examples: Time Axes + + + + + + + + + + + +
+ +
+
+
+ +

Monthly mean atmospheric CO2 in PPM at Mauna Loa, Hawaii (source: NOAA/ESRL).

+ +

If you tell Flot that an axis represents time, the data will be interpreted as timestamps and the ticks adjusted and formatted accordingly.

+ +

Zoom to: + +

+ +

Zoom to: + + +

+ +

The timestamps must be specified as Javascript timestamps, as milliseconds since January 1, 1970 00:00. This is like Unix timestamps, but in milliseconds instead of seconds (remember to multiply with 1000!).

+ +

As an extra caveat, the timestamps are interpreted according to UTC and, by default, displayed as such. You can set the axis "timezone" option to "browser" to display the timestamps in the user's timezone, or, if you use timezoneJS, you can specify a time zone.

+ +
+ + + + diff --git a/examples/basic-options/index.html b/examples/basic-options/index.html index a97743170..c76b793cd 100644 --- a/examples/basic-options/index.html +++ b/examples/basic-options/index.html @@ -1,77 +1,87 @@ - + - Flot Examples - - - - - - + Flot Examples: Basic Options + + + + + + + - var d2 = []; - for (var i = 0; i < Math.PI * 2; i += 0.25) { - d2.push([ i, Math.cos( i ) ]); - } + - var d3 = []; - for (var i = 0; i < Math.PI * 2; i += 0.1) { - d3.push([ i, Math.tan( i ) ]); - } +
- $.plot( $("#placeholder"), [ - { label: "sin(x)", data: d1 }, - { label: "cos(x)", data: d2 }, - { label: "tan(x)", data: d3 } - ], { - series: { - lines: { show: true }, - points: { show: true } - }, - xaxis: { - ticks: [ - 0, [ Math.PI/2, "\u03c0/2" ], [ Math.PI, "\u03c0" ], - [ Math.PI * 3/2, "3\u03c0/2" ], [ Math.PI * 2, "2\u03c0" ] - ] - }, - yaxis: { - ticks: 10, - min: -2, - max: 2, - tickDecimals: 3 - }, - grid: { - backgroundColor: { colors: [ "#fff", "#eee" ] }, - borderWidth: { - top: 1, - right: 1, - bottom: 2, - left: 2 - } - } - }); -}); +
+
+
+ +

There are plenty of options you can set to control the precise looks of your plot. You can control the ticks on the axes, the legend, the graph type, etc.

+ +

Flot goes to great lengths to provide sensible defaults so that you don't have to customize much for a good-looking result.

+ +
- + diff --git a/examples/basic-usage/index.html b/examples/basic-usage/index.html index b116d9465..d7518493d 100644 --- a/examples/basic-usage/index.html +++ b/examples/basic-usage/index.html @@ -1,38 +1,50 @@ - + - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

Simple example. You don't need to specify much to get an - attractive look. Put in a placeholder, make sure you set its - dimensions (otherwise the plot library will barf) and call the - plot function with the data. The axes are automatically - scaled.

- - - - + + + Flot Examples: Basic Usage + + + + + + + + + + +
+ +
+
+
+ +

You don't have to do much to get an attractive plot. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.

+ +

The axes are automatically scaled.

+ +
+ + + + diff --git a/examples/categories/index.html b/examples/categories/index.html index 05d8e17ac..febaec7a7 100644 --- a/examples/categories/index.html +++ b/examples/categories/index.html @@ -1,40 +1,61 @@ - + - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

With the categories plugin you can plot categories/textual data - easily.

- - - - + + + Flot Examples: Categories + + + + + + + + + + + +
+ +
+
+
+ +

With the categories plugin you can plot categories/textual data easily.

+ +
+ + + + + + + + + diff --git a/examples/image/index.html b/examples/image/index.html index 073ad43f8..deb9b3ce4 100644 --- a/examples/image/index.html +++ b/examples/image/index.html @@ -1,45 +1,65 @@ - + - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

The Cat's Eye Nebula (picture from Hubble).

- -

With the image plugin, you can plot images. This is for example - useful for getting ticks on complex prerendered visualizations. - Instead of inputting data points, you put in the images and where - their two opposite corners are supposed to be in plot space.

- -

Images represent a little further complication because you need - to make sure they are loaded before you can use them (Flot skips - incomplete images). The plugin comes with a couple of helpers - for doing that.

- - - - + + + Flot Examples: Image Plots + + + + + + + + + + + +
+ +
+
+
+ +

The Cat's Eye Nebula (picture from Hubble).

+ +

With the image plugin, you can plot static images against a set of axes. This is for useful for adding ticks to complex prerendered visualizations. Instead of inputting data points, you specify the images and where their two opposite corners are supposed to be in plot space.

+ +

Images represent a little further complication because you need to make sure they are loaded before you can use them (Flot skips incomplete images). The plugin comes with a couple of helpers for doing that.

+ +
+ + + + diff --git a/examples/interacting/index.html b/examples/interacting/index.html index 7db829d2d..2b29c365c 100644 --- a/examples/interacting/index.html +++ b/examples/interacting/index.html @@ -1,98 +1,126 @@ - + - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

One of the goals of Flot is to support user interactions. Try - pointing and clicking on the points.

- -

- - - -

- -

A tooltip is easy to build with a bit of jQuery code and the - data returned from the plot.

- -

- - - - + + + Flot Examples: Interactivity + + + + + + + + + + +
+ +
+
+
+ +

One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.

+ +

+ + + +

+ +

A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.

+ +

+ +
+ + + + diff --git a/examples/navigate/index.html b/examples/navigate/index.html index c916ef243..c2dd51f1b 100644 --- a/examples/navigate/index.html +++ b/examples/navigate/index.html @@ -1,118 +1,149 @@ - + - - - Flot Examples - - - - - - - - -

Flot Examples

- -
- -

- -

With the navigate plugin it is easy to add panning and zooming. - Drag to pan, double click to zoom (or use the mouse scrollwheel).

- -

The plugin fires events (useful for synchronizing several - plots) and adds a couple of public methods so you can easily build - a little user interface around it, like the little buttons at the - top right in the plot.

- - - - - + + + Flot Examples: Navigation + + + + + + + + + + + + +
+ +
+
+
+ +

+ +

With the navigate plugin it is easy to add panning and zooming. Drag to pan, double click to zoom (or use the mouse scrollwheel).

+ +

The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.

+ +
+ + + + diff --git a/examples/percentiles/index.html b/examples/percentiles/index.html index 9f2ba3aa9..213be3076 100644 --- a/examples/percentiles/index.html +++ b/examples/percentiles/index.html @@ -1,57 +1,75 @@ - + - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

Height in centimeters of individuals from the US (2003-2006) as function of - age in years (source: CDC). - The 15%-85%, 25%-75% and 50% percentiles are indicated.

- -

For each point of a filled curve, you can specify an arbitrary - bottom. As this example illustrates, this can be useful for - plotting percentiles. If you have the data sets available without - appropriate fill bottoms, you can use the fillbetween plugin to - compute the data point bottoms automatically.

- - - - + + + Flot Examples: Percentiles + + + + + + + + + + + +
+ +
+
+
+ +

Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: CDC). The 15%-85%, 25%-75% and 50% percentiles are indicated.

+ +

For each point of a filled curve, you can specify an arbitrary bottom. As this example illustrates, this can be useful for plotting percentiles. If you have the data sets available without appropriate fill bottoms, you can use the fillbetween plugin to compute the data point bottoms automatically.

+ +
+ + + + diff --git a/examples/realtime/index.html b/examples/realtime/index.html index 3b427e148..1ac854132 100644 --- a/examples/realtime/index.html +++ b/examples/realtime/index.html @@ -1,83 +1,115 @@ - + - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

You can update a chart periodically to get a real-time effect - by using a timer to insert the new data in the plot and redraw it.

- -

Time between updates: milliseconds

- - - - + + + Flot Examples: Real-time updates + + + + + + + + + + +
+ +
+
+
+ +

You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.

+ +

Time between updates: milliseconds

+ +
+ + + + diff --git a/examples/resize/index.html b/examples/resize/index.html index d1e18c3e7..5a0baa54e 100644 --- a/examples/resize/index.html +++ b/examples/resize/index.html @@ -1,61 +1,72 @@ - + - - - Flot Examples - - - - - - - - -

Flot Examples

- -
- -

- -

Sometimes it makes more sense to just let the plot take up the - available space. In that case, we need to redraw the plot each - time the placeholder changes its size. If you include the resize - plugin, this is handled automatically.

- -

Try resizing the window.

- - - - - + + + Flot Examples: Resizing + + + + + + + + + + + + +
+ +
+
+
+ +

+ +

Sometimes it makes more sense to just let the plot take up the available space. In that case, we need to redraw the plot each time the placeholder changes its size. If you include the resize plugin, this is handled automatically.

+ + +

Try resizing the window.

+ +
+ + + + diff --git a/examples/selection/index.html b/examples/selection/index.html index 1646f5aae..c6d69ac9a 100644 --- a/examples/selection/index.html +++ b/examples/selection/index.html @@ -1,114 +1,137 @@ - + - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

1000 kg. CO2 emissions per year per capita for various countries (source: Wikipedia).

- -

Flot supports selections through the selection plugin. - You can enable rectangular selection - or one-dimensional selection if the user should only be able to - select on one axis. Try left-click and drag on the plot above - where selection on the x axis is enabled.

- -

You selected:

- -

The plot command returns a plot object you can use to control - the selection. Click the buttons below.

- -

-

- -

Selections are really useful for zooming. Just replot the - chart with min and max values for the axes set to the values - in the "plotselected" event triggered. Enable the checkbox - below and select a region again.

- -

- - - - + + + Flot Examples: Selection + + + + + + + + + + + +
+ +
+
+
+ +

1000 kg. CO2 emissions per year per capita for various countries (source: Wikipedia).

+ +

Flot supports selections through the selection plugin. You can enable rectangular selection or one-dimensional selection if the user should only be able to select on one axis. Try left-click and drag on the plot above where selection on the x axis is enabled.

+ +

You selected:

+ +

The plot command returns a plot object you can use to control the selection. Click the buttons below.

+ +

+ + +

+ +

Selections are really useful for zooming. Just replot the chart with min and max values for the axes set to the values in the "plotselected" event triggered. Enable the checkbox below and select a region again.

+ +

+ +
+ + + + diff --git a/examples/series-errorbars/index.html b/examples/series-errorbars/index.html index ec177ae15..ba7bc6f10 100644 --- a/examples/series-errorbars/index.html +++ b/examples/series-errorbars/index.html @@ -1,94 +1,146 @@ - + - Flot Examples - - - - - - + Flot Examples: Error Bars + + + + + + + -

Flot Examples

- -
- -

With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.

- - + + +
+ +
+
+
+ +

With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.

+ +
+ + diff --git a/examples/series-pie/index.html b/examples/series-pie/index.html index 4f8f16a27..d429c98bf 100644 --- a/examples/series-pie/index.html +++ b/examples/series-pie/index.html @@ -1,767 +1,777 @@ - + - - - Flot Pie Examples - - - - - - + + + - - - -

Flot Pie Examples

- -

Default with Legend

-
- - -

Default without Legend

-
- - -

Graph2

-
- - -

Graph3

-
- - -

Graph4

-
- - -

Graph5

-
- - -

Graph6

-
- - -

Graph7

-
- - -

Graph8

-
- - -

Graph9

-
- - -

Donut

-
- - -

Interactive

-
- - -

Pie Options

-
    -
  • option: default value - Description of option
    • -
  • show: false - Enable the plugin and draw as a pie.
    • -
  • radius: 'auto' - Sets the radius of the pie. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length. If set to 'auto', it will be set to 1 if the legend is enabled and 3/4 if not.
    • -
  • innerRadius: 0 - Sets the radius of the donut hole. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the radius, otherwise it will use the value as a direct pixel length.
    • -
  • startAngle: 3/2 - Factor of PI used for the starting angle (in radians) It can range between 0 and 2 (where 0 and 2 have the same result).
    • -
  • tilt: 1 - Percentage of tilt ranging from 0 and 1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn).
    • -
  • shadow:
      -
    • top: 5 - Vertical distance in pixel of the tilted pie shadow.
      • -
    • left: 15 - Horizontal distance in pixel of the tilted pie shadow.
      • -
    • alpha: 0.02 - Alpha value of the tilted pie shadow.
      • -
    -
  • offset:
      -
    • top: 0 - Pixel distance to move the pie up and down (relative to the center).
      • -
    • left: 'auto' - Pixel distance to move the pie left and right (relative to the center).
      • -
    -
  • stroke:
      -
    • color: '#FFF' - Color of the border of each slice. Hexadecimal color definitions are prefered (other formats may or may not work).
      • -
    • width: 1 - Pixel width of the border of each slice.
      • -
    -
  • label:
      -
    • show: 'auto' - Enable/Disable the labels. This can be set to true, false, or 'auto'. When set to 'auto', it will be set to false if the legend is enabled and true if not.
      • -
    • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
      • -
    • threshold: 0 - Hides the labels of any pie slice that is smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will hide all slices 3% or less of the total.
      • -
    • formatter: [function] - This function specifies how the positioned labels should be formatted, and is applied after the legend's labelFormatter function. The labels can also still be styled using the class "pieLabel" (i.e. ".pieLabel" or "#graph1 .pieLabel").
      • -
    • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
      • -
    • background:
        -
      • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the slice.
        • -
      • opacity: 0 - Opacity of the background for the positioned labels. Acceptable values range from 0 to 1, where 0 is completely transparent and 1 is completely opaque.
        • + + // A custom label formatter used by several of the plots + + function labelFormatter(label, series) { + return "
        " + label + "
        " + Math.round(series.percent) + "%
        "; + } + + // + + function setCode(lines) { + $("#code").text(lines.join("\n")); + } + + + + + + + +
        + +

        +
        +
        + +
        + +

        + +

        Source Code

        +
        + +
        + +

        Pie Options

        + +
          +
        • option: default value - Description of option
          • +
        • show: false - Enable the plugin and draw as a pie.
          • +
        • radius: 'auto' - Sets the radius of the pie. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length. If set to 'auto', it will be set to 1 if the legend is enabled and 3/4 if not.
          • +
        • innerRadius: 0 - Sets the radius of the donut hole. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the radius, otherwise it will use the value as a direct pixel length.
          • +
        • startAngle: 3/2 - Factor of PI used for the starting angle (in radians) It can range between 0 and 2 (where 0 and 2 have the same result).
          • +
        • tilt: 1 - Percentage of tilt ranging from 0 and 1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn).
          • +
        • shadow:
            +
          • top: 5 - Vertical distance in pixel of the tilted pie shadow.
            • +
          • left: 15 - Horizontal distance in pixel of the tilted pie shadow.
            • +
          • alpha: 0.02 - Alpha value of the tilted pie shadow.
            • +
          +
        • offset:
            +
          • top: 0 - Pixel distance to move the pie up and down (relative to the center).
            • +
          • left: 'auto' - Pixel distance to move the pie left and right (relative to the center).
            • +
          +
        • stroke:
            +
          • color: '#FFF' - Color of the border of each slice. Hexadecimal color definitions are prefered (other formats may or may not work).
            • +
          • width: 1 - Pixel width of the border of each slice.
            • +
          +
        • label:
            +
          • show: 'auto' - Enable/Disable the labels. This can be set to true, false, or 'auto'. When set to 'auto', it will be set to false if the legend is enabled and true if not.
            • +
          • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
            • +
          • threshold: 0 - Hides the labels of any pie slice that is smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will hide all slices 3% or less of the total.
            • +
          • formatter: [function] - This function specifies how the positioned labels should be formatted, and is applied after the legend's labelFormatter function. The labels can also still be styled using the class "pieLabel" (i.e. ".pieLabel" or "#graph1 .pieLabel").
            • +
          • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
            • +
          • background:
              +
            • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the slice.
              • +
            • opacity: 0 - Opacity of the background for the positioned labels. Acceptable values range from 0 to 1, where 0 is completely transparent and 1 is completely opaque.
              • +
            +
          +
        • combine:
            +
          • threshold: 0 - Combines all slices that are smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will combine all slices 3% or less into one slice).
            • +
          • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the first slice to be combined.
            • +
          • label: 'Other' - Label text for the combined slice.
            • +
          +
        • highlight:
            +
          • opacity: 0.5 - Opacity of the highlight overlay on top of the current pie slice. Currently this just uses a white overlay, but support for changing the color of the overlay will also be added at a later date.
        -
      • combine:
          -
        • threshold: 0 - Combines all slices that are smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will combine all slices 3% or less into one slice).
          • -
        • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the first slice to be combined.
          • -
        • label: 'Other' - Label text for the combined slice.
          • -
        -
      • highlight:
          -
        • opacity: 0.5 - Opacity of the highlight overlay on top of the current pie slice. Currently this just uses a white overlay, but support for changing the color of the overlay will also be added at a later date. + +

          Changes/Features

          +
            +
          • v1.0 - November 20th, 2009 - Brian Medendorp
            • +
          • The pie plug-in is now part of the Flot repository! This should make it a lot easier to deal with.
            • +
          • Added a new option (innerRadius) to add a "donut hole" to the center of the pie, based on comtributions from Anthony Aragues. I was a little reluctant to add this feature because it doesn't work very well with the shadow created for the tilted pie, but figured it was worthwhile for non-tilted pies. Also, excanvas apparently doesn't support compositing, so it will fall back to using the stroke color to fill in the center (but I recommend setting the stroke color to the background color anyway).
            • +
          • Changed the lineJoin for the border of the pie slices to use the 'round' option. This should make the center of the pie look better, particularly when there are numerous thin slices.
            • +
          • Included a bug fix submitted by btburnett3 to display a slightly smaller slice in the event that the slice is 100% and being rendered with Internet Explorer. I haven't experienced this bug myself, but it doesn't seem to hurt anything so I've included it.
            • +
          • The tilt value is now used when calculating the maximum radius of the pie in relation to the height of the container. This should prevent the pie from being smaller than it needed to in some cases, as well as reducing the amount of extra white space generated above and below the pie.
            • +
          • Hover and Click functionality are now availabe!
              +
            • Thanks to btburnett3 for the original hover functionality and Anthony Aragues for the modification that makes it compatable with excanvas, this was a huge help!
              • +
            • Added a new option (highlight opacity) to modify the highlight created when mousing over a slice. Currently this just uses a white overlay, but an option to change the hightlight color will be added when the appropriate functionality becomes available. +
            • I had a major setback that required me to practically rebuild the hover/click events from scratch one piece at a time (I discovered that it only worked with a single pie on a page at a time), but the end result ended up being virtually identical to the original, so I'm not quite sure what exactly made it work.
              • +
            • Warning: There are some minor issues with using this functionality in conjuction with some of the other more advanced features (tilt and donut). When using a donut hole, the inner portion still triggers the events even though that portion of the pie is no longer visible. When tilted, the interactive portions still use the original, untilted version of the pie when determining mouse position (this is because the isPointInPath function apparently doesn't work with transformations), however hover and click both work this way, so the appropriate slice is still highlighted when clicking, and it isn't as noticable of a problem.
              • +
            • +
          • Included a bug fix submitted by Xavi Ivars to fix array issues when other javascript libraries are included in addition to jQuery
            • +
            +
          • v0.4 - July 1st, 2009 - Brian Medendorp
            • +
          • Each series will now be shown in the legend, even if it's value is zero. The series will not get a positioned label because it will overlap with the other labels present and often makes them unreadable.
            • +
          • Data can now be passed in using the standard Flot method using an array of datapoints, the pie plugin will simply use the first y-value that it finds for each series in this case. The plugin uses this datastructure internally, but you can still use the old method of passing in a single numerical value for each series (the plugin will convert it as necessary). This should make it easier to transition from other types of graphs (such as a stacked bar graph) to a pie.
            • +
          • The pie can now be tilted at an angle with a new "tilt" option. Acceptable values range from 0-1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn). If the plugin determines that it will fit within the canvas, a drop shadow will be drawn under the tilted pie (this also requires a tilt value of 0.8 or less).
            • +
            +
          • v0.3.2 - June 25th, 2009 - Brian Medendorp
            • +
          • Fixed a bug that was causing the pie to be shifted too far left or right when the legend is showing in some cases.
            • +
            +
          • v0.3.1 - June 24th, 2009 - Brian Medendorp
            • +
          • Fixed a bug that was causing nothing to be drawn and generating a javascript error if any of the data values were set to zero.
            • +
            +
          • v0.3 - June 23rd, 2009 - Brian Medendorp
            • +
          • The legend now works without any modifications! Because of changes made to flot and the plugin system (thanks Ole Laursen!) I was able to simplify a number of things and am now able to use the legend without the direct access hack that was required in the previous version.
            • +
            +
          • v0.2 - June 22nd, 2009 - Brian Medendorp
            • +
          • The legend now works but only if you make the necessary changes to jquery.flot.js. Because of this, I changed the default values for pie.radius and pie.label.show to new 'auto' settings that change the default behavior of the size and labels depending on whether the legend functionality is available or not.
            • +
            +
          • v0.1 - June 18th, 2009 - Brian Medendorp
            • +
          • Rewrote the entire pie code into a flot plugin (since that is now an option), so it should be much easier to use and the code is cleaned up a bit. However, the (standard flot) legend is no longer available because the only way to prevent the grid lines from being displayed also prevents the legend from being displayed. Hopefully this can be fixed at a later date.
            • +
          • Restructured and combined some of the options. It should be much easier to deal with now.
            • +
          • Added the ability to change the starting point of the pie (still defaults to the top).
            • +
          • Modified the default options to show the labels to compensate for the lack of a legend.
            • +
          • Modified this page to use a random dataset. Note: you may need to refresh the page to see the effects of some of the examples.
            • +
            +
          • May 21st, 2009 - Brian Medendorp
            • +
          • Merged original pie modifications by Sergey Nosenko into the latest SVN version (as of May 15th, 2009) so that it will work with ie8.
            • +
          • Pie graph will now be centered in the canvas unless moved because of the legend or manually via the options. Additionally it prevents the pie from being moved beyond the edge of the canvas.
            • +
          • Modified the code related to the labelFormatter option to apply flot's legend labelFormatter first. This is so that the labels will be consistent, but still provide extra formatting for the positioned labels (such as adding the percentage value).
            • +
          • Positioned labels now have their backgrounds applied as a seperate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.
            • +
          • As long as the labelOffset and radiusLimit are not set to hard values, the pie will be shrunk if the labels will extend outside the edge of the canvas
            • +
          • Added new options "radiusLimitFactor" and "radiusLimit" which limits how large the (visual) radius of the pie is in relation to the full radius (as calculated from the canvas dimensions) or a hard-pixel value (respectively). This allows for pushing the labels "outside" the pie.
            • +
          • Added a new option "labelHidePercent" that does not show the positioned labels of slices smaller than the specified percentage. This is to help prevent a bunch of overlapping labels from small slices.
            • +
          • Added a new option "sliceCombinePercent" that combines all slices smaller than the specified percentage into one larger slice. This is to help make the pie more attractive when there are a number of tiny slices. The options "sliceCombineColor" and "sliceCombineLabel" have also been added to change the color and name of the new slice if desired.
            • +
          • Tested in Firefox (3.0.10, 3.5b4), Internet Explorer (6.0.2900, 7.0.5730, 8.0.6001), Chrome (1.0.154), Opera (9.64), and Safari (3.1.1, 4 beta 5528.16).
          -
        - -

        Changes/Features

        -
          -
        • v1.0 - November 20th, 2009 - Brian Medendorp
          • -
        • The pie plug-in is now part of the Flot repository! This should make it a lot easier to deal with.
          • -
        • Added a new option (innerRadius) to add a "donut hole" to the center of the pie, based on comtributions from Anthony Aragues. I was a little reluctant to add this feature because it doesn't work very well with the shadow created for the tilted pie, but figured it was worthwhile for non-tilted pies. Also, excanvas apparently doesn't support compositing, so it will fall back to using the stroke color to fill in the center (but I recommend setting the stroke color to the background color anyway).
          • -
        • Changed the lineJoin for the border of the pie slices to use the 'round' option. This should make the center of the pie look better, particularly when there are numerous thin slices.
          • -
        • Included a bug fix submitted by btburnett3 to display a slightly smaller slice in the event that the slice is 100% and being rendered with Internet Explorer. I haven't experienced this bug myself, but it doesn't seem to hurt anything so I've included it.
          • -
        • The tilt value is now used when calculating the maximum radius of the pie in relation to the height of the container. This should prevent the pie from being smaller than it needed to in some cases, as well as reducing the amount of extra white space generated above and below the pie.
          • -
        • Hover and Click functionality are now availabe!
            -
          • Thanks to btburnett3 for the original hover functionality and Anthony Aragues for the modification that makes it compatable with excanvas, this was a huge help!
            • -
          • Added a new option (highlight opacity) to modify the highlight created when mousing over a slice. Currently this just uses a white overlay, but an option to change the hightlight color will be added when the appropriate functionality becomes available. -
          • I had a major setback that required me to practically rebuild the hover/click events from scratch one piece at a time (I discovered that it only worked with a single pie on a page at a time), but the end result ended up being virtually identical to the original, so I'm not quite sure what exactly made it work.
            • -
          • Warning: There are some minor issues with using this functionality in conjuction with some of the other more advanced features (tilt and donut). When using a donut hole, the inner portion still triggers the events even though that portion of the pie is no longer visible. When tilted, the interactive portions still use the original, untilted version of the pie when determining mouse position (this is because the isPointInPath function apparently doesn't work with transformations), however hover and click both work this way, so the appropriate slice is still highlighted when clicking, and it isn't as noticable of a problem.
            • -
          • -
        • Included a bug fix submitted by Xavi Ivars to fix array issues when other javascript libraries are included in addition to jQuery
          • -
          -
        • v0.4 - July 1st, 2009 - Brian Medendorp
          • -
        • Each series will now be shown in the legend, even if it's value is zero. The series will not get a positioned label because it will overlap with the other labels present and often makes them unreadable.
          • -
        • Data can now be passed in using the standard Flot method using an array of datapoints, the pie plugin will simply use the first y-value that it finds for each series in this case. The plugin uses this datastructure internally, but you can still use the old method of passing in a single numerical value for each series (the plugin will convert it as necessary). This should make it easier to transition from other types of graphs (such as a stacked bar graph) to a pie.
          • -
        • The pie can now be tilted at an angle with a new "tilt" option. Acceptable values range from 0-1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn). If the plugin determines that it will fit within the canvas, a drop shadow will be drawn under the tilted pie (this also requires a tilt value of 0.8 or less).
          • -
          -
        • v0.3.2 - June 25th, 2009 - Brian Medendorp
          • -
        • Fixed a bug that was causing the pie to be shifted too far left or right when the legend is showing in some cases.
          • -
          -
        • v0.3.1 - June 24th, 2009 - Brian Medendorp
          • -
        • Fixed a bug that was causing nothing to be drawn and generating a javascript error if any of the data values were set to zero.
          • -
          -
        • v0.3 - June 23rd, 2009 - Brian Medendorp
          • -
        • The legend now works without any modifications! Because of changes made to flot and the plugin system (thanks Ole Laursen!) I was able to simplify a number of things and am now able to use the legend without the direct access hack that was required in the previous version.
          • -
          -
        • v0.2 - June 22nd, 2009 - Brian Medendorp
          • -
        • The legend now works but only if you make the necessary changes to jquery.flot.js. Because of this, I changed the default values for pie.radius and pie.label.show to new 'auto' settings that change the default behavior of the size and labels depending on whether the legend functionality is available or not.
          • -
          -
        • v0.1 - June 18th, 2009 - Brian Medendorp
          • -
        • Rewrote the entire pie code into a flot plugin (since that is now an option), so it should be much easier to use and the code is cleaned up a bit. However, the (standard flot) legend is no longer available because the only way to prevent the grid lines from being displayed also prevents the legend from being displayed. Hopefully this can be fixed at a later date.
          • -
        • Restructured and combined some of the options. It should be much easier to deal with now.
          • -
        • Added the ability to change the starting point of the pie (still defaults to the top).
          • -
        • Modified the default options to show the labels to compensate for the lack of a legend.
          • -
        • Modified this page to use a random dataset. Note: you may need to refresh the page to see the effects of some of the examples.
          • -
          -
        • May 21st, 2009 - Brian Medendorp
          • -
        • Merged original pie modifications by Sergey Nosenko into the latest SVN version (as of May 15th, 2009) so that it will work with ie8.
          • -
        • Pie graph will now be centered in the canvas unless moved because of the legend or manually via the options. Additionally it prevents the pie from being moved beyond the edge of the canvas.
          • -
        • Modified the code related to the labelFormatter option to apply flot's legend labelFormatter first. This is so that the labels will be consistent, but still provide extra formatting for the positioned labels (such as adding the percentage value).
          • -
        • Positioned labels now have their backgrounds applied as a seperate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.
          • -
        • As long as the labelOffset and radiusLimit are not set to hard values, the pie will be shrunk if the labels will extend outside the edge of the canvas
          • -
        • Added new options "radiusLimitFactor" and "radiusLimit" which limits how large the (visual) radius of the pie is in relation to the full radius (as calculated from the canvas dimensions) or a hard-pixel value (respectively). This allows for pushing the labels "outside" the pie.
          • -
        • Added a new option "labelHidePercent" that does not show the positioned labels of slices smaller than the specified percentage. This is to help prevent a bunch of overlapping labels from small slices.
          • -
        • Added a new option "sliceCombinePercent" that combines all slices smaller than the specified percentage into one larger slice. This is to help make the pie more attractive when there are a number of tiny slices. The options "sliceCombineColor" and "sliceCombineLabel" have also been added to change the color and name of the new slice if desired.
          • -
        • Tested in Firefox (3.0.10, 3.5b4), Internet Explorer (6.0.2900, 7.0.5730, 8.0.6001), Chrome (1.0.154), Opera (9.64), and Safari (3.1.1, 4 beta 5528.16). -
        - - - - +
        • + + + + + diff --git a/examples/series-toggle/index.html b/examples/series-toggle/index.html index bc6fd9fd5..1d26f4966 100644 --- a/examples/series-toggle/index.html +++ b/examples/series-toggle/index.html @@ -1,98 +1,117 @@ - + - - - Flot Examples - - - - - - -

        Flot Examples

        - -
        - -

        Here is an example with real data: military budgets for - various countries in constant (2005) million US dollars (source: SIPRI).

        - -

        Since all data is available client-side, it's pretty easy to - make the plot interactive. Try turning countries on/off with the - checkboxes below.

        - -

        Show:

        - - - - + + + Flot Examples: Toggling Series + + + + + + + + + + +
        + +
        +
        +

        +
        + +

        This example shows military budgets for various countries in constant (2005) million US dollars (source: SIPRI).

        + +

        Since all data is available client-side, it's pretty easy to make the plot interactive. Try turning countries on and off with the checkboxes next to the plot.

        + +
        + + + + diff --git a/examples/series-types/index.html b/examples/series-types/index.html index dd21a31ed..e987c4d20 100644 --- a/examples/series-types/index.html +++ b/examples/series-types/index.html @@ -1,75 +1,86 @@ - + - - - Flot Examples - - - - - - -

        Flot Examples

        - -
        - -

        Flot supports lines, points, filled areas, bars and any - combinations of these, in the same plot and even on the same data - series.

        - - - - + + + Flot Examples: Series Types + + + + + + + + + + +
        + +
        +
        +
        + +

        Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series.

        + +
        + + + + diff --git a/examples/stacking/index.html b/examples/stacking/index.html index b7de39173..9d4d105e8 100644 --- a/examples/stacking/index.html +++ b/examples/stacking/index.html @@ -1,77 +1,103 @@ - + - - - Flot Examples - - - - - - - -

        Flot Examples

        - -
        - -

        With the stack plugin, you can have Flot stack the - series. This is useful if you wish to display both a total and the - constituents it is made of. The only requirement is that you provide - the input sorted on x.

        - -

        - - -

        - -

        - - - -

        - - - - + + + Flot Examples: Stacking + + + + + + + + + + + +
        + +
        +
        +
        + +

        With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of. The only requirement is that you provide the input sorted on x.

        + +

        + + +

        + +

        + + + +

        + +
        + + + + diff --git a/examples/symbols/index.html b/examples/symbols/index.html index e71b1aad6..0974b6105 100644 --- a/examples/symbols/index.html +++ b/examples/symbols/index.html @@ -1,49 +1,72 @@ - + - - - Flot Examples - - - - - - - -

        Flot Examples

        - -
        - -

        Various point types. Circles are built-in. For other - point types, you can define a little callback function to draw the - symbol; some common ones are available in the symbol plugin.

        - - - - + + + Flot Examples: Symbols + + + + + + + + + + + +
        + +
        +
        +
        + +

        Points can be marked in several ways, with circles being the built-in default. For other point types, you can define a callback function to draw the symbol. Some common symbols are available in the symbol plugin.

        + +
        + + + + diff --git a/examples/threshold/index.html b/examples/threshold/index.html index f10144a2b..ae5e46d9a 100644 --- a/examples/threshold/index.html +++ b/examples/threshold/index.html @@ -1,54 +1,72 @@ - + - - - Flot Examples - - - - - - - -

        Flot Examples

        - -
        - -

        With the threshold plugin, you can apply a specific color to - the part of a data series below a threshold. This is can be useful - for highlighting negative values, e.g. when displaying net results - or what's in stock.

        - -

        - - - -

        - - - - + + + Flot Examples: Thresholds + + + + + + + + + + + +
        + +
        +
        +
        + +

        With the threshold plugin, you can apply a specific color to the part of a data series below a threshold. This is can be useful for highlighting negative values, e.g. when displaying net results or what's in stock.

        + +

        + + + +

        + +
        + + + + diff --git a/examples/tracking/index.html b/examples/tracking/index.html index c116159c3..856464951 100644 --- a/examples/tracking/index.html +++ b/examples/tracking/index.html @@ -1,95 +1,129 @@ - + - - - Flot Examples - - - - - - - -

        Flot Examples

        - -
        - -

        You can add crosshairs that'll track the mouse position, either - on both axes or as here on only one.

        - -

        If you combine it with listening on hover events, you can use - it to track the intersection on the curves by interpolating - the data points (look at the legend).

        - -

        - - - - + + + Flot Examples: Tracking + + + + + + + + + + + +
        + +
        +
        +
        + +

        You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.

        + +

        If you combine it with listening on hover events, you can use it to track the intersection on the curves by interpolating the data points (look at the legend).

        + +

        + +
        + + + + diff --git a/examples/visitors/index.html b/examples/visitors/index.html index 51ad05926..eac8787ed 100644 --- a/examples/visitors/index.html +++ b/examples/visitors/index.html @@ -1,91 +1,142 @@ - + - - - Flot Examples - - - - - - - - -

        Flot Examples

        - -
        - -

        Visitors per day to the Flot homepage. Weekends are colored. Try zooming. - The plot below shows an overview.

        - -
        - - - - + + + Flot Examples: Visitors + + + + + + + + + + + + +
        + +
        +
        +
        + +
        +
        +
        + +

        This plot shows visitors per day to the Flot homepage, with weekends colored.

        + +

        The smaller plot is linked to the main plot, so it acts as an overview. Try dragging a selection on either plot, and watch the behavior of the other.

        + +
        + + + + diff --git a/examples/zooming/index.html b/examples/zooming/index.html index 9a4ef2220..4e82b3030 100644 --- a/examples/zooming/index.html +++ b/examples/zooming/index.html @@ -1,98 +1,140 @@ - + - - - Flot Examples - - - - - - - -

        Flot Examples

        - -
        -
        -
        - -
        -
        - -

        -
        - -

        The selection support makes it easy to - construct flexible zooming schemes. With a few lines of code, the - small overview plot to the right has been connected to the large - plot. Try selecting a rectangle on either of them.

        - - - - + + + Flot Examples: Selection and zooming + + + + + + + + + + + +
        + +
        +
        +
        +
        + +

        Selection support makes it easy to construct flexible zooming schemes. With a few lines of code, the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.

        + +
        + + + + From 492e97eacc8ca819273db48845fea45f4d2a2d90 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sat, 26 Jan 2013 16:17:59 -0500 Subject: [PATCH 020/419] Avoid being too specific in placeholder styles. --- examples/examples.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/examples.css b/examples/examples.css index c6ef030c0..ae4135f35 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -85,7 +85,7 @@ input[type=checkbox] { -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); } -.demo-container > div { +#placeholder, #overview { width: 100%; height: 100%; font-size: 14px; From 61a13d1059744fe5476e57cda2ea802a8ee1aa39 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sat, 26 Jan 2013 16:23:24 -0500 Subject: [PATCH 021/419] Additional code & comments cleanup. --- examples/ajax/index.html | 2 +- examples/axes-interacting/index.html | 11 ++++++----- examples/axes-multiple/index.html | 9 +++++---- examples/axes-time/index.html | 16 ++++++++-------- examples/basic-options/index.html | 2 +- examples/basic-usage/index.html | 9 ++++++--- examples/categories/index.html | 2 +- examples/image/index.html | 2 +- examples/interacting/index.html | 2 +- examples/percentiles/index.html | 28 ++++++++++++++-------------- examples/realtime/index.html | 9 ++++++--- examples/series-toggle/index.html | 2 +- examples/series-types/index.html | 2 +- examples/stacking/index.html | 2 +- examples/symbols/index.html | 2 +- examples/threshold/index.html | 2 +- examples/tracking/index.html | 8 +++++--- examples/visitors/index.html | 6 +++--- examples/zooming/index.html | 8 ++++---- 19 files changed, 67 insertions(+), 57 deletions(-) diff --git a/examples/ajax/index.html b/examples/ajax/index.html index 493b02270..653e65055 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -38,7 +38,7 @@ // Find the URL in the link right next to us, then fetch the data - var dataurl = button.siblings('a').attr('href'); + var dataurl = button.siblings("a").attr("href"); function onDataReceived(series) { diff --git a/examples/axes-interacting/index.html b/examples/axes-interacting/index.html index dbd9ee6f1..539891a93 100644 --- a/examples/axes-interacting/index.html +++ b/examples/axes-interacting/index.html @@ -27,7 +27,7 @@ { data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4 } ]; - var plot = $.plot($("#placeholder"), data, { + var plot = $.plot("#placeholder", data, { xaxes: [ { position: 'bottom' }, { position: 'top'} @@ -40,16 +40,17 @@ ] }); - // now for each axis, create a div + // Create a div for each axis + $.each(plot.getAxes(), function (i, axis) { if (!axis.show) return; var box = axis.box; - $('
        ') - .data('axis.direction', axis.direction) - .data('axis.n', axis.n) + $("
        ") + .data("axis.direction", axis.direction) + .data("axis.n", axis.n) .css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" }) .appendTo(plot.getPlaceholder()) .hover( diff --git a/examples/axes-multiple/index.html b/examples/axes-multiple/index.html index 734550af9..fd6dba7da 100644 --- a/examples/axes-multiple/index.html +++ b/examples/axes-multiple/index.html @@ -13,25 +13,26 @@ $(function() { var oilprices = [[1167692400000,61.05], [1167778800000,58.32], [1167865200000,57.35], [1167951600000,56.31], [1168210800000,55.55], [1168297200000,55.64], [1168383600000,54.02], [1168470000000,51.88], [1168556400000,52.99], [1168815600000,52.99], [1168902000000,51.21], [1168988400000,52.24], [1169074800000,50.48], [1169161200000,51.99], [1169420400000,51.13], [1169506800000,55.04], [1169593200000,55.37], [1169679600000,54.23], [1169766000000,55.42], [1170025200000,54.01], [1170111600000,56.97], [1170198000000,58.14], [1170284400000,58.14], [1170370800000,59.02], [1170630000000,58.74], [1170716400000,58.88], [1170802800000,57.71], [1170889200000,59.71], [1170975600000,59.89], [1171234800000,57.81], [1171321200000,59.06], [1171407600000,58.00], [1171494000000,57.99], [1171580400000,59.39], [1171839600000,59.39], [1171926000000,58.07], [1172012400000,60.07], [1172098800000,61.14], [1172444400000,61.39], [1172530800000,61.46], [1172617200000,61.79], [1172703600000,62.00], [1172790000000,60.07], [1173135600000,60.69], [1173222000000,61.82], [1173308400000,60.05], [1173654000000,58.91], [1173740400000,57.93], [1173826800000,58.16], [1173913200000,57.55], [1173999600000,57.11], [1174258800000,56.59], [1174345200000,59.61], [1174518000000,61.69], [1174604400000,62.28], [1174860000000,62.91], [1174946400000,62.93], [1175032800000,64.03], [1175119200000,66.03], [1175205600000,65.87], [1175464800000,64.64], [1175637600000,64.38], [1175724000000,64.28], [1175810400000,64.28], [1176069600000,61.51], [1176156000000,61.89], [1176242400000,62.01], [1176328800000,63.85], [1176415200000,63.63], [1176674400000,63.61], [1176760800000,63.10], [1176847200000,63.13], [1176933600000,61.83], [1177020000000,63.38], [1177279200000,64.58], [1177452000000,65.84], [1177538400000,65.06], [1177624800000,66.46], [1177884000000,64.40], [1178056800000,63.68], [1178143200000,63.19], [1178229600000,61.93], [1178488800000,61.47], [1178575200000,61.55], [1178748000000,61.81], [1178834400000,62.37], [1179093600000,62.46], [1179180000000,63.17], [1179266400000,62.55], [1179352800000,64.94], [1179698400000,66.27], [1179784800000,65.50], [1179871200000,65.77], [1179957600000,64.18], [1180044000000,65.20], [1180389600000,63.15], [1180476000000,63.49], [1180562400000,65.08], [1180908000000,66.30], [1180994400000,65.96], [1181167200000,66.93], [1181253600000,65.98], [1181599200000,65.35], [1181685600000,66.26], [1181858400000,68.00], [1182117600000,69.09], [1182204000000,69.10], [1182290400000,68.19], [1182376800000,68.19], [1182463200000,69.14], [1182722400000,68.19], [1182808800000,67.77], [1182895200000,68.97], [1182981600000,69.57], [1183068000000,70.68], [1183327200000,71.09], [1183413600000,70.92], [1183586400000,71.81], [1183672800000,72.81], [1183932000000,72.19], [1184018400000,72.56], [1184191200000,72.50], [1184277600000,74.15], [1184623200000,75.05], [1184796000000,75.92], [1184882400000,75.57], [1185141600000,74.89], [1185228000000,73.56], [1185314400000,75.57], [1185400800000,74.95], [1185487200000,76.83], [1185832800000,78.21], [1185919200000,76.53], [1186005600000,76.86], [1186092000000,76.00], [1186437600000,71.59], [1186696800000,71.47], [1186956000000,71.62], [1187042400000,71.00], [1187301600000,71.98], [1187560800000,71.12], [1187647200000,69.47], [1187733600000,69.26], [1187820000000,69.83], [1187906400000,71.09], [1188165600000,71.73], [1188338400000,73.36], [1188511200000,74.04], [1188856800000,76.30], [1189116000000,77.49], [1189461600000,78.23], [1189548000000,79.91], [1189634400000,80.09], [1189720800000,79.10], [1189980000000,80.57], [1190066400000,81.93], [1190239200000,83.32], [1190325600000,81.62], [1190584800000,80.95], [1190671200000,79.53], [1190757600000,80.30], [1190844000000,82.88], [1190930400000,81.66], [1191189600000,80.24], [1191276000000,80.05], [1191362400000,79.94], [1191448800000,81.44], [1191535200000,81.22], [1191794400000,79.02], [1191880800000,80.26], [1191967200000,80.30], [1192053600000,83.08], [1192140000000,83.69], [1192399200000,86.13], [1192485600000,87.61], [1192572000000,87.40], [1192658400000,89.47], [1192744800000,88.60], [1193004000000,87.56], [1193090400000,87.56], [1193176800000,87.10], [1193263200000,91.86], [1193612400000,93.53], [1193698800000,94.53], [1193871600000,95.93], [1194217200000,93.98], [1194303600000,96.37], [1194476400000,95.46], [1194562800000,96.32], [1195081200000,93.43], [1195167600000,95.10], [1195426800000,94.64], [1195513200000,95.10], [1196031600000,97.70], [1196118000000,94.42], [1196204400000,90.62], [1196290800000,91.01], [1196377200000,88.71], [1196636400000,88.32], [1196809200000,90.23], [1196982000000,88.28], [1197241200000,87.86], [1197327600000,90.02], [1197414000000,92.25], [1197586800000,90.63], [1197846000000,90.63], [1197932400000,90.49], [1198018800000,91.24], [1198105200000,91.06], [1198191600000,90.49], [1198710000000,96.62], [1198796400000,96.00], [1199142000000,99.62], [1199314800000,99.18], [1199401200000,95.09], [1199660400000,96.33], [1199833200000,95.67], [1200351600000,91.90], [1200438000000,90.84], [1200524400000,90.13], [1200610800000,90.57], [1200956400000,89.21], [1201042800000,86.99], [1201129200000,89.85], [1201474800000,90.99], [1201561200000,91.64], [1201647600000,92.33], [1201734000000,91.75], [1202079600000,90.02], [1202166000000,88.41], [1202252400000,87.14], [1202338800000,88.11], [1202425200000,91.77], [1202770800000,92.78], [1202857200000,93.27], [1202943600000,95.46], [1203030000000,95.46], [1203289200000,101.74], [1203462000000,98.81], [1203894000000,100.88], [1204066800000,99.64], [1204153200000,102.59], [1204239600000,101.84], [1204498800000,99.52], [1204585200000,99.52], [1204671600000,104.52], [1204758000000,105.47], [1204844400000,105.15], [1205103600000,108.75], [1205276400000,109.92], [1205362800000,110.33], [1205449200000,110.21], [1205708400000,105.68], [1205967600000,101.84], [1206313200000,100.86], [1206399600000,101.22], [1206486000000,105.90], [1206572400000,107.58], [1206658800000,105.62], [1206914400000,101.58], [1207000800000,100.98], [1207173600000,103.83], [1207260000000,106.23], [1207605600000,108.50], [1207778400000,110.11], [1207864800000,110.14], [1208210400000,113.79], [1208296800000,114.93], [1208383200000,114.86], [1208728800000,117.48], [1208815200000,118.30], [1208988000000,116.06], [1209074400000,118.52], [1209333600000,118.75], [1209420000000,113.46], [1209592800000,112.52], [1210024800000,121.84], [1210111200000,123.53], [1210197600000,123.69], [1210543200000,124.23], [1210629600000,125.80], [1210716000000,126.29], [1211148000000,127.05], [1211320800000,129.07], [1211493600000,132.19], [1211839200000,128.85], [1212357600000,127.76], [1212703200000,138.54], [1212962400000,136.80], [1213135200000,136.38], [1213308000000,134.86], [1213653600000,134.01], [1213740000000,136.68], [1213912800000,135.65], [1214172000000,134.62], [1214258400000,134.62], [1214344800000,134.62], [1214431200000,139.64], [1214517600000,140.21], [1214776800000,140.00], [1214863200000,140.97], [1214949600000,143.57], [1215036000000,145.29], [1215381600000,141.37], [1215468000000,136.04], [1215727200000,146.40], [1215986400000,145.18], [1216072800000,138.74], [1216159200000,134.60], [1216245600000,129.29], [1216332000000,130.65], [1216677600000,127.95], [1216850400000,127.95], [1217282400000,122.19], [1217455200000,124.08], [1217541600000,125.10], [1217800800000,121.41], [1217887200000,119.17], [1217973600000,118.58], [1218060000000,120.02], [1218405600000,114.45], [1218492000000,113.01], [1218578400000,116.00], [1218751200000,113.77], [1219010400000,112.87], [1219096800000,114.53], [1219269600000,114.98], [1219356000000,114.98], [1219701600000,116.27], [1219788000000,118.15], [1219874400000,115.59], [1219960800000,115.46], [1220306400000,109.71], [1220392800000,109.35], [1220565600000,106.23], [1220824800000,106.34]]; + var exchangerates = [[1167606000000,0.7580], [1167692400000,0.7580], [1167778800000,0.75470], [1167865200000,0.75490], [1167951600000,0.76130], [1168038000000,0.76550], [1168124400000,0.76930], [1168210800000,0.76940], [1168297200000,0.76880], [1168383600000,0.76780], [1168470000000,0.77080], [1168556400000,0.77270], [1168642800000,0.77490], [1168729200000,0.77410], [1168815600000,0.77410], [1168902000000,0.77320], [1168988400000,0.77270], [1169074800000,0.77370], [1169161200000,0.77240], [1169247600000,0.77120], [1169334000000,0.7720], [1169420400000,0.77210], [1169506800000,0.77170], [1169593200000,0.77040], [1169679600000,0.7690], [1169766000000,0.77110], [1169852400000,0.7740], [1169938800000,0.77450], [1170025200000,0.77450], [1170111600000,0.7740], [1170198000000,0.77160], [1170284400000,0.77130], [1170370800000,0.76780], [1170457200000,0.76880], [1170543600000,0.77180], [1170630000000,0.77180], [1170716400000,0.77280], [1170802800000,0.77290], [1170889200000,0.76980], [1170975600000,0.76850], [1171062000000,0.76810], [1171148400000,0.7690], [1171234800000,0.7690], [1171321200000,0.76980], [1171407600000,0.76990], [1171494000000,0.76510], [1171580400000,0.76130], [1171666800000,0.76160], [1171753200000,0.76140], [1171839600000,0.76140], [1171926000000,0.76070], [1172012400000,0.76020], [1172098800000,0.76110], [1172185200000,0.76220], [1172271600000,0.76150], [1172358000000,0.75980], [1172444400000,0.75980], [1172530800000,0.75920], [1172617200000,0.75730], [1172703600000,0.75660], [1172790000000,0.75670], [1172876400000,0.75910], [1172962800000,0.75820], [1173049200000,0.75850], [1173135600000,0.76130], [1173222000000,0.76310], [1173308400000,0.76150], [1173394800000,0.760], [1173481200000,0.76130], [1173567600000,0.76270], [1173654000000,0.76270], [1173740400000,0.76080], [1173826800000,0.75830], [1173913200000,0.75750], [1173999600000,0.75620], [1174086000000,0.7520], [1174172400000,0.75120], [1174258800000,0.75120], [1174345200000,0.75170], [1174431600000,0.7520], [1174518000000,0.75110], [1174604400000,0.7480], [1174690800000,0.75090], [1174777200000,0.75310], [1174860000000,0.75310], [1174946400000,0.75270], [1175032800000,0.74980], [1175119200000,0.74930], [1175205600000,0.75040], [1175292000000,0.750], [1175378400000,0.74910], [1175464800000,0.74910], [1175551200000,0.74850], [1175637600000,0.74840], [1175724000000,0.74920], [1175810400000,0.74710], [1175896800000,0.74590], [1175983200000,0.74770], [1176069600000,0.74770], [1176156000000,0.74830], [1176242400000,0.74580], [1176328800000,0.74480], [1176415200000,0.7430], [1176501600000,0.73990], [1176588000000,0.73950], [1176674400000,0.73950], [1176760800000,0.73780], [1176847200000,0.73820], [1176933600000,0.73620], [1177020000000,0.73550], [1177106400000,0.73480], [1177192800000,0.73610], [1177279200000,0.73610], [1177365600000,0.73650], [1177452000000,0.73620], [1177538400000,0.73310], [1177624800000,0.73390], [1177711200000,0.73440], [1177797600000,0.73270], [1177884000000,0.73270], [1177970400000,0.73360], [1178056800000,0.73330], [1178143200000,0.73590], [1178229600000,0.73590], [1178316000000,0.73720], [1178402400000,0.7360], [1178488800000,0.7360], [1178575200000,0.7350], [1178661600000,0.73650], [1178748000000,0.73840], [1178834400000,0.73950], [1178920800000,0.74130], [1179007200000,0.73970], [1179093600000,0.73960], [1179180000000,0.73850], [1179266400000,0.73780], [1179352800000,0.73660], [1179439200000,0.740], [1179525600000,0.74110], [1179612000000,0.74060], [1179698400000,0.74050], [1179784800000,0.74140], [1179871200000,0.74310], [1179957600000,0.74310], [1180044000000,0.74380], [1180130400000,0.74430], [1180216800000,0.74430], [1180303200000,0.74430], [1180389600000,0.74340], [1180476000000,0.74290], [1180562400000,0.74420], [1180648800000,0.7440], [1180735200000,0.74390], [1180821600000,0.74370], [1180908000000,0.74370], [1180994400000,0.74290], [1181080800000,0.74030], [1181167200000,0.73990], [1181253600000,0.74180], [1181340000000,0.74680], [1181426400000,0.7480], [1181512800000,0.7480], [1181599200000,0.7490], [1181685600000,0.74940], [1181772000000,0.75220], [1181858400000,0.75150], [1181944800000,0.75020], [1182031200000,0.74720], [1182117600000,0.74720], [1182204000000,0.74620], [1182290400000,0.74550], [1182376800000,0.74490], [1182463200000,0.74670], [1182549600000,0.74580], [1182636000000,0.74270], [1182722400000,0.74270], [1182808800000,0.7430], [1182895200000,0.74290], [1182981600000,0.7440], [1183068000000,0.7430], [1183154400000,0.74220], [1183240800000,0.73880], [1183327200000,0.73880], [1183413600000,0.73690], [1183500000000,0.73450], [1183586400000,0.73450], [1183672800000,0.73450], [1183759200000,0.73520], [1183845600000,0.73410], [1183932000000,0.73410], [1184018400000,0.7340], [1184104800000,0.73240], [1184191200000,0.72720], [1184277600000,0.72640], [1184364000000,0.72550], [1184450400000,0.72580], [1184536800000,0.72580], [1184623200000,0.72560], [1184709600000,0.72570], [1184796000000,0.72470], [1184882400000,0.72430], [1184968800000,0.72440], [1185055200000,0.72350], [1185141600000,0.72350], [1185228000000,0.72350], [1185314400000,0.72350], [1185400800000,0.72620], [1185487200000,0.72880], [1185573600000,0.73010], [1185660000000,0.73370], [1185746400000,0.73370], [1185832800000,0.73240], [1185919200000,0.72970], [1186005600000,0.73170], [1186092000000,0.73150], [1186178400000,0.72880], [1186264800000,0.72630], [1186351200000,0.72630], [1186437600000,0.72420], [1186524000000,0.72530], [1186610400000,0.72640], [1186696800000,0.7270], [1186783200000,0.73120], [1186869600000,0.73050], [1186956000000,0.73050], [1187042400000,0.73180], [1187128800000,0.73580], [1187215200000,0.74090], [1187301600000,0.74540], [1187388000000,0.74370], [1187474400000,0.74240], [1187560800000,0.74240], [1187647200000,0.74150], [1187733600000,0.74190], [1187820000000,0.74140], [1187906400000,0.73770], [1187992800000,0.73550], [1188079200000,0.73150], [1188165600000,0.73150], [1188252000000,0.7320], [1188338400000,0.73320], [1188424800000,0.73460], [1188511200000,0.73280], [1188597600000,0.73230], [1188684000000,0.7340], [1188770400000,0.7340], [1188856800000,0.73360], [1188943200000,0.73510], [1189029600000,0.73460], [1189116000000,0.73210], [1189202400000,0.72940], [1189288800000,0.72660], [1189375200000,0.72660], [1189461600000,0.72540], [1189548000000,0.72420], [1189634400000,0.72130], [1189720800000,0.71970], [1189807200000,0.72090], [1189893600000,0.7210], [1189980000000,0.7210], [1190066400000,0.7210], [1190152800000,0.72090], [1190239200000,0.71590], [1190325600000,0.71330], [1190412000000,0.71050], [1190498400000,0.70990], [1190584800000,0.70990], [1190671200000,0.70930], [1190757600000,0.70930], [1190844000000,0.70760], [1190930400000,0.7070], [1191016800000,0.70490], [1191103200000,0.70120], [1191189600000,0.70110], [1191276000000,0.70190], [1191362400000,0.70460], [1191448800000,0.70630], [1191535200000,0.70890], [1191621600000,0.70770], [1191708000000,0.70770], [1191794400000,0.70770], [1191880800000,0.70910], [1191967200000,0.71180], [1192053600000,0.70790], [1192140000000,0.70530], [1192226400000,0.7050], [1192312800000,0.70550], [1192399200000,0.70550], [1192485600000,0.70450], [1192572000000,0.70510], [1192658400000,0.70510], [1192744800000,0.70170], [1192831200000,0.70], [1192917600000,0.69950], [1193004000000,0.69940], [1193090400000,0.70140], [1193176800000,0.70360], [1193263200000,0.70210], [1193349600000,0.70020], [1193436000000,0.69670], [1193522400000,0.6950], [1193612400000,0.6950], [1193698800000,0.69390], [1193785200000,0.6940], [1193871600000,0.69220], [1193958000000,0.69190], [1194044400000,0.69140], [1194130800000,0.68940], [1194217200000,0.68910], [1194303600000,0.69040], [1194390000000,0.6890], [1194476400000,0.68340], [1194562800000,0.68230], [1194649200000,0.68070], [1194735600000,0.68150], [1194822000000,0.68150], [1194908400000,0.68470], [1194994800000,0.68590], [1195081200000,0.68220], [1195167600000,0.68270], [1195254000000,0.68370], [1195340400000,0.68230], [1195426800000,0.68220], [1195513200000,0.68220], [1195599600000,0.67920], [1195686000000,0.67460], [1195772400000,0.67350], [1195858800000,0.67310], [1195945200000,0.67420], [1196031600000,0.67440], [1196118000000,0.67390], [1196204400000,0.67310], [1196290800000,0.67610], [1196377200000,0.67610], [1196463600000,0.67850], [1196550000000,0.68180], [1196636400000,0.68360], [1196722800000,0.68230], [1196809200000,0.68050], [1196895600000,0.67930], [1196982000000,0.68490], [1197068400000,0.68330], [1197154800000,0.68250], [1197241200000,0.68250], [1197327600000,0.68160], [1197414000000,0.67990], [1197500400000,0.68130], [1197586800000,0.68090], [1197673200000,0.68680], [1197759600000,0.69330], [1197846000000,0.69330], [1197932400000,0.69450], [1198018800000,0.69440], [1198105200000,0.69460], [1198191600000,0.69640], [1198278000000,0.69650], [1198364400000,0.69560], [1198450800000,0.69560], [1198537200000,0.6950], [1198623600000,0.69480], [1198710000000,0.69280], [1198796400000,0.68870], [1198882800000,0.68240], [1198969200000,0.67940], [1199055600000,0.67940], [1199142000000,0.68030], [1199228400000,0.68550], [1199314800000,0.68240], [1199401200000,0.67910], [1199487600000,0.67830], [1199574000000,0.67850], [1199660400000,0.67850], [1199746800000,0.67970], [1199833200000,0.680], [1199919600000,0.68030], [1200006000000,0.68050], [1200092400000,0.6760], [1200178800000,0.6770], [1200265200000,0.6770], [1200351600000,0.67360], [1200438000000,0.67260], [1200524400000,0.67640], [1200610800000,0.68210], [1200697200000,0.68310], [1200783600000,0.68420], [1200870000000,0.68420], [1200956400000,0.68870], [1201042800000,0.69030], [1201129200000,0.68480], [1201215600000,0.68240], [1201302000000,0.67880], [1201388400000,0.68140], [1201474800000,0.68140], [1201561200000,0.67970], [1201647600000,0.67690], [1201734000000,0.67650], [1201820400000,0.67330], [1201906800000,0.67290], [1201993200000,0.67580], [1202079600000,0.67580], [1202166000000,0.6750], [1202252400000,0.6780], [1202338800000,0.68330], [1202425200000,0.68560], [1202511600000,0.69030], [1202598000000,0.68960], [1202684400000,0.68960], [1202770800000,0.68820], [1202857200000,0.68790], [1202943600000,0.68620], [1203030000000,0.68520], [1203116400000,0.68230], [1203202800000,0.68130], [1203289200000,0.68130], [1203375600000,0.68220], [1203462000000,0.68020], [1203548400000,0.68020], [1203634800000,0.67840], [1203721200000,0.67480], [1203807600000,0.67470], [1203894000000,0.67470], [1203980400000,0.67480], [1204066800000,0.67330], [1204153200000,0.6650], [1204239600000,0.66110], [1204326000000,0.65830], [1204412400000,0.6590], [1204498800000,0.6590], [1204585200000,0.65810], [1204671600000,0.65780], [1204758000000,0.65740], [1204844400000,0.65320], [1204930800000,0.65020], [1205017200000,0.65140], [1205103600000,0.65140], [1205190000000,0.65070], [1205276400000,0.6510], [1205362800000,0.64890], [1205449200000,0.64240], [1205535600000,0.64060], [1205622000000,0.63820], [1205708400000,0.63820], [1205794800000,0.63410], [1205881200000,0.63440], [1205967600000,0.63780], [1206054000000,0.64390], [1206140400000,0.64780], [1206226800000,0.64810], [1206313200000,0.64810], [1206399600000,0.64940], [1206486000000,0.64380], [1206572400000,0.63770], [1206658800000,0.63290], [1206745200000,0.63360], [1206831600000,0.63330], [1206914400000,0.63330], [1207000800000,0.6330], [1207087200000,0.63710], [1207173600000,0.64030], [1207260000000,0.63960], [1207346400000,0.63640], [1207432800000,0.63560], [1207519200000,0.63560], [1207605600000,0.63680], [1207692000000,0.63570], [1207778400000,0.63540], [1207864800000,0.6320], [1207951200000,0.63320], [1208037600000,0.63280], [1208124000000,0.63310], [1208210400000,0.63420], [1208296800000,0.63210], [1208383200000,0.63020], [1208469600000,0.62780], [1208556000000,0.63080], [1208642400000,0.63240], [1208728800000,0.63240], [1208815200000,0.63070], [1208901600000,0.62770], [1208988000000,0.62690], [1209074400000,0.63350], [1209160800000,0.63920], [1209247200000,0.640], [1209333600000,0.64010], [1209420000000,0.63960], [1209506400000,0.64070], [1209592800000,0.64230], [1209679200000,0.64290], [1209765600000,0.64720], [1209852000000,0.64850], [1209938400000,0.64860], [1210024800000,0.64670], [1210111200000,0.64440], [1210197600000,0.64670], [1210284000000,0.65090], [1210370400000,0.64780], [1210456800000,0.64610], [1210543200000,0.64610], [1210629600000,0.64680], [1210716000000,0.64490], [1210802400000,0.6470], [1210888800000,0.64610], [1210975200000,0.64520], [1211061600000,0.64220], [1211148000000,0.64220], [1211234400000,0.64250], [1211320800000,0.64140], [1211407200000,0.63660], [1211493600000,0.63460], [1211580000000,0.6350], [1211666400000,0.63460], [1211752800000,0.63460], [1211839200000,0.63430], [1211925600000,0.63460], [1212012000000,0.63790], [1212098400000,0.64160], [1212184800000,0.64420], [1212271200000,0.64310], [1212357600000,0.64310], [1212444000000,0.64350], [1212530400000,0.6440], [1212616800000,0.64730], [1212703200000,0.64690], [1212789600000,0.63860], [1212876000000,0.63560], [1212962400000,0.6340], [1213048800000,0.63460], [1213135200000,0.6430], [1213221600000,0.64520], [1213308000000,0.64670], [1213394400000,0.65060], [1213480800000,0.65040], [1213567200000,0.65030], [1213653600000,0.64810], [1213740000000,0.64510], [1213826400000,0.6450], [1213912800000,0.64410], [1213999200000,0.64140], [1214085600000,0.64090], [1214172000000,0.64090], [1214258400000,0.64280], [1214344800000,0.64310], [1214431200000,0.64180], [1214517600000,0.63710], [1214604000000,0.63490], [1214690400000,0.63330], [1214776800000,0.63340], [1214863200000,0.63380], [1214949600000,0.63420], [1215036000000,0.6320], [1215122400000,0.63180], [1215208800000,0.6370], [1215295200000,0.63680], [1215381600000,0.63680], [1215468000000,0.63830], [1215554400000,0.63710], [1215640800000,0.63710], [1215727200000,0.63550], [1215813600000,0.6320], [1215900000000,0.62770], [1215986400000,0.62760], [1216072800000,0.62910], [1216159200000,0.62740], [1216245600000,0.62930], [1216332000000,0.63110], [1216418400000,0.6310], [1216504800000,0.63120], [1216591200000,0.63120], [1216677600000,0.63040], [1216764000000,0.62940], [1216850400000,0.63480], [1216936800000,0.63780], [1217023200000,0.63680], [1217109600000,0.63680], [1217196000000,0.63680], [1217282400000,0.6360], [1217368800000,0.6370], [1217455200000,0.64180], [1217541600000,0.64110], [1217628000000,0.64350], [1217714400000,0.64270], [1217800800000,0.64270], [1217887200000,0.64190], [1217973600000,0.64460], [1218060000000,0.64680], [1218146400000,0.64870], [1218232800000,0.65940], [1218319200000,0.66660], [1218405600000,0.66660], [1218492000000,0.66780], [1218578400000,0.67120], [1218664800000,0.67050], [1218751200000,0.67180], [1218837600000,0.67840], [1218924000000,0.68110], [1219010400000,0.68110], [1219096800000,0.67940], [1219183200000,0.68040], [1219269600000,0.67810], [1219356000000,0.67560], [1219442400000,0.67350], [1219528800000,0.67630], [1219615200000,0.67620], [1219701600000,0.67770], [1219788000000,0.68150], [1219874400000,0.68020], [1219960800000,0.6780], [1220047200000,0.67960], [1220133600000,0.68170], [1220220000000,0.68170], [1220306400000,0.68320], [1220392800000,0.68770], [1220479200000,0.69120], [1220565600000,0.69140], [1220652000000,0.70090], [1220738400000,0.70120], [1220824800000,0.7010], [1220911200000,0.70050]]; function euroFormatter(v, axis) { - return v.toFixed(axis.tickDecimals) +"€"; + return v.toFixed(axis.tickDecimals) + "€"; } function doPlot(position) { - $.plot($("#placeholder"), [ + $.plot("#placeholder", [ { data: oilprices, label: "Oil price ($)" }, { data: exchangerates, label: "USD/EUR exchange rate", yaxis: 2 } ], { - xaxes: [ { mode: 'time' } ], + xaxes: [ { mode: "time" } ], yaxes: [ { min: 0 }, { // align if we are to the right alignTicksWithAxis: position == "right" ? 1 : null, position: position, tickFormatter: euroFormatter } ], - legend: { position: 'sw' } + legend: { position: "sw" } }); } diff --git a/examples/axes-time/index.html b/examples/axes-time/index.html index f047a71b0..87967adc2 100644 --- a/examples/axes-time/index.html +++ b/examples/axes-time/index.html @@ -14,18 +14,18 @@ var d = [[-373597200000, 315.71], [-370918800000, 317.45], [-368326800000, 317.50], [-363056400000, 315.86], [-360378000000, 314.93], [-357699600000, 313.19], [-352429200000, 313.34], [-349837200000, 314.67], [-347158800000, 315.58], [-344480400000, 316.47], [-342061200000, 316.65], [-339382800000, 317.71], [-336790800000, 318.29], [-334112400000, 318.16], [-331520400000, 316.55], [-328842000000, 314.80], [-326163600000, 313.84], [-323571600000, 313.34], [-320893200000, 314.81], [-318301200000, 315.59], [-315622800000, 316.43], [-312944400000, 316.97], [-310438800000, 317.58], [-307760400000, 319.03], [-305168400000, 320.03], [-302490000000, 319.59], [-299898000000, 318.18], [-297219600000, 315.91], [-294541200000, 314.16], [-291949200000, 313.83], [-289270800000, 315.00], [-286678800000, 316.19], [-284000400000, 316.89], [-281322000000, 317.70], [-278902800000, 318.54], [-276224400000, 319.48], [-273632400000, 320.58], [-270954000000, 319.78], [-268362000000, 318.58], [-265683600000, 316.79], [-263005200000, 314.99], [-260413200000, 315.31], [-257734800000, 316.10], [-255142800000, 317.01], [-252464400000, 317.94], [-249786000000, 318.56], [-247366800000, 319.69], [-244688400000, 320.58], [-242096400000, 321.01], [-239418000000, 320.61], [-236826000000, 319.61], [-234147600000, 317.40], [-231469200000, 316.26], [-228877200000, 315.42], [-226198800000, 316.69], [-223606800000, 317.69], [-220928400000, 318.74], [-218250000000, 319.08], [-215830800000, 319.86], [-213152400000, 321.39], [-210560400000, 322.24], [-207882000000, 321.47], [-205290000000, 319.74], [-202611600000, 317.77], [-199933200000, 316.21], [-197341200000, 315.99], [-194662800000, 317.07], [-192070800000, 318.36], [-189392400000, 319.57], [-178938000000, 322.23], [-176259600000, 321.89], [-173667600000, 320.44], [-170989200000, 318.70], [-168310800000, 316.70], [-165718800000, 316.87], [-163040400000, 317.68], [-160448400000, 318.71], [-157770000000, 319.44], [-155091600000, 320.44], [-152672400000, 320.89], [-149994000000, 322.13], [-147402000000, 322.16], [-144723600000, 321.87], [-142131600000, 321.21], [-139453200000, 318.87], [-136774800000, 317.81], [-134182800000, 317.30], [-131504400000, 318.87], [-128912400000, 319.42], [-126234000000, 320.62], [-123555600000, 321.59], [-121136400000, 322.39], [-118458000000, 323.70], [-115866000000, 324.07], [-113187600000, 323.75], [-110595600000, 322.40], [-107917200000, 320.37], [-105238800000, 318.64], [-102646800000, 318.10], [-99968400000, 319.79], [-97376400000, 321.03], [-94698000000, 322.33], [-92019600000, 322.50], [-89600400000, 323.04], [-86922000000, 324.42], [-84330000000, 325.00], [-81651600000, 324.09], [-79059600000, 322.55], [-76381200000, 320.92], [-73702800000, 319.26], [-71110800000, 319.39], [-68432400000, 320.72], [-65840400000, 321.96], [-63162000000, 322.57], [-60483600000, 323.15], [-57978000000, 323.89], [-55299600000, 325.02], [-52707600000, 325.57], [-50029200000, 325.36], [-47437200000, 324.14], [-44758800000, 322.11], [-42080400000, 320.33], [-39488400000, 320.25], [-36810000000, 321.32], [-34218000000, 322.90], [-31539600000, 324.00], [-28861200000, 324.42], [-26442000000, 325.64], [-23763600000, 326.66], [-21171600000, 327.38], [-18493200000, 326.70], [-15901200000, 325.89], [-13222800000, 323.67], [-10544400000, 322.38], [-7952400000, 321.78], [-5274000000, 322.85], [-2682000000, 324.12], [-3600000, 325.06], [2674800000, 325.98], [5094000000, 326.93], [7772400000, 328.13], [10364400000, 328.07], [13042800000, 327.66], [15634800000, 326.35], [18313200000, 324.69], [20991600000, 323.10], [23583600000, 323.07], [26262000000, 324.01], [28854000000, 325.13], [31532400000, 326.17], [34210800000, 326.68], [36630000000, 327.18], [39308400000, 327.78], [41900400000, 328.92], [44578800000, 328.57], [47170800000, 327.37], [49849200000, 325.43], [52527600000, 323.36], [55119600000, 323.56], [57798000000, 324.80], [60390000000, 326.01], [63068400000, 326.77], [65746800000, 327.63], [68252400000, 327.75], [70930800000, 329.72], [73522800000, 330.07], [76201200000, 329.09], [78793200000, 328.05], [81471600000, 326.32], [84150000000, 324.84], [86742000000, 325.20], [89420400000, 326.50], [92012400000, 327.55], [94690800000, 328.54], [97369200000, 329.56], [99788400000, 330.30], [102466800000, 331.50], [105058800000, 332.48], [107737200000, 332.07], [110329200000, 330.87], [113007600000, 329.31], [115686000000, 327.51], [118278000000, 327.18], [120956400000, 328.16], [123548400000, 328.64], [126226800000, 329.35], [128905200000, 330.71], [131324400000, 331.48], [134002800000, 332.65], [136594800000, 333.16], [139273200000, 332.06], [141865200000, 330.99], [144543600000, 329.17], [147222000000, 327.41], [149814000000, 327.20], [152492400000, 328.33], [155084400000, 329.50], [157762800000, 330.68], [160441200000, 331.41], [162860400000, 331.85], [165538800000, 333.29], [168130800000, 333.91], [170809200000, 333.40], [173401200000, 331.78], [176079600000, 329.88], [178758000000, 328.57], [181350000000, 328.46], [184028400000, 329.26], [189298800000, 331.71], [191977200000, 332.76], [194482800000, 333.48], [197161200000, 334.78], [199753200000, 334.78], [202431600000, 334.17], [205023600000, 332.78], [207702000000, 330.64], [210380400000, 328.95], [212972400000, 328.77], [215650800000, 330.23], [218242800000, 331.69], [220921200000, 332.70], [223599600000, 333.24], [226018800000, 334.96], [228697200000, 336.04], [231289200000, 336.82], [233967600000, 336.13], [236559600000, 334.73], [239238000000, 332.52], [241916400000, 331.19], [244508400000, 331.19], [247186800000, 332.35], [249778800000, 333.47], [252457200000, 335.11], [255135600000, 335.26], [257554800000, 336.60], [260233200000, 337.77], [262825200000, 338.00], [265503600000, 337.99], [268095600000, 336.48], [270774000000, 334.37], [273452400000, 332.27], [276044400000, 332.41], [278722800000, 333.76], [281314800000, 334.83], [283993200000, 336.21], [286671600000, 336.64], [289090800000, 338.12], [291769200000, 339.02], [294361200000, 339.02], [297039600000, 339.20], [299631600000, 337.58], [302310000000, 335.55], [304988400000, 333.89], [307580400000, 334.14], [310258800000, 335.26], [312850800000, 336.71], [315529200000, 337.81], [318207600000, 338.29], [320713200000, 340.04], [323391600000, 340.86], [325980000000, 341.47], [328658400000, 341.26], [331250400000, 339.29], [333928800000, 337.60], [336607200000, 336.12], [339202800000, 336.08], [341881200000, 337.22], [344473200000, 338.34], [347151600000, 339.36], [349830000000, 340.51], [352249200000, 341.57], [354924000000, 342.56], [357516000000, 343.01], [360194400000, 342.47], [362786400000, 340.71], [365464800000, 338.52], [368143200000, 336.96], [370738800000, 337.13], [373417200000, 338.58], [376009200000, 339.89], [378687600000, 340.93], [381366000000, 341.69], [383785200000, 342.69], [389052000000, 344.30], [391730400000, 343.43], [394322400000, 341.88], [397000800000, 339.89], [399679200000, 337.95], [402274800000, 338.10], [404953200000, 339.27], [407545200000, 340.67], [410223600000, 341.42], [412902000000, 342.68], [415321200000, 343.46], [417996000000, 345.10], [420588000000, 345.76], [423266400000, 345.36], [425858400000, 343.91], [428536800000, 342.05], [431215200000, 340.00], [433810800000, 340.12], [436489200000, 341.33], [439081200000, 342.94], [441759600000, 343.87], [444438000000, 344.60], [446943600000, 345.20], [452210400000, 347.36], [454888800000, 346.74], [457480800000, 345.41], [460159200000, 343.01], [462837600000, 341.23], [465433200000, 341.52], [468111600000, 342.86], [470703600000, 344.41], [473382000000, 345.09], [476060400000, 345.89], [478479600000, 347.49], [481154400000, 348.00], [483746400000, 348.75], [486424800000, 348.19], [489016800000, 346.54], [491695200000, 344.63], [494373600000, 343.03], [496969200000, 342.92], [499647600000, 344.24], [502239600000, 345.62], [504918000000, 346.43], [507596400000, 346.94], [510015600000, 347.88], [512690400000, 349.57], [515282400000, 350.35], [517960800000, 349.72], [520552800000, 347.78], [523231200000, 345.86], [525909600000, 344.84], [528505200000, 344.32], [531183600000, 345.67], [533775600000, 346.88], [536454000000, 348.19], [539132400000, 348.55], [541551600000, 349.52], [544226400000, 351.12], [546818400000, 351.84], [549496800000, 351.49], [552088800000, 349.82], [554767200000, 347.63], [557445600000, 346.38], [560041200000, 346.49], [562719600000, 347.75], [565311600000, 349.03], [567990000000, 350.20], [570668400000, 351.61], [573174000000, 352.22], [575848800000, 353.53], [578440800000, 354.14], [581119200000, 353.62], [583711200000, 352.53], [586389600000, 350.41], [589068000000, 348.84], [591663600000, 348.94], [594342000000, 350.04], [596934000000, 351.29], [599612400000, 352.72], [602290800000, 353.10], [604710000000, 353.65], [607384800000, 355.43], [609976800000, 355.70], [612655200000, 355.11], [615247200000, 353.79], [617925600000, 351.42], [620604000000, 349.81], [623199600000, 350.11], [625878000000, 351.26], [628470000000, 352.63], [631148400000, 353.64], [633826800000, 354.72], [636246000000, 355.49], [638920800000, 356.09], [641512800000, 357.08], [644191200000, 356.11], [646783200000, 354.70], [649461600000, 352.68], [652140000000, 351.05], [654735600000, 351.36], [657414000000, 352.81], [660006000000, 354.22], [662684400000, 354.85], [665362800000, 355.66], [667782000000, 357.04], [670456800000, 358.40], [673048800000, 359.00], [675727200000, 357.99], [678319200000, 356.00], [680997600000, 353.78], [683676000000, 352.20], [686271600000, 352.22], [688950000000, 353.70], [691542000000, 354.98], [694220400000, 356.09], [696898800000, 356.85], [699404400000, 357.73], [702079200000, 358.91], [704671200000, 359.45], [707349600000, 359.19], [709941600000, 356.72], [712620000000, 354.79], [715298400000, 352.79], [717894000000, 353.20], [720572400000, 354.15], [723164400000, 355.39], [725842800000, 356.77], [728521200000, 357.17], [730940400000, 358.26], [733615200000, 359.16], [736207200000, 360.07], [738885600000, 359.41], [741477600000, 357.44], [744156000000, 355.30], [746834400000, 353.87], [749430000000, 354.04], [752108400000, 355.27], [754700400000, 356.70], [757378800000, 358.00], [760057200000, 358.81], [762476400000, 359.68], [765151200000, 361.13], [767743200000, 361.48], [770421600000, 360.60], [773013600000, 359.20], [775692000000, 357.23], [778370400000, 355.42], [780966000000, 355.89], [783644400000, 357.41], [786236400000, 358.74], [788914800000, 359.73], [791593200000, 360.61], [794012400000, 361.58], [796687200000, 363.05], [799279200000, 363.62], [801957600000, 363.03], [804549600000, 361.55], [807228000000, 358.94], [809906400000, 357.93], [812502000000, 357.80], [815180400000, 359.22], [817772400000, 360.44], [820450800000, 361.83], [823129200000, 362.95], [825634800000, 363.91], [828309600000, 364.28], [830901600000, 364.94], [833580000000, 364.70], [836172000000, 363.31], [838850400000, 361.15], [841528800000, 359.40], [844120800000, 359.34], [846802800000, 360.62], [849394800000, 361.96], [852073200000, 362.81], [854751600000, 363.87], [857170800000, 364.25], [859845600000, 366.02], [862437600000, 366.46], [865116000000, 365.32], [867708000000, 364.07], [870386400000, 361.95], [873064800000, 360.06], [875656800000, 360.49], [878338800000, 362.19], [880930800000, 364.12], [883609200000, 364.99], [886287600000, 365.82], [888706800000, 366.95], [891381600000, 368.42], [893973600000, 369.33], [896652000000, 368.78], [899244000000, 367.59], [901922400000, 365.84], [904600800000, 363.83], [907192800000, 364.18], [909874800000, 365.34], [912466800000, 366.93], [915145200000, 367.94], [917823600000, 368.82], [920242800000, 369.46], [922917600000, 370.77], [925509600000, 370.66], [928188000000, 370.10], [930780000000, 369.08], [933458400000, 366.66], [936136800000, 364.60], [938728800000, 365.17], [941410800000, 366.51], [944002800000, 367.89], [946681200000, 369.04], [949359600000, 369.35], [951865200000, 370.38], [954540000000, 371.63], [957132000000, 371.32], [959810400000, 371.53], [962402400000, 369.75], [965080800000, 368.23], [967759200000, 366.87], [970351200000, 366.94], [973033200000, 368.27], [975625200000, 369.64], [978303600000, 370.46], [980982000000, 371.44], [983401200000, 372.37], [986076000000, 373.33], [988668000000, 373.77], [991346400000, 373.09], [993938400000, 371.51], [996616800000, 369.55], [999295200000, 368.12], [1001887200000, 368.38], [1004569200000, 369.66], [1007161200000, 371.11], [1009839600000, 372.36], [1012518000000, 373.09], [1014937200000, 373.81], [1017612000000, 374.93], [1020204000000, 375.58], [1022882400000, 375.44], [1025474400000, 373.86], [1028152800000, 371.77], [1030831200000, 370.73], [1033423200000, 370.50], [1036105200000, 372.18], [1038697200000, 373.70], [1041375600000, 374.92], [1044054000000, 375.62], [1046473200000, 376.51], [1049148000000, 377.75], [1051740000000, 378.54], [1054418400000, 378.20], [1057010400000, 376.68], [1059688800000, 374.43], [1062367200000, 373.11], [1064959200000, 373.10], [1067641200000, 374.77], [1070233200000, 375.97], [1072911600000, 377.03], [1075590000000, 377.87], [1078095600000, 378.88], [1080770400000, 380.42], [1083362400000, 380.62], [1086040800000, 379.70], [1088632800000, 377.43], [1091311200000, 376.32], [1093989600000, 374.19], [1096581600000, 374.47], [1099263600000, 376.15], [1101855600000, 377.51], [1104534000000, 378.43], [1107212400000, 379.70], [1109631600000, 380.92], [1112306400000, 382.18], [1114898400000, 382.45], [1117576800000, 382.14], [1120168800000, 380.60], [1122847200000, 378.64], [1125525600000, 376.73], [1128117600000, 376.84], [1130799600000, 378.29], [1133391600000, 380.06], [1136070000000, 381.40], [1138748400000, 382.20], [1141167600000, 382.66], [1143842400000, 384.69], [1146434400000, 384.94], [1149112800000, 384.01], [1151704800000, 382.14], [1154383200000, 380.31], [1157061600000, 378.81], [1159653600000, 379.03], [1162335600000, 380.17], [1164927600000, 381.85], [1167606000000, 382.94], [1170284400000, 383.86], [1172703600000, 384.49], [1175378400000, 386.37], [1177970400000, 386.54], [1180648800000, 385.98], [1183240800000, 384.36], [1185919200000, 381.85], [1188597600000, 380.74], [1191189600000, 381.15], [1193871600000, 382.38], [1196463600000, 383.94], [1199142000000, 385.44]]; - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time" } }); $("#whole").click(function () { - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time" } }); }); $("#nineties").click(function () { - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time", min: (new Date(1990, 0, 1)).getTime(), @@ -35,7 +35,7 @@ }); $("#latenineties").click(function () { - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time", minTickSize: [1, "year"], @@ -46,7 +46,7 @@ }); $("#ninetyninequarters").click(function () { - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time", minTickSize: [1, "quarter"], @@ -57,7 +57,7 @@ }); $("#ninetynine").click(function () { - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time", minTickSize: [1, "month"], @@ -68,7 +68,7 @@ }); $("#lastweekninetynine").click(function () { - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time", minTickSize: [1, "day"], @@ -80,7 +80,7 @@ }); $("#lastdayninetynine").click(function () { - $.plot($("#placeholder"), [d], { + $.plot("#placeholder", [d], { xaxis: { mode: "time", minTickSize: [1, "hour"], diff --git a/examples/basic-options/index.html b/examples/basic-options/index.html index c76b793cd..da06b9fdd 100644 --- a/examples/basic-options/index.html +++ b/examples/basic-options/index.html @@ -26,7 +26,7 @@ d3.push([i, Math.tan(i)]); } - $.plot( $("#placeholder"), [ + $.plot("#placeholder", [ { label: "sin(x)", data: d1 }, { label: "cos(x)", data: d2 }, { label: "tan(x)", data: d3 } diff --git a/examples/basic-usage/index.html b/examples/basic-usage/index.html index d7518493d..ffb7bcc72 100644 --- a/examples/basic-usage/index.html +++ b/examples/basic-usage/index.html @@ -10,13 +10,16 @@ + @@ -49,9 +50,9 @@

        Resizing

-
+
-
+
@@ -59,8 +60,7 @@

Resizing

Sometimes it makes more sense to just let the plot take up the available space. In that case, we need to redraw the plot each time the placeholder changes its size. If you include the resize plugin, this is handled automatically.

- -

Try resizing the window.

+

Drag the bottom and right sides of the plot to resize it.

diff --git a/examples/shared/jquery-ui/jquery-ui.min.css b/examples/shared/jquery-ui/jquery-ui.min.css new file mode 100644 index 000000000..08331c1cb --- /dev/null +++ b/examples/shared/jquery-ui/jquery-ui.min.css @@ -0,0 +1,6 @@ +/*! jQuery UI - v1.10.0 - 2013-01-26 +* http://jqueryui.com +* Includes: jquery.ui.core.css, jquery.ui.resizable.css +* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */ + +.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px} \ No newline at end of file diff --git a/examples/shared/jquery-ui/jquery-ui.min.js b/examples/shared/jquery-ui/jquery-ui.min.js new file mode 100644 index 000000000..890228244 --- /dev/null +++ b/examples/shared/jquery-ui/jquery-ui.min.js @@ -0,0 +1,6 @@ +/*! jQuery UI - v1.10.0 - 2013-01-26 +* http://jqueryui.com +* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.resizable.js +* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */ + +(function(e,t){function i(t,n){var r,i,o,u=t.nodeName.toLowerCase();return"area"===u?(r=t.parentNode,i=r.name,!t.href||!i||r.nodeName.toLowerCase()!=="map"?!1:(o=e("img[usemap=#"+i+"]")[0],!!o&&s(o))):(/input|select|textarea|button|object/.test(u)?!t.disabled:"a"===u?t.href||n:n)&&s(t)}function s(t){return e.expr.filters.visible(t)&&!e(t).parents().addBack().filter(function(){return e.css(this,"visibility")==="hidden"}).length}var n=0,r=/^ui-id-\d+$/;e.ui=e.ui||{};if(e.ui.version)return;e.extend(e.ui,{version:"1.10.0",keyCode:{BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SPACE:32,TAB:9,UP:38}}),e.fn.extend({_focus:e.fn.focus,focus:function(t,n){return typeof t=="number"?this.each(function(){var r=this;setTimeout(function(){e(r).focus(),n&&n.call(r)},t)}):this._focus.apply(this,arguments)},scrollParent:function(){var t;return e.ui.ie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?t=this.parents().filter(function(){return/(relative|absolute|fixed)/.test(e.css(this,"position"))&&/(auto|scroll)/.test(e.css(this,"overflow")+e.css(this,"overflow-y")+e.css(this,"overflow-x"))}).eq(0):t=this.parents().filter(function(){return/(auto|scroll)/.test(e.css(this,"overflow")+e.css(this,"overflow-y")+e.css(this,"overflow-x"))}).eq(0),/fixed/.test(this.css("position"))||!t.length?e(document):t},zIndex:function(n){if(n!==t)return this.css("zIndex",n);if(this.length){var r=e(this[0]),i,s;while(r.length&&r[0]!==document){i=r.css("position");if(i==="absolute"||i==="relative"||i==="fixed"){s=parseInt(r.css("zIndex"),10);if(!isNaN(s)&&s!==0)return s}r=r.parent()}}return 0},uniqueId:function(){return this.each(function(){this.id||(this.id="ui-id-"+ ++n)})},removeUniqueId:function(){return this.each(function(){r.test(this.id)&&e(this).removeAttr("id")})}}),e.extend(e.expr[":"],{data:e.expr.createPseudo?e.expr.createPseudo(function(t){return function(n){return!!e.data(n,t)}}):function(t,n,r){return!!e.data(t,r[3])},focusable:function(t){return i(t,!isNaN(e.attr(t,"tabindex")))},tabbable:function(t){var n=e.attr(t,"tabindex"),r=isNaN(n);return(r||n>=0)&&i(t,!r)}}),e("").outerWidth(1).jquery||e.each(["Width","Height"],function(n,r){function u(t,n,r,s){return e.each(i,function(){n-=parseFloat(e.css(t,"padding"+this))||0,r&&(n-=parseFloat(e.css(t,"border"+this+"Width"))||0),s&&(n-=parseFloat(e.css(t,"margin"+this))||0)}),n}var i=r==="Width"?["Left","Right"]:["Top","Bottom"],s=r.toLowerCase(),o={innerWidth:e.fn.innerWidth,innerHeight:e.fn.innerHeight,outerWidth:e.fn.outerWidth,outerHeight:e.fn.outerHeight};e.fn["inner"+r]=function(n){return n===t?o["inner"+r].call(this):this.each(function(){e(this).css(s,u(this,n)+"px")})},e.fn["outer"+r]=function(t,n){return typeof t!="number"?o["outer"+r].call(this,t):this.each(function(){e(this).css(s,u(this,t,!0,n)+"px")})}}),e.fn.addBack||(e.fn.addBack=function(e){return this.add(e==null?this.prevObject:this.prevObject.filter(e))}),e("").data("a-b","a").removeData("a-b").data("a-b")&&(e.fn.removeData=function(t){return function(n){return arguments.length?t.call(this,e.camelCase(n)):t.call(this)}}(e.fn.removeData)),e.ui.ie=!!/msie [\w.]+/.exec(navigator.userAgent.toLowerCase()),e.support.selectstart="onselectstart"in document.createElement("div"),e.fn.extend({disableSelection:function(){return this.bind((e.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(e){e.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}}),e.extend(e.ui,{plugin:{add:function(t,n,r){var i,s=e.ui[t].prototype;for(i in r)s.plugins[i]=s.plugins[i]||[],s.plugins[i].push([n,r[i]])},call:function(e,t,n){var r,i=e.plugins[t];if(!i||!e.element[0].parentNode||e.element[0].parentNode.nodeType===11)return;for(r=0;r0?!0:(t[r]=1,i=t[r]>0,t[r]=0,i)}})})(jQuery);(function(e,t){var n=0,r=Array.prototype.slice,i=e.cleanData;e.cleanData=function(t){for(var n=0,r;(r=t[n])!=null;n++)try{e(r).triggerHandler("remove")}catch(s){}i(t)},e.widget=function(t,n,r){var i,s,o,u,a={},f=t.split(".")[0];t=t.split(".")[1],i=f+"-"+t,r||(r=n,n=e.Widget),e.expr[":"][i.toLowerCase()]=function(t){return!!e.data(t,i)},e[f]=e[f]||{},s=e[f][t],o=e[f][t]=function(e,t){if(!this._createWidget)return new o(e,t);arguments.length&&this._createWidget(e,t)},e.extend(o,s,{version:r.version,_proto:e.extend({},r),_childConstructors:[]}),u=new n,u.options=e.widget.extend({},u.options),e.each(r,function(t,r){if(!e.isFunction(r)){a[t]=r;return}a[t]=function(){var e=function(){return n.prototype[t].apply(this,arguments)},i=function(e){return n.prototype[t].apply(this,e)};return function(){var t=this._super,n=this._superApply,s;return this._super=e,this._superApply=i,s=r.apply(this,arguments),this._super=t,this._superApply=n,s}}()}),o.prototype=e.widget.extend(u,{widgetEventPrefix:s?u.widgetEventPrefix:t},a,{constructor:o,namespace:f,widgetName:t,widgetFullName:i}),s?(e.each(s._childConstructors,function(t,n){var r=n.prototype;e.widget(r.namespace+"."+r.widgetName,o,n._proto)}),delete s._childConstructors):n._childConstructors.push(o),e.widget.bridge(t,o)},e.widget.extend=function(n){var i=r.call(arguments,1),s=0,o=i.length,u,a;for(;s",options:{disabled:!1,create:null},_createWidget:function(t,r){r=e(r||this.defaultElement||this)[0],this.element=e(r),this.uuid=n++,this.eventNamespace="."+this.widgetName+this.uuid,this.options=e.widget.extend({},this.options,this._getCreateOptions(),t),this.bindings=e(),this.hoverable=e(),this.focusable=e(),r!==this&&(e.data(r,this.widgetFullName,this),this._on(!0,this.element,{remove:function(e){e.target===r&&this.destroy()}}),this.document=e(r.style?r.ownerDocument:r.document||r),this.window=e(this.document[0].defaultView||this.document[0].parentWindow)),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:e.noop,_getCreateEventData:e.noop,_create:e.noop,_init:e.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetName).removeData(this.widgetFullName).removeData(e.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled "+"ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:e.noop,widget:function(){return this.element},option:function(n,r){var i=n,s,o,u;if(arguments.length===0)return e.widget.extend({},this.options);if(typeof n=="string"){i={},s=n.split("."),n=s.shift();if(s.length){o=i[n]=e.widget.extend({},this.options[n]);for(u=0;u=this.options.distance},_mouseDelayMet:function(){return this.mouseDelayMet},_mouseStart:function(){},_mouseDrag:function(){},_mouseStop:function(){},_mouseCapture:function(){return!0}})})(jQuery);(function(e,t){function n(e){return parseInt(e,10)||0}function r(e){return!isNaN(parseInt(e,10))}e.widget("ui.resizable",e.ui.mouse,{version:"1.10.0",widgetEventPrefix:"resize",options:{alsoResize:!1,animate:!1,animateDuration:"slow",animateEasing:"swing",aspectRatio:!1,autoHide:!1,containment:!1,ghost:!1,grid:!1,handles:"e,s,se",helper:!1,maxHeight:null,maxWidth:null,minHeight:10,minWidth:10,zIndex:90,resize:null,start:null,stop:null},_create:function(){var t,n,r,i,s,o=this,u=this.options;this.element.addClass("ui-resizable"),e.extend(this,{_aspectRatio:!!u.aspectRatio,aspectRatio:u.aspectRatio,originalElement:this.element,_proportionallyResizeElements:[],_helper:u.helper||u.ghost||u.animate?u.helper||"ui-resizable-helper":null}),this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)&&(this.element.wrap(e("
").css({position:this.element.css("position"),width:this.element.outerWidth(),height:this.element.outerHeight(),top:this.element.css("top"),left:this.element.css("left")})),this.element=this.element.parent().data("ui-resizable",this.element.data("ui-resizable")),this.elementIsWrapper=!0,this.element.css({marginLeft:this.originalElement.css("marginLeft"),marginTop:this.originalElement.css("marginTop"),marginRight:this.originalElement.css("marginRight"),marginBottom:this.originalElement.css("marginBottom")}),this.originalElement.css({marginLeft:0,marginTop:0,marginRight:0,marginBottom:0}),this.originalResizeStyle=this.originalElement.css("resize"),this.originalElement.css("resize","none"),this._proportionallyResizeElements.push(this.originalElement.css({position:"static",zoom:1,display:"block"})),this.originalElement.css({margin:this.originalElement.css("margin")}),this._proportionallyResize()),this.handles=u.handles||(e(".ui-resizable-handle",this.element).length?{n:".ui-resizable-n",e:".ui-resizable-e",s:".ui-resizable-s",w:".ui-resizable-w",se:".ui-resizable-se",sw:".ui-resizable-sw",ne:".ui-resizable-ne",nw:".ui-resizable-nw"}:"e,s,se");if(this.handles.constructor===String){this.handles==="all"&&(this.handles="n,e,s,w,se,sw,ne,nw"),t=this.handles.split(","),this.handles={};for(n=0;n
"),i.css({zIndex:u.zIndex}),"se"===r&&i.addClass("ui-icon ui-icon-gripsmall-diagonal-se"),this.handles[r]=".ui-resizable-"+r,this.element.append(i)}this._renderAxis=function(t){var n,r,i,s;t=t||this.element;for(n in this.handles){this.handles[n].constructor===String&&(this.handles[n]=e(this.handles[n],this.element).show()),this.elementIsWrapper&&this.originalElement[0].nodeName.match(/textarea|input|select|button/i)&&(r=e(this.handles[n],this.element),s=/sw|ne|nw|se|n|s/.test(n)?r.outerHeight():r.outerWidth(),i=["padding",/ne|nw|n/.test(n)?"Top":/se|sw|s/.test(n)?"Bottom":/^e$/.test(n)?"Right":"Left"].join(""),t.css(i,s),this._proportionallyResize());if(!e(this.handles[n]).length)continue}},this._renderAxis(this.element),this._handles=e(".ui-resizable-handle",this.element).disableSelection(),this._handles.mouseover(function(){o.resizing||(this.className&&(i=this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i)),o.axis=i&&i[1]?i[1]:"se")}),u.autoHide&&(this._handles.hide(),e(this.element).addClass("ui-resizable-autohide").mouseenter(function(){if(u.disabled)return;e(this).removeClass("ui-resizable-autohide"),o._handles.show()}).mouseleave(function(){if(u.disabled)return;o.resizing||(e(this).addClass("ui-resizable-autohide"),o._handles.hide())})),this._mouseInit()},_destroy:function(){this._mouseDestroy();var t,n=function(t){e(t).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing").removeData("resizable").removeData("ui-resizable").unbind(".resizable").find(".ui-resizable-handle").remove()};return this.elementIsWrapper&&(n(this.element),t=this.element,this.originalElement.css({position:t.css("position"),width:t.outerWidth(),height:t.outerHeight(),top:t.css("top"),left:t.css("left")}).insertAfter(t),t.remove()),this.originalElement.css("resize",this.originalResizeStyle),n(this.originalElement),this},_mouseCapture:function(t){var n,r,i=!1;for(n in this.handles){r=e(this.handles[n])[0];if(r===t.target||e.contains(r,t.target))i=!0}return!this.options.disabled&&i},_mouseStart:function(t){var r,i,s,o=this.options,u=this.element.position(),a=this.element;return this.resizing=!0,/absolute/.test(a.css("position"))?a.css({position:"absolute",top:a.css("top"),left:a.css("left")}):a.is(".ui-draggable")&&a.css({position:"absolute",top:u.top,left:u.left}),this._renderProxy(),r=n(this.helper.css("left")),i=n(this.helper.css("top")),o.containment&&(r+=e(o.containment).scrollLeft()||0,i+=e(o.containment).scrollTop()||0),this.offset=this.helper.offset(),this.position={left:r,top:i},this.size=this._helper?{width:a.outerWidth(),height:a.outerHeight()}:{width:a.width(),height:a.height()},this.originalSize=this._helper?{width:a.outerWidth(),height:a.outerHeight()}:{width:a.width(),height:a.height()},this.originalPosition={left:r,top:i},this.sizeDiff={width:a.outerWidth()-a.width(),height:a.outerHeight()-a.height()},this.originalMousePosition={left:t.pageX,top:t.pageY},this.aspectRatio=typeof o.aspectRatio=="number"?o.aspectRatio:this.originalSize.width/this.originalSize.height||1,s=e(".ui-resizable-"+this.axis).css("cursor"),e("body").css("cursor",s==="auto"?this.axis+"-resize":s),a.addClass("ui-resizable-resizing"),this._propagate("start",t),!0},_mouseDrag:function(t){var n,r=this.helper,i={},s=this.originalMousePosition,o=this.axis,u=this.position.top,a=this.position.left,f=this.size.width,l=this.size.height,c=t.pageX-s.left||0,h=t.pageY-s.top||0,p=this._change[o];if(!p)return!1;n=p.apply(this,[t,c,h]),this._updateVirtualBoundaries(t.shiftKey);if(this._aspectRatio||t.shiftKey)n=this._updateRatio(n,t);return n=this._respectSize(n,t),this._updateCache(n),this._propagate("resize",t),this.position.top!==u&&(i.top=this.position.top+"px"),this.position.left!==a&&(i.left=this.position.left+"px"),this.size.width!==f&&(i.width=this.size.width+"px"),this.size.height!==l&&(i.height=this.size.height+"px"),r.css(i),!this._helper&&this._proportionallyResizeElements.length&&this._proportionallyResize(),e.isEmptyObject(i)||this._trigger("resize",t,this.ui()),!1},_mouseStop:function(t){this.resizing=!1;var n,r,i,s,o,u,a,f=this.options,l=this;return this._helper&&(n=this._proportionallyResizeElements,r=n.length&&/textarea/i.test(n[0].nodeName),i=r&&e.ui.hasScroll(n[0],"left")?0:l.sizeDiff.height,s=r?0:l.sizeDiff.width,o={width:l.helper.width()-s,height:l.helper.height()-i},u=parseInt(l.element.css("left"),10)+(l.position.left-l.originalPosition.left)||null,a=parseInt(l.element.css("top"),10)+(l.position.top-l.originalPosition.top)||null,f.animate||this.element.css(e.extend(o,{top:a,left:u})),l.helper.height(l.size.height),l.helper.width(l.size.width),this._helper&&!f.animate&&this._proportionallyResize()),e("body").css("cursor","auto"),this.element.removeClass("ui-resizable-resizing"),this._propagate("stop",t),this._helper&&this.helper.remove(),!1},_updateVirtualBoundaries:function(e){var t,n,i,s,o,u=this.options;o={minWidth:r(u.minWidth)?u.minWidth:0,maxWidth:r(u.maxWidth)?u.maxWidth:Infinity,minHeight:r(u.minHeight)?u.minHeight:0,maxHeight:r(u.maxHeight)?u.maxHeight:Infinity};if(this._aspectRatio||e)t=o.minHeight*this.aspectRatio,i=o.minWidth/this.aspectRatio,n=o.maxHeight*this.aspectRatio,s=o.maxWidth/this.aspectRatio,t>o.minWidth&&(o.minWidth=t),i>o.minHeight&&(o.minHeight=i),ne.width,u=r(e.height)&&t.minHeight&&t.minHeight>e.height,a=this.originalPosition.left+this.originalSize.width,f=this.position.top+this.size.height,l=/sw|nw|w/.test(n),c=/nw|ne|n/.test(n);return o&&(e.width=t.minWidth),u&&(e.height=t.minHeight),i&&(e.width=t.maxWidth),s&&(e.height=t.maxHeight),o&&l&&(e.left=a-t.minWidth),i&&l&&(e.left=a-t.maxWidth),u&&c&&(e.top=f-t.minHeight),s&&c&&(e.top=f-t.maxHeight),!e.width&&!e.height&&!e.left&&e.top?e.top=null:!e.width&&!e.height&&!e.top&&e.left&&(e.left=null),e},_proportionallyResize:function(){if(!this._proportionallyResizeElements.length)return;var e,t,n,r,i,s=this.helper||this.element;for(e=0;e
"),this.helper.addClass(this._helper).css({width:this.element.outerWidth()-1,height:this.element.outerHeight()-1,position:"absolute",left:this.elementOffset.left+"px",top:this.elementOffset.top+"px",zIndex:++n.zIndex}),this.helper.appendTo("body").disableSelection()):this.helper=this.element},_change:{e:function(e,t){return{width:this.originalSize.width+t}},w:function(e,t){var n=this.originalSize,r=this.originalPosition;return{left:r.left+t,width:n.width-t}},n:function(e,t,n){var r=this.originalSize,i=this.originalPosition;return{top:i.top+n,height:r.height-n}},s:function(e,t,n){return{height:this.originalSize.height+n}},se:function(t,n,r){return e.extend(this._change.s.apply(this,arguments),this._change.e.apply(this,[t,n,r]))},sw:function(t,n,r){return e.extend(this._change.s.apply(this,arguments),this._change.w.apply(this,[t,n,r]))},ne:function(t,n,r){return e.extend(this._change.n.apply(this,arguments),this._change.e.apply(this,[t,n,r]))},nw:function(t,n,r){return e.extend(this._change.n.apply(this,arguments),this._change.w.apply(this,[t,n,r]))}},_propagate:function(t,n){e.ui.plugin.call(this,t,[n,this.ui()]),t!=="resize"&&this._trigger(t,n,this.ui())},plugins:{},ui:function(){return{originalElement:this.originalElement,element:this.element,helper:this.helper,position:this.position,size:this.size,originalSize:this.originalSize,originalPosition:this.originalPosition}}}),e.ui.plugin.add("resizable","animate",{stop:function(t){var n=e(this).data("ui-resizable"),r=n.options,i=n._proportionallyResizeElements,s=i.length&&/textarea/i.test(i[0].nodeName),o=s&&e.ui.hasScroll(i[0],"left")?0:n.sizeDiff.height,u=s?0:n.sizeDiff.width,a={width:n.size.width-u,height:n.size.height-o},f=parseInt(n.element.css("left"),10)+(n.position.left-n.originalPosition.left)||null,l=parseInt(n.element.css("top"),10)+(n.position.top-n.originalPosition.top)||null;n.element.animate(e.extend(a,l&&f?{top:l,left:f}:{}),{duration:r.animateDuration,easing:r.animateEasing,step:function(){var r={width:parseInt(n.element.css("width"),10),height:parseInt(n.element.css("height"),10),top:parseInt(n.element.css("top"),10),left:parseInt(n.element.css("left"),10)};i&&i.length&&e(i[0]).css({width:r.width,height:r.height}),n._updateCache(r),n._propagate("resize",t)}})}}),e.ui.plugin.add("resizable","containment",{start:function(){var t,r,i,s,o,u,a,f=e(this).data("ui-resizable"),l=f.options,c=f.element,h=l.containment,p=h instanceof e?h.get(0):/parent/.test(h)?c.parent().get(0):h;if(!p)return;f.containerElement=e(p),/document/.test(h)||h===document?(f.containerOffset={left:0,top:0},f.containerPosition={left:0,top:0},f.parentData={element:e(document),left:0,top:0,width:e(document).width(),height:e(document).height()||document.body.parentNode.scrollHeight}):(t=e(p),r=[],e(["Top","Right","Left","Bottom"]).each(function(e,i){r[e]=n(t.css("padding"+i))}),f.containerOffset=t.offset(),f.containerPosition=t.position(),f.containerSize={height:t.innerHeight()-r[3],width:t.innerWidth()-r[1]},i=f.containerOffset,s=f.containerSize.height,o=f.containerSize.width,u=e.ui.hasScroll(p,"left")?p.scrollWidth:o,a=e.ui.hasScroll(p)?p.scrollHeight:s,f.parentData={element:p,left:i.left,top:i.top,width:u,height:a})},resize:function(t){var n,r,i,s,o=e(this).data("ui-resizable"),u=o.options,a=o.containerOffset,f=o.position,l=o._aspectRatio||t.shiftKey,c={top:0,left:0},h=o.containerElement;h[0]!==document&&/static/.test(h.css("position"))&&(c=a),f.left<(o._helper?a.left:0)&&(o.size.width=o.size.width+(o._helper?o.position.left-a.left:o.position.left-c.left),l&&(o.size.height=o.size.width/o.aspectRatio),o.position.left=u.helper?a.left:0),f.top<(o._helper?a.top:0)&&(o.size.height=o.size.height+(o._helper?o.position.top-a.top:o.position.top),l&&(o.size.width=o.size.height*o.aspectRatio),o.position.top=o._helper?a.top:0),o.offset.left=o.parentData.left+o.position.left,o.offset.top=o.parentData.top+o.position.top,n=Math.abs((o._helper?o.offset.left-c.left:o.offset.left-c.left)+o.sizeDiff.width),r=Math.abs((o._helper?o.offset.top-c.top:o.offset.top-a.top)+o.sizeDiff.height),i=o.containerElement.get(0)===o.element.parent().get(0),s=/relative|absolute/.test(o.containerElement.css("position")),i&&s&&(n-=o.parentData.left),n+o.size.width>=o.parentData.width&&(o.size.width=o.parentData.width-n,l&&(o.size.height=o.size.width/o.aspectRatio)),r+o.size.height>=o.parentData.height&&(o.size.height=o.parentData.height-r,l&&(o.size.width=o.size.height*o.aspectRatio))},stop:function(){var t=e(this).data("ui-resizable"),n=t.options,r=t.containerOffset,i=t.containerPosition,s=t.containerElement,o=e(t.helper),u=o.offset(),a=o.outerWidth()-t.sizeDiff.width,f=o.outerHeight()-t.sizeDiff.height;t._helper&&!n.animate&&/relative/.test(s.css("position"))&&e(this).css({left:u.left-i.left-r.left,width:a,height:f}),t._helper&&!n.animate&&/static/.test(s.css("position"))&&e(this).css({left:u.left-i.left-r.left,width:a,height:f})}}),e.ui.plugin.add("resizable","alsoResize",{start:function(){var t=e(this).data("ui-resizable"),n=t.options,r=function(t){e(t).each(function(){var t=e(this);t.data("ui-resizable-alsoresize",{width:parseInt(t.width(),10),height:parseInt(t.height(),10),left:parseInt(t.css("left"),10),top:parseInt(t.css("top"),10)})})};typeof n.alsoResize=="object"&&!n.alsoResize.parentNode?n.alsoResize.length?(n.alsoResize=n.alsoResize[0],r(n.alsoResize)):e.each(n.alsoResize,function(e){r(e)}):r(n.alsoResize)},resize:function(t,n){var r=e(this).data("ui-resizable"),i=r.options,s=r.originalSize,o=r.originalPosition,u={height:r.size.height-s.height||0,width:r.size.width-s.width||0,top:r.position.top-o.top||0,left:r.position.left-o.left||0},a=function(t,r){e(t).each(function(){var t=e(this),i=e(this).data("ui-resizable-alsoresize"),s={},o=r&&r.length?r:t.parents(n.originalElement[0]).length?["width","height"]:["width","height","top","left"];e.each(o,function(e,t){var n=(i[t]||0)+(u[t]||0);n&&n>=0&&(s[t]=n||null)}),t.css(s)})};typeof i.alsoResize=="object"&&!i.alsoResize.nodeType?e.each(i.alsoResize,function(e,t){a(e,t)}):a(i.alsoResize)},stop:function(){e(this).removeData("resizable-alsoresize")}}),e.ui.plugin.add("resizable","ghost",{start:function(){var t=e(this).data("ui-resizable"),n=t.options,r=t.size;t.ghost=t.originalElement.clone(),t.ghost.css({opacity:.25,display:"block",position:"relative",height:r.height,width:r.width,margin:0,left:0,top:0}).addClass("ui-resizable-ghost").addClass(typeof n.ghost=="string"?n.ghost:""),t.ghost.appendTo(t.helper)},resize:function(){var t=e(this).data("ui-resizable");t.ghost&&t.ghost.css({position:"relative",height:t.size.height,width:t.size.width})},stop:function(){var t=e(this).data("ui-resizable");t.ghost&&t.helper&&t.helper.get(0).removeChild(t.ghost.get(0))}}),e.ui.plugin.add("resizable","grid",{resize:function(){var t=e(this).data("ui-resizable"),n=t.options,r=t.size,i=t.originalSize,s=t.originalPosition,o=t.axis,u=typeof n.grid=="number"?[n.grid,n.grid]:n.grid,a=u[0]||1,f=u[1]||1,l=Math.round((r.width-i.width)/a)*a,c=Math.round((r.height-i.height)/f)*f,h=i.width+l,p=i.height+c,d=n.maxWidth&&n.maxWidthh,g=n.minHeight&&n.minHeight>p;n.grid=u,m&&(h+=a),g&&(p+=f),d&&(h-=a),v&&(p-=f),/^(se|s|e)$/.test(o)?(t.size.width=h,t.size.height=p):/^(ne)$/.test(o)?(t.size.width=h,t.size.height=p,t.position.top=s.top-c):/^(sw)$/.test(o)?(t.size.width=h,t.size.height=p,t.position.left=s.left-l):(t.size.width=h,t.size.height=p,t.position.top=s.top-c,t.position.left=s.left-l)}})})(jQuery); \ No newline at end of file From a2718dbee629a58e6de6214ec46f24d3f83d89f0 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sat, 26 Jan 2013 17:11:26 -0500 Subject: [PATCH 025/419] Add the Flot version to each example's footer. --- examples/ajax/index.html | 4 ++++ examples/annotating/index.html | 4 ++++ examples/axes-interacting/index.html | 4 ++++ examples/axes-multiple/index.html | 3 +++ examples/axes-time-zones/index.html | 4 ++++ examples/axes-time/index.html | 3 +++ examples/basic-options/index.html | 4 ++++ examples/basic-usage/index.html | 4 ++++ examples/categories/index.html | 3 +++ examples/image/index.html | 4 ++++ examples/interacting/index.html | 4 ++++ examples/navigate/index.html | 4 ++++ examples/percentiles/index.html | 4 ++++ examples/realtime/index.html | 4 ++++ examples/resize/index.html | 4 ++++ examples/selection/index.html | 4 ++++ examples/series-errorbars/index.html | 4 ++++ examples/series-pie/index.html | 4 ++++ examples/series-toggle/index.html | 4 ++++ examples/series-types/index.html | 4 ++++ examples/stacking/index.html | 4 ++++ examples/symbols/index.html | 4 ++++ examples/threshold/index.html | 4 ++++ examples/tracking/index.html | 4 ++++ examples/visitors/index.html | 4 ++++ examples/zooming/index.html | 4 ++++ 26 files changed, 101 insertions(+) diff --git a/examples/ajax/index.html b/examples/ajax/index.html index 653e65055..b2431c9ca 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -111,6 +111,10 @@ setTimeout(fetchData, 1000); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/annotating/index.html b/examples/annotating/index.html index 41dcb9509..d8932c0e7 100644 --- a/examples/annotating/index.html +++ b/examples/annotating/index.html @@ -55,6 +55,10 @@ ctx.lineTo(o.left, o.top); ctx.fillStyle = "#000"; ctx.fill(); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/axes-interacting/index.html b/examples/axes-interacting/index.html index 539891a93..a7977ddd9 100644 --- a/examples/axes-interacting/index.html +++ b/examples/axes-interacting/index.html @@ -61,6 +61,10 @@ $("#click").text("You clicked the " + axis.direction + axis.n + "axis!") }); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/axes-multiple/index.html b/examples/axes-multiple/index.html index fd6dba7da..824a72241 100644 --- a/examples/axes-multiple/index.html +++ b/examples/axes-multiple/index.html @@ -42,6 +42,9 @@ doPlot($(this).text()); }); + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/axes-time-zones/index.html b/examples/axes-time-zones/index.html index 7938cc1b1..156cd6ec6 100644 --- a/examples/axes-time-zones/index.html +++ b/examples/axes-time-zones/index.html @@ -73,6 +73,10 @@ timezone: "America/Chicago" } }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/axes-time/index.html b/examples/axes-time/index.html index 87967adc2..4a9a41a22 100644 --- a/examples/axes-time/index.html +++ b/examples/axes-time/index.html @@ -91,6 +91,9 @@ }); }); + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/basic-options/index.html b/examples/basic-options/index.html index da06b9fdd..50f703187 100644 --- a/examples/basic-options/index.html +++ b/examples/basic-options/index.html @@ -57,6 +57,10 @@ } } }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/basic-usage/index.html b/examples/basic-usage/index.html index ffb7bcc72..17647078c 100644 --- a/examples/basic-usage/index.html +++ b/examples/basic-usage/index.html @@ -23,6 +23,10 @@ var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot("#placeholder", [ d1, d2, d3 ]); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/categories/index.html b/examples/categories/index.html index 6a31c28b1..b96e13168 100644 --- a/examples/categories/index.html +++ b/examples/categories/index.html @@ -28,6 +28,9 @@ } }); + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/image/index.html b/examples/image/index.html index 7652298fe..50c2968e3 100644 --- a/examples/image/index.html +++ b/examples/image/index.html @@ -33,6 +33,10 @@ $.plot.image.loadDataImages(data, options, function () { $.plot("#placeholder", data, options); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/interacting/index.html b/examples/interacting/index.html index e9be5d93a..2d61a8bd8 100644 --- a/examples/interacting/index.html +++ b/examples/interacting/index.html @@ -88,6 +88,10 @@ plot.highlight(item.series, item.datapoint); } }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/navigate/index.html b/examples/navigate/index.html index c2dd51f1b..272dcad85 100644 --- a/examples/navigate/index.html +++ b/examples/navigate/index.html @@ -117,6 +117,10 @@ addArrow("right", 25, 60, { left: 100 }); addArrow("up", 40, 45, { top: -100 }); addArrow("down", 40, 75, { top: 100 }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/percentiles/index.html b/examples/percentiles/index.html index 104268400..cac110156 100644 --- a/examples/percentiles/index.html +++ b/examples/percentiles/index.html @@ -45,6 +45,10 @@ position: "se" } }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/realtime/index.html b/examples/realtime/index.html index 8c3c66755..e965106e8 100644 --- a/examples/realtime/index.html +++ b/examples/realtime/index.html @@ -88,6 +88,10 @@ } update(); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/resize/index.html b/examples/resize/index.html index f48f4654e..9b1884ca7 100644 --- a/examples/resize/index.html +++ b/examples/resize/index.html @@ -40,6 +40,10 @@ minWidth: 450, minHeight: 250, }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/selection/index.html b/examples/selection/index.html index c6d69ac9a..7f20c7ca3 100644 --- a/examples/selection/index.html +++ b/examples/selection/index.html @@ -94,6 +94,10 @@ } }); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/series-errorbars/index.html b/examples/series-errorbars/index.html index ba7bc6f10..41dab7f3b 100644 --- a/examples/series-errorbars/index.html +++ b/examples/series-errorbars/index.html @@ -118,6 +118,10 @@ interactive: true } }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/series-pie/index.html b/examples/series-pie/index.html index 13e09b56c..dc9fb0728 100644 --- a/examples/series-pie/index.html +++ b/examples/series-pie/index.html @@ -659,6 +659,10 @@ // Show the initial default chart $("#example-1").click(); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); // A custom label formatter used by several of the plots diff --git a/examples/series-toggle/index.html b/examples/series-toggle/index.html index f792d95f4..c96bcc097 100644 --- a/examples/series-toggle/index.html +++ b/examples/series-toggle/index.html @@ -86,6 +86,10 @@ } plotAccordingToChoices(); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/series-types/index.html b/examples/series-types/index.html index 424b26a3e..6041dfba4 100644 --- a/examples/series-types/index.html +++ b/examples/series-types/index.html @@ -58,6 +58,10 @@ data: d6, lines: { show: true, steps: true } }]); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/stacking/index.html b/examples/stacking/index.html index 934a30f1f..ba8ddda36 100644 --- a/examples/stacking/index.html +++ b/examples/stacking/index.html @@ -64,6 +64,10 @@ steps = $(this).text().indexOf("steps") != -1; plotWithOptions(); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/symbols/index.html b/examples/symbols/index.html index 21b2082fd..a02e8872d 100644 --- a/examples/symbols/index.html +++ b/examples/symbols/index.html @@ -44,6 +44,10 @@ hoverable: true } }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/threshold/index.html b/examples/threshold/index.html index 967c89e6d..ce36d186e 100644 --- a/examples/threshold/index.html +++ b/examples/threshold/index.html @@ -38,6 +38,10 @@ var t = parseFloat($(this).text().replace("Threshold at ", "")); plotWithOptions(t); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/tracking/index.html b/examples/tracking/index.html index f096db3f8..289ab05be 100644 --- a/examples/tracking/index.html +++ b/examples/tracking/index.html @@ -99,6 +99,10 @@ updateLegendTimeout = setTimeout(updateLegend, 50); } }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/visitors/index.html b/examples/visitors/index.html index d7a7e9393..2efd58e25 100644 --- a/examples/visitors/index.html +++ b/examples/visitors/index.html @@ -108,6 +108,10 @@ $("#overview").bind("plotselected", function (event, ranges) { plot.setSelection(ranges); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); diff --git a/examples/zooming/index.html b/examples/zooming/index.html index 2dd3f9725..0c35b9253 100644 --- a/examples/zooming/index.html +++ b/examples/zooming/index.html @@ -111,6 +111,10 @@ $("#overview").bind("plotselected", function (event, ranges) { plot.setSelection(ranges); }); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); }); From 713ba7704a4e96193f37db56f21fcf241d097c6c Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sat, 26 Jan 2013 17:18:23 -0500 Subject: [PATCH 026/419] Update example index page links for nesting. --- examples/index.html | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/examples/index.html b/examples/index.html index 7cfb77ab4..0bcc79237 100644 --- a/examples/index.html +++ b/examples/index.html @@ -11,35 +11,35 @@

Flot Examples

Here are some examples for Flot, the Javascript charting library for jQuery:

Being interactive:

Various features:

From e08ec95749432e8d1c37b44d4c5dd497bc42ff45 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 27 Jan 2013 10:28:53 -0500 Subject: [PATCH 027/419] Updated examples index page styles. --- examples/index.html | 120 ++++++++++++++++++++++++++++---------------- 1 file changed, 77 insertions(+), 43 deletions(-) diff --git a/examples/index.html b/examples/index.html index 0bcc79237..be2cce0b4 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,45 +1,79 @@ - + - - - Flot Examples - - - -

Flot Examples

- -

Here are some examples for Flot, the Javascript charting library for jQuery:

- - - -

Being interactive:

- - - -

Various features:

- - - + + + Flot Examples + + + + + + + + + + +
+ +

Here are some examples for Flot, the Javascript charting library for jQuery:

+ +

Basic Usage

+ + + +

Interactivity

+ + + +

Additional Features

+ + + +
+ + + + From f6f764eb2da66cd84a3fa66d44af891b50164712 Mon Sep 17 00:00:00 2001 From: Sean Jordan Date: Mon, 28 Jan 2013 16:35:29 -0700 Subject: [PATCH 028/419] Fixing bug with default tickFormatter Change-Id: If53fdb1bf9563834c58cf2b569d0e1a6a7155eb8 --- jquery.flot.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.flot.js b/jquery.flot.js index 918352a5c..7c359440f 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -1326,7 +1326,7 @@ Licensed under the MIT license. axis.tickFormatter = function (value, axis) { - var factor = Math.pow(10, axis.tickDecimals); + 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 From c36b3446774553e4bd2f68d48c3ce607edebe81f Mon Sep 17 00:00:00 2001 From: David Schnur Date: Wed, 30 Jan 2013 20:49:29 -0500 Subject: [PATCH 029/419] Replace axis.font with options.font. Instead of giving the axis its own font property, we simply look at its options, where the font comes from in the first place. A separate property is unnecessary and inconsistent with the way other axis options are handled. --- jquery.flot.js | 59 +++++++++++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 25 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 65715984a..410c01e32 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -563,7 +563,6 @@ Licensed under the MIT license. } function parseOptions(opts) { - var i; $.extend(true, options, opts); @@ -582,12 +581,38 @@ Licensed under the MIT license. if (options.grid.tickColor == null) options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString(); - // fill in defaults in axes, copy at least always the - // first as the rest of the code assumes it'll be there - for (i = 0; i < Math.max(1, options.xaxes.length); ++i) - options.xaxes[i] = $.extend(true, {}, options.xaxis, options.xaxes[i]); - for (i = 0; i < Math.max(1, options.yaxes.length); ++i) - options.yaxes[i] = $.extend(true, {}, options.yaxis, options.yaxes[i]); + // Fill in defaults for axis options, including any unspecified + // font-spec fields, if a font-spec was provided. + + // If no x/y axis options were provided, create one of each anyway, + // since the rest of the code assumes that they exist. + + var i, axisOptions, axisCount, + fontDefaults = { + style: placeholder.css("font-style"), + size: Math.round(0.8 * (+placeholder.css("font-size").replace("px", "") || 13)), + variant: placeholder.css("font-variant"), + weight: placeholder.css("font-weight"), + family: placeholder.css("font-family") + }; + + axisCount = options.xaxes.length || 1; + for (i = 0; i < axisCount; ++i) { + axisOptions = $.extend(true, {}, options.xaxis, options.xaxes[i]); + options.xaxes[i] = axisOptions; + if (axisOptions.font) { + axisOptions.font = $.extend({}, fontDefaults, axisOptions.font); + } + } + + axisCount = options.yaxes.length || 1; + for (i = 0; i < axisCount; ++i) { + axisOptions = $.extend(true, {}, options.yaxis, options.yaxes[i]); + options.yaxes[i] = axisOptions; + if (axisOptions.font) { + axisOptions.font = $.extend({}, fontDefaults, axisOptions.font); + } + } // backwards compatibility, to be removed in future if (options.xaxis.noTicks && options.xaxis.ticks == null) @@ -1172,7 +1197,7 @@ Licensed under the MIT license. var opts = axis.options, ticks = axis.ticks || [], axisw = opts.labelWidth || 0, axish = opts.labelHeight || 0, - font = axis.font || "flot-tick-label flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis"; + font = opts.font || "flot-tick-label flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis"; for (var i = 0; i < ticks.length; ++i) { @@ -1348,14 +1373,6 @@ Licensed under the MIT license. if (showGrid) { - var fontDefaults = { - style: placeholder.css("font-style"), - size: Math.round(0.8 * (+placeholder.css("font-size").replace("px", "") || 13)), - variant: placeholder.css("font-variant"), - weight: placeholder.css("font-weight"), - family: placeholder.css("font-family") - }; - var allocatedAxes = $.grep(axes, function (axis) { return axis.reserveSpace; }); $.each(allocatedAxes, function (_, axis) { @@ -1363,14 +1380,6 @@ Licensed under the MIT license. setupTickGeneration(axis); setTicks(axis); snapRangeToTicks(axis, axis.ticks); - - // If a font-spec object was provided, use font defaults - // to fill out any unspecified settings. - - if (axis.font) { - axis.font = $.extend({}, fontDefaults, axis.options.font); - } - // find labelWidth/Height for axis measureTickLabels(axis); }); @@ -1927,7 +1936,7 @@ Licensed under the MIT license. return; var box = axis.box, - font = axis.font || "flot-tick-label flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis", + font = axis.options.font || "flot-tick-label flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis", tick, x, y, halign, valign; for (var i = 0; i < axis.ticks.length; ++i) { From d2642e80cf066a96e67e5e2b44505173048c8a54 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Wed, 30 Jan 2013 21:21:37 -0500 Subject: [PATCH 030/419] Fixed missing/superfluous semicolons. --- jquery.flot.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 410c01e32..3e94cfee6 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -121,7 +121,7 @@ Licensed under the MIT license. // garbage collection and possibly increased cache-insert times. this._activeTextCache = {}; - }; + } // Resizes the canvas to the given dimensions. // @@ -169,7 +169,7 @@ Licensed under the MIT license. // appear at the same size; the extra pixels will just make them crisper. context.scale(pixelRatio, pixelRatio); - } + }; // Clears the entire canvas area, including overlaid text. @@ -178,7 +178,7 @@ Licensed under the MIT license. if (this.text) { this.text.empty(); } - } + }; // Finishes rendering the canvas, including populating the text overlay. @@ -207,7 +207,7 @@ Licensed under the MIT license. this._textCache = this._activeTextCache; this._activeTextCache = {}; - } + }; // Creates (if necessary) and returns a text info object. // @@ -297,7 +297,7 @@ Licensed under the MIT license. this._activeTextCache[cacheKey] = info; return info; - } + }; // Draws a text string onto the canvas. // @@ -340,7 +340,7 @@ Licensed under the MIT license. // HTML to the canvas text buffer. this._textBuffer += info.prefix + parseInt(y) + "px;left:" + parseInt(x) + info.suffix; - } + }; /////////////////////////////////////////////////////////////////////////// // The top-level container for the entire plot. @@ -1514,7 +1514,7 @@ Licensed under the MIT license. axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec); axis.tickSize = opts.tickSize || size; - start = floorInBase(axis.min, axis.tickSize) + start = floorInBase(axis.min, axis.tickSize); do { prev = v; From 98b6361aa9dd3ead1f032f01ea6bfe6d75631bf2 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Wed, 30 Jan 2013 21:47:05 -0500 Subject: [PATCH 031/419] Preserve canvas elements on re-plot. Since the Canvas .text object is jQuery-wrapped, it was not preserved as expected when clearing the canvas of junk. I've replaced the selection with one based on element classes. --- jquery.flot.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 3e94cfee6..5562bd7f3 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -189,13 +189,15 @@ Licensed under the MIT license. // Add the HTML text layer, if it doesn't already exist if (!this.text) { - this.text = $("
").css({ - position: "absolute", - top: 0, - left: 0, - bottom: 0, - right: 0 - }).insertAfter(this.element); + this.text = $("
") + .addClass("flot-text") + .css({ + position: "absolute", + top: 0, + left: 0, + bottom: 0, + right: 0 + }).insertAfter(this.element); } this.text.append(this._textBuffer); @@ -1122,7 +1124,7 @@ Licensed under the MIT license. // then whack any remaining obvious garbage left eventHolder.unbind(); - placeholder.children().not([surface.element, surface.text, overlay.element, overlay.text]).remove(); + placeholder.children(":not(.flot-base,.flot-overlay,.flot-text)").remove(); } // save in case we get replotted From 23005fdd4eb0303ecbcc9f0a1760594353488f5f Mon Sep 17 00:00:00 2001 From: David Schnur Date: Fri, 1 Feb 2013 22:13:53 -0500 Subject: [PATCH 032/419] Move placeholder styles into .demo-placeholder. This allows a page to have multiple placeholders, since we're no longer tied to unique IDs. --- examples/ajax/index.html | 2 +- examples/annotating/index.html | 2 +- examples/axes-interacting/index.html | 2 +- examples/axes-multiple/index.html | 2 +- examples/axes-time-zones/index.html | 6 +++--- examples/axes-time/index.html | 2 +- examples/basic-options/index.html | 2 +- examples/basic-usage/index.html | 2 +- examples/categories/index.html | 2 +- examples/examples.css | 2 +- examples/image/index.html | 2 +- examples/interacting/index.html | 2 +- examples/navigate/index.html | 2 +- examples/percentiles/index.html | 2 +- examples/realtime/index.html | 2 +- examples/resize/index.html | 2 +- examples/selection/index.html | 2 +- examples/series-errorbars/index.html | 2 +- examples/series-pie/index.html | 2 +- examples/series-toggle/index.html | 2 +- examples/series-types/index.html | 2 +- examples/stacking/index.html | 2 +- examples/symbols/index.html | 2 +- examples/threshold/index.html | 2 +- examples/tracking/index.html | 2 +- examples/visitors/index.html | 4 ++-- examples/zooming/index.html | 4 ++-- 27 files changed, 31 insertions(+), 31 deletions(-) diff --git a/examples/ajax/index.html b/examples/ajax/index.html index b2431c9ca..5a9e055bd 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -128,7 +128,7 @@

AJAX

-
+

Example of loading data dynamically with AJAX. Percentage change in GDP (source: Eurostat). Click the buttons below:

diff --git a/examples/annotating/index.html b/examples/annotating/index.html index d8932c0e7..71f621870 100644 --- a/examples/annotating/index.html +++ b/examples/annotating/index.html @@ -72,7 +72,7 @@

Adding Annotations

-
+

Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.

diff --git a/examples/axes-interacting/index.html b/examples/axes-interacting/index.html index a7977ddd9..7e4411185 100644 --- a/examples/axes-interacting/index.html +++ b/examples/axes-interacting/index.html @@ -78,7 +78,7 @@

Interacting with axes

-
+

With multiple axes, you sometimes need to interact with them. A simple way to do this is to draw the plot, deduce the axis placements and insert a couple of divs on top to catch events.

diff --git a/examples/axes-multiple/index.html b/examples/axes-multiple/index.html index 824a72241..4c7c68c85 100644 --- a/examples/axes-multiple/index.html +++ b/examples/axes-multiple/index.html @@ -58,7 +58,7 @@

Multiple axes

-
+

Multiple axis support showing the raw oil price in US $/barrel of crude oil vs. the exchange rate from US $ to €.

diff --git a/examples/axes-time-zones/index.html b/examples/axes-time-zones/index.html index 156cd6ec6..745541dbf 100644 --- a/examples/axes-time-zones/index.html +++ b/examples/axes-time-zones/index.html @@ -91,17 +91,17 @@

Time zones

UTC

-
+

Browser

-
+

Chicago

-
+
diff --git a/examples/axes-time/index.html b/examples/axes-time/index.html index 4a9a41a22..1391ca188 100644 --- a/examples/axes-time/index.html +++ b/examples/axes-time/index.html @@ -107,7 +107,7 @@

Time Axes

-
+

Monthly mean atmospheric CO2 in PPM at Mauna Loa, Hawaii (source: NOAA/ESRL).

diff --git a/examples/basic-options/index.html b/examples/basic-options/index.html index 50f703187..cb15fe22e 100644 --- a/examples/basic-options/index.html +++ b/examples/basic-options/index.html @@ -74,7 +74,7 @@

Basic Options

-
+

There are plenty of options you can set to control the precise looks of your plot. You can control the ticks on the axes, the legend, the graph type, etc.

diff --git a/examples/basic-usage/index.html b/examples/basic-usage/index.html index 17647078c..bf6d46758 100644 --- a/examples/basic-usage/index.html +++ b/examples/basic-usage/index.html @@ -40,7 +40,7 @@

Basic Usage

-
+

You don't have to do much to get an attractive plot. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.

diff --git a/examples/categories/index.html b/examples/categories/index.html index b96e13168..97bafb872 100644 --- a/examples/categories/index.html +++ b/examples/categories/index.html @@ -44,7 +44,7 @@

Categories

-
+

With the categories plugin you can plot categories/textual data easily.

diff --git a/examples/examples.css b/examples/examples.css index ae4135f35..ef7bb5072 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -85,7 +85,7 @@ input[type=checkbox] { -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); } -#placeholder, #overview { +.demo-placeholder { width: 100%; height: 100%; font-size: 14px; diff --git a/examples/image/index.html b/examples/image/index.html index 50c2968e3..0bc89e0ab 100644 --- a/examples/image/index.html +++ b/examples/image/index.html @@ -50,7 +50,7 @@

Image Plots

-
+

The Cat's Eye Nebula (picture from Hubble).

diff --git a/examples/interacting/index.html b/examples/interacting/index.html index 2d61a8bd8..19136df91 100644 --- a/examples/interacting/index.html +++ b/examples/interacting/index.html @@ -105,7 +105,7 @@

Interactivity

-
+

One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.

diff --git a/examples/navigate/index.html b/examples/navigate/index.html index 272dcad85..dbb170f16 100644 --- a/examples/navigate/index.html +++ b/examples/navigate/index.html @@ -134,7 +134,7 @@

Navigation

-
+

diff --git a/examples/percentiles/index.html b/examples/percentiles/index.html index cac110156..451364150 100644 --- a/examples/percentiles/index.html +++ b/examples/percentiles/index.html @@ -62,7 +62,7 @@

Percentiles

-
+

Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: CDC). The 15%-85%, 25%-75% and 50% percentiles are indicated.

diff --git a/examples/realtime/index.html b/examples/realtime/index.html index e965106e8..4333acaf5 100644 --- a/examples/realtime/index.html +++ b/examples/realtime/index.html @@ -105,7 +105,7 @@

Real-time updates

-
+

You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.

diff --git a/examples/resize/index.html b/examples/resize/index.html index 9b1884ca7..e9dc1ad7b 100644 --- a/examples/resize/index.html +++ b/examples/resize/index.html @@ -57,7 +57,7 @@

Resizing

-
+

diff --git a/examples/selection/index.html b/examples/selection/index.html index 7f20c7ca3..27f3367cd 100644 --- a/examples/selection/index.html +++ b/examples/selection/index.html @@ -111,7 +111,7 @@

Selection

-
+

1000 kg. CO2 emissions per year per capita for various countries (source: Wikipedia).

diff --git a/examples/series-errorbars/index.html b/examples/series-errorbars/index.html index 41dab7f3b..f76f08e86 100644 --- a/examples/series-errorbars/index.html +++ b/examples/series-errorbars/index.html @@ -135,7 +135,7 @@

Error Bars

-
+

With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.

diff --git a/examples/series-pie/index.html b/examples/series-pie/index.html index dc9fb0728..89b472ad3 100644 --- a/examples/series-pie/index.html +++ b/examples/series-pie/index.html @@ -689,7 +689,7 @@

Pie Charts

-
+
diff --git a/examples/interacting/index.html b/examples/interacting/index.html index 982aa2fca..31169dbb3 100644 --- a/examples/interacting/index.html +++ b/examples/interacting/index.html @@ -111,7 +111,7 @@

Interactivity

diff --git a/examples/navigate/index.html b/examples/navigate/index.html index dbb170f16..671692e76 100644 --- a/examples/navigate/index.html +++ b/examples/navigate/index.html @@ -146,7 +146,7 @@

Navigation

diff --git a/examples/percentiles/index.html b/examples/percentiles/index.html index 451364150..57df2a5bb 100644 --- a/examples/percentiles/index.html +++ b/examples/percentiles/index.html @@ -72,7 +72,7 @@

Percentiles

diff --git a/examples/realtime/index.html b/examples/realtime/index.html index 4333acaf5..8742a29b2 100644 --- a/examples/realtime/index.html +++ b/examples/realtime/index.html @@ -115,7 +115,7 @@

Real-time updates

diff --git a/examples/resize/index.html b/examples/resize/index.html index e9dc1ad7b..459e0ee00 100644 --- a/examples/resize/index.html +++ b/examples/resize/index.html @@ -69,7 +69,7 @@

Resizing

diff --git a/examples/selection/index.html b/examples/selection/index.html index dd5c28bdb..48db7d3b5 100644 --- a/examples/selection/index.html +++ b/examples/selection/index.html @@ -145,7 +145,7 @@

Selection

diff --git a/examples/series-errorbars/index.html b/examples/series-errorbars/index.html index f76f08e86..23a5a877e 100644 --- a/examples/series-errorbars/index.html +++ b/examples/series-errorbars/index.html @@ -143,7 +143,7 @@

Error Bars

diff --git a/examples/series-pie/index.html b/examples/series-pie/index.html index 12e9f4487..342636f00 100644 --- a/examples/series-pie/index.html +++ b/examples/series-pie/index.html @@ -811,7 +811,7 @@

Changes/Features

diff --git a/examples/series-toggle/index.html b/examples/series-toggle/index.html index c66d890c3..4c062902c 100644 --- a/examples/series-toggle/index.html +++ b/examples/series-toggle/index.html @@ -114,7 +114,7 @@

Toggling Series

diff --git a/examples/series-types/index.html b/examples/series-types/index.html index dfafba250..91f72437f 100644 --- a/examples/series-types/index.html +++ b/examples/series-types/index.html @@ -83,7 +83,7 @@

Series Types

diff --git a/examples/stacking/index.html b/examples/stacking/index.html index 9eb05287e..bf5414ec3 100644 --- a/examples/stacking/index.html +++ b/examples/stacking/index.html @@ -100,7 +100,7 @@

Stacking

diff --git a/examples/symbols/index.html b/examples/symbols/index.html index 47a4d5a8f..e2507be25 100644 --- a/examples/symbols/index.html +++ b/examples/symbols/index.html @@ -69,7 +69,7 @@

Symbols

diff --git a/examples/threshold/index.html b/examples/threshold/index.html index 1079d76dd..c2c596f32 100644 --- a/examples/threshold/index.html +++ b/examples/threshold/index.html @@ -69,7 +69,7 @@

Thresholds

diff --git a/examples/tracking/index.html b/examples/tracking/index.html index 59ace0287..69276c2d0 100644 --- a/examples/tracking/index.html +++ b/examples/tracking/index.html @@ -128,7 +128,7 @@

Tracking

diff --git a/examples/visitors/index.html b/examples/visitors/index.html index 614c3ec69..803c0bc1c 100644 --- a/examples/visitors/index.html +++ b/examples/visitors/index.html @@ -140,7 +140,7 @@

Visitors

diff --git a/examples/zooming/index.html b/examples/zooming/index.html index 8d6b3cbea..fb295d549 100644 --- a/examples/zooming/index.html +++ b/examples/zooming/index.html @@ -137,7 +137,7 @@

Selection and zooming

diff --git a/jquery.flot.canvas.js b/jquery.flot.canvas.js index d94b9611a..29328d581 100644 --- a/jquery.flot.canvas.js +++ b/jquery.flot.canvas.js @@ -1,6 +1,6 @@ /* Flot plugin for drawing all elements of a plot on the canvas. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. Flot normally produces certain elements, like axis labels and the legend, using diff --git a/jquery.flot.categories.js b/jquery.flot.categories.js index 6e6e8baa7..2f9b25797 100644 --- a/jquery.flot.categories.js +++ b/jquery.flot.categories.js @@ -1,6 +1,6 @@ /* Flot plugin for plotting textual data or categories. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. Consider a dataset like [["February", 34], ["March", 20], ...]. This plugin diff --git a/jquery.flot.crosshair.js b/jquery.flot.crosshair.js index 16e321ece..5111695e3 100644 --- a/jquery.flot.crosshair.js +++ b/jquery.flot.crosshair.js @@ -1,6 +1,6 @@ /* Flot plugin for showing crosshairs when the mouse hovers over the plot. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. The plugin supports these options: diff --git a/jquery.flot.errorbars.js b/jquery.flot.errorbars.js index 729843678..2583d5c20 100644 --- a/jquery.flot.errorbars.js +++ b/jquery.flot.errorbars.js @@ -1,6 +1,6 @@ /* Flot plugin for plotting error bars. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. Error bars are used to show standard deviation and other statistical diff --git a/jquery.flot.fillbetween.js b/jquery.flot.fillbetween.js index 2854d2d58..18b15d26d 100644 --- a/jquery.flot.fillbetween.js +++ b/jquery.flot.fillbetween.js @@ -1,6 +1,6 @@ /* Flot plugin for computing bottoms for filled line and bar charts. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 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 diff --git a/jquery.flot.image.js b/jquery.flot.image.js index d2837cf78..625a03571 100644 --- a/jquery.flot.image.js +++ b/jquery.flot.image.js @@ -1,6 +1,6 @@ /* Flot plugin for plotting images. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and diff --git a/jquery.flot.js b/jquery.flot.js index b98ada015..4c143cd70 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -1,6 +1,6 @@ /* Javascript plotting library for jQuery, version 0.8.3-alpha. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. */ diff --git a/jquery.flot.navigate.js b/jquery.flot.navigate.js index e23204a23..13fb7f17d 100644 --- a/jquery.flot.navigate.js +++ b/jquery.flot.navigate.js @@ -1,6 +1,6 @@ /* Flot plugin for adding the ability to pan and zoom the plot. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. The default behaviour is double click and scrollwheel up/down to zoom in, drag diff --git a/jquery.flot.pie.js b/jquery.flot.pie.js index b9d4f669d..9c19db998 100644 --- a/jquery.flot.pie.js +++ b/jquery.flot.pie.js @@ -1,6 +1,6 @@ /* Flot plugin for rendering pie charts. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. The plugin assumes that each series has a single data value, and that each diff --git a/jquery.flot.resize.js b/jquery.flot.resize.js index 44e04f8fc..1049b632e 100644 --- a/jquery.flot.resize.js +++ b/jquery.flot.resize.js @@ -1,6 +1,6 @@ /* Flot plugin for automatically redrawing plots as the placeholder resizes. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. It works by listening for changes on the placeholder div (through the jQuery diff --git a/jquery.flot.selection.js b/jquery.flot.selection.js index f8fa668ff..d3c20fa4e 100644 --- a/jquery.flot.selection.js +++ b/jquery.flot.selection.js @@ -1,6 +1,6 @@ /* Flot plugin for selecting regions of a plot. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. The plugin supports these options: diff --git a/jquery.flot.stack.js b/jquery.flot.stack.js index c01de67da..e75a7dfc0 100644 --- a/jquery.flot.stack.js +++ b/jquery.flot.stack.js @@ -1,6 +1,6 @@ /* Flot plugin for stacking data sets rather than overlyaing them. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +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). diff --git a/jquery.flot.symbol.js b/jquery.flot.symbol.js index cc181fffc..79f634971 100644 --- a/jquery.flot.symbol.js +++ b/jquery.flot.symbol.js @@ -1,6 +1,6 @@ /* Flot plugin that adds some extra symbols for plotting points. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. The symbols are accessed as strings through the standard symbol options: diff --git a/jquery.flot.threshold.js b/jquery.flot.threshold.js index 2f6e63594..8c99c401d 100644 --- a/jquery.flot.threshold.js +++ b/jquery.flot.threshold.js @@ -1,6 +1,6 @@ /* Flot plugin for thresholding data. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. The plugin supports these options: diff --git a/jquery.flot.time.js b/jquery.flot.time.js index 75feefd78..34c1d1212 100644 --- a/jquery.flot.time.js +++ b/jquery.flot.time.js @@ -1,6 +1,6 @@ /* Pretty handling of time axes. -Copyright (c) 2007-2013 IOLA and Ole Laursen. +Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. Set axis.mode to "time" to enable. See the section "Time series data" in From 7aec501eaf48df4f89c9d999bb09e70475093f9c Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sat, 19 Apr 2014 17:51:53 -0700 Subject: [PATCH 221/419] Update the inline resize plugin with recent fixes. This updates the inline resize plugin with flot/jquery-resize@74716750f4 and flot/jquery-resize@189b555558. Fixes #1277 and #1265. --- jquery.flot.resize.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/jquery.flot.resize.js b/jquery.flot.resize.js index 1049b632e..8a626dda0 100644 --- a/jquery.flot.resize.js +++ b/jquery.flot.resize.js @@ -19,8 +19,7 @@ can just fix the size of their placeholders. * Dual licensed under the MIT and GPL licenses. * http://benalman.com/about/license/ */ - -(function($,t,n){function p(){for(var n=r.length-1;n>=0;n--){var o=$(r[n]);if(o[0]==t||o.is(":visible")){var h=o.width(),d=o.height(),v=o.data(a);!v||h===v.w&&d===v.h?i[f]=i[l]:(i[f]=i[c],o.trigger(u,[v.w=h,v.h=d]))}else v=o.data(a),v.w=0,v.h=0}s!==null&&(s=t.requestAnimationFrame(p))}var r=[],i=$.resize=$.extend($.resize,{}),s,o="setTimeout",u="resize",a=u+"-special-event",f="delay",l="pendingDelay",c="activeDelay",h="throttleWindow";i[l]=250,i[c]=20,i[f]=i[l],i[h]=!0,$.event.special[u]={setup:function(){if(!i[h]&&this[o])return!1;var t=$(this);r.push(this),t.data(a,{w:t.width(),h:t.height()}),r.length===1&&(s=n,p())},teardown:function(){if(!i[h]&&this[o])return!1;var t=$(this);for(var n=r.length-1;n>=0;n--)if(r[n]==this){r.splice(n,1);break}t.removeData(a),r.length||(cancelAnimationFrame(s),s=null)},add:function(t){function s(t,i,s){var o=$(this),u=o.data(a);u.w=i!==n?i:o.width(),u.h=s!==n?s:o.height(),r.apply(this,arguments)}if(!i[h]&&this[o])return!1;var r;if($.isFunction(t))return r=t,s;r=t.handler,t.handler=s}},t.requestAnimationFrame||(t.requestAnimationFrame=function(){return t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||function(e,n){return t.setTimeout(e,i[f])}}()),t.cancelAnimationFrame||(t.cancelAnimationFrame=function(){return t.webkitCancelRequestAnimationFrame||t.mozCancelRequestAnimationFrame||t.oCancelRequestAnimationFrame||t.msCancelRequestAnimationFrame||clearTimeout}())})(jQuery,this); +(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this); (function ($) { var options = { }; // no options From e31ff8e565986aae4d9fb91fc9304e43d81c5c9e Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sat, 19 Apr 2014 17:52:31 -0700 Subject: [PATCH 222/419] Fix IE-breaking trailing comma in the example. --- examples/resize/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/resize/index.html b/examples/resize/index.html index 459e0ee00..46b815c16 100644 --- a/examples/resize/index.html +++ b/examples/resize/index.html @@ -38,7 +38,7 @@ maxWidth: 900, maxHeight: 500, minWidth: 450, - minHeight: 250, + minHeight: 250 }); // Add the Flot version string to the footer From 0beb104eb9850f4485f6808adaab6c0e0ff1ad48 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 20 Apr 2014 09:48:59 -0700 Subject: [PATCH 223/419] Revert #1200; it was causing #1283 breakages. The fix for an unnecessary gap on the right of the chart turned out to break text wrapping for ticks that were legitimately in that position. Fixes #1283. --- jquery.flot.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 4c143cd70..390fd9ec0 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -1550,17 +1550,12 @@ Licensed under the MIT license. // jump as much around with replots $.each(allAxes(), function (_, axis) { if (axis.reserveSpace && axis.ticks && axis.ticks.length) { - var lastTick = axis.ticks[axis.ticks.length - 1]; if (axis.direction === "x") { margins.left = Math.max(margins.left, axis.labelWidth / 2); - if (lastTick.v <= axis.max) { - margins.right = Math.max(margins.right, axis.labelWidth / 2); - } + margins.right = Math.max(margins.right, axis.labelWidth / 2); } else { margins.bottom = Math.max(margins.bottom, axis.labelHeight / 2); - if (lastTick.v <= axis.max) { - margins.top = Math.max(margins.top, axis.labelHeight / 2); - } + margins.top = Math.max(margins.top, axis.labelHeight / 2); } } }); From 7f63b0703bf5926ad9dbf50945077b289a52ec8e Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 20 Apr 2014 15:39:17 -0700 Subject: [PATCH 224/419] Work-around for full-width plots. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Introduces an unofficial work-around for the behavior introduced in 0.8.0, where we reserve extra space for the first and last tick labels. This makes it impossible for plots to span the full width of their container. This work-around overloads the reserveSpace option, which normally only applies when show = false. Now, if show = true and reserveSpace = false, we skip the step that allocates extra space for labels. We’ll introduce a proper solution in 0.9, but this should provide a way for users to move forward in the meantime. --- jquery.flot.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/jquery.flot.js b/jquery.flot.js index 390fd9ec0..558e6975f 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -1446,7 +1446,7 @@ Licensed under the MIT license. // Determine the axis's position in its direction and on its side $.each(isXAxis ? xaxes : yaxes, function(i, a) { - if (a && a.reserveSpace) { + if (a && (a.show || a.reserveSpace)) { if (a === axis) { found = true; } else if (a.options.position === pos) { @@ -1589,20 +1589,18 @@ Licensed under the MIT license. } } - // init axes $.each(axes, function (_, axis) { - axis.show = axis.options.show; - if (axis.show == null) - axis.show = axis.used; // by default an axis is visible if it's got data - - axis.reserveSpace = axis.show || axis.options.reserveSpace; - + var axisOpts = axis.options; + axis.show = axisOpts.show == null ? axis.used : axisOpts.show; + axis.reserveSpace = axisOpts.reserveSpace == null ? axis.show : axisOpts.reserveSpace; setRange(axis); }); if (showGrid) { - var allocatedAxes = $.grep(axes, function (axis) { return axis.reserveSpace; }); + var allocatedAxes = $.grep(axes, function (axis) { + return axis.show || axis.reserveSpace; + }); $.each(allocatedAxes, function (_, axis) { // make the ticks From f17893ea35411f1763a9057889d1ffeb7334abd0 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Mon, 21 Apr 2014 06:57:16 -0700 Subject: [PATCH 225/419] Updated NEWS for the 0.8.3 release. --- NEWS.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/NEWS.md b/NEWS.md index 41c593794..ad0303d74 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,8 +1,49 @@ ## Flot 0.8.3 ## +### Changes ### + +- Updated example code to avoid encouraging unnecessary re-plots. + (patch by soenter, pull request #1221) + ### Bug fixes ### + - Added a work-around to disable the allocation of extra space for first and + last axis ticks, allowing plots to span the full width of their container. + A proper solution for this bug will be implemented in the 0.9 release. + (reported by Josh Pigford and andig, issue #1212, pull request #1290) + + - Fixed a regression introduced in 0.8.1, where the last tick label would + sometimes wrap rather than extending the plot's offset to create space. + (reported by Elite Gamer, issue #1283) + + - Fixed a regression introduced in 0.8.2, where the resize plugin would use + unexpectedly high amounts of CPU even when idle. + (reported by tommie, issue #1277, pull request #1289) + + - Fixed the selection example to work with jQuery 1.9.x and later. + (reported by EGLadona and dmfalke, issue #1250, pull request #1285) + + - Added a detach shim to fix support for jQuery versions earlier than 1.4.x. + (reported by ngavard, issue #1240, pull request #1286) + + - Fixed a rare 'Uncaught TypeError' when using the resize plugin in IE 7/8. + (reported by tleish, issue #1265, pull request #1289) + + - Fixed zoom constraints to apply only in the direction of the zoom. + (patch by Neil Katin, issue #1204, pull request #1205) + + - Markings lines are no longer blurry when drawn on pixel boundaries. + (reported by btccointicker and Rouillard, issue #1210) + + - Don't discard original pie data-series values when combining slices. + (patch by Phil Tsarik, pull request #1238) + + - Fixed broken auto-scale behavior when using deprecated [x|y]2axis options. + (reported by jorese, issue #1228, pull request #1284) + - Exposed the dateGenerator function on the plot object, as it used to be + before time-mode was moved into a separate plugin. + (patch by Paolo Valleri, pull request #1028) ## Flot 0.8.2 ## From 453b017cc5acfd75e252b93e8635f57f4196d45d Mon Sep 17 00:00:00 2001 From: David Schnur Date: Mon, 21 Apr 2014 06:58:01 -0700 Subject: [PATCH 226/419] Update version number to 0.8.3 final. --- component.json | 2 +- flot.jquery.json | 4 ++-- jquery.flot.js | 4 ++-- package.json | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/component.json b/component.json index b134da826..596117235 100644 --- a/component.json +++ b/component.json @@ -1,6 +1,6 @@ { "name": "Flot", - "version": "0.8.3-alpha", + "version": "0.8.3", "main": "jquery.flot.js", "dependencies": { "jquery": ">= 1.2.6" diff --git a/flot.jquery.json b/flot.jquery.json index 5fa705c34..91ac79af1 100644 --- a/flot.jquery.json +++ b/flot.jquery.json @@ -1,6 +1,6 @@ { "name": "flot", - "version": "0.8.3-alpha", + "version": "0.8.3", "title": "Flot", "author": { "name": "Ole Laursen", @@ -24,4 +24,4 @@ "email": "dnschnur@gmail.com", "url": "http://github.com/dnschnur" }] -} \ No newline at end of file +} diff --git a/jquery.flot.js b/jquery.flot.js index 558e6975f..39f3e4cf3 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -1,4 +1,4 @@ -/* Javascript plotting library for jQuery, version 0.8.3-alpha. +/* Javascript plotting library for jQuery, version 0.8.3. Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. @@ -3148,7 +3148,7 @@ Licensed under the MIT license. return plot; }; - $.plot.version = "0.8.3-alpha"; + $.plot.version = "0.8.3"; $.plot.plugins = []; diff --git a/package.json b/package.json index 55d252eb4..deb965177 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Flot", - "version": "0.8.3-alpha", + "version": "0.8.3", "main": "jquery.flot.js", "scripts": { "test": "make test" From 31087722e85490362178e4d0c68eb93855b7750d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Uwe=20Kleine-K=C3=B6nig?= Date: Tue, 29 Apr 2014 21:12:21 +0200 Subject: [PATCH 227/419] fix a few trivial typos concerning "separation" and "command" --- API.md | 2 +- examples/series-pie/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/API.md b/API.md index e08b44cf1..cd3927b4b 100644 --- a/API.md +++ b/API.md @@ -143,7 +143,7 @@ the plot, see below. The rest of the options are all documented below as they are the same as the default options passed in via the options parameter in the plot -commmand. When you specify them for a specific data series, they will +command. When you specify them for a specific data series, they will override the default options for the plot for that data series. Here's a complete example of a simple data specification: diff --git a/examples/series-pie/index.html b/examples/series-pie/index.html index 342636f00..7bcf33d9e 100644 --- a/examples/series-pie/index.html +++ b/examples/series-pie/index.html @@ -800,7 +800,7 @@

Changes/Features

  • Merged original pie modifications by Sergey Nosenko into the latest SVN version (as of May 15th, 2009) so that it will work with ie8.
  • Pie graph will now be centered in the canvas unless moved because of the legend or manually via the options. Additionally it prevents the pie from being moved beyond the edge of the canvas.
  • Modified the code related to the labelFormatter option to apply flot's legend labelFormatter first. This is so that the labels will be consistent, but still provide extra formatting for the positioned labels (such as adding the percentage value).
    • -
  • Positioned labels now have their backgrounds applied as a seperate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.
    • +
  • Positioned labels now have their backgrounds applied as a separate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.
  • As long as the labelOffset and radiusLimit are not set to hard values, the pie will be shrunk if the labels will extend outside the edge of the canvas
  • Added new options "radiusLimitFactor" and "radiusLimit" which limits how large the (visual) radius of the pie is in relation to the full radius (as calculated from the canvas dimensions) or a hard-pixel value (respectively). This allows for pushing the labels "outside" the pie.
  • Added a new option "labelHidePercent" that does not show the positioned labels of slices smaller than the specified percentage. This is to help prevent a bunch of overlapping labels from small slices.
    • From 0fd613bae260b13dfcdca37408255e35a7c8f7f3 Mon Sep 17 00:00:00 2001 From: andrewdove1 Date: Thu, 31 Jan 2019 14:00:45 -0600 Subject: [PATCH 228/419] Update to engineering-flot --- .circleci/config.yml | 100 + .dont-break.json | 7 + .gitignore | 6 +- .npmignore | 7 + .travis.yml | 37 +- NEWS.md => CHANGELOG.md | 584 +- FAQ.md | 75 - Makefile | 12 - README.md | 66 +- build.js | 57 + component.json | 8 - docs/API.md | 1710 +++ PLUGINS.md => docs/PLUGINS.md | 0 docs/absRelTime.md | 42 + docs/browser.md | 24 + docs/canvaswrapper.md | 116 + docs/composeImages.md | 32 + docs/drawSeries.md | 35 + docs/hover.md | 21 + docs/interactions.md | 57 + docs/logaxis.md | 27 + docs/navigate.md | 83 + examples/ajax/index.html | 20 +- examples/annotating/index.html | 117 +- examples/axes-autoscaling/index.html | 111 + examples/axes-interacting/index.html | 22 +- examples/axes-labels/index.html | 107 + examples/axes-multiple/index.html | 13 +- examples/axes-tickLabels/index.html | 190 + examples/axes-time-zones/date.js | 1 + examples/axes-time-zones/index.html | 16 +- examples/axes-time/index.html | 37 +- examples/basic-options/index.html | 7 +- examples/basic-usage/index.html | 5 +- examples/canvas/index.html | 75 - examples/categories/index.html | 15 +- examples/examples.css | 59 +- examples/fill-types/index.html | 83 + examples/image/index.html | 13 +- examples/index.html | 141 +- examples/interacting/index.html | 18 +- examples/log-scale/index.html | 92 + examples/navigate/index.html | 25 +- examples/navigateTouch/index.html | 183 + examples/percentiles/index.html | 7 +- examples/plot-legend/index.html | 205 + examples/realtime/index.html | 9 +- examples/resize/index.html | 12 +- examples/selection/index.html | 11 +- examples/series-errorbars/index.html | 21 +- examples/series-pie/index.html | 37 +- examples/series-toggle/index.html | 12 +- examples/series-types/index.html | 7 +- examples/shared/jquery-ui/jquery-ui.min.js | 1 + examples/stacking/index.html | 11 +- examples/symbols/index.html | 22 +- examples/threshold/index.html | 7 +- examples/tracking/index.html | 73 +- examples/visitors/index.html | 14 +- examples/zooming/index.html | 12 +- excanvas.js | 1428 --- excanvas.min.js | 1 - flot.jquery.json | 27 - gulpfile.js | 44 + jquery.event.drag.LICENSE.txt | 7 + jquery.flot.canvas.js | 345 - jquery.flot.fillbetween.js | 226 - jquery.flot.js | 3168 ----- jquery.flot.navigate.js | 346 - jquery.flot.pie.js | 820 -- jquery.flot.symbol.js | 71 - jquery.flot.time.js | 432 - jquery.mousewheel.LICENSE.txt | 37 + karma.conf.js | 142 + legend.css | 13 + lib/globalize.culture.en-US.js | 33 + lib/globalize.js | 1601 +++ lib/jquery.event.drag.js | 145 + lib/jquery.mousewheel.js | 86 + package-lock.json | 10118 ++++++++++++++++ package.json | 51 +- source/jquery.canvaswrapper.js | 538 + .../jquery.colorhelpers.js | 165 +- source/jquery.flot.axislabels.js | 212 + source/jquery.flot.browser.js | 98 + .../jquery.flot.categories.js | 94 +- source/jquery.flot.composeImages.js | 325 + .../jquery.flot.crosshair.js | 106 +- source/jquery.flot.drawSeries.js | 604 + .../jquery.flot.errorbars.js | 234 +- source/jquery.flot.fillbetween.js | 254 + source/jquery.flot.flatdata.js | 47 + source/jquery.flot.hover.js | 346 + .../jquery.flot.image.js | 92 +- source/jquery.flot.js | 2729 +++++ source/jquery.flot.legend.js | 395 + source/jquery.flot.logaxis.js | 296 + source/jquery.flot.navigate.js | 706 ++ source/jquery.flot.pie.js | 786 ++ .../jquery.flot.resize.js | 11 +- source/jquery.flot.saturated.js | 43 + .../jquery.flot.selection.js | 278 +- .../jquery.flot.stack.js | 138 +- source/jquery.flot.symbol.js | 98 + .../jquery.flot.threshold.js | 83 +- source/jquery.flot.time.js | 460 + source/jquery.flot.touch.js | 322 + source/jquery.flot.touchNavigate.js | 311 + source/jquery.flot.uiConstants.js | 10 + jquery.js => source/jquery.js | 1 + tests/jquery.flot-drawSeries.Test.js | 460 + tests/jquery.flot-precision.Test.js | 151 + tests/jquery.flot.Test.js | 1182 ++ tests/jquery.flot.axislabels.Test.js | 143 + tests/jquery.flot.canvaswrapper.Test.js | 332 + tests/jquery.flot.colorhelpers.Test.js | 107 + tests/jquery.flot.composeImages.Test.js | 768 ++ tests/jquery.flot.errorbars.Test.js | 282 + tests/jquery.flot.fillbetween.Test.js | 24 + tests/jquery.flot.flatdata.Test.js | 46 + tests/jquery.flot.hover.Test.js | 212 + tests/jquery.flot.invertedaxis.Test.js | 159 + tests/jquery.flot.largeNumbers.Test.js | 96 + tests/jquery.flot.legend.Test.js | 107 + tests/jquery.flot.logaxis.Test.js | 353 + .../jquery.flot.navigate-interaction.Test.js | 232 + tests/jquery.flot.navigate.Test.js | 820 ++ tests/jquery.flot.stack.Test.js | 46 + tests/jquery.flot.symbol.Test.js | 48 + tests/jquery.flot.time.Test.js | 58 + tests/jquery.flot.touch.Test.js | 486 + tests/jquery.flot.touchNavigate.Test.js | 945 ++ tests/svgstyle.css | 5 + update_docs.js | 34 + 134 files changed, 33010 insertions(+), 7926 deletions(-) create mode 100644 .circleci/config.yml create mode 100644 .dont-break.json create mode 100644 .npmignore rename NEWS.md => CHANGELOG.md (73%) delete mode 100644 FAQ.md delete mode 100644 Makefile create mode 100644 build.js delete mode 100644 component.json create mode 100644 docs/API.md rename PLUGINS.md => docs/PLUGINS.md (100%) create mode 100644 docs/absRelTime.md create mode 100644 docs/browser.md create mode 100644 docs/canvaswrapper.md create mode 100644 docs/composeImages.md create mode 100644 docs/drawSeries.md create mode 100644 docs/hover.md create mode 100644 docs/interactions.md create mode 100644 docs/logaxis.md create mode 100644 docs/navigate.md create mode 100644 examples/axes-autoscaling/index.html create mode 100644 examples/axes-labels/index.html create mode 100644 examples/axes-tickLabels/index.html delete mode 100644 examples/canvas/index.html create mode 100644 examples/fill-types/index.html create mode 100644 examples/log-scale/index.html create mode 100644 examples/navigateTouch/index.html create mode 100644 examples/plot-legend/index.html delete mode 100644 excanvas.js delete mode 100644 excanvas.min.js delete mode 100644 flot.jquery.json create mode 100644 gulpfile.js create mode 100644 jquery.event.drag.LICENSE.txt delete mode 100644 jquery.flot.canvas.js delete mode 100644 jquery.flot.fillbetween.js delete mode 100644 jquery.flot.js delete mode 100644 jquery.flot.navigate.js delete mode 100644 jquery.flot.pie.js delete mode 100644 jquery.flot.symbol.js delete mode 100644 jquery.flot.time.js create mode 100644 jquery.mousewheel.LICENSE.txt create mode 100644 karma.conf.js create mode 100644 legend.css create mode 100644 lib/globalize.culture.en-US.js create mode 100644 lib/globalize.js create mode 100644 lib/jquery.event.drag.js create mode 100644 lib/jquery.mousewheel.js create mode 100644 package-lock.json create mode 100644 source/jquery.canvaswrapper.js rename jquery.colorhelpers.js => source/jquery.colorhelpers.js (52%) create mode 100644 source/jquery.flot.axislabels.js create mode 100644 source/jquery.flot.browser.js rename jquery.flot.categories.js => source/jquery.flot.categories.js (76%) create mode 100644 source/jquery.flot.composeImages.js rename jquery.flot.crosshair.js => source/jquery.flot.crosshair.js (66%) create mode 100644 source/jquery.flot.drawSeries.js rename jquery.flot.errorbars.js => source/jquery.flot.errorbars.js (63%) create mode 100644 source/jquery.flot.fillbetween.js create mode 100644 source/jquery.flot.flatdata.js create mode 100644 source/jquery.flot.hover.js rename jquery.flot.image.js => source/jquery.flot.image.js (85%) create mode 100644 source/jquery.flot.js create mode 100644 source/jquery.flot.legend.js create mode 100644 source/jquery.flot.logaxis.js create mode 100644 source/jquery.flot.navigate.js create mode 100644 source/jquery.flot.pie.js rename jquery.flot.resize.js => source/jquery.flot.resize.js (96%) create mode 100644 source/jquery.flot.saturated.js rename jquery.flot.selection.js => source/jquery.flot.selection.js (60%) rename jquery.flot.stack.js => source/jquery.flot.stack.js (67%) create mode 100644 source/jquery.flot.symbol.js rename jquery.flot.threshold.js => source/jquery.flot.threshold.js (80%) create mode 100644 source/jquery.flot.time.js create mode 100644 source/jquery.flot.touch.js create mode 100644 source/jquery.flot.touchNavigate.js create mode 100644 source/jquery.flot.uiConstants.js rename jquery.js => source/jquery.js (99%) create mode 100644 tests/jquery.flot-drawSeries.Test.js create mode 100644 tests/jquery.flot-precision.Test.js create mode 100644 tests/jquery.flot.Test.js create mode 100644 tests/jquery.flot.axislabels.Test.js create mode 100644 tests/jquery.flot.canvaswrapper.Test.js create mode 100644 tests/jquery.flot.colorhelpers.Test.js create mode 100644 tests/jquery.flot.composeImages.Test.js create mode 100644 tests/jquery.flot.errorbars.Test.js create mode 100644 tests/jquery.flot.fillbetween.Test.js create mode 100644 tests/jquery.flot.flatdata.Test.js create mode 100644 tests/jquery.flot.hover.Test.js create mode 100644 tests/jquery.flot.invertedaxis.Test.js create mode 100644 tests/jquery.flot.largeNumbers.Test.js create mode 100644 tests/jquery.flot.legend.Test.js create mode 100644 tests/jquery.flot.logaxis.Test.js create mode 100644 tests/jquery.flot.navigate-interaction.Test.js create mode 100644 tests/jquery.flot.navigate.Test.js create mode 100644 tests/jquery.flot.stack.Test.js create mode 100644 tests/jquery.flot.symbol.Test.js create mode 100644 tests/jquery.flot.time.Test.js create mode 100644 tests/jquery.flot.touch.Test.js create mode 100644 tests/jquery.flot.touchNavigate.Test.js create mode 100644 tests/svgstyle.css create mode 100644 update_docs.js diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 000000000..ab81db234 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,100 @@ +# This configuration was automatically generated from a CircleCI 1.0 config. +# It should include any build commands you had along with commands that CircleCI +# inferred from your project structure. We strongly recommend you read all the +# comments in this file to understand the structure of CircleCI 2.0, as the idiom +# for configuration has changed substantially in 2.0 to allow arbitrary jobs rather +# than the prescribed lifecycle of 1.0. In general, we recommend using this generated +# configuration as a reference rather than using it in production, though in most +# cases it should duplicate the execution of your original 1.0 config. +version: 2 +jobs: + build: + working_directory: ~/flot/flot + parallelism: 1 + shell: /bin/bash --login + # CircleCI 2.0 does not support environment variables that refer to each other the same way as 1.0 did. + # If any of these refer to each other, rewrite them so that they don't or see https://circleci.com/docs/2.0/env-vars/#interpolating-environment-variables-to-set-other-environment-variables . + environment: + CIRCLE_ARTIFACTS: /tmp/circleci-artifacts + CIRCLE_TEST_REPORTS: /tmp/circleci-test-results + # In CircleCI 1.0 we used a pre-configured image with a large number of languages and other packages. + # In CircleCI 2.0 you can now specify your own image, or use one of our pre-configured images. + # The following configuration line tells CircleCI to use the specified docker image as the runtime environment for you job. + # We have selected a pre-built image that mirrors the build environment we use on + # the 1.0 platform, but we recommend you choose an image more tailored to the needs + # of each job. For more information on choosing an image (or alternatively using a + # VM instead of a container) see https://circleci.com/docs/2.0/executor-types/ + # To see the list of pre-built images that CircleCI provides for most common languages see + # https://circleci.com/docs/2.0/circleci-images/ + docker: + - image: circleci/build-image:ubuntu-14.04-XXL-upstart-1189-5614f37 + command: /sbin/init + steps: + # Machine Setup + # If you break your build into multiple jobs with workflows, you will probably want to do the parts of this that are relevant in each + # The following `checkout` command checks out your code to your working directory. In 1.0 we did this implicitly. In 2.0 you can choose where in the course of a job your code should be checked out. + - checkout + # Prepare for artifact and test results collection equivalent to how it was done on 1.0. + # In many cases you can simplify this from what is generated here. + # 'See docs on artifact collection here https://circleci.com/docs/2.0/artifacts/' + - run: mkdir -p $CIRCLE_ARTIFACTS $CIRCLE_TEST_REPORTS + # This is based on your 1.0 configuration file or project settings + - run: + working_directory: ~/flot/flot + command: nvm install 8.2.0 && nvm alias default 8.2.0 + # Dependencies + # This would typically go in either a build or a build-and-test job when using workflows + # Restore the dependency cache + - restore_cache: + keys: + # This branch if available + - v1-dep-{{ .Branch }}- + # Default branch if not + - v1-dep-master- + # Any branch if there are none on the default branch - this should be unnecessary if you have your default branch configured correctly + - v1-dep- + # This is based on your 1.0 configuration file or project settings + - run: sudo apt-get update + - run: sudo apt-get install libpango1.0-0 + - run: sudo apt-get install firefox + - run: sudo ln -sf /usr/lib/firefox/firefox /usr/bin/firefox + - run: curl -s https://raw.githubusercontent.com/chronogolf/circleci-google-chrome/master/use_chrome_stable_version.sh | bash + - run: node --version + - run: npm --version + - run: npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN + # The following line was run implicitly in your 1.0 builds based on what CircleCI inferred about the structure of your project. In 2.0 you need to be explicit about which commands should be run. In some cases you can discard inferred commands if they are not relevant to your project. + - run: if [ -z "${NODE_ENV:-}" ]; then export NODE_ENV=test; fi + - run: export PATH="~/flot/flot/node_modules/.bin:$PATH" + - run: npm install + # This is based on your 1.0 configuration file or project settings + - run: npm install -g dont-break + - run: npm run build + # Save dependency cache + - save_cache: + key: v1-dep-{{ .Branch }}-{{ epoch }} + paths: + # This is a broad list of cache paths to include many possible development environments + # You can probably delete some of these entries + - vendor/bundle + - ~/virtualenvs + - ~/.m2 + - ~/.ivy2 + - ~/.bundle + - ~/.go_workspace + - ~/.gradle + - ~/.cache/bower + - ./node_modules + # Test + # This would typically be a build job when using workflows, possibly combined with build + # This is based on your 1.0 configuration file or project settings + - run: npm run dont-break + # Teardown + # If you break your build into multiple jobs with workflows, you will probably want to do the parts of this that are relevant in each + # Save test results + - store_test_results: + path: /tmp/circleci-test-results + # Save artifacts + - store_artifacts: + path: /tmp/circleci-artifacts + - store_artifacts: + path: /tmp/circleci-test-results diff --git a/.dont-break.json b/.dont-break.json new file mode 100644 index 000000000..dbf679698 --- /dev/null +++ b/.dont-break.json @@ -0,0 +1,7 @@ +[ + "https://github.com/ni-kismet/flot-cursors-plugin", + "https://github.com/ni-kismet/flot-intensitygraph-plugin", + "https://github.com/ni-kismet/flot-charting-plugin", + "https://github.com/ni-kismet/webcharts", + "https://github.com/ni-kismet/webcharts-legends" +] diff --git a/.gitignore b/.gitignore index 477d588c1..425777da1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ -*.min.js -!excanvas.min.js node_modules/ +debug.log +coverage/** +dist/ +.vscode \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 000000000..8bf9f6dbb --- /dev/null +++ b/.npmignore @@ -0,0 +1,7 @@ +* + +!dist/* +!lib/* +!docs/* +!source/* +!CHANGELOG.md \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index baa0031d5..235a59b6b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,38 @@ +dist: trusty language: node_js node_js: - - 0.8 +- '8' +addons: + firefox: latest + chrome: stable +cache: + directories: + - node_modules +before_install: +- export DISPLAY=:99.0 +- sh -e /etc/init.d/xvfb start +- npm install -g greenkeeper-lockfile@1 +- npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN +before_script: +- greenkeeper-lockfile-update +- sudo chown root /opt/google/chrome/chrome-sandbox +- sudo chmod 4755 /opt/google/chrome/chrome-sandbox +- tar -tf $(npm pack) +after_script: greenkeeper-lockfile-upload +install: +- npm install +script: +- npm test +- npm run build +- npm run coverage +# deploy: +# provider: npm +# email: webapps.ops@ni.com +# api_key: +# secure: VJTenM/7Mof2gtbPtaQ6xMlJxMOHhdzhqbwjhhfE/ydkDAjNWZ/c2RBmP56rD7rxeaVYaRPR19KbhgunXMp++PxOUDj+n2EzsJVdqboJdJ5c3A5qa6OlPrWVupmuR5nmRNRCIzcuvkC1m7wKL8gtrBfcaY9pYewi0kYpu7VXZmiVCjO7ySOwSyPBQy0wmlFwiB2YIcsMIfQRaYgo0Goh7Aqy47UmYVxE8xcIWQdMv8xAbUbz/66oCzvSRcNxcTT00vStV8lg4adm3peqkpKyj6xv10SF93u5u5Hk9XkIjGJ8dpotHFFpC6aeN4f/olWgKPWjJFxBwLa6kmj+JvwKBO+rRjiGbks2nKcJXK6+5rRjsY/bJ54/jlqQfJYSgx1I4DPBEloBPKdo5ogOFuAz0Tv+1qYazS1kJm7oMPnOI7uVYiZ/15NqD6JlMi+7kEcq565Xx1t2eLxWAh86a0c9k+PkS7Gf+74YVixJnwMpGfRXbKdjsk4x86KIJRGeZXuIGMp5N/3Vo+yKPRMMQuIV1MsGgCc8f2jQ9qlkkmNbc+3+sJ3GaWVC3R6QHYxMu6OtAGDAFJpj5VgQ3n4L1RevI4LMqZaa0Xk7tV3//Vd32tbqFjWLWZv1z/SfrZjfZh6Yhhw8xobo3DHgNbVWppoMIqDE5YHLkCUweZamboPM5Is= +# on: +# tags: true +# repo: flot/flot +# skip_cleanup: true +env: + secure: mkyiKGXQ8wkx4kSi/x7kProXE76E2Ix5xP+xHAcTpMhsFJYsyFE8LR8wC7UWxg80nbww6P1mWpJkMPm2QnWW8OSuKh9pF2bluTU7VAf68JHROA55FZauO0NgLWxF1tog/RLaTXBzoqXBx5+Zlcp2jl4UdsDSIr/1TogSEC7hV3dMiqzTsiC09RnAgtGsUfzDjCGVgyz2yDBMCoi+kfzJiRz7f1dW5GxhUypuV4jjEXTt1V6XrIA0C/uD27LP+kswHadMT6HURPiWEJteKNFz6hnfXttF1XmTwW++kzahDoap607oLszz+g8ss/9F0ILyO3tffyKnoEOImJLogvLUm3slxfHvh9PYh7x8oyPHFtfs7QAJ5Q2Cr23VvwJNslkuNCphEsQJS/HQ70VuSF6MlGrhbsLGp8kEFZrXADqojkGQ/duPk3QykiXUaUxr0uPEllptOLh5TTKYarRM/IVv4kE5iC4egJXouKxwwL5LIglnyCTycEdTLv/IUfYap8ABqi20eBm+AJGk44Z72fl+G/xoPrzbtVosQfPbuLurVJHHDDExHM3bFqfUNnB9xIEwWTihSc6ycI7IhuMQlg1G1t5rRY5YyVQN/4oP4k6qNgYbJs9PrxfyMw7Z+dSg/L2SyJbc/ReNiFkvpTNDYGY/dULvx1uGM1NGdmC+z+nljfk= diff --git a/NEWS.md b/CHANGELOG.md similarity index 73% rename from NEWS.md rename to CHANGELOG.md index ad0303d74..d86d61be1 100644 --- a/NEWS.md +++ b/CHANGELOG.md @@ -1,3 +1,556 @@ +# Changelog +All notable changes to this project will be documented in this file. + +## [2.0.1] + +## Notable Breaking Changes For Existing flot Users +### Series Options: +Before: + + var plot = $.plot(placeholder, data, { + bars: { show: true, barWidth: 0.5, fill: 0.9 }, + xaxis: { ticks: [], autoscaleMargin: 0.02 }, + yaxis: { min: -2, max: 2 }, + grid: { markings: markings } + }); + +After: + + var plot = $.plot(placeholder, data, { + series: { + bars: { show: true, barWidth: 0.5, fill: 0.9 } + }, + xaxis: { show: false }, + yaxis: { min: -2, max: 2, autoScale: "none" }, + grid: { markings: markings } + }); + +Note: Backwards compatibility was removed such that we require series options to be encapsulated. + +### Time Formatting: +Before: + + $.plot("#placeholder", [d], { + xaxis: { + mode: "time", + minTickSize: [1, "year"], + min: (new Date(1996, 0, 1)).getTime(), + max: (new Date(2000, 0, 1)).getTime() + } + }); + +After: + + $.plot("#placeholder", [d], { + xaxis: { + mode: "time", + minTickSize: [1, "year"], + autoScale: "none", + min: (new Date(1996, 0, 1)).getTime(), + max: (new Date(2000, 0, 1)).getTime(), + timeBase: "milliseconds" + } + }); + +Note: A new capability allows for data (and min/max settings of axes) to be specified with a `timeBase` of either seconds or milliseconds. So, a range from 1-10 can either represent 9 milliseconds of data, or 9 seconds of data, depending on the setting of `timeBase` (whose default is "seconds"). + +### Script Locations: + +All scripts have been moved under the 'source' folder, so you will need to update all reference scripts to point to new location. Or you can use the file dist/es5/jquery.flot.js which is all source combined and minified. + +### SVG rendering: + +We now render axes and the legend through SVG. Any CSS targeting specific DOM objects related to these will now be broken. + +## New Features: + +### Auto-scaling options (`autoScale` property of axes) +- Allows for various ways to auto-scale the axes in response to plotting new data (see API.md). +- The public method `setupGrid` now takes a boolean argument to indicate whether or not to perform an autoScale according to the current setting on the axes. + +### Tick Label visibility options +- Allows a user to specify whether to show tick labels on all major ticks, at endpoints only, all (major ticks and endpoints), or none at all. + +### Axis inversion +- An axis now be inverted (swap min/max positions) through the `inverted` option on the axes. + +### Axis grid lines +- Grid lines can now be turned off or on for individual axes. + +### Axis `boxPosition` +- Allows a user to specify the position an axis is rendered within its box. + +### New `barWidth` options + +- Allows for the number supplied as the width to be treated either as a relative value related to the minimum distance between consecutive points, or as an absolute value in terms of units on the axis. + +### New logaxis plugin! +- Example is provided + +### Touch navigation! +- Use the touchNavigate plugin to access touch panning gestures + +## Numerous bug fixes + +## [1.1.5] + +### Bug fixes ### +interpolation should not occur outside the provided data + +## [1.1.4] + +### Changes ### +- making graph screen capture work for Safari + +## [1.1.3] + +### Changes ### +- document flot plugins +- refactor default tick generators and formatters and logaxis + +### Bug fixes ### +- Fixed some browser detection functions, which depend on other similar functions + +## [1.1.2] + +### Changes ### +- move backgroundColor and backgroundOpacity from legend settings to css + +## [1.1.0] + +### Changes ### +- getPixelRatio moved from the plot instance to $.plot.browser namespace +- Added 'onDrawingDone' custom event, dispatched by triggerRedrawOverlay. + +### Bug fixes ### +- Pinch events fired too fast and slowing down the drawing + +## [1.0.10] + +### Bug fixes ### +- Skipping the first point when looking for the nearest point +- Wrong coordinates when tapping a point + +## [1.0.9] + +### Bug fixes ### +- Panning the plot in Firefox using any mouse button +- Overlay canvas cleared too often +- Click or mouse wheel pressed while dragging will stop drag event + +## [1.0.8] + +### Bug fixes ### +- tspan leak for absolute time axis fix +- Fix snapshot image size for pixel ratios less than 1 + +## [1.0.7] +### Changes ### +- Generate plothover event for tap on point +- Support for mobile safari browser for snapshots + +### Bug fixes ### +- Fix legend background color + +## [1.0.6] +### Bug fixes ### +- Hang caused by 'use' elements in SVGs when calling composeImages + +## [1.0.5] +### Changes ### +- Activate graph navigation on double click + +### Bug fixes ### +- Wrong tick labels position + +## [1.0.4] +### Changes ### +- New getPixelRatio() helper function + +### Bug fixes ### +- Multi lines labels + + +## [1.0.3] +### Changes ### + +- Change jquery.flot.legend.js to use SVG and add it to the distribution + +### Bug fixes ### + +- No minimum margin for axis tick labels +- Fixed pixel ratio for devices with a different pixel ratio than 1, +for creating graph snapshots + + +## [1.0.2] +### Changes ### + +- Expose the composeImages as part of the plot instance + +### Bug fixes ### + +- The speed of the zoom made on the Mac track pad +- Invalid SVG width and height values red by composeImages on Firefox + + +## [1.0.1] +### Changes ### + +- Added jquery.flot.composeImages.js to distribution + + +## [1.0.0] + +### Changes ### + +- single file distribution: dist/es5/jquery.flot.js +- Edge and Safari support +- PhantomJS and IE are no longer supported +- the axis and tick labels are now rendered using SVG text and g nodes instead of div +- autoscale option from axis API renamed autoScale +- autoscaleMargin option for scale loose renamed autoScaleMargin +- changelog NEWS.md renamed to CHANGELOG.md + +## engineering-flot 0.6.0 ## + +### Changes ### + +- change API by adding function to interpolate the position between nearest neighbors on OY axis + +## engineering-flot 0.5.7 ## + +### Changes ### + +- three fingers pinch affects browser zoom +- consider axisZoom and plotZoom flags for enabling axis zooming, axisPan and plotPan for panning + +### Bug fixes ### + +- touch pan for axis, zoom plot and zoom axis + +## engineering-flot 0.5.6 ## + +### Bug fixes ### + +- touch pan plot +- call points decimation from webcharts before drawing series points + +## engineering-flot 0.5.5 ## + +### Changes ### + +- order of default plot color + +### Bug fixes ### + +- plot margins and axis position should be adjusted based on user's grid margin options + +## engineering-flot 0.5.4 ## + +### Bug fixes ### + +- axis for bar plot with no data + +## engineering-flot 0.5.3 ## + +### Bug fixes ### + +- panning log axes on x and y in the same time. +- endpoint tick labels for bars. + +## engineering-flot 0.5.2 ## + +### Bug fixes ### + +- zoom out instead of zoom in after excesive scroll. +- loosing precition when panning on x and y in the same time. +- navigation close to 0 for log axis. + +## engineering-flot 0.5.1 ## + +### Bug fixes ### + +- patching the pan jquery plugin to work with any jquery version. + +## engineering-flot 0.5.0 ## + +### Changes ### + +- the pan and mouse wheel jquery plugin were moved in their own files. + +## engineering-flot 0.4.15 ## + +### Bug fixes ### + +- bars width. + +## engineering-flot 0.4.14 ## + +### Bug fixes ### + +- long tap. +- mouse pan. +- improved precision used by the tick formatter. + +## engineering-flot 0.4.10 ## + +### Changes ### + +- basic touch support. + +### Bug fixes ### + +- include absRelTime file in the package. +- fix for relative time. + +## engineering-flot 0.4.8 ## + +### Changes ### + +- bar width is computed based on the distance between points. +- relative time axis. + +### Bug fixes ### + +- any axis regardless its visibility has a tick formatter. + +## engineering-flot 0.4.7 ## + +### Changes ### + +- fillTowards for bars. +- removing vertical bars. +- log axis improvements. + +## engineering-flot 0.4.6 ## + +### Changes ### + +- scatter graph performance improvements. + +## engineering-flot 0.4.5 ## + +### Changes ### + +- ability to reserve space to the left or right of the axis. + +### Bug fixes ### + +- wrong buffer size when writing smaller data. + +## engineering-flot 0.4.4 ## + +### Changes ### + +- zooming only the hovered axis. + +## engineering-flot 0.4.2 ## + +### Bug fixes ### + +- memory leak caused by axis tick labels. + +## engineering-flot 0.4.1 ## + +### Changes ### + +- ability to find the nearby item with a custom function. + +### Bug fixes ### + +- memory leak caused by axis labels. + +## engineering-flot 0.4.0 ## + +### Changes ### + +- sliding-window mode for auto scale. +- small navigation improvements. + +### Bug fixes ### + +- precision of tick labels for large numbers. + +## engineering-flot 0.3.8 ## + +### Changes ### + +- log axis now allow a custom formatter to be specified. + +## engineering-flot 0.3.5 ## + +### Changes ### + +- add linter + +### Bug fixes ### + +- fixes the computation of precission needed for the endpoint tick labels. + +## engineering-flot 0.3.4 ## + +### Bug fixes ### + +- axis formatter fixes. + +## engineering-flot 0.3.2 ## + +### Bug fixes ### + +- fix pan and zoom to work for all autoscale modes. + +## engineering-flot 0.3.1 ## + +### Changes ### + +- engineering-flot should be consumed by loading the newly added dist/jquery.flot.js +file and the needed plugins. +- display the endpoint ticks with better precission. + +## engineering-flot 0.2.4 ## + +### Changes ### + +- Axis range is between axis.min and axis.max if no data available + +## engineering-flot 0.2.3 ## + +### Changes ### + +- add computeRangeForDataSeries and adjustSeriesDataRange methods to the plot +- add adjustSeriesDataRange hook. + +## engineering-flot 0.2.2 ## + +### Changes ### + +- add new symbols to the symbols plugin +- Fix for autoScale=loose and stop generating endpoints when not needed +- make axilabels plugin strict +- use karma to run the (few) tests we have +- run the tests on TravisCI +- add coveralls support + +## engineering-flot 0.2.1 ## + +### Changes ### + +- the axis autoscale option was a breaking change, increment the minor version +(late is better that never) and fix the examples. + +## engineering-flot 0.1.15 ## + +### Changes ### + +- add the findNearbyItem method to the plot. +- add an axis autoscale option that is used to specify the desired autoscale mode. + +## engineering-flot 0.1.14 ## + +### Changes ### + +- Performance: make the axislabels use the axisReserveSpace hook which results in +simpler, faster code for axis labels. + +## engineering-flot 0.1.12 ## + +### Bug fixes ### + +- fixes for showTickLabels option introduced in 0.1.11 + +## engineering-flot 0.1.11 ## + +### Changes ### + +- add showTickLabels option that can be used to specify which ticks labels are visible: + +"none", "endpoints", "major" or "all". The default is "major". + +- add fillTowards option, used to specify the baseline for area and bar fills. The +most usefull ones are 0 ,-Infiniy and +Infinity. + +## engineering-flot 0.1.10 ## + +### Changes ### + +- add the ability to disable pan for a specific axis + +## engineering-flot 0.1.9 ## + +### Changes ### + +Cosmetic: improve the way the navigation hints are drawn. Add ellipse to the +flot.symbols plugin. + +## engineering-flot 0.1.8 ## + +### Changes ### + +- Don't compute datamin and datamax if not autoscaling, this improves the performance in some cases. + +## engineering-flot 0.1.7 ## + +### Changes ### + +- implement grow-only autoscaling behaviour and add docs and example + +## engineering-flot 0.1.6 ## + +### Bug fixes ### + +- make the text measurements cache more robust, cache the measurements for ticks +that were measured but not displayed too. This improves the performance a bit. + +## engineering-flot 0.1.5 ## + +### Changes ### + +- Add tickmarks functionality. Tick marks support the following cases: + + - Major Ticks Marks visible (showTicks : true, showMinorTicks : false) + - Major & Minor Ticks Marks visible (showTicks : true, showMinorTicks : true) + - All Tick Marks hidden (showTicks : false) + +## engineering-flot 0.1.4 ## + +### Changes ### + +- fix examples + +## engineering-flot 0.1.3 ## + +### Changes ### + +import the Axis Labels Plugin from http://github.com/markrcote/flot-axislabels + +## engineering-flot 0.1.2 ## + +### Changes ### + +- add clearCache function that clears the measurements cache. + +## engineering-flot 0.1.1 ## + +### Changes ### + +- Forked the Flot codebase into engineering flot + +- add logaxis plugin +- add smart pan to the navigation plugin +- remove code for backwards compatibility +- remove excanvas support +- split Canvas wrapper into a separate file +- test infrastructure +- improve the performance by: + - add a flatdata plugin that enables passing data into a faster and memory + efficient format + - allow the use of a user specified decimation method + - reuse internal buffers if possible. + +- add an svg layer to Flot + + + ## Flot 0.8.3 ## ### Changes ### @@ -548,7 +1101,7 @@ also surfaced, if your graphs are slow in IE, you may want to give it a spin: - Refactor replot behaviour so Flot tries to reuse the existing canvas, adding shutdown() methods to the plot. (based on patch by Ryley Breiddal, issue 269) - + This prevents a memory leak in Chrome and hopefully makes replotting faster for those who are using $.plot instead of .setData()/.draw(). Also update jQuery to 1.5.1 to prevent IE leaks fixed in jQuery. @@ -708,7 +1261,7 @@ in event handling speed. The "setting options" example provides a demonstration. - Gradient bars. (suggestion by stefpet) - + - Added a "plotunselected" event which is triggered when the selection is removed, see "selection" example. (suggestion by Meda Ugo) @@ -735,7 +1288,7 @@ in event handling speed. - Added pointOffset method for converting a point in data space to an offset within the placeholder. - + - Plugin system: register an init method in the $.flot.plugins array to get started, see PLUGINS.txt for details on how to write plugins (it's easy). There are also some extra methods to enable access to internal state. @@ -744,7 +1297,7 @@ in event handling speed. the data and doing the plot. This can be used to modify Flot without changing the source, useful for writing plugins. Some hooks are defined, more are likely to come. - + - Threshold plugin: you can set a threshold and a color, and the data points below that threshold will then get the color. Useful for marking data below 0, for instance. @@ -890,9 +1443,9 @@ code shouldn't break) and markings (formerly coloredAreas). value they represent. - setSelection now takes a second parameter which you can use to prevent the - method from firing the "plotselected" handler. + method from firing the "plotselected" handler. - - Improved the handling of axis auto-scaling with bars. + - Improved the handling of axis auto-scaling with bars. ## Bug fixes ## @@ -900,7 +1453,7 @@ code shouldn't break) and markings (formerly coloredAreas). timothytoe) - Fixed a bug in finding max values for all-negative data sets. - + - Prevent the possibility of eternal looping in tick calculations. - Fixed a bug when borderWidth is set to 0. (reported by Rob/sanchothefat) @@ -1024,3 +1577,20 @@ Moved labelMargin option to grid from x/yaxis. ## Flot 0.1 ## First public release. + +[1.1.5]: https://github.com/ni-kismet/engineering-flot/compare/v1.1.4...v1.1.5 +[1.1.4]: https://github.com/ni-kismet/engineering-flot/compare/v1.1.3...v1.1.4 +[1.1.3]: https://github.com/ni-kismet/engineering-flot/compare/v1.1.2...v1.1.3 +[1.1.2]: https://github.com/ni-kismet/engineering-flot/compare/v1.1.0...v1.1.2 +[1.1.0]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.10...v1.1.0 +[1.0.10]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.9...v1.0.10 +[1.0.9]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.8...v1.0.9 +[1.0.8]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.7...v1.0.8 +[1.0.7]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.6...v1.0.7 +[1.0.6]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.5...v1.0.6 +[1.0.5]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.4...v1.0.5 +[1.0.4]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.3...v1.0.4 +[1.0.3]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.2...v1.0.3 +[1.0.2]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.1...v1.0.2 +[1.0.1]: https://github.com/ni-kismet/engineering-flot/compare/v1.0.0...v1.0.1 +[1.0.0]: https://github.com/ni-kismet/engineering-flot/compare/v0.6.0...v1.0.0 diff --git a/FAQ.md b/FAQ.md deleted file mode 100644 index 9131e0439..000000000 --- a/FAQ.md +++ /dev/null @@ -1,75 +0,0 @@ -## Frequently asked questions ## - -#### How much data can Flot cope with? #### - -Flot will happily draw everything you send to it so the answer -depends on the browser. The excanvas emulation used for IE (built with -VML) makes IE by far the slowest browser so be sure to test with that -if IE users are in your target group (for large plots in IE, you can -also check out Flashcanvas which may be faster). - -1000 points is not a problem, but as soon as you start having more -points than the pixel width, you should probably start thinking about -downsampling/aggregation as this is near the resolution limit of the -chart anyway. If you downsample server-side, you also save bandwidth. - - -#### Flot isn't working when I'm using JSON data as source! #### - -Actually, Flot loves JSON data, you just got the format wrong. -Double check that you're not inputting strings instead of numbers, -like [["0", "-2.13"], ["5", "4.3"]]. This is most common mistake, and -the error might not show up immediately because Javascript can do some -conversion automatically. - - -#### Can I export the graph? #### - -You can grab the image rendered by the canvas element used by Flot -as a PNG or JPEG (remember to set a background). Note that it won't -include anything not drawn in the canvas (such as the legend). And it -doesn't work with excanvas which uses VML, but you could try -Flashcanvas. - - -#### The bars are all tiny in time mode? #### - -It's not really possible to determine the bar width automatically. -So you have to set the width with the barWidth option which is NOT in -pixels, but in the units of the x axis (or the y axis for horizontal -bars). For time mode that's milliseconds so the default value of 1 -makes the bars 1 millisecond wide. - - -#### Can I use Flot with libraries like Mootools or Prototype? #### - -Yes, Flot supports it out of the box and it's easy! Just use jQuery -instead of $, e.g. call jQuery.plot instead of $.plot and use -jQuery(something) instead of $(something). As a convenience, you can -put in a DOM element for the graph placeholder where the examples and -the API documentation are using jQuery objects. - -Depending on how you include jQuery, you may have to add one line of -code to prevent jQuery from overwriting functions from the other -libraries, see the documentation in jQuery ("Using jQuery with other -libraries") for details. - - -#### Flot doesn't work with [insert name of Javascript UI framework]! #### - -Flot is using standard HTML to make charts. If this is not working, -it's probably because the framework you're using is doing something -weird with the DOM or with the CSS that is interfering with Flot. - -A common problem is that there's display:none on a container until the -user does something. Many tab widgets work this way, and there's -nothing wrong with it - you just can't call Flot inside a display:none -container as explained in the README so you need to hold off the Flot -call until the container is actually displayed (or use -visibility:hidden instead of display:none or move the container -off-screen). - -If you find there's a specific thing we can do to Flot to help, feel -free to submit a bug report. Otherwise, you're welcome to ask for help -on the forum/mailing list, but please don't submit a bug report to -Flot. diff --git a/Makefile b/Makefile deleted file mode 100644 index 2e070d0c3..000000000 --- a/Makefile +++ /dev/null @@ -1,12 +0,0 @@ -# Makefile for generating minified files - -.PHONY: all - -# we cheat and process all .js files instead of an exhaustive list -all: $(patsubst %.js,%.min.js,$(filter-out %.min.js,$(wildcard *.js))) - -%.min.js: %.js - yui-compressor $< -o $@ - -test: - ./node_modules/.bin/jshint *jquery.flot.js diff --git a/README.md b/README.md index a8f70640a..53690d18b 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,20 @@ -# Flot [![Build status](https://travis-ci.org/flot/flot.png)](https://travis-ci.org/flot/flot) +# flot [![Build Status](https://travis-ci.org/flot/flot.svg?branch=master)](https://travis-ci.org/flot/flot) [![CircleCI](https://circleci.com/gh/flot/flot.svg?style=svg)](https://circleci.com/gh/flot/flot) [![Coverage Status](https://coveralls.io/repos/github/flot/flot/badge.svg?branch=master)](https://coveralls.io/github/flot/flot?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/flot/flot.svg)](https://greenkeeper.io/) ## About ## -Flot is a Javascript plotting library for jQuery. -Read more at the website: +flot is a JavaScript plotting library for engineering and scientific +applications derived from Flot: Take a look at the the examples in examples/index.html; they should give a good -impression of what Flot can do, and the source code of the examples is probably -the fastest way to learn how to use Flot. +impression of what flot can do, and the source code of the examples is probably +the fastest way to learn how to use flot. ## Installation ## -Just include the Javascript file after you've included jQuery. +Just include the JavaScript file after you've included jQuery. -Generally, all browsers that support the HTML5 canvas tag are -supported. - -For support for Internet Explorer < 9, you can use [Excanvas] -[excanvas], a canvas emulator; this is used in the examples bundled -with Flot. You just include the excanvas script like this: - -```html - -``` - -If it's not working on your development IE 6.0, check that it has -support for VML which Excanvas is relying on. It appears that some -stripped down versions used for test environments on virtual machines -lack the VML support. - -You can also try using [Flashcanvas][flashcanvas], which uses Flash to -do the emulation. Although Flash can be a bit slower to load than VML, -if you've got a lot of points, the Flash version can be much faster -overall. Flot contains some wrapper code for activating Excanvas which -Flashcanvas is compatible with. +Generally, all modern browsers are supported. You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive charts because of performance improvements in event handling. @@ -71,8 +51,8 @@ $.plot($("#placeholder"), data, options); Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the -examples for some ideas of what to put in or look at the -[API reference](API.md). Here's a quick example that'll draw a line +examples for some ideas of what to put in or look at the +[API reference](API.md). Here's a quick example that'll draw a line from (0, 0) to (1, 1): ```js @@ -82,29 +62,17 @@ $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } }); The plot function immediately draws the chart and then returns a plot object with a couple of methods. +## Documentation and examples -## What's with the name? ## - -First: it's pronounced with a short o, like "plot". Not like "flawed". - -So "Flot" rhymes with "plot". - -And if you look up "flot" in a Danish-to-English dictionary, some of -the words that come up are "good-looking", "attractive", "stylish", -"smart", "impressive", "extravagant". One of the main goals with Flot -is pretty looks. +API Documentation is available here: [API reference](docs/API.md) +About how the plugins work: [Plugins](docs/PLUGINS.md) -## Notes about the examples ## +High level overview on how interactions are handled internally: [Interactions](docs/interactions.md) -In order to have a useful, functional example of time-series plots using time -zones, date.js from [timezone-js][timezone-js] (released under the Apache 2.0 -license) and the [Olson][olson] time zone database (released to the public -domain) have been included in the examples directory. They are used in -examples/axes-time-zones/index.html. +Examples are included in the examples folder of this repository, but they can be tried out online as well: [Examples](https://rawgit.com/flot/flot/master/examples/index.html) +## CircleCI -[excanvas]: http://code.google.com/p/explorercanvas/ -[flashcanvas]: http://code.google.com/p/flashcanvas/ -[timezone-js]: https://github.com/mde/timezone-js -[olson]: http://ftp.iana.org/time-zones +[CircleCI](https://circleci.com/) is used in this repo to run [dont-break](https://www.npmjs.com/package/dont-break), +which checks if the current version of flot breaks unit tests on specified dependent projects. \ No newline at end of file diff --git a/build.js b/build.js new file mode 100644 index 000000000..ac8299549 --- /dev/null +++ b/build.js @@ -0,0 +1,57 @@ +/* eslint-disable */ + +var args = process.argv.slice(2); +var fs = require('fs'); +var concat = require('concat'); +var tmp = require('tmp'); + +var distDir = './dist/es5'; +var distFile = 'jquery.flot.js'; + +if (!fs.existsSync(distDir)) { + fs.mkdirSync(distDir) +} + +function concatenateFiles(destinationPath, callback) { + concat([ + './jquery.colorhelpers.js', + './jquery.canvaswrapper.js', + './jquery.flot.js', + './jquery.flot.saturated.js', + './jquery.flot.browser.js', + './jquery.flot.drawSeries.js', + './jquery.flot.uiConstants.js', + './jquery.flot.logaxis.js', + './jquery.flot.symbol.js', + './jquery.flot.flatdata.js', + './jquery.flot.navigate.js', + './jquery.flot.touchNavigate.js', + './jquery.flot.hover.js', + './jquery.flot.touch.js', + './jquery.flot.time.js', + './jquery.flot.axislabels.js', + './jquery.flot.selection.js', + './jquery.flot.composeImages.js', + './jquery.flot.legend.js' + ], destinationPath); +} + +if (args[0] === 'test') { + console.log('testing distribution ...'); + var tmpobj = tmp.fileSync(); + concatenateFiles(tmpobj.name, function(err, result) { + var origBuild = fs.readFileSync(distDir + '/' + distFile, 'utf8'); + var newBuild = fs.readFileSync(tmpobj.name, 'utf8'); + + if (newBuild !== origBuild) { + console.log('The distribution file dist/es5/jquery.flot.js is not up to date. Type "npm run build" to fix it !'); + process.exitCode = 1; + return; + } + + console.log('Ok'); + }); + } else { + console.log('building ', distDir + '/' + distFile); + concatenateFiles(distDir + '/' + distFile); + } diff --git a/component.json b/component.json deleted file mode 100644 index 596117235..000000000 --- a/component.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "Flot", - "version": "0.8.3", - "main": "jquery.flot.js", - "dependencies": { - "jquery": ">= 1.2.6" - } -} diff --git a/docs/API.md b/docs/API.md new file mode 100644 index 000000000..7d75c589b --- /dev/null +++ b/docs/API.md @@ -0,0 +1,1710 @@ +# Flot Reference # + +**Table of Contents** + +[Introduction](#introduction) +| [Data Format](#data-format) +| [Plot Options](#plot-options) +| [Customizing the legend](#customizing-the-legend) +| [Customizing the axes](#customizing-the-axes) +| [Multiple axes](#multiple-axes) +| [Time series data](#time-series-data) +| [Customizing the data series](#customizing-the-data-series) +| [Customizing the grid](#customizing-the-grid) +| [Specifying gradients](#specifying-gradients) +| [Plot Methods](#plot-methods) +| [Hooks](#hooks) +| [Plugins](#plugins) +| [Version number](#version-number) + +--- + +## Introduction ## + +Consider a call to the plot function: + +```js +var plot = $.plot(placeholder, data, options); +``` + +The placeholder is a jQuery object or DOM element or jQuery expression +that the plot will be put into. This placeholder needs to have its +width and height set as explained in the [README](README.md) (go read that now if +you haven't, it's short). The plot will modify some properties of the +placeholder so it's recommended you simply pass in a div that you +don't use for anything else. Make sure you check any fancy styling +you apply to the div, e.g. background images have been reported to be a +problem on IE 7. + +The plot function can also be used as a jQuery chainable property. This form +naturally can't return the plot object directly, but you can still access it +via the 'plot' data key, like this: + +```js +var plot = $("#placeholder").plot(data, options).data("plot"); +``` + +The format of the data is documented below, as is the available +options. The plot object returned from the call has some methods you +can call. These are documented separately below. + +Note that in general Flot gives no guarantees if you change any of the +objects you pass in to the plot function or get out of it since +they're not necessarily deep-copied. + + +## Data Format ## + +The data is an array of data series: + +```js +[ series1, series2, ... ] +``` + +A series can either be raw data or an object with properties. The raw +data format is an array of points: + +```js +[ [x1, y1], [x2, y2], ... ] +``` + +E.g. + +```js +[ [1, 3], [2, 14.01], [3.5, 3.14] ] +``` + +Note that to simplify the internal logic in Flot both the x and y +values must be numbers (even if specifying time series, see below for +how to do this). This is a common problem because you might retrieve +data from the database and serialize them directly to JSON without +noticing the wrong type. If you're getting mysterious errors, double +check that you're inputting numbers and not strings. + +If a null is specified as a point or if one of the coordinates is null +or couldn't be converted to a number, the point is ignored when +drawing. As a special case, a null value for lines is interpreted as a +line segment end, i.e. the points before and after the null value are +not connected. + +Lines and points take two coordinates. For filled lines and bars, you +can specify a third coordinate which is the bottom of the filled +area/bar (defaults to 0). If you don't specify a third coordinate you can +specify it as a constant for the entire series using "fillTowards" (see the lines +options). + +The format of a single series object is as follows: + +```js +{ + color: color or number + data: rawdata + label: string + lines: specific lines options + bars: specific bars options + points: specific points options + xaxis: number + yaxis: number + clickable: boolean + hoverable: boolean + shadowSize: number + highlightColor: color or number +} +``` + +You don't have to specify any of them except the data, the rest are +options that will get default values. Typically you'd only specify +label and data, like this: + +```js +{ + label: "y = 3", + data: [[0, 3], [10, 3]] +} +``` + +The label is used for the legend, if you don't specify one, the series +will not show up in the legend. + +If you don't specify color, the series will get a color from the +auto-generated colors. The color is either a CSS color specification +(like "rgb(255, 100, 123)") or an integer that specifies which of +auto-generated colors to select, e.g. 0 will get color no. 0, etc. + +The latter is mostly useful if you let the user add and remove series, +in which case you can hard-code the color index to prevent the colors +from jumping around between the series. + +The "xaxis" and "yaxis" options specify which axis to use. The axes +are numbered from 1 (default), so { yaxis: 2} means that the series +should be plotted against the second y axis. + +"clickable" and "hoverable" can be set to false to disable +interactivity for specific series if interactivity is turned on in +the plot, see below. + +The rest of the options are all documented below as they are the same +as the default options passed in via the options parameter in the plot +command. When you specify them for a specific data series, they will +override the default options for the plot for that data series. + +Here's a complete example of a simple data specification: + +```js +[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] }, + { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } +] +``` + + +## Plot Options ## + +All options are completely optional. They are documented individually +below, to change them you just specify them in an object, e.g. + +```js +var options = { + series: { + lines: { show: true }, + points: { show: true } + } +}; + +$.plot(placeholder, data, options); +``` + + +## Customizing the legend ## + +```js +legend: { + show: boolean + labelFormatter: null or (fn: string, series object -> string) + labelBoxBorderColor: color + noColumns: number + position: "ne" or "nw" or "se" or "sw" + margin: number of pixels or [x margin, y margin] + backgroundColor: null or color + backgroundOpacity: number between 0 and 1 + container: null or jQuery object/DOM element/jQuery expression + sorted: null/false, true, "ascending", "descending", "reverse", or a comparator +} +``` + +The legend is generated as a table with the data series labels and +small label boxes with the color of the series. If you want to format +the labels in some way, e.g. make them to links, you can pass in a +function for "labelFormatter". Here's an example that makes them +clickable: + +```js +labelFormatter: function(label, series) { + // series is the series object for the label + return '' + label + ''; +} +``` + +To prevent a series from showing up in the legend, simply have the function +return null. + +"noColumns" is the number of columns to divide the legend table into. +"position" specifies the overall placement of the legend within the +plot (top-right, top-left, etc.) and margin the distance to the plot +edge (this can be either a number or an array of two numbers like [x, +y]). "backgroundColor" and "backgroundOpacity" specifies the +background. The default is a partly transparent auto-detected +background. + +If you want the legend to appear somewhere else in the DOM, you can +specify "container" as a jQuery object/expression to put the legend +table into. The "position" and "margin" etc. options will then be +ignored. Note that Flot will overwrite the contents of the container. + +Legend entries appear in the same order as their series by default. If "sorted" +is "reverse" then they appear in the opposite order from their series. To sort +them alphabetically, you can specify true, "ascending" or "descending", where +true and "ascending" are equivalent. + +You can also provide your own comparator function that accepts two +objects with "label" and "color" properties, and returns zero if they +are equal, a positive value if the first is greater than the second, +and a negative value if the first is less than the second. + +```js +sorted: function(a, b) { + // sort alphabetically in ascending order + return a.label == b.label ? 0 : ( + a.label > b.label ? 1 : -1 + ) +} +``` + + +## Customizing the axes ## + +```js +xaxis, yaxis: { + show: null or true/false + position: "bottom" or "top" or "left" or "right" + mode: null or "time" ("time" requires jquery.flot.time.js plugin) + inverted: null or true/false + timezone: null, "browser" or timezone (only makes sense for mode: "time") + + color: null or color spec + tickColor: null or color spec + font: null or font spec object + + min: null or number + max: null or number + autoScaleMargin: null or number + windowSize: null or number + autoScale: "none" or "loose" or "exact" or "sliding-window" + growOnly: null or boolean + + transform: null or fn: number -> number + inverseTransform: null or fn: number -> number + + ticks: null or number or ticks array or (fn: axis -> ticks array) + tickSize: number or array + minTickSize: number or array + tickFormatter: (fn: number, object, number -> string) or string + tickDecimals: null or number + + showTickLabels: "major", "none", "endpoints", or "all" + labelWidth: null or number + labelHeight: null or number + reserveSpace: null or true + + gridLines: null or true + + showTicks: null or true + showMinorTicks: null or true + tickLength: null or number + + alignTicksWithAxis: null or number + + offset: null or object({ below: number, above: number }) + boxPosition: { centerX: number, centerY: number } +} +``` + +All axes have the same kind of options. The following describes how to +configure one axis, see below for what to do if you've got more than +one x axis or y axis. + +If you don't set the "show" option (i.e. it is null), visibility is +auto-detected, i.e. the axis will show up if there's data associated +with it. You can override this by setting the "show" option to true or +false. + +The "position" option specifies where the axis is placed, bottom or +top for x axes, left or right for y axes. The "mode" option determines +how the data is interpreted, the default of null means as decimal +numbers. Use "time" for time series data; see the time series data +section. The time plugin (jquery.flot.time.js) is required for time +series support. + +The "inverted" options specifies whether the transform and inverseTransform should +include a negating transform which will reverse the axis. + +The "color" option determines the color of the line and ticks for the axis, and +defaults to the grid color with transparency. For more fine-grained control you +can also set the color of the ticks separately with "tickColor". + +You can customize the font and color used to draw the axis tick labels with CSS +or directly via the "font" option. When "font" is null - the default - each +tick label is given the 'flot-tick-label' class. For compatibility with Flot +0.7 and earlier the labels are also given the 'tickLabel' class, but this is +deprecated and scheduled to be removed with the release of version 1.0.0. + +To enable more granular control over styles, labels are divided between a set +of text containers, with each holding the labels for one axis. These containers +are given the classes 'flot-[x|y]-axis', and 'flot-[x|y]#-axis', where '#' is +the number of the axis when there are multiple axes. For example, the x-axis +labels for a simple plot with only a single x-axis might look like this: + +```html +
    +
    January 2013
    + ... +
    +``` + +For direct control over label styles you can also provide "font" as an object +with this format: + +```js +{ + size: 11, + lineHeight: 13, + style: "italic", + weight: "bold", + family: "sans-serif", + variant: "small-caps", + color: "#545454" +} +``` + +The size and lineHeight must be expressed in pixels; CSS units such as 'em' +or 'smaller' are not allowed. + +The options "min"/"max" are the precise minimum/maximum value on the +scale. If you don't specify either of them, a value will automatically +be chosen based on the minimum/maximum data values. Note that Flot +always examines all the data values you feed to it, even if a +restriction on another axis may make some of them invisible (this +makes interactive use more stable). + +The "autoScaleMargin" is a bit esoteric: it's the fraction of margin +that the scaling algorithm will add to avoid that the outermost points +ends up on the grid border. Note that this margin is only applied when +autoScale option is set to "loose". If a margin is specified, +the plot will furthermore extend the axis end-point to the nearest +whole tick. The default value is "null" for the x axes and 0.02 for y +axes which seems appropriate for most cases. + +The "windowSize" is the range of the plot that will be visible on "sliding-window" autoScale. +If autoScale is not "sliding-window" this option will be ignored. Default value is 100. + +The "autoScale" option is used to automatically set the end-points of the axis. There +are three options available: "none" will set the end-points to the "min"/"max" values, +"exact" will set the end-points to minimum/maximum values in the visible area of the plot, and +"loose" will add a margin to the "exact" mode based on the "autoScaleMargin" value. The "sliding-window" +autoScale will always keep a "windowSize" range between axis.min and axis.max. The autoscaling behaviour is also affected by the growOnly flag, described below. +The default autoScale value is "none" for the x axes, and "loose" for y axes. + +The "growOnly" option is useful when you want to have a smoother auto-scaling +behavior. If true the scale range will grow to adapt to the data range but won't +shrink back. This will be ignored if autoScale value is "none" or "sliding-window". The default value is false. + +"transform" and "inverseTransform" are callbacks you can put in to +change the way the data is drawn. You can design a function to +compress or expand certain parts of the axis non-linearly, e.g. +suppress weekends or compress far away points with a logarithm or some +other means. When Flot draws the plot, each value is first put through +the transform function. Here's an example, the x axis can be turned +into a natural logarithm axis with the following code: + +```js +xaxis: { + transform: function (v) { return Math.log(v); }, + inverseTransform: function (v) { return Math.exp(v); } +} +``` + +Similarly, for reversing the y axis so the values appear in inverse +order: + +```js +yaxis: { + transform: function (v) { return -v; }, + inverseTransform: function (v) { return -v; } +} +``` + +Note that for finding extrema, Flot assumes that the transform +function does not reorder values (it should be monotone). + +The inverseTransform is simply the inverse of the transform function +(so v == inverseTransform(transform(v)) for all relevant v). It is +required for converting from canvas coordinates to data coordinates, +e.g. for a mouse interaction where a certain pixel is clicked. If you +don't use any interactive features of Flot, you may not need it. + + +The rest of the options deal with the ticks. + +If you don't specify any ticks, a tick generator algorithm will make +some for you. The algorithm has two passes. It first estimates how +many ticks would be reasonable and uses this number to compute a nice +round tick interval size. Then it generates the ticks. + +You can specify how many ticks the algorithm aims for by setting +"ticks" to a number. The algorithm always tries to generate reasonably +round tick values so even if you ask for three ticks, you might get +five if that fits better with the rounding. If you don't want any +ticks at all, set "ticks" to 0 or an empty array. + +Another option is to skip the rounding part and directly set the tick +interval size with "tickSize". If you set it to 2, you'll get ticks at +2, 4, 6, etc. Alternatively, you can specify that you just don't want +ticks at a size less than a specific tick size with "minTickSize". +Note that for time series, the format is an array like [2, "month"], +see the next section. + +If you want to completely override the tick algorithm, you can specify +an array for "ticks", either like this: + +```js +ticks: [0, 1.2, 2.4] +``` + +Or like this where the labels are also customized: + +```js +ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]] +``` + +You can mix the two if you like. + +For extra flexibility you can specify a function as the "ticks" +parameter. The function will be called with an object with the axis +min and max and should return a ticks array. Here's a simplistic tick +generator that spits out intervals of pi, suitable for use on the x +axis for trigonometric functions: + +```js +function piTickGenerator(axis) { + var res = [], i = Math.floor(axis.min / Math.PI); + do { + var v = i * Math.PI; + res.push([v, i + "\u03c0"]); + ++i; + } while (v < axis.max); + return res; +} +``` + +You can control how the ticks look like with "tickDecimals", the +number of decimals to display (default is auto-detected). + +Alternatively, for ultimate control over how ticks are formatted you can +provide a function to "tickFormatter". The function is passed three +parameters, the tick value, an axis object with information and the precision, +and should return a string. The default formatter looks like this: + +```js +function formatter(val, axis, precision) { + return val.toFixed(precision); +} +``` + +The axis object has "min" and "max" with the range of the axis, +"tickDecimals" with the number of decimals to round the value to and +"tickSize" with the size of the interval between ticks as calculated +by the automatic axis scaling algorithm (or specified by you). Here's +an example of a custom formatter: + +```js +function suffixFormatter(val, axis) { + if (val > 1000000) + return (val / 1000000).toFixed(axis.tickDecimals) + " MB"; + else if (val > 1000) + return (val / 1000).toFixed(axis.tickDecimals) + " kB"; + else + return val.toFixed(axis.tickDecimals) + " B"; +} +``` + +"showTickLabels" can be used to specify which ticks labels are visible: +"none", "endpoints", "major" or "all". The default is "major". + +"labelWidth" and "labelHeight" specifies a fixed size of the tick +labels in pixels. They're useful in case you need to align several +plots. "reserveSpace" means that even if an axis isn't shown, Flot +should reserve space for it - it is useful in combination with +labelWidth and labelHeight for aligning multi-axis charts. + +"gridLines", if true will draw lines on the grid corresponding to the major ticks +on the axis. If unspecified will default to true for the innermost axes and false +for the others. + +"showTicks" specifies whether to draw tick lines at all. Default true. + +"showMinorTicks" specifies whether to draw minor tick lines at all. Minor tick +lines are lines subdividing the interval between major tick lines in 5 intervals. +Default true. + +"tickLength" is the length of the tick lines in pixels. A value of null means +use the default, while a number means tick lines of that length - set it to 0 to +hide the lines completely. + +If you set "alignTicksWithAxis" to the number of another axis, e.g. +alignTicksWithAxis: 1, Flot will ensure that the autogenerated ticks +of this axis are aligned with the ticks of the other axis. This may +improve the looks, e.g. if you have one y axis to the left and one to +the right, because the grid lines will then match the ticks in both +ends. The trade-off is that the forced ticks won't necessarily be at +natural places. + +"offset" can be used to move the plot area, or to reserve plot space. + +"boxPosition" is used to reserve extra space needed in the corresponding axis +box as well as to specify where the axis should be placed inside the box. + +## Multiple axes ## + +If you need more than one x axis or y axis, you need to specify for +each data series which axis they are to use, as described under the +format of the data series, e.g. { data: [...], yaxis: 2 } specifies +that a series should be plotted against the second y axis. + +To actually configure that axis, you can't use the xaxis/yaxis options +directly - instead there are two arrays in the options: + +```js +xaxes: [] +yaxes: [] +``` + +Here's an example of configuring a single x axis and two y axes (we +can leave options of the first y axis empty as the defaults are fine): + +```js +{ + xaxes: [ { position: "top" } ], + yaxes: [ { }, { position: "right", min: 20 } ] +} +``` + +The arrays get their default values from the xaxis/yaxis settings, so +say you want to have all y axes start at zero, you can simply specify +yaxis: { min: 0 } instead of adding a min parameter to all the axes. + +Generally, the various interfaces in Flot dealing with data points +either accept an xaxis/yaxis parameter to specify which axis number to +use (starting from 1), or lets you specify the coordinate directly as +x2/x3/... or x2axis/x3axis/... instead of "x" or "xaxis". + + +## Time series data ## + +Please note that it is now required to include the time plugin, +jquery.flot.time.js, for time series support. + +Time series are a bit more difficult than scalar data because +calendars don't follow a simple base 10 system. For many cases, Flot +abstracts most of this away, but it can still be a bit difficult to +get the data into Flot. So we'll first discuss the data format. + +The time series support in Flot is based on Javascript timestamps, +i.e. everywhere a time value is expected or handed over, a Javascript +timestamp number is used. This is a number, not a Date object. A +Javascript timestamp is the number of milliseconds since January 1, +1970 00:00:00 UTC. This is almost the same as Unix timestamps, except it's +in milliseconds, so remember to multiply by 1000! + +You can see a timestamp like this + +```js +alert((new Date()).getTime()) +``` + +There are different schools of thought when it comes to display of +timestamps. Many will want the timestamps to be displayed according to +a certain time zone, usually the time zone in which the data has been +produced. Some want the localized experience, where the timestamps are +displayed according to the local time of the visitor. Flot supports +both. Optionally you can include a third-party library to get +additional timezone support. + +Default behavior is that Flot always displays timestamps according to +UTC. The reason being that the core Javascript Date object does not +support other fixed time zones. Often your data is at another time +zone, so it may take a little bit of tweaking to work around this +limitation. + +The easiest way to think about it is to pretend that the data +production time zone is UTC, even if it isn't. So if you have a +datapoint at 2002-02-20 08:00, you can generate a timestamp for eight +o'clock UTC even if it really happened eight o'clock UTC+0200. + +In PHP you can get an appropriate timestamp with: + +```php +strtotime("2002-02-20 UTC") * 1000 +``` + +In Python you can get it with something like: + +```python +calendar.timegm(datetime_object.timetuple()) * 1000 +``` +In Ruby you can get it using the `#to_i` method on the +[`Time`](http://apidock.com/ruby/Time/to_i) object. If you're using the +`active_support` gem (default for Ruby on Rails applications) `#to_i` is also +available on the `DateTime` and `ActiveSupport::TimeWithZone` objects. You +simply need to multiply the result by 1000: + +```ruby +Time.now.to_i * 1000 # => 1383582043000 +# ActiveSupport examples: +DateTime.now.to_i * 1000 # => 1383582043000 +ActiveSupport::TimeZone.new('Asia/Shanghai').now.to_i * 1000 +# => 1383582043000 +``` + +In .NET you can get it with something like: + +```aspx +public static int GetJavascriptTimestamp(System.DateTime input) +{ + System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks); + System.DateTime time = input.Subtract(span); + return (long)(time.Ticks / 10000); +} +``` + +Javascript also has some support for parsing date strings, so it is +possible to generate the timestamps manually client-side. + +If you've already got the real UTC timestamp, it's too late to use the +pretend trick described above. But you can fix up the timestamps by +adding the time zone offset, e.g. for UTC+0200 you would add 2 hours +to the UTC timestamp you got. Then it'll look right on the plot. Most +programming environments have some means of getting the timezone +offset for a specific date (note that you need to get the offset for +each individual timestamp to account for daylight savings). + +The alternative with core Javascript is to interpret the timestamps +according to the time zone that the visitor is in, which means that +the ticks will shift with the time zone and daylight savings of each +visitor. This behavior is enabled by setting the axis option +"timezone" to the value "browser". + +If you need more time zone functionality than this, there is still +another option. If you include the "timezone-js" library + in the page and set axis.timezone +to a value recognized by said library, Flot will use timezone-js to +interpret the timestamps according to that time zone. + +Once you've gotten the timestamps into the data and specified "time" +as the axis mode, Flot will automatically generate relevant ticks and +format them. As always, you can tweak the ticks via the "ticks" option +- just remember that the values should be timestamps (numbers), not +Date objects. + +Tick generation and formatting can also be controlled separately +through the following axis options: + +```js +minTickSize: array +timeformat: null or format string +monthNames: null or array of size 12 of strings +dayNames: null or array of size 7 of strings +twelveHourClock: boolean +``` + +Here "timeformat" is a format string to use. You might use it like +this: + +```js +xaxis: { + mode: "time", + timeformat: "%Y/%m/%d" +} +``` + +This will result in tick labels like "2000/12/24". A subset of the +standard strftime specifiers are supported (plus the nonstandard %q): + +```js +%a: weekday name (customizable) +%b: month name (customizable) +%d: day of month, zero-padded (01-31) +%e: day of month, space-padded ( 1-31) +%H: hours, 24-hour time, zero-padded (00-23) +%I: hours, 12-hour time, zero-padded (01-12) +%m: month, zero-padded (01-12) +%M: minutes, zero-padded (00-59) +%q: quarter (1-4) +%S: seconds, zero-padded (00-59) +%y: year (two digits) +%Y: year (four digits) +%p: am/pm +%P: AM/PM (uppercase version of %p) +%w: weekday as number (0-6, 0 being Sunday) +``` + +Flot 0.8 switched from %h to the standard %H hours specifier. The %h specifier +is still available, for backwards-compatibility, but is deprecated and +scheduled to be removed permanently with the release of version 1.0. + +You can customize the month names with the "monthNames" option. For +instance, for Danish you might specify: + +```js +monthNames: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"] +``` + +Similarly you can customize the weekday names with the "dayNames" +option. An example in French: + +```js +dayNames: ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"] +``` + +If you set "twelveHourClock" to true, the autogenerated timestamps +will use 12 hour AM/PM timestamps instead of 24 hour. This only +applies if you have not set "timeformat". Use the "%I" and "%p" or +"%P" options if you want to build your own format string with 12-hour +times. + +If the Date object has a strftime property (and it is a function), it +will be used instead of the built-in formatter. Thus you can include +a strftime library such as http://hacks.bluesmoon.info/strftime/ for +more powerful date/time formatting. + +If everything else fails, you can control the formatting by specifying +a custom tick formatter function as usual. Here's a simple example +which will format December 24 as 24/12: + +```js +tickFormatter: function (val, axis) { + var d = new Date(val); + return d.getUTCDate() + "/" + (d.getUTCMonth() + 1); +} +``` + +Note that for the time mode "tickSize" and "minTickSize" are a bit +special in that they are arrays on the form "[value, unit]" where unit +is one of "second", "minute", "hour", "day", "month" and "year". So +you can specify + +```js +minTickSize: [1, "month"] +``` + +to get a tick interval size of at least 1 month and correspondingly, +if axis.tickSize is [2, "day"] in the tick formatter, the ticks have +been produced with two days in-between. + + +## Customizing the data series ## + +```js +series: { + lines, points, bars: { + show: boolean + lineWidth: number + fill: boolean or number + fillColor: null or color/gradient + } + + lines, bars: { + zero: boolean + } + + points: { + radius: number + symbol: "circle" or function + } + + bars: { + barWidth: number or array + align: "left", "right" or "center" + horizontal: boolean + } + + lines: { + steps: boolean + } + + shadowSize: number + highlightColor: color or number +} + +colors: [ color1, color2, ... ] +``` + +The options inside "series: {}" are copied to each of the series. So +you can specify that all series should have bars by putting it in the +global options, or override it for individual series by specifying +bars in a particular the series object in the array of data. + +The most important options are "lines", "points" and "bars" that +specify whether and how lines, points and bars should be shown for +each data series. In case you don't specify anything at all, Flot will +default to showing lines (you can turn this off with +lines: { show: false }). You can specify the various types +independently of each other, and Flot will happily draw each of them +in turn (this is probably only useful for lines and points), e.g. + +```js +var options = { + series: { + lines: { show: true, fill: true, fillColor: "rgba(255, 255, 255, 0.8)" }, + points: { show: true, fill: false } + } +}; +``` + +"lineWidth" is the thickness of the line or outline in pixels. You can +set it to 0 to prevent a line or outline from being drawn; this will +also hide the shadow. + +"fill" is whether the shape should be filled. For lines, this produces +area graphs. You can use "fillColor" to specify the color of the fill. +If "fillColor" evaluates to false (default for everything except +points which are filled with white), the fill color is auto-set to the +color of the data series. You can adjust the opacity of the fill by +setting fill to a number between 0 (fully transparent) and 1 (fully +opaque). + +For bars, fillColor can be a gradient, see the gradient documentation +below. "barWidth" is the width of the bars relative to the minimum distance +between points. If the absolute flag is provided, the width +of the bar will be in units of the x axis (or the y axis if "horizontal" +is true),contrary to most other measures that are specified in pixels. +For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 +produces bars with the width of a day. "align" specifies whether a bar +should be left-aligned (default), right-aligned or centered on top of +the value it represents. When "horizontal" is on, the bars are drawn +horizontally, i.e. from the y axis instead of the x axis; note that the +bar end points are still defined in the same way so you'll probably want +to swap the coordinates if you've been plotting vertical bars first. + +Area and bar charts normally start from zero, regardless of the data's range. +This is because they convey information through size, and starting from a +different value would distort their meaning. In cases where the fill is purely +for decorative purposes, however, "zero" allows you to override this behavior. +It defaults to true for filled lines and bars; setting it to false tells the +series to use the same automatic scaling as an un-filled line. If you want the +area filled toward a different value (+Infinity and -Infinity are good examples) +you can use the "fillTowards" option. + +For lines, "steps" specifies whether two adjacent data points are +connected with a straight (possibly diagonal) line or with first a +horizontal and then a vertical line. Note that this transforms the +data by adding extra points. + +For points, you can specify the radius and the symbol. The only +built-in symbol type is circles, for other types you can use a plugin +or define them yourself by specifying a callback: + +```js +function cross(ctx, x, y, radius, shadow) { + var size = radius * Math.sqrt(Math.PI) / 2; + ctx.moveTo(x - size, y - size); + ctx.lineTo(x + size, y + size); + ctx.moveTo(x - size, y + size); + ctx.lineTo(x + size, y - size); +} +``` + +The parameters are the drawing context, x and y coordinates of the +center of the point, a radius which corresponds to what the circle +would have used and whether the call is to draw a shadow (due to +limited canvas support, shadows are currently faked through extra +draws). It's good practice to ensure that the area covered by the +symbol is the same as for the circle with the given radius, this +ensures that all symbols have approximately the same visual weight. + +"shadowSize" is the default size of shadows in pixels. Set it to 0 to +remove shadows. + +"highlightColor" is the default color of the translucent overlay used +to highlight the series when the mouse hovers over it. + +The "colors" array specifies a default color theme to get colors for +the data series from. You can specify as many colors as you like, like +this: + +```js +colors: ["#d18b2c", "#dba255", "#919733"] +``` + +If there are more data series than colors, Flot will try to generate +extra colors by lightening and darkening colors in the theme. + + +## Customizing the grid ## + +```js +grid: { + show: boolean + aboveData: boolean + color: color + backgroundColor: color/gradient or null + margin: number or margin object + labelMargin: number + axisMargin: number + markings: array of markings or (fn: axes -> array of markings) + borderWidth: number or object with "top", "right", "bottom" and "left" properties with different widths + borderColor: color or null or object with "top", "right", "bottom" and "left" properties with different colors + minBorderMargin: number or null + clickable: boolean + hoverable: boolean + autoHighlight: boolean + mouseActiveRadius: number +} + +interaction: { + redrawOverlayInterval: number or -1 +} +``` + +The grid is the thing with the axes and a number of ticks. Many of the +things in the grid are configured under the individual axes, but not +all. "color" is the color of the grid itself whereas "backgroundColor" +specifies the background color inside the grid area, here null means +that the background is transparent. You can also set a gradient, see +the gradient documentation below. + +You can turn off the whole grid including tick labels by setting +"show" to false. "aboveData" determines whether the grid is drawn +above the data or below (below is default). + +"margin" is the space in pixels between the canvas edge and the grid, +which can be either a number or an object with individual margins for +each side, in the form: + +```js +margin: { + top: top margin in pixels + left: left margin in pixels + bottom: bottom margin in pixels + right: right margin in pixels +} +``` + +"labelMargin" is the space in pixels between tick labels and axis +line, and "axisMargin" is the space in pixels between axes when there +are two next to each other. + +"borderWidth" is the width of the border around the plot. Set it to 0 +to disable the border. Set it to an object with "top", "right", +"bottom" and "left" properties to use different widths. You can +also set "borderColor" if you want the border to have a different color +than the grid lines. Set it to an object with "top", "right", "bottom" +and "left" properties to use different colors. "minBorderMargin" controls +the default minimum margin around the border - it's used to make sure +that points aren't accidentally clipped by the canvas edge so by default +the value is computed from the point radius. + +"markings" is used to draw simple lines and rectangular areas in the +background of the plot. You can either specify an array of ranges on +the form { xaxis: { from, to }, yaxis: { from, to } } (with multiple +axes, you can specify coordinates for other axes instead, e.g. as +x2axis/x3axis/...) or with a function that returns such an array given +the axes for the plot in an object as the first parameter. + +You can set the color of markings by specifying "color" in the ranges +object. Here's an example array: + +```js +markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ] +``` + +If you leave out one of the values, that value is assumed to go to the +border of the plot. So for example if you only specify { xaxis: { +from: 0, to: 2 } } it means an area that extends from the top to the +bottom of the plot in the x range 0-2. + +A line is drawn if from and to are the same, e.g. + +```js +markings: [ { yaxis: { from: 1, to: 1 } }, ... ] +``` + +would draw a line parallel to the x axis at y = 1. You can control the +line width with "lineWidth" in the range object. + +An example function that makes vertical stripes might look like this: + +```js +markings: function (axes) { + var markings = []; + for (var x = Math.floor(axes.xaxis.min); x < axes.xaxis.max; x += 2) + markings.push({ xaxis: { from: x, to: x + 1 } }); + return markings; +} +``` + +If you set "clickable" to true, the plot will listen for click events +on the plot area and fire a "plotclick" event on the placeholder with +a position and a nearby data item object as parameters. The coordinates +are available both in the unit of the axes (not in pixels) and in +global screen coordinates. + +Likewise, if you set "hoverable" to true, the plot will listen for +mouse move events on the plot area and fire a "plothover" event with +the same parameters as the "plotclick" event. If "autoHighlight" is +true (the default), nearby data items are highlighted automatically. +If needed, you can disable highlighting and control it yourself with +the highlight/unhighlight plot methods described elsewhere. + +In case hoverable is set to true, plothovercleanup event will be triggered +on or pinc interaction or if setData() function is called. + +You can use "plotclick" and "plothover" events like this: + +```js +$.plot($("#placeholder"), [ d ], { grid: { clickable: true } }); + +$("#placeholder").bind("plotclick", function (event, pos, item) { + alert("You clicked at " + pos.x + ", " + pos.y); + // axis coordinates for other axes, if present, are in pos.x2, pos.x3, ... + // if you need global screen coordinates, they are pos.pageX, pos.pageY + + if (item) { + highlight(item.series, item.datapoint); + alert("You clicked a point!"); + } +}); +``` + +The item object in this example is either null or a nearby object on the form: + +```js +item: { + datapoint: the point, e.g. [0, 2] + dataIndex: the index of the point in the data array + series: the series object + seriesIndex: the index of the series + pageX, pageY: the global screen coordinates of the point +} +``` + +For instance, if you have specified the data like this + +```js +$.plot($("#placeholder"), [ { label: "Foo", data: [[0, 10], [7, 3]] } ], ...); +``` + +and the mouse is near the point (7, 3), "datapoint" is [7, 3], +"dataIndex" will be 1, "series" is a normalized series object with +among other things the "Foo" label in series.label and the color in +series.color, and "seriesIndex" is 0. Note that plugins and options +that transform the data can shift the indexes from what you specified +in the original data array. + +If you use the above events to update some other information and want +to clear out that info in case the mouse goes away, you'll probably +also need to listen to "mouseout" events on the placeholder div. + +"mouseActiveRadius" specifies how far the mouse can be from an item +and still activate it. If there are two or more points within this +radius, Flot chooses the closest item. For bars, the top-most bar +(from the latest specified data series) is chosen. + +If you want to disable interactivity for a specific data series, you +can set "hoverable" and "clickable" to false in the options for that +series, like this: + +```js +{ data: [...], label: "Foo", clickable: false } +``` + +"redrawOverlayInterval" specifies the maximum time to delay a redraw +of interactive things (this works as a rate limiting device). The +default is capped to 60 frames per second. You can set it to -1 to +disable the rate limiting. + + +## Specifying gradients ## + +A gradient is specified like this: + +```js +{ colors: [ color1, color2, ... ] } +``` + +For instance, you might specify a background on the grid going from +black to gray like this: + +```js +grid: { + backgroundColor: { colors: ["#000", "#999"] } +} +``` + +For the series you can specify the gradient as an object that +specifies the scaling of the brightness and the opacity of the series +color, e.g. + +```js +{ colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] } +``` + +where the first color simply has its alpha scaled, whereas the second +is also darkened. For instance, for bars the following makes the bars +gradually disappear, without outline: + +```js +bars: { + show: true, + lineWidth: 0, + fill: true, + fillColor: { colors: [ { opacity: 0.8 }, { opacity: 0.1 } ] } +} +``` + +Flot currently only supports vertical gradients drawn from top to +bottom because that's what works with IE. + + +## Plot Methods ## + +The Plot object returned from the plot function has some methods you +can call: + + - highlight(series, datapoint) + + Highlight a specific datapoint in the data series. You can either + specify the actual objects, e.g. if you got them from a + "plotclick" event, or you can specify the indices, e.g. + highlight(1, 3) to highlight the fourth point in the second series + (remember, zero-based indexing). + + - unhighlight(series, datapoint) or unhighlight() + + Remove the highlighting of the point, same parameters as + highlight. + + If you call unhighlight with no parameters, e.g. as + plot.unhighlight(), all current highlights are removed. + + - setData(data) + + You can use this to reset the data used. Note that axis scaling, + ticks, legend etc. will not be recomputed (use setupGrid() to do + that). You'll probably want to call draw() afterwards. + + You can use this function to speed up redrawing a small plot if + you know that the axes won't change. Put in the new data with + setData(newdata), call draw(), and you're good to go. Note that + for large datasets, almost all the time is consumed in draw() + plotting the data so in this case don't bother. + + - setupGrid(autoScale) + + Recalculate and set axis scaling, ticks, legend etc. + + Note that because of the drawing model of the canvas, this + function will immediately redraw (actually reinsert in the DOM) + the labels and the legend, but not the actual tick lines because + they're drawn on the canvas. You need to call draw() to get the + canvas redrawn. + + If autoScale is truthy then the axis will be autoscaled to the data + according to the axis.autoScale options + + - draw() + + Redraws the plot canvas. + + - triggerRedrawOverlay() + + Schedules an update of an overlay canvas used for drawing + interactive things like a selection and point highlights. This + is mostly useful for writing plugins. The redraw doesn't happen + immediately, instead a timer is set to catch multiple successive + redraws (e.g. from a mousemove). You can get to the overlay by + setting up a drawOverlay hook. + This function will also trigger the dispatching of the + 'onDrawingDone' custom event, which can be used to notify listeners + (drawOverlay hooks) about the finishing of a drawing operation. + Use addEventListener('onDrawingDone', callback) and + removeEventListener('onDrawingDone', callback), to register and unregister + handlers for 'onDrawingDone' event. + + - width()/height() + + Gets the width and height of the plotting area inside the grid. + This is smaller than the canvas or placeholder dimensions as some + extra space is needed (e.g. for labels). + + - offset() + + Returns the offset of the plotting area inside the grid relative + to the document, useful for instance for calculating mouse + positions (event.pageX/Y minus this offset is the pixel position + inside the plot). + + - pointOffset({ x: xpos, y: ypos }) + + Returns the calculated offset of the data point at (x, y) in data + space within the placeholder div. If you are working with multiple + axes, you can specify the x and y axis references, e.g. + + ```js + o = pointOffset({ x: xpos, y: ypos, xaxis: 2, yaxis: 3 }) + // o.left and o.top now contains the offset within the div + ``` + + - resize() + + Tells Flot to resize the drawing canvas to the size of the + placeholder. You need to run setupGrid() and draw() afterwards as + canvas resizing is a destructive operation. This is used + internally by the resize plugin. + + - shutdown() + + Cleans up any event handlers Flot has currently registered. This + is used internally. + + - findNearbyItem(mouseX, mouseY, seriesFilter, radius, computeDistance) + + Returns the closest item to the position determined by mouseX and + mouseY. The series on which the search is realized can be specified + using seriesFilter function. + The search area will be a circle if the function is called without the + last parameter, otherwise the distance will be computed based on given + function. + + - findNearbyInterpolationPoint(posX, posY, seriesFilter) + + Returns the interpolation on Y axis between the nearest points determined by + posX and posY. The series on which the search is realized can be specified + using seriesFilter function. + + - computeValuePrecision(min, max, direction, ticks, tickDecimals) + + Used for determining the the precision for a certain axis. + If the tickDecimals is specified, the maximum precision + would be at most tickDecimals. Otherwise, it would be computed + based on the axis minimum and maximum and the number of ticks. + + - computeTickSize (min, max, noTicks, tickDecimals) + + Returns the size used for axis ticks. This is used internally. + + +There are also some members that let you peek inside the internal +workings of Flot which is useful in some cases. Note that if you change +something in the objects returned, you're changing the objects used by +Flot to keep track of its state, so be careful. + + - getData() + + Returns an array of the data series currently used in normalized + form with missing settings filled in according to the global + options. So for instance to find out what color Flot has assigned + to the data series, you could do this: + + ```js + var series = plot.getData(); + for (var i = 0; i < series.length; ++i) + alert(series[i].color); + ``` + + A notable other interesting field besides color is datapoints + which has a field "points" with the normalized data points in a + flat array (the field "pointsize" is the increment in the flat + array to get to the next point so for a dataset consisting only of + (x,y) pairs it would be 2). + + - getAxes() + + Gets an object with the axes. The axes are returned as the + attributes of the object, so for instance getAxes().xaxis is the + x axis. + + Various things are stuffed inside an axis object, e.g. you could + use getAxes().xaxis.ticks to find out what the ticks are for the + xaxis. Two other useful attributes are p2c and c2p, functions for + transforming from data point space to the canvas plot space and + back. Both returns values that are offset with the plot offset. + Check the Flot source code for the complete set of attributes (or + output an axis with console.log() and inspect it). + + With multiple axes, the extra axes are returned as x2axis, x3axis, + etc., e.g. getAxes().y2axis is the second y axis. You can check + y2axis.used to see whether the axis is associated with any data + points and y2axis.show to see if it is currently shown. + + - getPlaceholder() + + Returns placeholder that the plot was put into. This can be useful + for plugins for adding DOM elements or firing events. + + - getCanvas() + + Returns the canvas used for drawing in case you need to hack on it + yourself. You'll probably need to get the plot offset too. + + - getSurface() + + Returns a wrapper over a canvas element that offers additional support + for measuring and writing text. See the CanvasWrapper plugin. + + - getEventHolder() + + Returns the event holder element. + + - getPlotOffset() + + Gets the offset that the grid has within the canvas as an object + with distances from the canvas edges as "left", "right", "top", + "bottom". I.e., if you draw a circle on the canvas with the center + placed at (left, top), its center will be at the top-most, left + corner of the grid. + + - getOptions() + + Gets the options for the plot, normalized, with default values + filled in. You get a reference to actual values used by Flot, so + if you modify the values in here, Flot will use the new values. + If you change something, you probably have to call draw() or + setupGrid() or triggerRedrawOverlay() to see the change. + + - computeRangeForDataSeries(series, force) + + Computes the minimum and the maximum values of the specified series. + If the autoScale of the x axis is set to 'none' then the corresponding + minimum and maximum will be Infinity and -Infinity respectively. + The computation will be skiped for the y axis as well when autoScale + of this axis is set to 'none'. Pass true to the force argument + to force the computation regardless the autoScale value of the axis. + + - adjustSeriesDataRange(series, range) + + Adjusts the minimum and the maximum values based on the options of + the series. For example if bars are being drawn then this function + will decrease the minimum and increase the maximum to make sure the + first and the last bar will have enough space. + + +## Utils ## +There are some features, which may not fall explicitly into plugins category. + + - composeImages(sources, destinationCanvas) + +ComposeImages allows you pass to it several canvases and SVGs as part of the +plots themselves, and overlaps them to create a downloadable image. +*composeImages* is a function, which takes as input an array of canvases +and SVGs, and outputs a canvas which contains the overlapped inputs, in the same +order they exist in the array. The output canvas can be externally converted to +a downloadable image. Some browser even support downloading canvases. + +How to use *composeImages* function: +```js +function composeImagesOnClick() { + var sources = [myCanvas, mySvg, myOtherCanvas, myOtherSvg], + destinationCanvas = document.getElementById('destinationCanvas'), + destinationImage = document.getElementById('destinationImage'); + $.plot.composeImages(sources, destinationCanvas) + .then(function() { + destinationImage.width = destinationCanvas.width; + destinationImage.height = destinationCanvas.height; + destinationImage.src = destinationCanvas.toDataURL('image/png'); + }); +} +``` + + - getPageXY(e) + +This function calculates the pageX and pageY which are not valid +while running the tests with Edge and creating events using the +recommended WheelEvent or MouseEvent constructors. + +```js +var page = $.plot.browser.getPageXY(e); +console.log(page.X === e.pageX); // true unless the event was constructed in Edge +console.log(page.Y === e.pageY); // true unless the event was constructed in Edge +``` + + - getPixelRatio(context) + +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. + +```js +var pixelRatio = $.plot.browser.getPixelRatio(canvas.getContext('2d')); +``` + + - isSafari() + - isMobileSafari() + +```js +console.log($.plot.browser.isSafari()); // true when running on Safari +console.log($.plot.browser.isMobileSafari()); // true when running on Mobile Safari +``` + +## Hooks ## + +In addition to the public methods, the Plot object also has some hooks +that can be used to modify the plotting process. You can install a +callback function at various points in the process, the function then +gets access to the internal data structures in Flot. + +Here's an overview of the phases Flot goes through: + + 1. Plugin initialization, parsing options + + 2. Constructing the canvases used for drawing + + 3. Set data: parsing data specification, calculating colors, + copying raw data points into internal format, + normalizing them, finding max/min for axis auto-scaling + + 4. Grid setup: calculating axis spacing, ticks, inserting tick + labels, the legend + + 5. Draw: drawing the grid, drawing each of the series in turn + + 6. Setting up event handling for interactive features + + 7. Responding to events, if any + + 8. Shutdown: this mostly happens in case a plot is overwritten + +Each hook is simply a function which is put in the appropriate array. +You can add them through the "hooks" option, and they are also available +after the plot is constructed as the "hooks" attribute on the returned +plot object, e.g. + +```js + // define a simple draw hook + function hellohook(plot, canvascontext) { alert("hello!"); }; + + // pass it in, in an array since we might want to specify several + var plot = $.plot(placeholder, data, { hooks: { draw: [hellohook] } }); + + // we can now find it again in plot.hooks.draw[0] unless a plugin + // has added other hooks +``` + +The available hooks are described below. All hook callbacks get the +plot object as first parameter. You can find some examples of defined +hooks in the plugins bundled with Flot. + + - processOptions [phase 1] + + ```function(plot, options)``` + + Called after Flot has parsed and merged options. Useful in the + instance where customizations beyond simple merging of default + values is needed. A plugin might use it to detect that it has been + enabled and then turn on or off other options. + + + - processRawData [phase 3] + + ```function(plot, series, data, datapoints)``` + + Called before Flot copies and normalizes the raw data for the given + series. If the function fills in datapoints.points with normalized + points and sets datapoints.pointsize to the size of the points, + Flot will skip the copying/normalization step for this series. + + In any case, you might be interested in setting datapoints.format, + an array of objects for specifying how a point is normalized and + how it interferes with axis scaling. It accepts the following options: + + ```js + { + x, y: boolean, + number: boolean, + required: boolean, + defaultValue: value, + autoScale: boolean + } + ``` + + "x" and "y" specify whether the value is plotted against the x or y axis, + and is currently used only to calculate axis min-max ranges. The default + format array, for example, looks like this: + + ```js + [ + { x: true, number: true, required: true }, + { y: true, number: true, required: true } + ] + ``` + + This indicates that a point, i.e. [0, 25], consists of two values, with the + first being plotted on the x axis and the second on the y axis. + + If "number" is true, then the value must be numeric, and is set to null if + it cannot be converted to a number. + + "defaultValue" provides a fallback in case the original value is null. This + is for instance handy for bars, where one can omit the third coordinate + (the bottom of the bar), which then defaults to zero. + + If "required" is true, then the value must exist (be non-null) for the + point as a whole to be valid. If no value is provided, then the entire + point is cleared out with nulls, turning it into a gap in the series. + + "autoScale" determines whether the value is considered when calculating an + automatic min-max range for the axes that the value is plotted against. + + - processDatapoints [phase 3] + + ```function(plot, series, datapoints)``` + + Called after normalization of the given series but before finding + min/max of the data points. This hook is useful for implementing data + transformations. "datapoints" contains the normalized data points in + a flat array as datapoints.points with the size of a single point + given in datapoints.pointsize. Here's a simple transform that + multiplies all y coordinates by 2: + + ```js + function multiply(plot, series, datapoints) { + var points = datapoints.points, ps = datapoints.pointsize; + for (var i = 0; i < points.length; i += ps) + points[i + 1] *= 2; + } + ``` + + Note that you must leave datapoints in a good condition as Flot + doesn't check it or do any normalization on it afterwards. + + - processOffset [phase 4] + + ```function(plot, offset)``` + + Called after Flot has initialized the plot's offset, but before it + draws any axes or plot elements. This hook is useful for customizing + the margins between the grid and the edge of the canvas. "offset" is + an object with attributes "top", "bottom", "left" and "right", + corresponding to the margins on the four sides of the plot. + + - adjustSeriesDataRange [phase 4] + + ```function(series, range)``` + + Called after the minimum and the maximum of a series were computed and + adjusted. This is an extra opportunity to do further adjustments. + + - setRange [phase 4] + + ```function(plot, axis)``` + + Called before computing the range for axis. This can be used for adjusting + the axis minimum or maximum. + + + - drawBackground [phase 5] + + ```function(plot, canvascontext)``` + + Called before all other drawing operations. Used to draw backgrounds + or other custom elements before the plot or axes have been drawn. + + - drawSeries [phase 5] + + ```function(plot, canvascontext, serie, i, getColorOrGradient)``` + + Hook for custom drawing of a single series. Called just before the + standard drawing routine has been called in the loop that draws + each series. + + - draw [phase 5] + + ```function(plot, canvascontext)``` + + Hook for drawing on the canvas. Called after the grid is drawn + (unless it's disabled or grid.aboveData is set) and the series have + been plotted (in case any points, lines or bars have been turned + on). For examples of how to draw things, look at the source code. + + - bindEvents [phase 6] + + ```function(plot, eventHolder)``` + + Called after Flot has setup its event handlers. Should set any + necessary event handlers on eventHolder, a jQuery object with the + canvas, e.g. + + ```js + function (plot, eventHolder) { + eventHolder.mousedown(function (e) { + alert("You pressed the mouse at " + e.pageX + " " + e.pageY); + }); + } + ``` + + Interesting events include click, mousemove, mouseup/down. You can + use all jQuery events. Usually, the event handlers will update the + state by drawing something (add a drawOverlay hook and call + triggerRedrawOverlay) or firing an externally visible event for + user code. See the crosshair plugin for an example. + + Currently, eventHolder actually contains both the static canvas + used for the plot itself and the overlay canvas used for + interactive features because some versions of IE get the stacking + order wrong. The hook only gets one event, though (either for the + overlay or for the static canvas). + + Note that custom plot events generated by Flot are not generated on + eventHolder, but on the div placeholder supplied as the first + argument to the plot call. You can get that with + plot.getPlaceholder() - that's probably also the one you should use + if you need to fire a custom event. + + - drawOverlay [phase 7] + + ```function (plot, canvascontext)``` + + The drawOverlay hook is used for interactive things that need a + canvas to draw on. The model currently used by Flot works the way + that an extra overlay canvas is positioned on top of the static + canvas. This overlay is cleared and then completely redrawn + whenever something interesting happens. This hook is called when + the overlay canvas is to be redrawn. + + "canvascontext" is the 2D context of the overlay canvas. You can + use this to draw things. You'll most likely need some of the + metrics computed by Flot, e.g. plot.width()/plot.height(). See the + crosshair plugin for an example. + + This hook dispatches the 'onDrawingDone' custom event. + It notifies listeners about the finishing of a drawing operation. + Use addEventListener('onDrawingDone', callback) and + removeEventListener('onDrawingDone', callback), to register and unregister + handlers for 'onDrawingDone' event. + + - resize [phase 7] + + ```function (plot, width, height)``` + + The resize hook is used to be notified after the plot was resized. + + - shutdown [phase 8] + + ```function (plot, eventHolder)``` + + Run when plot.shutdown() is called, which usually only happens in + case a plot is overwritten by a new plot. If you're writing a + plugin that adds extra DOM elements or event handlers, you should + add a callback to clean up after you. Take a look at the section in + the [PLUGINS](PLUGINS.md) document for more info. + + +## Plugins ## + +Plugins extend the functionality of Flot. To use a plugin, simply +include its Javascript file after Flot in the HTML page. + +If you're worried about download size/latency, you can concatenate all +the plugins you use, and Flot itself for that matter, into one big file +(make sure you get the order right), then optionally run it through a +Javascript minifier such as YUI Compressor. + +Here's a brief explanation of how the plugin plumbings work: + +Each plugin registers itself in the global array $.plot.plugins. When +you make a new plot object with $.plot, Flot goes through this array +calling the "init" function of each plugin and merging default options +from the "option" attribute of the plugin. The init function gets a +reference to the plot object created and uses this to register hooks +and add new public methods if needed. + +See the [PLUGINS](PLUGINS.md) document for details on how to write a plugin. As the +above description hints, it's actually pretty easy. + +Some of the flot plugins add new functionalities (like touch support), while other are parts spliced out of the main jquery.flot.js and grouped based on commune functionalities. +Read the documentation of some of the most used plugins of flot: +* [jquery.flot.absRelTime.js](absRelTime.md) +* [jquery.flot.browser.js](browser.md) +* [jquery.canvaswrapper.js](canvaswrapper.md) +* [jquery.flot.composeImages.js](composeImages.md) +* [jquery.flot.drawSeries.js](drawSeries.md) +* [jquery.flot.hover.js](hover.md) +* [jquery.flot.logaxis.js](logaxis.md) +* [jquery.flot.navigate.js](navigate.md) + + +## Version number ## + +The version number of Flot is available in ```$.plot.version```. diff --git a/PLUGINS.md b/docs/PLUGINS.md similarity index 100% rename from PLUGINS.md rename to docs/PLUGINS.md diff --git a/docs/absRelTime.md b/docs/absRelTime.md new file mode 100644 index 000000000..aa064037c --- /dev/null +++ b/docs/absRelTime.md @@ -0,0 +1,42 @@ +## jquery.flot.absRelTime.js + +This plugin is used to format the time axis in absolute time representation as +well as relative time representation. + +It supports the following options: +```js +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 +} +``` + +Depending upon the timeformat axis parameter value, the axis tick formatter will +choose between an absolute time representation if the value is '%A' or +relative time for timeformat '%r'. + +If the format for an axis is 'time', inside processOptions hook the tickGenerator +and tickFormatter of the axis will be overrided with the custom ones used by time axes. + +The formatted values look like in the example bellow: + +|format|value(s)|formatted value(s)| +|------|----:|--------------:| +|Absolute time|0|12:00:00 AM 1/1/0001| +|Absolute time|300|12:05:00 AM 1/1/0001| +|Relative Time|0, 300, 600|00:00:00, 00:05:00, 00:10:00| +|Relative Time|300, 600, 900|00:00:00, 00:05:00, 00:10:00| + +### Relative time axis +A relative time axis will show the time values with respect to the first data sample. +Basically, the first datapoint from the points array will be considered time 00:00:00:00. +If the difference between two datapoints is small, the milliseconds will apear. +Otherwise, the time representation will contain only the hour, minute and second. + +### Absolute time axis +The absolute time representation contains, beside the hours, minutes and seconds +corresponding to the sample the date and year. +The value will be splitted on two rows, where the first row is the time and +the the second one the date in gregorian date format. diff --git a/docs/browser.md b/docs/browser.md new file mode 100644 index 000000000..a476d9475 --- /dev/null +++ b/docs/browser.md @@ -0,0 +1,24 @@ +## jquery.flot.browser.js + +This plugin is used to make available some browser-related utility functions. + +### Methods + + +- getPageXY(e) + + Calculates the pageX and pageY using the screenX, screenY properties of the event + and the scrolling of the page. This is needed because the pageX and pageY + properties of the event are not correct while running tests in Edge. + +- getPixelRatio(context) + + This function returns the current pixel ratio defined by the product of desktop + zoom and page zoom. + Additional info: https://www.html5rocks.com/en/tutorials/canvas/hidpi/ + + +- isSafari, isMobileSafari, isOpera, isFirefox, isIE, isEdge, isChrome, isBlink + + This is a collection of functions, used to check if the code is running in a + particular browser or Javascript engine. diff --git a/docs/canvaswrapper.md b/docs/canvaswrapper.md new file mode 100644 index 000000000..308068338 --- /dev/null +++ b/docs/canvaswrapper.md @@ -0,0 +1,116 @@ +## jquery.flot.canvaswrapper + +This plugin contains the function for creating and manipulating both the canvas +layers and svg layers. + +The Canvas object is a wrapper around an HTML5 canvas tag. +The constructor Canvas(cls, container) takes as parameters cls, +the list of classes to apply to the canvas adnd the containter, +element onto which to append the canvas. The canvas operations +don't work unless the canvas is attached to the DOM. + +### jquery.canvaswrapper.js API functions + + +- resize(width, height) + + Resizes the canvas to the given dimensions. + The width represents the new width of the canvas, meanwhile the height + is the new height of the canvas, both of them in pixels. + + +- clear() + + Clears the entire canvas area, not including any overlaid HTML text + + +- render() + + Finishes rendering the canvas, including managing the text overlay. + + +- getSVGLayer(classes) + + Creates (if necessary) and returns the SVG overlay container. + The classes string represents the string of space-separated CSS classes + used to uniquely identify the text layer. It return the svg-layer div. + + +- getTextInfo(layer, text, font, angle, width) + + Creates (if necessary) and returns a text info object. + The object looks like this: + ```js + { + width //Width of the text's wrapper div. + height //Height of the text's wrapper div. + element //The HTML div containing the text. + positions //Array of positions at which this text is drawn. + } + ``` + The positions array contains objects that look like this: + ```js + { + active //Flag indicating whether the text should be visible. + rendered //Flag indicating whether the text is currently visible. + element //The HTML div containing the text. + text //The actual text and is identical with element[0].textContent. + x //X coordinate at which to draw the text. + y //Y coordinate at which to draw the text. + } + ``` + Each position after the first receives a clone of the original element. + The idea is that that the width, height, and general 'identity' of the + text is constant no matter where it is placed; the placements are a + secondary property. + + Canvas maintains a cache of recently-used text info objects; getTextInfo + either returns the cached element or creates a new entry. + + The layer parameter is string of space-separated CSS classes uniquely + identifying the layer containing this text. + Text is the text string to retrieve info for. + Font is either a string of space-separated CSS classes or a font-spec object, + defining the text's font and style. + Angle is the angle at which to rotate the text, in degrees. Angle is currently unused, + it will be implemented in the future. + The last parameter is the Maximum width of the text before it wraps. + The method returns a text info object. + + +- addText (layer, x, y, text, font, angle, width, halign, valign, transforms) + + Adds a text string to the canvas text overlay. + The text isn't drawn immediately; it is marked as rendering, which will + result in its addition to the canvas on the next render pass. + + The layer is string of space-separated CSS classes uniquely + identifying the layer containing this text. + X and Y represents the X and Y coordinate at which to draw the text. + and text is the string to draw + + +- removeText (layer, x, y, text, font, angle) + + The function removes one or more text strings from the canvas text overlay. + If no parameters are given, all text within the layer is removed. + + Note that the text is not immediately removed; it is simply marked as + inactive, which will result in its removal on the next render pass. + This avoids the performance penalty for 'clear and redraw' behavior, + where we potentially get rid of all text on a layer, but will likely + add back most or all of it later, as when redrawing axes, for example. + + The layer is a string of space-separated CSS classes uniquely + identifying the layer containing this text. The following parameter are + X and Y coordinate of the text. + Text is the string to remove, while the font is either a string of space-separated CSS + classes or a font-spec object, defining the text's font and style. + + +- clearCache() + + Clears the cache used to speed up the text size measurements. + As an (unfortunate) side effect all text within the text Layer is removed. + Use this function before plot.setupGrid() and plot.draw() if the plot just + became visible or the styles changed. diff --git a/docs/composeImages.md b/docs/composeImages.md new file mode 100644 index 000000000..504b1602a --- /dev/null +++ b/docs/composeImages.md @@ -0,0 +1,32 @@ +## jquery.flot.composeImages.js + +This plugin is used to expose a function used to overlap several canvases and +SVGs, for the purpose of creating a snaphot out of them. + +### When composeImages is used: +When multiple canvases and SVGs have to be overlapped into a single image +and their offset on the page, must be preserved. + +### Where can be used: +In creating a downloadable snapshot of the plots, axes, cursors etc of a graph. + +### How it works: +The entry point is composeImages function. It expects an array of objects, +which should be either canvases or SVGs (or a mix). It does a prevalidation +of them, by verifying if they will be usable or not, later in the flow. +After selecting only usable sources, it passes them to getGenerateTempImg +function, which generates temporary images out of them. This function +expects that some of the passed sources (canvas or SVG) may still have +problems being converted to an image and makes sure the promises system, +used by composeImages function, moves forward. As an example, SVGs with +missing information from header or with unsupported content, may lead to +failure in generating the temporary image. Temporary images are required +mostly on extracting content from SVGs, but this is also where the x/y +offsets are extracted for each image which will be added. For SVGs in +particular, their CSS rules have to be applied. +After all temporary images are generated, they are overlapped using +getExecuteImgComposition function. This is where the destination canvas +is set to the proper dimensions. It is then output by composeImages. +This function returns a promise, which can be used to wait for the whole +composition process. It requires to be asynchronous, because this is how +temporary images load their data. diff --git a/docs/drawSeries.md b/docs/drawSeries.md new file mode 100644 index 000000000..6b76c6348 --- /dev/null +++ b/docs/drawSeries.md @@ -0,0 +1,35 @@ +## jquery.flot.drawSeries.js + +This plugin is used by flot for drawing lines, plots, bars or area. + +### Public methods + + +- drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) + + This function is used for drawing lines or area fill. In case the series has line decimation function + attached, before starting to draw, as an optimization the points will first be decimated. + + The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and + plotHeight are the corresponding parameters of flot used to determine the drawing surface. + The function getColorOrGradient is used to compute the fill style of lines and area. + + +- drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) + + This function is used for drawing points using a given symbol. In case the series has points decimation + function attached, before starting to draw, as an optimization the points will first be decimated. + + The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and + plotHeight are the corresponding parameters of flot used to determine the drawing surface. + The function drawSymbol is used to compute and draw the symbol chosen for the points. + + +- drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) + + This function is used for drawing series represented as bars. In case the series has decimation + function attached, before starting to draw, as an optimization the points will first be decimated. + + The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and + plotHeight are the corresponding parameters of flot used to determine the drawing surface. + The function getColorOrGradient is used to compute the fill style of bars. diff --git a/docs/hover.md b/docs/hover.md new file mode 100644 index 000000000..e18eb5be1 --- /dev/null +++ b/docs/hover.md @@ -0,0 +1,21 @@ +## jquery.flot.hover.js + +This plugin is used for mouse hover and tap on a point of plot series. +It supports the following options: +```js +grid: { + hoverable: false, //to trigger plothover event on mouse hover or tap on a point + clickable: false //to trigger plotclick event on mouse hover +} +``` + +It listens to native mouse move event or click, as well as artificial generated +tap and touchevent. + +When the mouse is over a point or a tap on a point is performed, that point or +the correscponding bar will be highlighted and a "plothover" event will be generated. + +Custom "touchevent" is triggered when any touch interaction is made. Hover plugin +handles this events by unhighlighting all of the previously highlighted points and generates +"plothovercleanup" event to notify any part that is handling plothover (for exemple to cleanup +the tooltip from webcharts). diff --git a/docs/interactions.md b/docs/interactions.md new file mode 100644 index 000000000..71014f8f0 --- /dev/null +++ b/docs/interactions.md @@ -0,0 +1,57 @@ +# Interaction + +Flot offers support for both mouse and touch interactions by using [navigate](navigate.md), [touch](../jquery.flot.touch.js) +and [touchNavigate](../jquery.flot.touchNavigate.js) plugins. + + +## navigate plugin +This plugin is adding ```zoom```, ```pan```, ```smartPan```, ```recenter``` and ```activate``` capabilities to flot. + +It is listening for the following events: +* ```click``` +* ```dblclick``` +* ```dragstart``` +* ```drag``` +* ```dragend``` +* ```mousewheel``` + +For pan, ```dragstart```, ```drag``` and ```dragend``` events are used which are triggered by the deprecated version 1.6 of ```jquery.event.drag.js```. +To perform a zoom operation, the mouse wheel can be used which is done by using ```mousewheel``` event generated by ```jquery.mousewheel.js``` version 3.0.6. These files are included inside lib folder and should be replaced by the npm latest releases of those packages. + +The touch interactions are using only a part of the functionalities: +* ```zoom``` +* ```pan``` +* ```recenter``` +* ```activate``` + +Any of the functions can be used by the mouse, touch or any other event handler. + +## touch plugin +This plugin is responsible only for transforming the low level ```touchstart```, ```touchmove``` and ```touchend``` events into higher level events like: +* ```panstart``` +* ```pandrag``` +* ```panend``` +* ```pinchstart``` +* ```pinchdrag``` +* ```pinchend``` +* ```doubletap``` +* ```longtap``` +* ```tap``` + +This plugin is using the ```bindEvents``` hook of flot to add the event listenters for the low level events and, after interpreting them, will dispach the higher level events to the same event holder. + +It's up to the other plugins to listen for these events and take any actions if necessary. Also they have the possibility to stop the propagation to prevent other plugins for handling the same event. +For example, the pan events are normally handled by the ```touchNavigate``` plugin, but in some cases the user might want to interact with other elements like cursors or markes which are on top of the plot. +In this case panning is not appropriate so other event handler specific to those elements should intercept these events first and stop their propagation before they get to the ```touchNavigate``` plugin. + +Having a single place where the low level events are interpreted removes the burden of implementing the same logic in multiple places. +Some of the things this plugin is doing in order to extract the gestures or the user intentions: +* doesn't emit some pan or pinch events unless the user moved its finger(s) a minimum distance +* doesn't emit the double tap event unless both taps are near and fast enough +* deals with accidental multiple touches when panning + +## touchNavigate plugin +Similar to the ```touch``` plugin, the ```touchNavigate``` is using the same ```bindEvents``` hook to add its own listeners to the event holder of the flot, but it will listen for the high level events only emitted by the ```touch``` plugin. + +When a pan or pinch is started the plugin will determine what exactly is being "touched": the entire plot or just one of the axes. +After determining the element that the user wants to interact with then this plugin will call one of the ```zoom```, ```pan``` or ```recenter``` of the ```navigate``` plugin. diff --git a/docs/logaxis.md b/docs/logaxis.md new file mode 100644 index 000000000..471cdfa6f --- /dev/null +++ b/docs/logaxis.md @@ -0,0 +1,27 @@ +## jquery.flot.logaxis +This plugin is used to create logarithmic axis. This includes tick generation, +formatters and transformers to and from logarithmic representation. + +### Methods and hooks + + +- logTickGenerator(plot, axis, noTicks) + +Generates logarithmic ticks, depending on axis range. +In case the number of ticks that can be generated is less than the expected noTicks/4, +a linear tick generation is used. + + +- logTickFormatter(value, axis, precision) + +This is the corresponding tickFormatter of the logaxis. +For a number greater that 10^6 or smaller than 10^(-3), this will be drawn +with e representation + + +- setDataminRange(plot, axis) + +It is used for clamping the starting point of a logarithmic axis. +This will set the axis datamin range to 0.1 or to the first datapoint greater then 0. +The function is usefull since the logarithmic representation can not show +values less than or equal to 0. diff --git a/docs/navigate.md b/docs/navigate.md new file mode 100644 index 000000000..38e218e22 --- /dev/null +++ b/docs/navigate.md @@ -0,0 +1,83 @@ +## jquery.flot.navigate.js + +This flot plugin is used for adding the ability to pan and zoom the plot. +A higher level overview is available at [interactions](interactions.md) documentation. + +The default behaviour is scrollwheel up/down to zoom in, drag +to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and +plot.pan( offset ) so you easily can add custom controls. It also fires +"plotpan" and "plotzoom" events, useful for synchronizing plots. + +The plugin supports these options: +```js + zoom: { + interactive: false, + active: false, + amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) + } + + pan: { + interactive: false, + active: false, + cursor: "move", // CSS mouse cursor value used when dragging, e.g. "pointer" + frameRate: 60, + mode: "smart" // enable smart pan mode + } + + xaxis: { + axisZoom: true, //zoom axis when mouse over it is allowed + plotZoom: true, //zoom axis is allowed for plot zoom + axisPan: true, //pan axis when mouse over it is allowed + plotPan: true //pan axis is allowed for plot pan + } + + yaxis: { + axisZoom: true, //zoom axis when mouse over it is allowed + plotZoom: true, //zoom axis is allowed for plot zoom + axisPan: true, //pan axis when mouse over it is allowed + plotPan: true //pan axis is allowed for plot pan + } +``` +**interactive** enables the built-in drag/click behaviour. If you enable +interactive for pan, then you'll have a basic plot that supports moving +around; the same for zoom. + +**active** is true after a touch tap on plot. This enables plot navigation. +Once activated, zoom and pan cannot be deactivated. When the plot becomes active, +"plotactivated" event is triggered. + +**amount** specifies the default amount to zoom in (so 1.5 = 150%) relative to +the current viewport. + +**cursor** is a standard CSS mouse cursor string used for visual feedback to the +user when dragging. + +**frameRate** specifies the maximum number of times per second the plot will +update itself while the user is panning around on it (set to null to disable +intermediate pans, the plot will then not update until the mouse button is +released). + +Example API usage: +```js + plot = $.plot(...); + + // zoom default amount in on the pixel ( 10, 20 ) + plot.zoom({ center: { left: 10, top: 20 } }); + + // zoom out again + plot.zoomOut({ center: { left: 10, top: 20 } }); + + // zoom 200% in on the pixel (10, 20) + plot.zoom({ amount: 2, center: { left: 10, top: 20 } }); + + // pan 100 pixels to the left and 20 down + plot.pan({ left: -100, top: 20 }) +``` + +Here, "center" specifies where the center of the zooming should happen. Note +that this is defined in pixel space, not the space of the data points (you can +use the p2c helpers on the axes in Flot to help you convert between these). + +**amount** is the amount to zoom the viewport relative to the current range, so +1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You +can set the default in the options. diff --git a/examples/ajax/index.html b/examples/ajax/index.html index 2f0532eaf..ae942ac4f 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -4,19 +4,23 @@ Flot Examples: AJAX - - - + + + + - - + + + - + -
    +
    -
    -
    -
    +
    +
    +
    -

    Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.

    +

    Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.

    -
    +
    - + diff --git a/examples/axes-autoscaling/index.html b/examples/axes-autoscaling/index.html new file mode 100644 index 000000000..adf596650 --- /dev/null +++ b/examples/axes-autoscaling/index.html @@ -0,0 +1,111 @@ + + + + + Flot Examples: Axes autoscaling options + + + + + + + + + + +
    + +
    +
    +
    +
    + Vertical axis autoscaling options + None (min = -2.0, max = 2.0)
    + fit loosely
    + fit exactly
    + grow loosely
    + grow exactly
    +
    +
    + + diff --git a/examples/axes-interacting/index.html b/examples/axes-interacting/index.html index 1e11ea4a1..2a6e36464 100644 --- a/examples/axes-interacting/index.html +++ b/examples/axes-interacting/index.html @@ -4,39 +4,41 @@ Flot Examples: Interacting with axes - - - + + + + + + + + + + + + +
    + +
    +
    +
    + + + +
    + + diff --git a/examples/axes-multiple/index.html b/examples/axes-multiple/index.html index cc31d888b..a066a0ed9 100644 --- a/examples/axes-multiple/index.html +++ b/examples/axes-multiple/index.html @@ -4,10 +4,10 @@ Flot Examples: Multiple Axes - - - - + + + + + + + + + + + + + +
    + +
    +
    +
    +
    + Axis tick labels options + none
    + endpoints
    + major
    + all
    +
    +
    + Axis tick marks options + none
    + major
    + all
    +
    +
    + Vertical axis autoscaling options + None (min = -3, max = 3)
    + fit loosely
    + fit exactly
    + grow loosely
    + grow exactly
    +
    +
    + Vertical axis position options + right
    + left
    +
    +
    + Horizontal axis position options + top
    + left
    +
    +
    + + diff --git a/examples/axes-time-zones/date.js b/examples/axes-time-zones/date.js index 2899ddaf9..22a05adc2 100644 --- a/examples/axes-time-zones/date.js +++ b/examples/axes-time-zones/date.js @@ -1,3 +1,4 @@ +/* eslint-disable */ // ----- // The `timezoneJS.Date` object gives you full-blown timezone support, independent from the timezone set on the end-user's machine running the browser. It uses the Olson zoneinfo files for its timezone data. // diff --git a/examples/axes-time-zones/index.html b/examples/axes-time-zones/index.html index 544424181..fb496a53d 100644 --- a/examples/axes-time-zones/index.html +++ b/examples/axes-time-zones/index.html @@ -4,10 +4,9 @@ Flot Examples: Time zones - - - - + + + - - + + + - + + - + + - - - - - - - - - -
    - -
    -
    -
    - -

    This example uses the same dataset (raw oil price in US $/barrel of crude oil vs. the exchange rate from US $ to €) as the multiple-axes example, but uses the canvas plugin to render axis tick labels using canvas text.

    - -

    Enable canvas text

    - -
    - - - - - diff --git a/examples/categories/index.html b/examples/categories/index.html index 58416764b..0a7e65786 100644 --- a/examples/categories/index.html +++ b/examples/categories/index.html @@ -4,10 +4,9 @@ Flot Examples: Categories - - - - + + + + + + + + + + +
    + +
    +
    +
    + +

    flot supports area fills towards 0, -Infinity, +Infinity or arbitrary values. An option is to fill "bands" between provided values. + To do that you need to provide the second y value to the plot

    + +
    + + + + + diff --git a/examples/image/index.html b/examples/image/index.html index 450101c9a..54728a526 100644 --- a/examples/image/index.html +++ b/examples/image/index.html @@ -4,10 +4,9 @@ Flot Examples: Image Plots - - - - + + + - - + + + - - -
    - -

    Here are some examples for Flot, the Javascript charting library for jQuery:

    - -

    Basic Usage

    - - - -

    Interactivity

    - - - -

    Additional Features

    - - - -
    - - + + +
    + +

    Here are some examples for Flot, the Javascript charting library for jQuery:

    + +

    Basic Usage

    + + + +

    Interactivity

    + + + +

    Axes

    + + + +

    Additional Features

    + + + +
    + + diff --git a/examples/interacting/index.html b/examples/interacting/index.html index 31169dbb3..d5e37449d 100644 --- a/examples/interacting/index.html +++ b/examples/interacting/index.html @@ -4,9 +4,10 @@ Flot Examples: Interactivity - - - + + + + + + + + + + + + +
    + +
    +
    +
    + +

    PI multiples tick formatting for X axis and logarithmic axis on Y axis.

    +
    + + + + + + diff --git a/examples/navigate/index.html b/examples/navigate/index.html index 671692e76..07ccf0b79 100644 --- a/examples/navigate/index.html +++ b/examples/navigate/index.html @@ -22,11 +22,11 @@ font-size: smaller; } - - - - - + + + + + + + + + + + + + + +
    + +
    +
    +
    +
    +
    +
    +

    + +

    With the navigateTouch plugin it is easy to add panning and zooming. Drag to pan with one or two fingers, pinch to zoom.

    + +

    The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.

    + +
    + + + + + diff --git a/examples/percentiles/index.html b/examples/percentiles/index.html index 57df2a5bb..dcc6ab103 100644 --- a/examples/percentiles/index.html +++ b/examples/percentiles/index.html @@ -4,10 +4,9 @@ Flot Examples: Percentiles - - - - + + + + + + + + + + + + +
    + +
    +
    +
    +

    Legend Container:

    +
    + +
    +
    + Legend Position + SE - Over Graph
    + SW - Over Graph
    + NE - Over Graph
    + NW - Over Graph
    + Container
    +
    +
    +
    + + + + + diff --git a/examples/realtime/index.html b/examples/realtime/index.html index 8742a29b2..c7aedf7c1 100644 --- a/examples/realtime/index.html +++ b/examples/realtime/index.html @@ -3,10 +3,9 @@ Flot Examples: Real-time updates - - - - + + + - - - + + + + + - - + + - - - + + + - - + + + - + + - + + + - - + + - - + + + + - - + + + - - + + + - - - + + + - - + + - - - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -