diff --git a/jquery.flot.categories.js b/jquery.flot.categories.js index f3cfc7e8..5bc23967 100644 --- a/jquery.flot.categories.js +++ b/jquery.flot.categories.js @@ -1,46 +1,46 @@ -/* -Flot plugin for plotting textual data or categories. Consider a -dataset like [["February", 34], ["March", 20], ...]. This plugin +/* Flot plugin for plotting textual data or categories. + +Copyright (c) 2007-2012 IOLA and Ole Laursen. +Licensed under the MIT license. + +Consider a dataset like [["February", 34], ["March", 20], ...]. This plugin allows you to plot such a dataset directly. -To enable it, you must specify mode: "categories" on the axis with the -textual labels, e.g. +To enable it, you must specify mode: "categories" on the axis with the textual +labels, e.g. - $.plot("#placeholder", data, { xaxis: { mode: "categories" } }); + $.plot("#placeholder", data, { xaxis: { mode: "categories" } }); -By default, the labels are ordered as they are met in the data series. -If you need a different ordering, you can specify "categories" on the -axis options and list the categories there: +By default, the labels are ordered as they are met in the data series. If you +need a different ordering, you can specify "categories" on the axis options +and list the categories there: - xaxis: { - mode: "categories", - categories: ["February", "March", "April"] - } + xaxis: { + mode: "categories", + categories: ["February", "March", "April"] + } -If you need to customize the distances between the categories, you can -specify "categories" as an object mapping labels to values +If you need to customize the distances between the categories, you can specify +"categories" as an object mapping labels to values - xaxis: { - mode: "categories", - categories: { "February": 1, "March": 3, "April": 4 } - } + xaxis: { + mode: "categories", + categories: { "February": 1, "March": 3, "April": 4 } + } -If you don't specify all categories, the remaining encountered -categories will be numbered from the max value plus 1 (with a spacing -of 1 between each). +If you don't specify all categories, the remaining categories will be numbered +from the max value plus 1 (with a spacing of 1 between each). +Internally, the plugin works by transforming the input data through an auto- +generated mapping where the first category becomes 0, the second 1, etc. +Hence, a point like ["February", 34] becomes [0, 34] internally in Flot (this +is visible in hover and click events that return numbers rather than the +category labels). The plugin also overrides the tick generator to spit out the +categories as ticks instead of the values. -Internally, the plugin works by transforming the input data through an -auto-generated mapping where the first category becomes 0, the second -1, etc. Hence, a point like ["February", 34] becomes [0, 34] -internally in Flot (this is visible in hover and click events that -return numbers rather than the category labels). The plugin also -overrides the tick generator to spit out the categories as ticks -instead of the values. +If you need to map a value back to its label, the mapping is always accessible +as "categories" on the axis object, e.g. plot.getAxes().xaxis.categories. -If you need to map a value back to its label, the mapping is always -accessible as "categories" on the axis object, e.g. -plot.getAxes().xaxis.categories. */ (function ($) { diff --git a/jquery.flot.crosshair.js b/jquery.flot.crosshair.js index 09a07ac5..f44c5c52 100644 --- a/jquery.flot.crosshair.js +++ b/jquery.flot.crosshair.js @@ -1,29 +1,31 @@ -/* -Flot plugin for showing crosshairs, thin lines, when the mouse hovers -over the plot. - - crosshair: { - mode: null or "x" or "y" or "xy" - color: color - lineWidth: number - } - -Set the mode to one of "x", "y" or "xy". The "x" mode enables a -vertical crosshair that lets you trace the values on the x axis, "y" -enables a horizontal crosshair and "xy" enables them both. "color" is -the color of the crosshair (default is "rgba(170, 0, 0, 0.80)"), -"lineWidth" is the width of the drawn lines (default is 1). +/* Flot plugin for showing crosshairs when the mouse hovers over the plot. + +Copyright (c) 2007-2012 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin supports these options: + + crosshair: { + mode: null or "x" or "y" or "xy" + color: color + lineWidth: number + } + +Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical +crosshair that lets you trace the values on the x axis, "y" enables a +horizontal crosshair and "xy" enables them both. "color" is the color of the +crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of +the drawn lines (default is 1). The plugin also adds four public methods: - - setCrosshair(pos) + - setCrosshair( pos ) - Set the position of the crosshair. Note that this is cleared if - the user moves the mouse. "pos" is in coordinates of the plot and - should be on the form { x: xpos, y: ypos } (you can use x2/x3/... - if you're using multiple axes), which is coincidentally the same - format as what you get from a "plothover" event. If "pos" is null, - the crosshair is cleared. + Set the position of the crosshair. Note that this is cleared if the user + moves the mouse. "pos" is in coordinates of the plot and should be on the + form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple + axes), which is coincidentally the same format as what you get from a + "plothover" event. If "pos" is null, the crosshair is cleared. - clearCrosshair() @@ -31,22 +33,25 @@ The plugin also adds four public methods: - lockCrosshair(pos) - Cause the crosshair to lock to the current location, no longer - updating if the user moves the mouse. Optionally supply a position - (passed on to setCrosshair()) to move it to. + Cause the crosshair to lock to the current location, no longer updating if + the user moves the mouse. Optionally supply a position (passed on to + setCrosshair()) to move it to. Example usage: - var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; - $("#graph").bind("plothover", function (evt, position, item) { - if (item) { - // Lock the crosshair to the data point being hovered - myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] }); - } - else { - // Return normal crosshair operation - myFlot.unlockCrosshair(); - } - }); + + var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; + $("#graph").bind( "plothover", function ( evt, position, item ) { + if ( item ) { + // Lock the crosshair to the data point being hovered + myFlot.lockCrosshair({ + x: item.datapoint[ 0 ], + y: item.datapoint[ 1 ] + }); + } else { + // Return normal crosshair operation + myFlot.unlockCrosshair(); + } + }); - unlockCrosshair() diff --git a/jquery.flot.errorbars.js b/jquery.flot.errorbars.js index 8e7b3357..113bff75 100644 --- a/jquery.flot.errorbars.js +++ b/jquery.flot.errorbars.js @@ -1,60 +1,64 @@ -/* -Flot plugin for plotting error bars, i.e. to show standard deviation -and other statistical properties in a plot. +/* Flot plugin for plotting error bars. -* Created by Rui Pereira - rui (dot) pereira (at) gmail (dot) com - -This plugin allows you to plot error-bars over points. Set "errorbars" -inside the points series to the axis name over which there will be -error values in your data array (*even* if you do not intend to plot -them later, by setting "show: null" on xerr/yerr). - -Options for the plugin are - - series: { - points: { - errorbars: "x" or "y" or "xy", - xerr: { show: null/false or true, - asymmetric: null/false or true, - upperCap: null or "-" or function, - lowerCap: null or "-" or function, - color: null or color, - radius: null or number}, - yerr: { same options as xerr } - } - } - -Each data point array is expected to be of the type - -"x" [x,y,xerr] -"y" [x,y,yerr] -"xy" [x,y,xerr,yerr] +Copyright (c) 2007-2012 IOLA and Ole Laursen. +Licensed under the MIT license. -where xerr becomes xerr_lower,xerr_upper for the asymmetric error -case, and equivalently for yerr. Eg., a datapoint for the "xy" case -with symmetric error-bars on X and asymmetric on Y would be: +Error bars are used to show standard deviation and other statistical +properties in a plot. -[x,y,xerr,yerr_lower,yerr_upper] - -By default no end caps are drawn. Setting upperCap and/or lowerCap to -"-" will draw a small cap perpendicular to the error bar. They can -also be set to a user-defined drawing function, with (ctx, x, y, -radius) as parameters, as eg. - - function drawSemiCircle(ctx, x, y, radius){ - ctx.beginPath(); - ctx.arc(x, y, radius, 0, Math.PI, false); - ctx.moveTo(x - radius, y); - ctx.lineTo(x + radius, y); - ctx.stroke(); - } +* Created by Rui Pereira - rui (dot) pereira (at) gmail (dot) com -Color and radius both default to the same ones of the points series if -not set. The independent radius parameter on xerr/yerr is useful for -the case when we may want to add error-bars to a line, without showing -the interconnecting points (with radius: 0), and still showing end -caps on the error-bars. shadowSize and lineWidth are derived as well -from the points series. +This plugin allows you to plot error-bars over points. Set "errorbars" inside +the points series to the axis name over which there will be error values in +your data array (*even* if you do not intend to plot them later, by setting +"show: null" on xerr/yerr). + +The plugin supports these options: + + series: { + points: { + errorbars: "x" or "y" or "xy", + xerr: { + show: null/false or true, + asymmetric: null/false or true, + upperCap: null or "-" or function, + lowerCap: null or "-" or function, + color: null or color, + radius: null or number + }, + yerr: { same options as xerr } + } + } + +Each data point array is expected to be of the type: + + "x" [ x, y, xerr ] + "y" [ x, y, yerr ] + "xy" [ x, y, xerr, yerr ] + +Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and +equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric +error-bars on X and asymmetric on Y would be: + + [ x, y, xerr, yerr_lower, yerr_upper ] + +By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will +draw a small cap perpendicular to the error bar. They can also be set to a +user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg. + + function drawSemiCircle( ctx, x, y, radius ) { + ctx.beginPath(); + ctx.arc( x, y, radius, 0, Math.PI, false ); + ctx.moveTo( x - radius, y ); + ctx.lineTo( x + radius, y ); + ctx.stroke(); + } + +Color and radius both default to the same ones of the points series if not +set. The independent radius parameter on xerr/yerr is useful for the case when +we may want to add error-bars to a line, without showing the interconnecting +points (with radius: 0), and still showing end caps on the error-bars. +shadowSize and lineWidth are derived as well from the points series. */ diff --git a/jquery.flot.image.js b/jquery.flot.image.js index 24753d21..a681ab32 100644 --- a/jquery.flot.image.js +++ b/jquery.flot.image.js @@ -1,51 +1,54 @@ -/* -Flot plugin for plotting images, e.g. useful for putting ticks on a -prerendered complex visualization. - -The data syntax is [[image, x1, y1, x2, y2], ...] where (x1, y1) and -(x2, y2) are where you intend the two opposite corners of the image to -end up in the plot. Image must be a fully loaded Javascript image (you -can make one with new Image()). If the image is not complete, it's -skipped when plotting. - -There are two helpers included for retrieving images. The easiest work -the way that you put in URLs instead of images in the data (like -["myimage.png", 0, 0, 10, 10]), then call $.plot.image.loadData(data, -options, callback) where data and options are the same as you pass in -to $.plot. This loads the images, replaces the URLs in the data with -the corresponding images and calls "callback" when all images are -loaded (or failed loading). In the callback, you can then call $.plot -with the data set. See the included example. - -A more low-level helper, $.plot.image.load(urls, callback) is also -included. Given a list of URLs, it calls callback with an object -mapping from URL to Image object when all images are loaded or have -failed loading. - -Options for the plugin are - - series: { - images: { - show: boolean - anchor: "corner" or "center" - alpha: [0,1] - } - } - -which can be specified for a specific series - - $.plot($("#placeholder"), [{ data: [ ... ], images: { ... } ]) - -Note that because the data format is different from usual data points, -you can't use images with anything else in a specific data series. - -Setting "anchor" to "center" causes the pixels in the image to be -anchored at the corner pixel centers inside of at the pixel corners, -effectively letting half a pixel stick out to each side in the plot. - - -A possible future direction could be support for tiling for large -images (like Google Maps). +/* Flot plugin for plotting images. + +Copyright (c) 2007-2012 IOLA and Ole Laursen. +Licensed under the MIT license. + +The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and +(x2, y2) are where you intend the two opposite corners of the image to end up +in the plot. Image must be a fully loaded Javascript image (you can make one +with new Image()). If the image is not complete, it's skipped when plotting. + +There are two helpers included for retrieving images. The easiest work the way +that you put in URLs instead of images in the data, like this: + + [ "myimage.png", 0, 0, 10, 10 ] + +Then call $.plot.image.loadData( data, options, callback ) where data and +options are the same as you pass in to $.plot. This loads the images, replaces +the URLs in the data with the corresponding images and calls "callback" when +all images are loaded (or failed loading). In the callback, you can then call +$.plot with the data set. See the included example. + +A more low-level helper, $.plot.image.load(urls, callback) is also included. +Given a list of URLs, it calls callback with an object mapping from URL to +Image object when all images are loaded or have failed loading. + +The plugin supports these options: + + series: { + images: { + show: boolean + anchor: "corner" or "center" + alpha: [ 0, 1 ] + } + } + +They can be specified for a specific series: + + $.plot( $("#placeholder"), [{ + data: [ ... ], + images: { ... } + ]) + +Note that because the data format is different from usual data points, you +can't use images with anything else in a specific data series. + +Setting "anchor" to "center" causes the pixels in the image to be anchored at +the corner pixel centers inside of at the pixel corners, effectively letting +half a pixel stick out to each side in the plot. + +A possible future direction could be support for tiling for large images (like +Google Maps). */ diff --git a/jquery.flot.js b/jquery.flot.js index 2a9c3359..b82a2ad3 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -1,8 +1,9 @@ -/*! Javascript plotting library for jQuery, version 0.8 alpha. - * - * Released under the MIT license by IOLA, December 2007. - * - */ +/* Javascript plotting library for jQuery, version 0.8 alpha. + +Copyright (c) 2007-2012 IOLA and Ole Laursen. +Licensed under the MIT license. + +*/ // first an inline dependency, jquery.colorhelpers.js, we inline it here // for convenience diff --git a/jquery.flot.navigate.js b/jquery.flot.navigate.js index 8f810a97..e08476c2 100644 --- a/jquery.flot.navigate.js +++ b/jquery.flot.navigate.js @@ -1,96 +1,94 @@ -/* -Flot plugin for adding panning and zooming capabilities to a plot. - -The default behaviour is double click and 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 a "plotpan" and "plotzoom" event when -something happens, useful for synchronizing plots. - -Options: - - zoom: { - interactive: false - trigger: "dblclick" // or "click" for single click - amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) - } - - pan: { - interactive: false - cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer" - frameRate: 20 - } - - xaxis, yaxis, x2axis, y2axis: { - zoomRange: null // or [number, number] (min range, max range) or false - panRange: null // or [number, number] (min, max) or false - } - +/* Flot plugin for adding the ability to pan and zoom the plot. + +Copyright (c) 2007-2012 IOLA and Ole Laursen. +Licensed under the MIT license. + +The default behaviour is double click and 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: + + zoom: { + interactive: false + trigger: "dblclick" // or "click" for single click + amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) + } + + pan: { + interactive: false + cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer" + frameRate: 20 + } + + xaxis, yaxis, x2axis, y2axis: { + zoomRange: null // or [ number, number ] (min range, max range) or false + panRange: null // or [ number, number ] (min, max) or false + } + "interactive" enables the built-in drag/click behaviour. If you enable -interactive for pan, then you'll have a basic plot that supports -moving around; the same for zoom. +interactive for pan, then you'll have a basic plot that supports moving +around; the same for zoom. -"amount" specifies the default amount to zoom in (so 1.5 = 150%) -relative to the current viewport. +"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. +"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). +"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). -"zoomRange" is the interval in which zooming can happen, e.g. with -zoomRange: [1, 100] the zoom will never scale the axis so that the -difference between min and max is smaller than 1 or larger than 100. -You can set either end to null to ignore, e.g. [1, null]. If you set -zoomRange to false, zooming on that axis will be disabled. +"zoomRange" is the interval in which zooming can happen, e.g. with zoomRange: +[1, 100] the zoom will never scale the axis so that the difference between min +and max is smaller than 1 or larger than 100. You can set either end to null +to ignore, e.g. [1, null]. If you set zoomRange to false, zooming on that axis +will be disabled. -"panRange" confines the panning to stay within a range, e.g. with -panRange: [-10, 20] panning stops at -10 in one end and at 20 in the -other. Either can be null, e.g. [-10, null]. If you set -panRange to false, panning on that axis will be disabled. +"panRange" confines the panning to stay within a range, e.g. with panRange: +[-10, 20] panning stops at -10 in one end and at 20 in the other. Either can +be null, e.g. [-10, null]. If you set panRange to false, panning on that axis +will be disabled. Example API usage: - 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. - -*/ + 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. + +*/ // First two dependencies, jquery.event.drag.js and // jquery.mousewheel.js, we put them inline here to save people the // effort of downloading them. /* -jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com) +jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com) Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt */ (function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)