Team:TU-Munich/Flot.js

From 2013.igem.org

(Difference between revisions)

Revision as of 11:55, 23 October 2013

/* Javascript plotting library for jQuery, version 0.9.0-alpha.

/

(function($) {

   // A jquery-esque isNumeric method since we currently support 1.4.4
   // and $.isNumeric was introduced on in 1.7
   var isNumeric = $.isNumeric || function(obj) {
       return obj - parseFloat( obj ) >= 0;
   };

   ///////////////////////////////////////////////////////////////////////////
   // The Canvas object is a wrapper around an HTML5 <canvas> tag.
   //
   // @constructor
   // @param {string} cls List of classes to apply to the canvas.
   // @param {element} container Element onto which to append the canvas.
   //
   // Requiring a container is a little iffy, but unfortunately canvas
   // operations don't work unless the canvas is attached to the DOM.

   function Canvas(cls, container) {

       var element = container.children("." + cls)[0];

       if (element == null) {

           element = document.createElement("canvas");
           element.className = cls;

           $(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
               .appendTo(container);

           // If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas

           if (!element.getContext) {
               if (window.G_vmlCanvasManager) {
                   element = window.G_vmlCanvasManager.initElement(element);
               } else {
                   throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
               }
           }
       }

       this.element = element;

       var context = this.context = element.getContext("2d");

       // Determine the screen's ratio of physical to device-independent
       // pixels.  This is the ratio between the canvas width that the browser
       // advertises and the number of pixels actually present in that space.

       // 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());

       // Collection of HTML div layers for text overlaid onto the canvas

       this.textContainer = null;
       this.text = {};

       // Cache of text fragments and metrics, so we can avoid expensively
       // re-calculating them when the plot is re-rendered in a loop.

       this._textCache = {};
   }

   // Resizes the canvas to the given dimensions.
   //
   // @param {number} width New width of the canvas, in pixels.
   // @param {number} width New height of the canvas, in pixels.

   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, not including any overlaid HTML text

   Canvas.prototype.clear = function() {
       this.context.clearRect(0, 0, this.width, this.height);
   };

   // Finishes rendering the canvas, including managing the text overlay.

   Canvas.prototype.render = function() {

       var cache = this._textCache;

       // For each text layer, add elements marked as active that haven't
       // already been rendered, and remove those that are no longer active.

       for (var layerKey in cache) {
           if (Object.prototype.hasOwnProperty.call(cache, layerKey)) {

               var layer = this.getTextLayer(layerKey),
                   layerCache = cache[layerKey];

               layer.hide();

               for (var styleKey in layerCache) {
                   if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
                       var styleCache = layerCache[styleKey];
                       for (var angleKey in styleCache) {
                           if (Object.prototype.hasOwnProperty.call(styleCache, angleKey)) {
                               var angleCache = styleCache[angleKey];
                               for (var key in angleCache) {
                                   if (Object.prototype.hasOwnProperty.call(angleCache, key)) {

                                       var positions = angleCache[key].positions;

                                       for (var i = 0, position; position = positions[i]; i++) {
                                           if (position.active) {
                                               if (!position.rendered) {
                                                   layer.append(position.element);
                                                   position.rendered = true;
                                               }
                                           } else {
                                               positions.splice(i--, 1);
                                               if (position.rendered) {
                                                   position.element.detach();
                                               }
                                           }
                                       }

                                       if (positions.length === 0) {
                                           delete angleCache[key];
                                       }
                                   }
                               }
                           }
                       }
                   }
               }

               layer.show();
           }
       }
   };

   // Creates (if necessary) and returns the text overlay container.
   //
   // @param {string} classes String of space-separated CSS classes used to
   //     uniquely identify the text layer.
   // @return {object} The jQuery-wrapped text-layer div.

   Canvas.prototype.getTextLayer = function(classes) {

       var layer = this.text[classes];

       // Create the text layer if it doesn't exist

       if (layer == null) {

           // Create the text layer container, if it doesn't exist

           if (this.textContainer == null) {

this.textContainer = $("

")

                   .css({
                       position: "absolute",
                       top: 0,
                       left: 0,
                       bottom: 0,
                       right: 0,
                       "font-size": "smaller",
                       color: "#545454"
                   })
                   .insertAfter(this.element);
           }

layer = this.text[classes] = $("

")

               .addClass(classes)
               .css({
                   position: "absolute",
                   top: 0,
                   left: 0,
                   bottom: 0,
                   right: 0
               })
               .appendTo(this.textContainer);
       }

       return layer;
   };

   // Creates (if necessary) and returns a text info object.
   //
   // The object looks like this:
   //
   // {
   //     width: Width of the text's wrapper div.
   //     height: Height of the text's wrapper div.
   //     element: The jQuery-wrapped HTML div containing the text.
   //     positions: Array of positions at which this text is drawn.
   // }
   //
   // The positions array contains objects that look like this:
   //
   // {
   //     active: Flag indicating whether the text should be visible.
   //     rendered: Flag indicating whether the text is currently visible.
   //     element: The jQuery-wrapped HTML div containing the text.
   //     x: X coordinate at which to draw the text.
   //     y: Y coordinate at which to draw the text.
   // }
   //
   // Each position after the first receives a clone of the original element.
   //
   // The idea is that that the width, height, and general 'identity' of the
   // text is constant no matter where it is placed; the placements are a
   // secondary property.
   //
   // Canvas maintains a cache of recently-used text info objects; getTextInfo
   // either returns the cached element or creates a new entry.
   //
   // @param {string} layer A string of space-separated CSS classes uniquely
   //     identifying the layer containing this text.
   // @param {string} text Text string to retrieve info for.
   // @param {(string|object)=} font Either a string of space-separated CSS
   //     classes or a font-spec object, defining the text's font and style.
   // @param {number=} angle Angle at which to rotate the text, in degrees.
   // @param {number=} width Maximum width of the text before it wraps.
   // @return {object} a text info object.

   Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {

       var textStyle, layerCache, styleCache, angleCache, info;

       text = "" + text;    // Cast to string in case we have a number or such
       angle = (360 + (angle || 0)) % 360;  // Normalize the angle to 0...359

       // If the font is a font-spec object, generate a CSS font definition

       if (typeof font === "object") {
           textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;
       } else {
           textStyle = font;
       }

       // Retrieve or create the caches for the text's layer, style, and angle

       layerCache = this._textCache[layer];
       if (layerCache == null) {
           layerCache = this._textCache[layer] = {};
       }

       styleCache = layerCache[textStyle];
       if (styleCache == null) {
           styleCache = layerCache[textStyle] = {};
       }

       angleCache = styleCache[angle];
       if (angleCache == null) {
           angleCache = styleCache[angle] = {};
       }

       info = angleCache[text];

       // If we can't find a matching element in our cache, create a new one

       if (info == null) {

var element = $("

").html(text)

               .css({
                   position: "absolute",
                   "max-width": width,
                   top: -9999
               })
               .appendTo(this.getTextLayer(layer));

           if (typeof font === "object") {
               element.css({
                   font: textStyle,
                   color: font.color
               });
           } else if (typeof font === "string") {
               element.addClass(font);
           }

           // Save the original dimensions of the text; we'll modify these
           // later to take into account rotation, if there is any.

           var textWidth = element.outerWidth(true),
               textHeight = element.outerHeight(true);

           // Apply rotation to the text using CSS3/IE matrix transforms

           // Note how we also set the element's width, as a work-around for
           // the way most browsers resize the div on rotate, which may cause
           // the contents to wrap differently. The extra +1 is because IE
           // rounds the width differently and needs a little extra help.

           if (angle) {

               var radians = angle * Math.PI / 180,
                   sin = Math.sin(radians),
                   cos = Math.cos(radians),
                   a = cos.toFixed(6),     // Use fixed-point so these don't
                   b = (-sin).toFixed(6),  // show up in scientific notation
                   c = sin.toFixed(6),     // when we add them to the string
                   transformRule;

               if ($.support.leadingWhitespace) {

                   // The transform origin defaults to '50% 50%', producing
                   // blurry text on some browsers (Chrome) when the width or
                   // height happens to be odd, making 50% fractional. Avoid
                   // this by setting the origin to rounded values.

                   var cx = textWidth / 2,
                       cy = textHeight / 2,
                       transformOrigin = Math.floor(cx) + "px " + Math.floor(cy) + "px";

                   // Transforms alter the div's appearance without changing
                   // its origin. This will make it difficult to position it
                   // later, since we'll be positioning the new bounding box
                   // with respect to the old origin. We can work around this
                   // by adding a translation to align the new bounding box's
                   // top-left corner with the origin, using the same matrix.

                   // Rather than examining all four points, we can use the
                   // angle to figure out in advance which two points are in
                   // the top-left quadrant; we can then use the x-coordinate
                   // of the first (left-most) point and the y-coordinate of
                   // the second (top-most) point as the bounding box corner.

                   var x, y;
                   if (angle < 90) {
                       x = Math.floor(cx * cos + cy * sin - cx);
                       y = Math.floor(cx * sin + cy * cos - cy);
                   } else if (angle < 180) {
                       x = Math.floor(cy * sin - cx * cos - cx);
                       y = Math.floor(cx * sin - cy * cos - cy);
                   } else if (angle < 270) {
                       x = Math.floor(-cx * cos - cy * sin - cx);
                       y = Math.floor(-cx * sin - cy * cos - cy);
                   } else {
                       x = Math.floor(cx * cos - cy * sin - cx);
                       y = Math.floor(cy * cos - cx * sin - cy);
                   }

                   transformRule = "matrix(" + a + "," + c + "," + b + "," + a + "," + x + "," + y + ")";

                   element.css({
                       width: textWidth + 1,
                       transform: transformRule,
                       "-o-transform": transformRule,
                       "-ms-transform": transformRule,
                       "-moz-transform": transformRule,
                       "-webkit-transform": transformRule,
                       "transform-origin": transformOrigin,
                       "-o-transform-origin": transformOrigin,
                       "-ms-transform-origin": transformOrigin,
                       "-moz-transform-origin": transformOrigin,
                       "-webkit-transform-origin": transformOrigin
                   });

               } else {

                   // The IE7/8 matrix filter produces very ugly aliasing for
                   // text with a transparent background. Using a solid color
                   // greatly improves text clarity, although it does result
                   // in ugly boxes for plots using a non-white background.

                   // TODO: Instead of white use the actual background color?
                   // This still wouldn't solve the problem when the plot has
                   // a gradient background, but it would at least help.

                   transformRule = "progid:DXImageTransform.Microsoft.Matrix(M11=" + a + ", M12=" + b + ", M21=" + c + ", M22=" + a + ",sizingMethod='auto expand')";

                   element.css({
                       width: textWidth + 1,
                       filter: transformRule,
                       "-ms-filter": transformRule,
                       "background-color": "#fff"
                   });
               }

               // Compute the final dimensions of the text's bounding box

               var ac = Math.abs(cos),
                   as = Math.abs(sin),
                   originalWidth = textWidth;
               textWidth = Math.round(ac * textWidth + as * textHeight);
               textHeight = Math.round(as * originalWidth + ac * textHeight);
           }

           info = angleCache[text] = {
               width: textWidth,
               height: textHeight,
               element: element,
               positions: []
           };

           element.detach();
       }

       return info;
   };

   // Adds a text string to the canvas text overlay.
   //
   // The text isn't drawn immediately; it is marked as rendering, which will
   // result in its addition to the canvas on the next render pass.
   //
   // @param {string} layer A string of space-separated CSS classes uniquely
   //     identifying the layer containing this text.
   // @param {number} x X coordinate at which to draw the text.
   // @param {number} y Y coordinate at which to draw the text.
   // @param {string} text Text string to draw.
   // @param {(string|object)=} font Either a string of space-separated CSS
   //     classes or a font-spec object, defining the text's font and style.
   // @param {number=} angle Angle at which to rotate the text, in degrees.
   // @param {number=} width Maximum width of the text before it wraps.
   // @param {string=} halign Horizontal alignment of the text; either "left",
   //     "center" or "right".
   // @param {string=} valign Vertical alignment of the text; either "top",
   //     "middle" or "bottom".

   Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {

       var info = this.getTextInfo(layer, text, font, angle, width),
           positions = info.positions;

       // Tweak the div's position to match the text's alignment

       if (halign === "center") {
           x -= info.width / 2;
       } else if (halign === "right") {
           x -= info.width;
       }

       if (valign === "middle") {
           y -= info.height / 2;
       } else if (valign === "bottom") {
           y -= info.height;
       }

       // Determine whether this text already exists at this position.
       // If so, mark it for inclusion in the next render pass.

       for (var i = 0, position; position = positions[i]; i++) {
           if (position.x === x && position.y === y) {
               position.active = true;
               return;
           }
       }

       // If the text doesn't exist at this position, create a new entry

       // For the very first position we'll re-use the original element,
       // while for subsequent ones we'll clone it.

       position = {
           active: true,
           rendered: false,
           element: positions.length ? info.element.clone() : info.element,
           x: x,
           y: y
       };

       positions.push(position);

       // Move the element to its final position within the container

       position.element.css({
           top: Math.round(y),
           left: Math.round(x),
           "text-align": halign    // In case the text wraps
       });
   };

   // Removes one or more text strings from the canvas text overlay.
   //
   // If no parameters are given, all text within the layer is removed.
   //
   // Note that the text is not immediately removed; it is simply marked as
   // inactive, which will result in its removal on the next render pass.
   // This avoids the performance penalty for 'clear and redraw' behavior,
   // where we potentially get rid of all text on a layer, but will likely
   // add back most or all of it later, as when redrawing axes, for example.
   //
   // @param {string} layer A string of space-separated CSS classes uniquely
   //     identifying the layer containing this text.
   // @param {number=} x X coordinate of the text.
   // @param {number=} y Y coordinate of the text.
   // @param {string=} text Text string to remove.
   // @param {(string|object)=} font Either a string of space-separated CSS
   //     classes or a font-spec object, defining the text's font and style.
   // @param {number=} angle Angle at which the text is rotated, in degrees.
   //     Angle is currently unused, it will be implemented in the future.

   Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
       var i, positions, position;
       if (text == null) {
           var layerCache = this._textCache[layer];
           if (layerCache != null) {
               for (var styleKey in layerCache) {
                   if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
                       var styleCache = layerCache[styleKey];
                       for (var angleKey in styleCache) {
                           if (Object.prototype.hasOwnProperty.call(styleCache, angleKey)) {
                               var angleCache = styleCache[angleKey];
                               for (var key in angleCache) {
                                   if (Object.prototype.hasOwnProperty.call(angleCache, key)) {
                                       positions = angleCache[key].positions;
                                       for (i = 0; position = positions[i]; i++) {
                                           position.active = false;
                                       }
                                   }
                               }
                           }
                       }
                   }
               }
           }
       } else {
           positions = this.getTextInfo(layer, text, font, angle).positions;
           for (i = 0; position = positions[i]; i++) {
               if (position.x === x && position.y === y) {
                   position.active = false;
               }
           }
       }
   };

   ///////////////////////////////////////////////////////////////////////////
   // The top-level container for the entire plot.

   function Plot(placeholder, data_, options_, plugins) {
       // data is on the form:
       //   [ series1, series2 ... ]
       // where series is either just the data as [ [x1, y1], [x2, y2], ... ]
       // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }

       var series = [],
           options = {
               // the color theme used for graphs
               colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
               legend: {
                   show: true,
                   noColumns: 1, // number of colums in legend table
                   labelFormatter: null, // fn: string -> string
                   labelBoxBorderColor: "#ccc", // border color for the little label boxes
                   container: null, // container (as jQuery object) to put legend in, null means default on top of graph
                   position: "ne", // position of default legend container within plot
                   margin: 5, // distance from grid edge to default legend container within plot
                   backgroundColor: null, // null means auto-detect
                   backgroundOpacity: 0.85, // set to 0 to avoid background
                   sorted: null    // default to no legend sorting
               },
               xaxis: {

                   show: null,             // null = auto-detect, true = always, false = never
                   position: "bottom",     // or "top"
                   mode: null,             // null or "time"

                   color: null,            // base color, labels, ticks
                   font: null,             // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }

                   min: null,              // min. value to show, null means set automatically
                   max: null,              // max. value to show, null means set automatically
                   autoscaleMargin: null,  // margin in % to add if auto-setting min/max

                   transform: null,        // null or f: number -> number to transform axis
                   inverseTransform: null, // if transform is set, this should be the inverse function

                   ticks: null,            // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
                   tickSize: null,         // number or [number, "unit"]
                   minTickSize: null,      // number or [number, "unit"]
                   tickFormatter: null,    // fn: number -> string
                   tickDecimals: null,     // no. of decimals, null means auto

                   tickColor: null,        // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
                   tickLength: null,       // size in pixels of ticks, or "full" for whole line

                   tickWidth: null,        // width of tick labels in pixels
                   tickHeight: null,       // height of tick labels in pixels
                   tickFont: null,         // null or font-spec object (see font, above)

                   label: null,            // null or an axis label string
                   labelFont: null,        // null or font-spec object (see font, above)
                   labelPadding: 2,        // spacing between the axis and its label

                   reserveSpace: null,     // whether to reserve space even if axis isn't shown
                   alignTicksWithAxis: null    // axis number or null for no sync
               },
               yaxis: {
                   position: "left",       // or "right"
                   autoscaleMargin: 0.02,
                   labelPadding: 2
               },
               xaxes: [],
               yaxes: [],
               series: {
                   points: {
                       show: false,
                       radius: 3,
                       lineWidth: 2, // in pixels
                       fill: true,
                       fillColor: "#ffffff",
                       strokeColor: null,
                       symbol: "circle" // or callback
                   },
                   lines: {
                       // we don't put in show: false so we can see
                       // whether lines were actively disabled
                       lineWidth: 2, // in pixels
                       fill: false,
                       fillColor: null,
                       steps: false
                       // Omit 'zero', so we can later default its value to
                       // match that of the 'fill' option.
                   },
                   bars: {
                       show: false,
                       lineWidth: 2, // in pixels
                       barWidth: 1, // in units of the x axis
                       fill: true,
                       fillColor: null,
                       align: "left", // "left", "right", or "center"
                       horizontal: false,
                       zero: true
                   },
                   shadowSize: 3,
                   highlightColor: null
               },
               grid: {
                   show: true,
                   aboveData: false,
                   color: "#545454", // primary color used for outline and labels
                   backgroundColor: null, // null for transparent, else color
                   borderColor: null, // set if different from the grid color
                   tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)"
                   margin: 0, // distance from the canvas edge to the grid
                   labelMargin: 5, // in pixels
                   axisMargin: 8, // in pixels
                   borderWidth: 2, // in pixels
                   minBorderMargin: null, // in pixels, null means taken from points radius
                   markings: null, // array of ranges or fn: axes -> array of ranges
                   markingsColor: "#f4f4f4",
                   markingsLineWidth: 2,
                   // interactive stuff
                   clickable: false,
                   hoverable: false,
                   autoHighlight: true, // highlight in case mouse is near
                   mouseActiveRadius: 10 // how far the mouse can be away to activate an item
               },
               interaction: {
                   redrawOverlayInterval: 1000/60 // time between updates, -1 means in same flow
               },
               hooks: {}
           },
           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,
           xaxes = [], yaxes = [],
           plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
           plotWidth = 0, plotHeight = 0,
           hooks = {
               processOptions: [],
               processRawData: [],
               processDatapoints: [],
               processOffset: [],
               drawBackground: [],
               drawSeries: [],
               draw: [],
               bindEvents: [],
               drawOverlay: [],
               shutdown: []
           },
           plot = this;

       // public functions
       plot.setData = setData;
       plot.setupGrid = setupGrid;
       plot.draw = draw;
       plot.getPlaceholder = function() { return placeholder; };
       plot.getCanvas = function() { return surface.element; };
       plot.getPlotOffset = function() { return plotOffset; };
       plot.width = function () { return plotWidth; };
       plot.height = function () { return plotHeight; };
       plot.offset = function () {
           var o = eventHolder.offset();
           o.left += plotOffset.left;
           o.top += plotOffset.top;
           return o;
       };
       plot.getData = function () { return series; };
       plot.getAxes = function () {
           var res = {};
           $.each(xaxes.concat(yaxes), function (_, axis) {
               if (axis) {
                   res[axis.direction + (axis.n !== 1 ? axis.n : "") + "axis"] = axis;
               }
           });
           return res;
       };
       plot.getXAxes = function () { return xaxes; };
       plot.getYAxes = function () { return yaxes; };
       plot.c2p = canvasToAxisCoords;
       plot.p2c = axisToCanvasCoords;
       plot.getOptions = function () { return options; };
       plot.highlight = highlight;
       plot.unhighlight = unhighlight;
       plot.triggerRedrawOverlay = triggerRedrawOverlay;
       plot.pointOffset = function(point) {
           return {
               left: parseInt(xaxes[axisNumber(point, "x") - 1].p2c(+point.x) + plotOffset.left, 10),
               top: parseInt(yaxes[axisNumber(point, "y") - 1].p2c(+point.y) + plotOffset.top, 10)
           };
       };
       plot.shutdown = shutdown;
       plot.resize = function () {
           var width = placeholder.width(),
               height = placeholder.height();
           surface.resize(width, height);
           overlay.resize(width, height);
       };

       // public attributes
       plot.hooks = hooks;

       // initialize
       initPlugins(plot);
       parseOptions(options_);
       setupCanvases();
       setData(data_);
       setupGrid();
       draw();
       bindEvents();

       function executeHooks(hook, args) {
           args = [plot].concat(args);
           for (var i = 0; i < hook.length; ++i) {
               hook[i].apply(this, args);
           }
       }

       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, classes);
               if (p.options) {
                   $.extend(true, options, p.options);
               }
           }
       }

       function parseOptions(opts) {

           $.extend(true, options, opts);

           // $.extend merges arrays, rather than replacing them.  When less
           // colors are provided than the size of the default palette, we
           // end up with those colors plus the remaining defaults, which is
           // not expected behavior; avoid it by replacing them here.

           if (opts && opts.colors) {
               options.colors = opts.colors;
           }

           if (options.xaxis.color == null) {
               options.xaxis.color = $.color.parse(options.grid.color).scale("a", 0.22).toString();
           }
           if (options.yaxis.color == null) {
               options.yaxis.color = $.color.parse(options.grid.color).scale("a", 0.22).toString();
           }

           if (options.xaxis.tickColor == null) { // grid.tickColor for back-compatibility
               options.xaxis.tickColor = options.grid.tickColor || options.xaxis.color;
           }
           if (options.yaxis.tickColor == null) { // grid.tickColor for back-compatibility
               options.yaxis.tickColor = options.grid.tickColor || options.yaxis.color;
           }

           if (options.grid.borderColor == null) {
               options.grid.borderColor = options.grid.color;
           }
           if (options.grid.tickColor == null) {
               options.grid.tickColor = $.color.parse(options.grid.color).scale("a", 0.22).toString();
           }

           // 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")
               };

           fontDefaults.lineHeight = fontDefaults.size * 1.15;

           axisCount = options.xaxes.length || 1;
           for (i = 0; i < axisCount; ++i) {

               axisOptions = options.xaxes[i];
               if (axisOptions && !axisOptions.tickColor) {
                   axisOptions.tickColor = axisOptions.color;
               }

               // Compatibility with markrcote/flot-axislabels

               if (axisOptions) {
                   if (!axisOptions.label && axisOptions.axisLabel) {
                       axisOptions.label = axisOptions.axisLabel;
                   }
                   if (!axisOptions.labelPadding && axisOptions.axisLabelPadding) {
                       axisOptions.labelPadding = axisOptions.axisLabelPadding;
                   }
               }

               axisOptions = $.extend(true, {}, options.xaxis, axisOptions);
               options.xaxes[i] = axisOptions;

               fontDefaults.color = axisOptions.color;
               if (axisOptions.font) {
                   axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
               }
               if (axisOptions.tickFont || axisOptions.font) {
                   axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont);
               }
               if (axisOptions.label && (axisOptions.labelFont || axisOptions.font)) {
                   axisOptions.labelFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.labelFont);
               }
           }

           axisCount = options.yaxes.length || 1;
           for (i = 0; i < axisCount; ++i) {

               axisOptions = options.yaxes[i];
               if (axisOptions && !axisOptions.tickColor) {
                   axisOptions.tickColor = axisOptions.color;
               }

               // Compatibility with markrcote/flot-axislabels

               if (axisOptions) {
                   if (!axisOptions.label && axisOptions.axisLabel) {
                       axisOptions.label = axisOptions.axisLabel;
                   }
                   if (!axisOptions.labelPadding && axisOptions.axisLabelPadding) {
                       axisOptions.labelPadding = axisOptions.axisLabelPadding;
                   }
               }

               axisOptions = $.extend(true, {}, options.yaxis, axisOptions);
               options.yaxes[i] = axisOptions;

               fontDefaults.color = axisOptions.color;
               if (axisOptions.font) {
                   axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
               }
               if (axisOptions.tickFont || axisOptions.font) {
                   axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont);
               }
               if (axisOptions.label && (axisOptions.labelFont || axisOptions.font)) {
                   axisOptions.labelFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.labelFont);
               }
           }

           // backwards compatibility, to be removed in future
           if (options.xaxis.noTicks && options.xaxis.ticks == null) {
               options.xaxis.ticks = options.xaxis.noTicks;
           }
           if (options.yaxis.noTicks && options.yaxis.ticks == null) {
               options.yaxis.ticks = options.yaxis.noTicks;
           }
           if (options.x2axis) {
               options.xaxes[1] = $.extend(true, {}, options.xaxis, options.x2axis);
               options.xaxes[1].position = "top";
           }
           if (options.y2axis) {
               options.yaxes[1] = $.extend(true, {}, options.yaxis, options.y2axis);
               options.yaxes[1].position = "right";
           }
           if (options.grid.coloredAreas) {
               options.grid.markings = options.grid.coloredAreas;
           }
           if (options.grid.coloredAreasColor) {
               options.grid.markingsColor = options.grid.coloredAreasColor;
           }
           if (options.lines) {
               $.extend(true, options.series.lines, options.lines);
           }
           if (options.points) {
               $.extend(true, options.series.points, options.points);
           }
           if (options.bars) {
               $.extend(true, options.series.bars, options.bars);
           }
           if (options.shadowSize != null) {
               options.series.shadowSize = options.shadowSize;
           }
           if (options.highlightColor != null) {
               options.series.highlightColor = options.highlightColor;
           }

           // save options on axes for future reference
           for (i = 0; i < options.xaxes.length; ++i) {
               getOrCreateAxis(xaxes, i + 1).options = options.xaxes[i];
           }
           for (i = 0; i < options.yaxes.length; ++i) {
               getOrCreateAxis(yaxes, i + 1).options = options.yaxes[i];
           }

           // add hooks from options
           for (var n in hooks) {
               if (options.hooks[n] && options.hooks[n].length) {
                   hooks[n] = hooks[n].concat(options.hooks[n]);
               }
           }

           executeHooks(hooks.processOptions, [options]);
       }

       function setData(d) {
           series = parseData(d);
           fillInSeriesOptions();
           processData();
       }

       function parseData(d) {
           var res = [];
           for (var i = 0; i < d.length; ++i) {
               var s = $.extend(true, {}, options.series);

               if (d[i].data != null) {
                   s.data = d[i].data; // move the data instead of deep-copy
                   delete d[i].data;

                   $.extend(true, s, d[i]);

                   d[i].data = s.data;
               } else {
                   s.data = d[i];
               }
               res.push(s);
           }

           return res;
       }

       function axisNumber(obj, coord) {
           var a = obj[coord + "axis"];
           if (typeof a === "object") { // if we got a real axis, extract number
               a = a.n;
           }
           if (!isNumeric(a)) {
               a = 1; // default to first axis
           }
           return a;
       }

       function allAxes() {
           // return flat array without annoying null entries
           return $.grep(xaxes.concat(yaxes), function (a) { return a; });
       }

       function canvasToAxisCoords(pos) {
           // return an object with x/y corresponding to all used axes
           var res = {}, i, axis;
           for (i = 0; i < xaxes.length; ++i) {
               axis = xaxes[i];
               if (axis && axis.used) {
                   res["x" + axis.n] = axis.c2p(pos.left);
               }
           }

           for (i = 0; i < yaxes.length; ++i) {
               axis = yaxes[i];
               if (axis && axis.used) {
                   res["y" + axis.n] = axis.c2p(pos.top);
               }
           }

           if (res.x1 !== undefined) {
               res.x = res.x1;
           }
           if (res.y1 !== undefined) {
               res.y = res.y1;
           }

           return res;
       }

       function axisToCanvasCoords(pos) {
           // get canvas coords from the first pair of x/y found in pos
           var res = {}, i, axis, key;

           for (i = 0; i < xaxes.length; ++i) {
               axis = xaxes[i];
               if (axis && axis.used) {
                   key = "x" + axis.n;
                   if (pos[key] == null && axis.n === 1) {
                       key = "x";
                   }

                   if (pos[key] != null) {
                       res.left = axis.p2c(pos[key]);
                       break;
                   }
               }
           }

           for (i = 0; i < yaxes.length; ++i) {
               axis = yaxes[i];
               if (axis && axis.used) {
                   key = "y" + axis.n;
                   if (pos[key] == null && axis.n === 1) {
                       key = "y";
                   }

                   if (pos[key] != null) {
                       res.top = axis.p2c(pos[key]);
                       break;
                   }
               }
           }

           return res;
       }

       function getOrCreateAxis(axes, number) {
           if (!axes[number - 1]) {
               axes[number - 1] = {
                   n: number, // save the number for future reference
                   direction: axes === xaxes ? "x" : "y",
                   options: $.extend(true, {}, axes === xaxes ? options.xaxis : options.yaxis)
               };
           }

           return axes[number - 1];
       }

       function fillInSeriesOptions() {

           var neededColors = series.length, maxIndex = -1, i;

           // Subtract the number of series that already have fixed colors or
           // color indexes from the number that we still need to generate.

           for (i = 0; i < series.length; ++i) {
               var sc = series[i].color;
               if (sc != null) {
                   neededColors--;
                   if (isNumeric(sc) && sc > maxIndex) {
                       maxIndex = sc;
                   }
               }
           }

           // If any of the series have fixed color indexes, then we need to
           // generate at least as many colors as the highest index.

           if (neededColors <= maxIndex) {
               neededColors = maxIndex + 1;
           }

           // Generate all the colors, using first the option colors and then
           // variations on those colors once they're exhausted.

           var c, colors = [], colorPool = options.colors,
               colorPoolSize = colorPool.length, variation = 0;

           for (i = 0; i < neededColors; i++) {

               c = $.color.parse(colorPool[i % colorPoolSize] || "#666");

               // Each time we exhaust the colors in the pool we adjust
               // a scaling factor used to produce more variations on
               // those colors. The factor alternates negative/positive
               // to produce lighter/darker colors.

               // Reset the variation after every few cycles, or else
               // it will end up producing only white or black colors.

               if (i % colorPoolSize === 0 && i) {
                   if (variation >= 0) {
                       if (variation < 0.5) {
                           variation = -variation - 0.2;
                       } else {
                           variation = 0;
                       }
                   } else {
                       variation = -variation;
                   }
               }

               colors[i] = c.scale("rgb", 1 + variation);
           }

           // Finalize the series options, filling in their colors

           var colori = 0, s;
           for (i = 0; i < series.length; ++i) {
               s = series[i];

               // assign colors
               if (s.color == null) {
                   s.color = colors[colori].toString();
                   ++colori;
               } else if (isNumeric(s.color)) {
                   s.color = colors[s.color].toString();
               }

               // turn on lines automatically in case nothing is set
               if (s.lines.show == null) {
                   var v, show = true;
                   for (v in s) {
                       if (s[v] && s[v].show) {
                           show = false;
                           break;
                       }
                   }
                   if (show) {
                       s.lines.show = true;
                   }
               }

               // If nothing was provided for lines.zero, default it to match
               // lines.fill, since areas by default should extend to zero.

               if (s.lines.zero == null) {
                   s.lines.zero = !!s.lines.fill;
               }

               // setup axes
               s.xaxis = getOrCreateAxis(xaxes, axisNumber(s, "x"));
               s.yaxis = getOrCreateAxis(yaxes, axisNumber(s, "y"));
           }
       }

       function processData() {
           var topSentry = Number.POSITIVE_INFINITY,
               bottomSentry = Number.NEGATIVE_INFINITY,
               fakeInfinity = Number.MAX_VALUE,
               i, j, k, m, s, points, ps, val, f, p, data, format;

           function updateAxis(axis, min, max) {
               if (min < axis.datamin && min !== -fakeInfinity) {
                   axis.datamin = min;
               }
               if (max > axis.datamax && max !== fakeInfinity) {
                   axis.datamax = max;
               }
           }

           $.each(allAxes(), function (_, axis) {
               // init axis
               axis.datamin = topSentry;
               axis.datamax = bottomSentry;
               axis.used = false;
           });

           for (i = 0; i < series.length; ++i) {
               s = series[i];
               s.datapoints = { points: [] };
               executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]);
           }

           // first pass: clean and copy data
           for (i = 0; i < series.length; ++i) {
               s = series[i];

               data = s.data;
               format = s.datapoints.format;

               if (!format) {
                   format = [];
                   // find out how to copy
                   format.push({ x: true, number: true, required: true });
                   format.push({ y: true, number: true, required: true });

                   if (s.bars.show || (s.lines.show && s.lines.fill)) {
                       var autoscale = !!((s.bars.show && s.bars.zero) || (s.lines.show && s.lines.zero));
                       format.push({ y: true, number: true, required: false, defaultValue: 0, autoscale: autoscale });
                       if (s.bars.horizontal) {
                           delete format[format.length - 1].y;
                           format[format.length - 1].x = true;
                       }
                   }

                   s.datapoints.format = format;
               }

               if (s.datapoints.pointsize != null) {
                   continue; // already filled in
               }

               s.datapoints.pointsize = format.length;

               ps = s.datapoints.pointsize;
               points = s.datapoints.points;

               var insertSteps = s.lines.show && s.lines.steps;
               s.xaxis.used = s.yaxis.used = true;

               for (j = k = 0; j < data.length; ++j, k += ps) {
                   p = data[j];

                   var nullify = p == null;
                   if (!nullify) {
                       for (m = 0; m < ps; ++m) {
                           val = p[m];
                           f = format[m];

                           if (f) {
                               if (f.number && val != null) {
                                   val = +val; // convert to number
                                   if (isNaN(val)) {
                                       val = null;
                                   } else if (val === Infinity) {
                                       val = fakeInfinity;
                                   } else if (val === -Infinity) {
                                       val = -fakeInfinity;
                                   }
                               }

                               if (val == null) {
                                   if (f.required) {
                                       nullify = true;
                                   }

                                   if (f.defaultValue != null) {
                                       val = f.defaultValue;
                                   }
                               }
                           }

                           points[k + m] = val;
                       }
                   }

                   if (nullify) {
                       for (m = 0; m < ps; ++m) {
                           val = points[k + m];
                           if (val != null) {
                               f = format[m];
                               // extract min/max info
                               if (f.autoscale) {
                                   if (f.x) {
                                       updateAxis(s.xaxis, val, val);
                                   }
                                   if (f.y) {
                                       updateAxis(s.yaxis, val, val);
                                   }
                               }
                           }
                           points[k + m] = null;
                       }
                   } else {
                       // a little bit of line specific stuff that
                       // perhaps shouldn't be here, but lacking
                       // better means...
                       if (insertSteps && k > 0 &&
                           points[k - ps] != null &&
                           points[k - ps] !== points[k] &&
                           points[k - ps + 1] !== points[k + 1]) {
                           // copy the point to make room for a middle point
                           for (m = 0; m < ps; ++m) {
                               points[k + ps + m] = points[k + m];
                           }

                           // middle point has same y
                           points[k + 1] = points[k - ps + 1];

                           // we've added a point, better reflect that
                           k += ps;
                       }
                   }
               }
           }

           // give the hooks a chance to run
           for (i = 0; i < series.length; ++i) {
               s = series[i];

               executeHooks(hooks.processDatapoints, [ s, s.datapoints]);
           }

           // second pass: find datamax/datamin for auto-scaling
           for (i = 0; i < series.length; ++i) {
               s = series[i];
               points = s.datapoints.points;
               ps = s.datapoints.pointsize;
               format = s.datapoints.format;

               var xmin = topSentry, ymin = topSentry,
                   xmax = bottomSentry, ymax = bottomSentry;

               for (j = 0; j < points.length; j += ps) {
                   if (points[j] == null) {
                       continue;
                   }

                   for (m = 0; m < ps; ++m) {
                       val = points[j + m];
                       f = format[m];
                       if (!f || f.autoscale === false || val === fakeInfinity || val === -fakeInfinity) {
                           continue;
                       }

                       if (f.x) {
                           if (val < xmin) {
                               xmin = val;
                           }
                           if (val > xmax) {
                               xmax = val;
                           }
                       }
                       if (f.y) {
                           if (val < ymin) {
                               ymin = val;
                           }
                           if (val > ymax) {
                               ymax = val;
                           }
                       }
                   }
               }

               if (s.bars.show) {
                   // make sure we got room for the bar on the dancing floor
                   var delta;

                   switch (s.bars.align) {
                   case "left":
                       delta = 0;
                       break;
                   case "right":
                       delta = -s.bars.barWidth;
                       break;
                   case "center":
                       delta = -s.bars.barWidth / 2;
                       break;
                   default:
                       throw new Error("Invalid bar alignment: " + s.bars.align);
                   }

                   if (s.bars.horizontal) {
                       ymin += delta;
                       ymax += delta + s.bars.barWidth;
                   } else {
                       xmin += delta;
                       xmax += delta + s.bars.barWidth;
                   }
               }

               updateAxis(s.xaxis, xmin, xmax);
               updateAxis(s.yaxis, ymin, ymax);
           }

           $.each(allAxes(), function (_, axis) {
               if (axis.datamin === topSentry) {
                   axis.datamin = null;
               }
               if (axis.datamax === bottomSentry) {
                   axis.datamax = null;
               }
           });
       }

       function setupCanvases() {

           // Make sure the placeholder is clear of everything except canvases
           // from a previous plot in this container that we'll try to re-use.

           placeholder.css("padding", 0) // padding messes up the positioning
               .children(":not(.flot-base,.flot-overlay)").remove();

           if (placeholder.css("position") === "static") {
               placeholder.css("position", "relative"); // for positioning labels and overlay
           }

           surface = new Canvas("flot-base", placeholder);
           overlay = new Canvas("flot-overlay", placeholder); // overlay canvas for interactive features

           ctx = surface.context;
           octx = overlay.context;

           // define which element we're listening for events on
           eventHolder = $(overlay.element).unbind();

           // If we're re-using a plot object, shut down the old one

           var existing = placeholder.data("plot");

           if (existing) {
               existing.shutdown();
               overlay.clear();
           }

           // save in case we get replotted
           placeholder.data("plot", plot);
       }

       function bindEvents() {
           // bind events
           if (options.grid.hoverable) {
               eventHolder.mousemove(onMouseMove);

               // Use bind, rather than .mouseleave, because we officially
               // still support jQuery 1.2.6, which doesn't define a shortcut
               // for mouseenter or mouseleave.  This was a bug/oversight that
               // was fixed somewhere around 1.3.x.  We can return to using
               // .mouseleave when we drop support for 1.2.6.

               eventHolder.bind("mouseleave", onMouseLeave);
           }

           if (options.grid.clickable) {
               eventHolder.click(onClick);
           }

           executeHooks(hooks.bindEvents, [eventHolder]);
       }

       function shutdown() {
           if (redrawTimeout) {
               clearTimeout(redrawTimeout);
           }

           eventHolder.unbind("mousemove", onMouseMove);
           eventHolder.unbind("mouseleave", onMouseLeave);
           eventHolder.unbind("click", onClick);

           executeHooks(hooks.shutdown, [eventHolder]);
       }

       function setTransformationHelpers(axis) {
           // set helper functions on the axis, assumes plot area
           // has been computed already

           function identity(x) { return x; }

           var s, m, t = axis.options.transform || identity,
               it = axis.options.inverseTransform;

           // precompute how much the axis is scaling a point
           // in canvas space
           if (axis.direction === "x") {
               s = axis.scale = plotWidth / Math.abs(t(axis.max) - t(axis.min));
               m = Math.min(t(axis.max), t(axis.min));
           } else {
               s = axis.scale = plotHeight / Math.abs(t(axis.max) - t(axis.min));
               s = -s;
               m = Math.max(t(axis.max), t(axis.min));
           }

           // data point to canvas coordinate
           if (t === identity) { // slight optimization
               axis.p2c = function (p) { return (p - m) * s; };
           } else {
               axis.p2c = function (p) { return (t(p) - m) * s; };
           }
           // canvas coordinate to data point
           if (!it) {
               axis.c2p = function (c) { return m + c / s; };
           } else {
               axis.c2p = function (c) { return it(m + c / s); };
           }
       }

       function measureTickLabels(axis) {

           var opts = axis.options,
               ticks = axis.ticks || [],
               // Label width & height are deprecated; remove in 1.0!
               tickWidth = opts.tickWidth || opts.labelWidth || 0,
               tickHeight = opts.tickHeight || opts.labelHeight || 0,
               maxWidth = tickWidth || axis.direction === "x" ? Math.floor(surface.width / (ticks.length || 1)) : null,
               layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
               font = opts.tickFont || "flot-tick-label tickLabel";

           for (var i = 0; i < ticks.length; ++i) {

               var t = ticks[i];

               if (!t.label) {
                   continue;
               }

               var info = surface.getTextInfo(layer, t.label, font, null, maxWidth);

               tickWidth = Math.max(tickWidth, info.width);
               tickHeight = Math.max(tickHeight, info.height);
           }

           axis.tickWidth = opts.tickWidth || opts.labelWidth || tickWidth;
           axis.tickHeight = opts.tickHeight || opts.labelHeight || tickHeight;

           // Label width/height properties are deprecated; remove in 1.0!

           axis.labelWidth = axis.tickWidth;
           axis.labelHeight = axis.tickHeight;
       }

       ///////////////////////////////////////////////////////////////////////
       // Compute the axis bounding box based on the dimensions of its label
       // and tick labels, then adjust the plotOffset to make room for it.
       //
       // This first phase only considers one dimension per axis; the other
       // dimension depends on the other axes, and will be calculated later.

       function allocateAxisBoxFirstPhase(axis) {

           var contentWidth = axis.tickWidth,
               contentHeight = axis.tickHeight,
               axisOptions = axis.options,
               tickLength = axisOptions.tickLength,
               axisPosition = axisOptions.position,
               axisMargin = options.grid.axisMargin,
               padding = options.grid.labelMargin,
               all = axis.direction === "x" ? xaxes : yaxes,
               innermost;

           // Determine the margin around the axis

           var samePosition = $.grep(all, function(axis) {
               return axis && axis.options.position === axisPosition && axis.reserveSpace;
           });
           if ($.inArray(axis, samePosition) === samePosition.length - 1) {
               axisMargin = 0; // outermost
           }

           // Determine whether the axis is the first (innermost) on its side

           innermost = $.inArray(axis, samePosition) === 0;

           // Determine the length of the tick marks

           if (tickLength == null) {
               if (innermost) {
                   tickLength = "full";
               } else {
                   tickLength = 5;
               }
           }

           if (!isNaN(+tickLength)) {
               padding += +tickLength;
           }

           // Measure the dimensions of the axis label, if it has one

           if (axisOptions.label) {
               var layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
                   font = axisOptions.labelFont || "flot-axis-label axisLabels " + axis.direction + axis.n + "axisLabel",
                   angle = axis.direction === "x" ? 0 : axisOptions.position === "right" ? 90 : -90,
                   labelInfo = surface.getTextInfo(layer, axisOptions.label, font, angle);
               contentWidth += labelInfo.width + axisOptions.labelPadding;
               contentHeight += labelInfo.height + axisOptions.labelPadding;
           }

           // Compute the axis bounding box and update the plot bounds

           if (axis.direction === "x") {
               contentHeight += padding;
               if (axisPosition === "top") {
                   axis.box = { top: plotOffset.top + axisMargin, height: contentHeight };
                   plotOffset.top += contentHeight + axisMargin;
               } else {
                   plotOffset.bottom += contentHeight + axisMargin;
                   axis.box = { top: surface.height - plotOffset.bottom, height: contentHeight };
               }
           } else {
               contentWidth += padding;
               if (axisPosition === "right") {
                   plotOffset.right += contentWidth + axisMargin;
                   axis.box = { left: surface.width - plotOffset.right, width: contentWidth };
               } else {
                   axis.box = { left: plotOffset.left + axisMargin, width: contentWidth };
                   plotOffset.left += contentWidth + axisMargin;
               }
           }

           axis.position = axisPosition;
           axis.tickLength = tickLength;
           axis.box.padding = padding;
           axis.innermost = innermost;
       }

       function allocateAxisBoxSecondPhase(axis) {
           // now that all axis boxes have been placed in one
           // dimension, we can set the remaining dimension coordinates
           if (axis.direction === "x") {
               axis.box.left = plotOffset.left - axis.tickWidth / 2;
               axis.box.width = surface.width - plotOffset.left - plotOffset.right + axis.tickWidth;
           } else {
               axis.box.top = plotOffset.top - axis.tickHeight / 2;
               axis.box.height = surface.height - plotOffset.bottom - plotOffset.top + axis.tickHeight;
           }
       }

       function adjustLayoutForThingsStickingOut() {
           // possibly adjust plot offset to ensure everything stays
           // inside the canvas and isn't clipped off

           var minMargin = options.grid.minBorderMargin,
               margins = { x: 0, y: 0 }, i;

           // check stuff from the plot (FIXME: this should just read
           // a value from the series, otherwise it's impossible to
           // customize)
           if (minMargin == null) {
               minMargin = 0;
               for (i = 0; i < series.length; ++i) {
                   minMargin = Math.max(minMargin, 2 * (series[i].points.radius + series[i].points.lineWidth/2));
               }
           }

           margins.x = margins.y = Math.ceil(minMargin);

           // check axis labels, note we don't check the actual
           // labels but instead use the overall width/height to not
           // jump as much around with replots
           $.each(allAxes(), function (_, axis) {
               var dir = axis.direction;
               if (axis.reserveSpace) {
                   margins[dir] = Math.ceil(Math.max(margins[dir], (dir === "x" ? axis.tickWidth : axis.tickHeight) / 2));
               }
           });

           plotOffset.left = Math.max(margins.x, plotOffset.left);
           plotOffset.right = Math.max(margins.x, plotOffset.right);
           plotOffset.top = Math.max(margins.y, plotOffset.top);
           plotOffset.bottom = Math.max(margins.y, plotOffset.bottom);
       }

       function setupGrid() {
           var axes = allAxes(),
               showGrid = options.grid.show,
               margin = options.grid.margin || 0,
               i, a;

           // Initialize the plot's offset from the edge of the canvas

           for (a in plotOffset) {
               if (Object.prototype.hasOwnProperty.call(plotOffset, a)) {
                   plotOffset[a] = isNumeric(margin) ? margin : margin[a] || 0;
               }
           }

           executeHooks(hooks.processOffset, [plotOffset]);

           // If the grid is visible, add its border width to the offset

           for (a in plotOffset) {
               if(typeof(options.grid.borderWidth) === "object") {
                   plotOffset[a] += showGrid ? options.grid.borderWidth[a] : 0;
               } else {
                   plotOffset[a] += showGrid ? options.grid.borderWidth : 0;
               }
           }

           // 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;

               setRange(axis);
           });

           if (showGrid) {

               var allocatedAxes = $.grep(axes, function (axis) { return axis.reserveSpace; });

               $.each(allocatedAxes, function (_, axis) {
                   // make the ticks
                   setupTickGeneration(axis);
                   setTicks(axis);
                   snapRangeToTicks(axis, axis.ticks);
                   measureTickLabels(axis);
               });

               // with all dimensions calculated, we can compute the
               // axis bounding boxes, start from the outside
               // (reverse order)
               for (i = allocatedAxes.length - 1; i >= 0; --i) {
                   allocateAxisBoxFirstPhase(allocatedAxes[i]);
               }

               // make sure we've got enough space for things that
               // might stick out
               adjustLayoutForThingsStickingOut();

               $.each(allocatedAxes, function (_, axis) {
                   allocateAxisBoxSecondPhase(axis);
               });
           }

           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) {
               setTransformationHelpers(axis);
           });

           if (showGrid) {
               drawAxisLabels();
           }

           insertLegend();
       }

       function setRange(axis) {
           var opts = axis.options,
               min = +(opts.min != null ? opts.min : axis.datamin),
               max = +(opts.max != null ? opts.max : axis.datamax),
               delta = max - min;

           if (delta === 0.0) {
               // degenerate case
               var widen = max === 0 ? 1 : 0.01;

               if (opts.min == null) {
                   min -= widen;
               }
               // always widen max if we couldn't widen min to ensure we
               // don't fall into min == max which doesn't work
               if (opts.max == null || opts.min != null) {
                   max += widen;
               }
           } else {
               // consider autoscaling
               var margin = opts.autoscaleMargin;
               if (margin != null) {
                   if (opts.min == null) {
                       min -= delta * margin;
                       // make sure we don't go below zero if all values
                       // are positive
                       if (min < 0 && axis.datamin != null && axis.datamin >= 0) {
                           min = 0;
                       }
                   }
                   if (opts.max == null) {
                       max += delta * margin;
                       if (max > 0 && axis.datamax != null && axis.datamax <= 0) {
                           max = 0;
                       }
                   }
               }
           }
           axis.min = min;
           axis.max = max;
       }

       function setupTickGeneration(axis) {
           var opts = axis.options;

           // estimate number of ticks
           var noTicks;
           if (isNumeric(opts.ticks) && opts.ticks > 0) {
               noTicks = opts.ticks;
           } 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" ? surface.width : surface.height);
           }

           var delta = (axis.max - axis.min) / noTicks,
               dec = -Math.floor(Math.log(delta) / Math.LN10),
               maxDec = opts.tickDecimals;

           if (maxDec != null && dec > maxDec) {
               dec = maxDec;
           }

           var magn = Math.pow(10, -dec),
               norm = delta / magn, // norm is between 1.0 and 10.0
               size;

           if (norm < 1.5) {
               size = 1;
           } else if (norm < 3) {
               size = 2;
               // special case for 2.5, requires an extra decimal
               if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
                   size = 2.5;
                   ++dec;
               }
           } else if (norm < 7.5) {
               size = 5;
           } else {
               size = 10;
           }

           size *= magn;

           if (opts.minTickSize != null && size < opts.minTickSize) {
               size = opts.minTickSize;
           }

           axis.delta = delta;
           axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec);
           axis.tickSize = opts.tickSize || size;

           // Time mode was moved to a plug-in in 0.8, but since so many people use this
           // we'll add an especially friendly make sure they remembered to include it.

           if (opts.mode === "time" && !axis.tickGenerator) {
               throw new Error("Time mode requires the flot.time plugin.");
           }

           // Flot supports base-10 axes; any other mode else is handled by a plug-in,
           // like flot.time.js.

           if (!axis.tickGenerator) {

               axis.tickGenerator = function (axis) {

                   var ticks = [],
                       start = floorInBase(axis.min, axis.tickSize),
                       i = 0,
                       v = Number.NaN,
                       prev;

                   do {
                       prev = v;
                       v = start + i * axis.tickSize;
                       ticks.push(v);
                       ++i;
                   } while (v < axis.max && v !== prev);
                   return ticks;
               };

               axis.tickFormatter = function (value, axis) {

                   var factor = axis.tickDecimals ? Math.pow(10, axis.tickDecimals) : 1;
                   var formatted = "" + Math.round(value * factor) / factor;

                   // If tickDecimals was specified, ensure that we have exactly that
                   // much precision; otherwise default to the value's own precision.

                   if (axis.tickDecimals != null) {
                       var decimal = formatted.indexOf(".");
                       var precision = decimal === -1 ? 0 : formatted.length - decimal - 1;
                       if (precision < axis.tickDecimals) {
                           return (precision ? formatted : formatted + ".") + ("" + factor).substr(1, axis.tickDecimals - precision);
                       }
                   }

                   return formatted;
               };
           }

           if ($.isFunction(opts.tickFormatter)) {
               axis.tickFormatter = function (v, axis) { return "" + opts.tickFormatter(v, axis); };
           }

           if (opts.alignTicksWithAxis != null) {
               var otherAxis = (axis.direction === "x" ? xaxes : yaxes)[opts.alignTicksWithAxis - 1];
               if (otherAxis && otherAxis.used && otherAxis !== axis) {
                   // consider snapping min/max to outermost nice ticks
                   var niceTicks = axis.tickGenerator(axis);
                   if (niceTicks.length > 0) {
                       if (opts.min == null) {
                           axis.min = Math.min(axis.min, niceTicks[0]);
                       }
                       if (opts.max == null && niceTicks.length > 1) {
                           axis.max = Math.max(axis.max, niceTicks[niceTicks.length - 1]);
                       }
                   }

                   axis.tickGenerator = function (axis) {
                       // copy ticks, scaled to this axis
                       var ticks = [], v, i;
                       for (i = 0; i < otherAxis.ticks.length; ++i) {
                           v = (otherAxis.ticks[i].v - otherAxis.min) / (otherAxis.max - otherAxis.min);
                           v = axis.min + v * (axis.max - axis.min);
                           ticks.push(v);
                       }
                       return ticks;
                   };

                   // we might need an extra decimal since forced
                   // ticks don't necessarily fit naturally
                   if (!axis.mode && opts.tickDecimals == null) {
                       var extraDec = Math.max(0, -Math.floor(Math.log(axis.delta) / Math.LN10) + 1),
                           ts = axis.tickGenerator(axis);

                       // only proceed if the tick interval rounded
                       // with an extra decimal doesn't give us a
                       // zero at end
                       if (!(ts.length > 1 && /\..*0$/.test((ts[1] - ts[0]).toFixed(extraDec)))) {
                           axis.tickDecimals = extraDec;
                       }
                   }
               }
           }
       }

       function setTicks(axis) {
           var oticks = axis.options.ticks, ticks = [];
           if (oticks == null || (isNumeric(oticks) && oticks > 0)) {
               ticks = axis.tickGenerator(axis);
           } else if (oticks) {
               if ($.isFunction(oticks)) {
                   // generate the ticks
                   ticks = oticks(axis);
               } else {
                   ticks = oticks;
               }
           }

           // clean up/labelify the supplied ticks, copy them over
           var i, v;
           axis.ticks = [];
           for (i = 0; i < ticks.length; ++i) {
               var label = null;
               var t = ticks[i];
               if (typeof t === "object") {
                   v = +t[0];
                   if (t.length > 1) {
                       label = t[1];
                   }
               } else {
                   v = +t;
               }
               if (label == null) {
                   label = axis.tickFormatter(v, axis);
               }
               if (!isNaN(v)) {
                   axis.ticks.push({ v: v, label: label });
               }
           }
       }

       function snapRangeToTicks(axis, ticks) {
           if (axis.options.autoscaleMargin && ticks.length > 0) {
               // snap to ticks
               if (axis.options.min == null) {
                   axis.min = Math.min(axis.min, ticks[0].v);
               }
               if (axis.options.max == null && ticks.length > 1) {
                   axis.max = Math.max(axis.max, ticks[ticks.length - 1].v);
               }
           }
       }

       function draw() {

           surface.clear();

           executeHooks(hooks.drawBackground, [ctx]);

           var grid = options.grid;

           // draw background, if any
           if (grid.show && grid.backgroundColor) {
               drawBackground();
           }

           if (grid.show && !grid.aboveData) {
               drawGrid();
           }

           for (var i = 0; i < series.length; ++i) {
               executeHooks(hooks.drawSeries, [ctx, series[i]]);
               drawSeries(series[i]);
           }

           executeHooks(hooks.draw, [ctx]);

           if (grid.show && grid.aboveData) {
               drawGrid();
           }

           surface.render();

           // A draw implies that either the axes or data have changed, so we
           // should probably update the overlay highlights as well.

           triggerRedrawOverlay();
       }

       function extractRange(ranges, coord) {
           var axis, from, to, key, axes = allAxes();

           for (var i = 0; i < axes.length; ++i) {
               axis = axes[i];
               if (axis.direction === coord) {
                   key = coord + axis.n + "axis";
                   if (!ranges[key] && axis.n === 1) {
                       key = coord + "axis"; // support x1axis as xaxis
                   }
                   if (ranges[key]) {
                       from = ranges[key].from;
                       to = ranges[key].to;
                       break;
                   }
               }
           }

           // backwards-compat stuff - to be removed in future
           if (!ranges[key]) {
               axis = coord === "x" ? xaxes[0] : yaxes[0];
               from = ranges[coord + "1"];
               to = ranges[coord + "2"];
           }

           // auto-reverse as an added bonus
           if (from != null && to != null && from > to) {
               var tmp = from;
               from = to;
               to = tmp;
           }

           return { from: from, to: to, axis: axis };
       }

       function drawBackground() {
           ctx.save();
           ctx.translate(plotOffset.left, plotOffset.top);

           ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)");
           ctx.fillRect(0, 0, plotWidth, plotHeight);
           ctx.restore();
       }

       function drawGrid() {
           var i, axes, bw, bc;

           ctx.save();
           ctx.translate(plotOffset.left, plotOffset.top);

           // draw markings
           var markings = options.grid.markings;
           if (markings) {
               if ($.isFunction(markings)) {
                   axes = plot.getAxes();
                   // xmin etc. is backwards compatibility, to be
                   // removed in the future
                   axes.xmin = axes.xaxis.min;
                   axes.xmax = axes.xaxis.max;
                   axes.ymin = axes.yaxis.min;
                   axes.ymax = axes.yaxis.max;

                   markings = markings(axes);
               }

               for (i = 0; i < markings.length; ++i) {
                   var m = markings[i],
                       xrange = extractRange(m, "x"),
                       yrange = extractRange(m, "y");

                   // fill in missing
                   if (xrange.from == null) {
                       xrange.from = xrange.axis.min;
                   }
                   if (xrange.to == null) {
                       xrange.to = xrange.axis.max;
                   }
                   if (yrange.from == null) {
                       yrange.from = yrange.axis.min;
                   }
                   if (yrange.to == null) {
                       yrange.to = yrange.axis.max;
                   }

                   // clip
                   if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max ||
                       yrange.to < yrange.axis.min || yrange.from > yrange.axis.max) {
                       continue;
                   }

                   xrange.from = Math.max(xrange.from, xrange.axis.min);
                   xrange.to = Math.min(xrange.to, xrange.axis.max);
                   yrange.from = Math.max(yrange.from, yrange.axis.min);
                   yrange.to = Math.min(yrange.to, yrange.axis.max);

                   if (xrange.from === xrange.to && yrange.from === yrange.to) {
                       continue;
                   }

                   // then draw
                   xrange.from = xrange.axis.p2c(xrange.from);
                   xrange.to = xrange.axis.p2c(xrange.to);
                   yrange.from = yrange.axis.p2c(yrange.from);
                   yrange.to = yrange.axis.p2c(yrange.to);

                   if (xrange.from === xrange.to || yrange.from === yrange.to) {
                       // draw line
                       ctx.beginPath();
                       ctx.strokeStyle = m.color || options.grid.markingsColor;
                       ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth;
                       ctx.moveTo(xrange.from, yrange.from);
                       ctx.lineTo(xrange.to, yrange.to);
                       ctx.stroke();
                   } else {
                       // fill area
                       ctx.fillStyle = m.color || options.grid.markingsColor;
                       ctx.fillRect(xrange.from, yrange.to,
                                    xrange.to - xrange.from,
                                    yrange.from - yrange.to);
                   }
               }
           }

           // draw the ticks
           axes = allAxes();
           bw = options.grid.borderWidth;

           for (var j = 0; j < axes.length; ++j) {
               var axis = axes[j], box = axis.box,
                   t = axis.tickLength, x, y, xoff, yoff;
               if (!axis.show || axis.ticks.length === 0) {
                   continue;
               }

               ctx.lineWidth = 1;

               // find the edges
               if (axis.direction === "x") {
                   x = 0;
                   if (t === "full") {
                       y = (axis.position === "top" ? 0 : plotHeight);
                   } else {
                       y = box.top - plotOffset.top + (axis.position === "top" ? box.height : 0);
                   }
               } else {
                   y = 0;
                   if (t === "full") {
                       x = (axis.position === "left" ? 0 : plotWidth);
                   } else {
                       x = box.left - plotOffset.left + (axis.position === "left" ? box.width : 0);
                   }
               }

               // draw tick bar
               if (!axis.innermost) {
                   ctx.strokeStyle = axis.options.color;
                   ctx.beginPath();
                   xoff = yoff = 0;
                   if (axis.direction === "x") {
                       xoff = plotWidth + 1;
                   } else {
                       yoff = plotHeight + 1;
                   }

                   if (ctx.lineWidth === 1) {
                       if (axis.direction === "x") {
                           y = Math.floor(y) + 0.5;
                       } else {
                           x = Math.floor(x) + 0.5;
                       }
                   }

                   ctx.moveTo(x, y);
                   ctx.lineTo(x + xoff, y + yoff);
                   ctx.stroke();
               }

               // draw ticks

               ctx.strokeStyle = axis.options.tickColor;

               ctx.beginPath();
               for (i = 0; i < axis.ticks.length; ++i) {
                   var v = axis.ticks[i].v;

                   xoff = yoff = 0;

                   if (isNaN(v) || v < axis.min || v > axis.max || (
                       // skip those lying on the axes if we got a border
                       t === "full" && ((typeof bw === "object" && bw[axis.position] > 0) || bw > 0) &&
                       (v === axis.min || v === axis.max)
                   )) {
                       continue;
                   }

                   if (axis.direction === "x") {
                       x = axis.p2c(v);
                       yoff = t === "full" ? -plotHeight : t;

                       if (axis.position === "top") {
                           yoff = -yoff;
                       }
                   } else {
                       y = axis.p2c(v);
                       xoff = t === "full" ? -plotWidth : t;

                       if (axis.position === "left") {
                           xoff = -xoff;
                       }
                   }

                   if (ctx.lineWidth === 1) {
                       if (axis.direction === "x") {
                           x = Math.floor(x) + 0.5;
                       } else {
                           y = Math.floor(y) + 0.5;
                       }
                   }

                   ctx.moveTo(x, y);
                   ctx.lineTo(x + xoff, y + yoff);
               }

               ctx.stroke();
           }

           // draw border
           if (bw) {
               // If either borderWidth or borderColor is an object, then draw the border
               // line by line instead of as one rectangle
               bc = options.grid.borderColor;
               if(typeof bw === "object" || typeof bc === "object") {
                   if (typeof bw !== "object") {
                       bw = {top: bw, right: bw, bottom: bw, left: bw};
                   }
                   if (typeof bc !== "object") {
                       bc = {top: bc, right: bc, bottom: bc, left: bc};
                   }

                   if (bw.top > 0) {
                       ctx.strokeStyle = bc.top;
                       ctx.lineWidth = bw.top;
                       ctx.beginPath();
                       ctx.moveTo(0 - bw.left, 0 - bw.top/2);
                       ctx.lineTo(plotWidth, 0 - bw.top/2);
                       ctx.stroke();
                   }

                   if (bw.right > 0) {
                       ctx.strokeStyle = bc.right;
                       ctx.lineWidth = bw.right;
                       ctx.beginPath();
                       ctx.moveTo(plotWidth + bw.right / 2, 0 - bw.top);
                       ctx.lineTo(plotWidth + bw.right / 2, plotHeight);
                       ctx.stroke();
                   }

                   if (bw.bottom > 0) {
                       ctx.strokeStyle = bc.bottom;
                       ctx.lineWidth = bw.bottom;
                       ctx.beginPath();
                       ctx.moveTo(plotWidth + bw.right, plotHeight + bw.bottom / 2);
                       ctx.lineTo(0, plotHeight + bw.bottom / 2);
                       ctx.stroke();
                   }

                   if (bw.left > 0) {
                       ctx.strokeStyle = bc.left;
                       ctx.lineWidth = bw.left;
                       ctx.beginPath();
                       ctx.moveTo(0 - bw.left/2, plotHeight + bw.bottom);
                       ctx.lineTo(0- bw.left/2, 0);
                       ctx.stroke();
                   }
               } else {
                   ctx.lineWidth = bw;
                   ctx.strokeStyle = options.grid.borderColor;
                   ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw);
               }
           }

           ctx.restore();
       }

       function drawAxisLabels() {

           $.each(allAxes(), function (_, axis) {
               if (!axis.show || axis.ticks.length === 0) {
                   return;
               }

               var box = axis.box,
                   axisOptions = axis.options,
                   layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
                   labelFont = axisOptions.labelFont || "flot-axis-label axisLabels " + axis.direction + axis.n + "axisLabel",
                   tickFont = axisOptions.tickFont || "flot-tick-label tickLabel",
                   tick, x, y, halign, valign;

               surface.removeText(layer);

               if (axisOptions.label) {
                   if (axis.direction === "x") {
                       if (axisOptions.position === "top") {
                           surface.addText(layer, box.left + box.width / 2, box.top, axisOptions.label, labelFont, 0, null, "center", "top");
                       } else {
                           surface.addText(layer, box.left + box.width / 2, box.top + box.height, axisOptions.label, labelFont, 0, null, "center", "bottom");
                       }
                   } else {
                       if (axisOptions.position === "right") {
                           surface.addText(layer, box.left + box.width, box.top + box.height / 2, axisOptions.label, labelFont, 90, null, "right", "middle");
                       } else {
                           surface.addText(layer, box.left, box.top + box.height / 2, axisOptions.label, labelFont, -90, null, "left", "middle");
                       }
                   }
               }

               // Add labels for the ticks on this axis

               for (var i = 0; i < axis.ticks.length; ++i) {

                   tick = axis.ticks[i];
                   if (!tick.label || tick.v < axis.min || tick.v > axis.max) {
                       continue;
                   }

                   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";
                       }
                   } 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;
                       }
                   }

                   surface.addText(layer, x, y, tick.label, tickFont, null, null, halign, valign);
               }
           });
       }

       function drawSeries(series) {
           if (series.lines.show) {
               drawSeriesLines(series);
           }
           if (series.bars.show) {
               drawSeriesBars(series);
           }
           if (series.points.show) {
               drawSeriesPoints(series);
           }
       }

       function drawSeriesLines(series) {
           function plotLine(datapoints, xoffset, yoffset, axisx, axisy) {
               var points = datapoints.points,
                   ps = datapoints.pointsize,
                   prevx = null, prevy = null;

               ctx.beginPath();
               for (var i = ps; i < points.length; i += ps) {
                   var x1 = points[i - ps], y1 = points[i - ps + 1],
                       x2 = points[i], y2 = points[i + 1];

                   if (x1 == null || x2 == null) {
                       continue;
                   }

                   // clip with ymin
                   if (y1 <= y2 && y1 < axisy.min) {
                       if (y2 < axisy.min) {
                           continue;   // line segment is outside
                       }
                       // compute new intersection point
                       x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y1 = axisy.min;
                   } else if (y2 <= y1 && y2 < axisy.min) {
                       if (y1 < axisy.min) {
                           continue;
                       }
                       x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y2 = axisy.min;
                   }

                   // clip with ymax
                   if (y1 >= y2 && y1 > axisy.max) {
                       if (y2 > axisy.max) {
                           continue;
                       }
                       x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y1 = axisy.max;
                   } else if (y2 >= y1 && y2 > axisy.max) {
                       if (y1 > axisy.max) {
                           continue;
                       }
                       x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y2 = axisy.max;
                   }

                   // clip with xmin
                   if (x1 <= x2 && x1 < axisx.min) {
                       if (x2 < axisx.min) {
                           continue;
                       }
                       y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x1 = axisx.min;
                   } else if (x2 <= x1 && x2 < axisx.min) {
                       if (x1 < axisx.min) {
                           continue;
                       }
                       y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x2 = axisx.min;
                   }

                   // clip with xmax
                   if (x1 >= x2 && x1 > axisx.max) {
                       if (x2 > axisx.max) {
                           continue;
                       }
                       y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x1 = axisx.max;
                   } else if (x2 >= x1 && x2 > axisx.max) {
                       if (x1 > axisx.max) {
                           continue;
                       }
                       y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x2 = axisx.max;
                   }

                   if (x1 !== prevx || y1 !== prevy) {
                       ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
                   }

                   prevx = x2;
                   prevy = y2;
                   ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
               }
               ctx.stroke();
           }

           function plotLineArea(datapoints, axisx, axisy) {
               var points = datapoints.points,
                   ps = datapoints.pointsize,
                   bottom = Math.min(Math.max(0, axisy.min), axisy.max),
                   i = 0, areaOpen = false,
                   ypos = 1, segmentStart = 0, segmentEnd = 0;

               // we process each segment in two turns, first forward
               // direction to sketch out top, then once we hit the
               // end we go backwards to sketch the bottom
               while (true) {
                   if (ps > 0 && i > points.length + ps) {
                       break;
                   }

                   i += ps; // ps is negative if going backwards

                   var x1 = points[i - ps],
                       y1 = points[i - ps + ypos],
                       x2 = points[i], y2 = points[i + ypos];

                   if (areaOpen) {
                       if (ps > 0 && x1 != null && x2 == null) {
                           // at turning point
                           segmentEnd = i;
                           ps = -ps;
                           ypos = 2;
                           continue;
                       }

                       if (ps < 0 && i === segmentStart + ps) {
                           // done with the reverse sweep
                           ctx.fill();
                           areaOpen = false;
                           ps = -ps;
                           ypos = 1;
                           i = segmentStart = segmentEnd + ps;
                           continue;
                       }
                   }

                   if (x1 == null || x2 == null) {
                       continue;
                   }

                   // clip x values

                   // clip with xmin
                   if (x1 <= x2 && x1 < axisx.min) {
                       if (x2 < axisx.min) {
                           continue;
                       }
                       y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x1 = axisx.min;
                   } else if (x2 <= x1 && x2 < axisx.min) {
                       if (x1 < axisx.min) {
                           continue;
                       }
                       y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x2 = axisx.min;
                   }

                   // clip with xmax
                   if (x1 >= x2 && x1 > axisx.max) {
                       if (x2 > axisx.max) {
                           continue;
                       }
                       y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x1 = axisx.max;
                   } else if (x2 >= x1 && x2 > axisx.max) {
                       if (x1 > axisx.max) {
                           continue;
                       }
                       y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                       x2 = axisx.max;
                   }

                   if (!areaOpen) {
                       // open area
                       ctx.beginPath();
                       ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom));
                       areaOpen = true;
                   }

                   // now first check the case where both is outside
                   if (y1 >= axisy.max && y2 >= axisy.max) {
                       ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
                       ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
                       continue;
                   } else if (y1 <= axisy.min && y2 <= axisy.min) {
                       ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
                       ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
                       continue;
                   }

                   // else it's a bit more complicated, there might
                   // be a flat maxed out rectangle first, then a
                   // triangular cutout or reverse; to find these
                   // keep track of the current x values
                   var x1old = x1, x2old = x2;

                   // clip the y values, without shortcutting, we
                   // go through all cases in turn

                   // clip with ymin
                   if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
                       x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y1 = axisy.min;
                   } else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
                       x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y2 = axisy.min;
                   }

                   // clip with ymax
                   if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
                       x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y1 = axisy.max;
                   } else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
                       x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                       y2 = axisy.max;
                   }

                   // if the x value was changed we got a rectangle
                   // to fill
                   if (x1 !== x1old) {
                       ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1));
                       // it goes to (x1, y1), but we fill that below
                   }

                   // fill triangular section, this sometimes result
                   // in redundant points if (x1, y1) hasn't changed
                   // from previous line to, but we just ignore that
                   ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1));
                   ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));

                   // fill the other rectangle if it's there
                   if (x2 !== x2old) {
                       ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
                       ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2));
                   }
               }
           }

           ctx.save();
           ctx.translate(plotOffset.left, plotOffset.top);
           ctx.lineJoin = "round";

           var lw = series.lines.lineWidth,
               sw = series.shadowSize;
           // FIXME: consider another form of shadow when filling is turned on
           if (lw > 0 && sw > 0) {
               // draw shadow as a thick and thin line with transparency
               ctx.lineWidth = sw;
               ctx.strokeStyle = "rgba(0,0,0,0.1)";
               // position shadow at angle from the mid of line
               var angle = Math.PI/18;
               plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis);
               ctx.lineWidth = sw/2;
               plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis);
           }

           ctx.lineWidth = lw;
           ctx.strokeStyle = series.color;
           var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight);
           if (fillStyle) {
               ctx.fillStyle = fillStyle;
               plotLineArea(series.datapoints, series.xaxis, series.yaxis);
           }

           if (lw > 0) {
               plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis);
           }
           ctx.restore();
       }

       function drawSeriesPoints(series) {
           function plotPoints(datapoints, radius, fillStyle, offset, shadow, axisx, axisy, symbol) {
               var points = datapoints.points, ps = datapoints.pointsize;

               for (var i = 0; i < points.length; i += ps) {
                   var x = points[i], y = points[i + 1];
                   if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
                       continue;
                   }

                   ctx.beginPath();
                   x = axisx.p2c(x);
                   y = axisy.p2c(y) + offset;
                   if (symbol === "circle") {
                       ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
                   } else {
                       symbol(ctx, x, y, radius, shadow);
                   }
                   ctx.closePath();

                   if (fillStyle) {
                       ctx.fillStyle = fillStyle;
                       ctx.fill();
                   }
                   ctx.stroke();
               }
           }

           ctx.save();
           ctx.translate(plotOffset.left, plotOffset.top);

           var lw = series.points.lineWidth,
               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;
               ctx.lineWidth = w;
               ctx.strokeStyle = "rgba(0,0,0,0.1)";
               plotPoints(series.datapoints, radius, null, w + w/2, true,
                          series.xaxis, series.yaxis, symbol);

               ctx.strokeStyle = "rgba(0,0,0,0.2)";
               plotPoints(series.datapoints, radius, null, w/2, true,
                          series.xaxis, series.yaxis, symbol);
           }

           ctx.lineWidth = lw;
           ctx.strokeStyle = series.points.strokeColor || series.color;
           plotPoints(series.datapoints, radius,
                      getFillStyle(series.points, series.color), 0, false,
                      series.xaxis, series.yaxis, symbol);
           ctx.restore();
       }

       function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
           var left, right, bottom, top,
               drawLeft, drawRight, drawTop, drawBottom,
               tmp;

           // in horizontal mode, we start the bar from the left
           // instead of from the bottom so it appears to be
           // horizontal rather than vertical
           if (horizontal) {
               drawBottom = drawRight = drawTop = true;
               drawLeft = false;
               left = b;
               right = x;
               top = y + barLeft;
               bottom = y + barRight;

               // account for negative bars
               if (right < left) {
                   tmp = right;
                   right = left;
                   left = tmp;
                   drawLeft = true;
                   drawRight = false;
               }
           } else {
               drawLeft = drawRight = drawTop = true;
               drawBottom = false;
               left = x + barLeft;
               right = x + barRight;
               bottom = b;
               top = y;

               // account for negative bars
               if (top < bottom) {
                   tmp = top;
                   top = bottom;
                   bottom = tmp;
                   drawBottom = true;
                   drawTop = false;
               }
           }

           // clip
           if (right < axisx.min || left > axisx.max ||
               top < axisy.min || bottom > axisy.max) {
               return;
           }

           if (left < axisx.min) {
               left = axisx.min;
               drawLeft = false;
           }

           if (right > axisx.max) {
               right = axisx.max;
               drawRight = false;
           }

           if (bottom < axisy.min) {
               bottom = axisy.min;
               drawBottom = false;
           }

           if (top > axisy.max) {
               top = axisy.max;
               drawTop = false;
           }

           left = axisx.p2c(left);
           bottom = axisy.p2c(bottom);
           right = axisx.p2c(right);
           top = axisy.p2c(top);

           // fill the bar
           if (fillStyleCallback) {
               c.beginPath();
               c.moveTo(left, bottom);
               c.lineTo(left, top);
               c.lineTo(right, top);
               c.lineTo(right, bottom);
               c.fillStyle = fillStyleCallback(bottom, top);
               c.fill();
           }

           // draw outline
           if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) {
               c.beginPath();

               // FIXME: inline moveTo is buggy with excanvas
               c.moveTo(left, bottom + offset);
               if (drawLeft) {
                   c.lineTo(left, top + offset);
               } else {
                   c.moveTo(left, top + offset);
               }
               if (drawTop) {
                   c.lineTo(right, top + offset);
               } else {
                   c.moveTo(right, top + offset);
               }
               if (drawRight) {
                   c.lineTo(right, bottom + offset);
               } else {
                   c.moveTo(right, bottom + offset);
               }
               if (drawBottom) {
                   c.lineTo(left, bottom + offset);
               } else {
                   c.moveTo(left, bottom + offset);
               }
               c.stroke();
           }
       }

       function drawSeriesBars(series) {
           function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) {
               var points = datapoints.points, ps = datapoints.pointsize;

               for (var i = 0; i < points.length; i += ps) {
                   if (points[i] == null) {
                       continue;
                   }
                   drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
               }
           }

           ctx.save();
           ctx.translate(plotOffset.left, plotOffset.top);

           // FIXME: figure out a way to add shadows (for instance along the right edge)
           ctx.lineWidth = series.bars.lineWidth;
           ctx.strokeStyle = series.color;

           var barLeft;

           switch (series.bars.align) {
           case "left":
               barLeft = 0;
               break;
           case "right":
               barLeft = -series.bars.barWidth;
               break;
           case "center":
               barLeft = -series.bars.barWidth / 2;
               break;
           default:
               throw new Error("Invalid bar alignment: " + series.bars.align);
           }

           var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;
           plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis);
           ctx.restore();
       }

       function getFillStyle(filloptions, seriesColor, bottom, top) {
           var fill = filloptions.fill;
           if (!fill) {
               return null;
           }

           if (filloptions.fillColor) {
               return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
           }

           var c = $.color.parse(seriesColor);
           c.a = isNumeric(fill) ? fill : 0.4;
           c.normalize();
           return c.toString();
       }

       function insertLegend() {

           placeholder.find(".legend").remove();

           if (!options.legend.show) {
               return;
           }

           var fragments = [], entries = [], rowStarted = false,
               lf = options.legend.labelFormatter, s, label, i;

           // Build a list of legend entries, with each having a label and a color

           for (i = 0; i < series.length; ++i) {
               s = series[i];
               if (s.label) {
                   label = lf ? lf(s.label, s) : s.label;
                   if (label) {
                       entries.push({
                           label: label,
                           color: s.color
                       });
                   }
               }
           }

           // Sort the legend using either the default or a custom comparator

           if (options.legend.sorted) {
               if ($.isFunction(options.legend.sorted)) {
                   entries.sort(options.legend.sorted);
               } else if (options.legend.sorted === "reverse") {
                   entries.reverse();
               } else {
                   var ascending = options.legend.sorted !== "descending";
                   entries.sort(function(a, b) {
                       return a.label === b.label ? 0 : (
                           (a.label < b.label) !== ascending ? 1 : -1   // Logical XOR
                       );
                   });
               }
           }

           // Generate markup for the list of entries, in their final order

           for (i = 0; i < entries.length; ++i) {

               var entry = entries[i];

               if (i % options.legend.noColumns === 0) {
                   if (rowStarted) {
                       fragments.push("</tr>");
                   }
                   fragments.push("<tr>");
                   rowStarted = true;
               }

               fragments.push(

"<td class='legendColorBox'>

</td>" +

                   "<td class='legendLabel'>" + entry.label + "</td>"
               );
           }

           if (rowStarted) {
               fragments.push("</tr>");
           }

           if (fragments.length === 0) {
               return;
           }

var table = "" + fragments.join("") + "

";

           if (options.legend.container != null) {
               $(options.legend.container).html(table);
           } else {
               var pos = "",
                   p = options.legend.position,
                   m = options.legend.margin;
               if (m[0] == null) {
                   m = [m, m];
               }
               if (p.charAt(0) === "n") {
                   pos += "top:" + (m[1] + plotOffset.top) + "px;";
               } else if (p.charAt(0) === "s") {
                   pos += "bottom:" + (m[1] + plotOffset.bottom) + "px;";
               }
               if (p.charAt(1) === "e") {
                   pos += "right:" + (m[0] + plotOffset.right) + "px;";
               } else if (p.charAt(1) === "w") {
                   pos += "left:" + (m[0] + plotOffset.left) + "px;";
               }

var legend = $("

" + table.replace("style='", "style='position:absolute;" + pos +";") + "

").appendTo(placeholder);

               if (options.legend.backgroundOpacity !== 0.0) {
                   // put in the transparent background
                   // separately to avoid blended labels and
                   // label boxes
                   var c = options.legend.backgroundColor;
                   if (c == null) {
                       c = options.grid.backgroundColor;
                       if (c && typeof c === "string") {
                           c = $.color.parse(c);
                       } else {
                           c = $.color.extract(legend, "background-color");
                       }
                       c.a = 1;
                       c = c.toString();
                   }
                   var div = legend.children();

$("

").prependTo(legend).css("opacity", options.legend.backgroundOpacity);

               }
           }
       }

       // interactive features

       var highlights = [],
           redrawTimeout = null;

       // returns the data item the mouse is over, or null if none is found
       function findNearbyItem(mouseX, mouseY, seriesFilter) {
           var maxDistance = options.grid.mouseActiveRadius,
               smallestDistance = maxDistance * maxDistance + 1,
               item = null, i, j, ps;

           for (i = series.length - 1; i >= 0; --i) {
               if (!seriesFilter(series[i])) {
                   continue;
               }

               var s = series[i],
                   axisx = s.xaxis,
                   axisy = s.yaxis,
                   points = s.datapoints.points,
                   mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
                   my = axisy.c2p(mouseY),
                   maxx = maxDistance / axisx.scale,
                   maxy = maxDistance / axisy.scale,
                   x, y;

               ps = s.datapoints.pointsize;
               // with inverse transforms, we can't use the maxx/maxy
               // optimization, sadly
               if (axisx.options.inverseTransform) {
                   maxx = Number.MAX_VALUE;
               }
               if (axisy.options.inverseTransform) {
                   maxy = Number.MAX_VALUE;
               }

               if (s.lines.show || s.points.show) {
                   for (j = 0; j < points.length; j += ps) {

                       x = points[j];
                       y = points[j + 1];

                       if (x == null) {
                           continue;
                       }

                       // For points and lines, the cursor must be within a
                       // certain distance to the data point
                       if (x - mx > maxx || x - mx < -maxx ||
                           y - my > maxy || y - my < -maxy) {
                           continue;
                       }

                       // We have to calculate distances in pixels, not in
                       // data units, because the scales of the axes may be different
                       var dx = Math.abs(axisx.p2c(x) - mouseX),
                           dy = Math.abs(axisy.p2c(y) - mouseY),
                           dist = dx * dx + dy * dy; // we save the sqrt

                       // use <= to ensure last point takes precedence
                       // (last generally means on top of)
                       if (dist < smallestDistance) {
                           smallestDistance = dist;
                           item = [i, j / ps];
                       }
                   }
               }

               if (s.bars.show && !item) { // no other point can be nearby
                   var barLeft = s.bars.align === "left" ? 0 : -s.bars.barWidth/2,
                       barRight = barLeft + s.bars.barWidth;

                   for (j = 0; j < points.length; j += ps) {
                       x = points[j];
                       y = points[j + 1];
                       var b = points[j + 2];
                       if (x == null) {
                           continue;
                       }

                       // for a bar graph, the cursor must be inside the bar
                       if (series[i].bars.horizontal ?
                           (mx <= Math.max(b, x) && mx >= Math.min(b, x) &&
                            my >= y + barLeft && my <= y + barRight) :
                           (mx >= x + barLeft && mx <= x + barRight &&
                            my >= Math.min(b, y) && my <= Math.max(b, y))) {
                           item = [i, j / ps];
                       }
                   }
               }
           }

           if (item) {
               i = item[0];
               j = item[1];
               ps = series[i].datapoints.pointsize;

               return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps),
                        dataIndex: j,
                        series: series[i],
                        seriesIndex: i };
           }

           return null;
       }

       function onMouseMove(e) {
           if (options.grid.hoverable) {
               triggerClickHoverEvent("plothover", e,
                                      function (s) { return s.hoverable !== false; });
           }
       }

       function onMouseLeave(e) {
           if (options.grid.hoverable) {
               triggerClickHoverEvent("plothover", e,
                                      function () { return false; });
           }
       }

       function onClick(e) {
           triggerClickHoverEvent("plotclick", e,
                                  function (s) { return s.clickable !== false; });
       }

       // trigger click or hover event (they send the same parameters
       // so we share their code)
       function triggerClickHoverEvent(eventname, event, seriesFilter) {
           var offset = eventHolder.offset(),
               canvasX = event.pageX - offset.left - plotOffset.left,
               canvasY = event.pageY - offset.top - plotOffset.top,
           pos = canvasToAxisCoords({ left: canvasX, top: canvasY });

           pos.pageX = event.pageX;
           pos.pageY = event.pageY;

           var item = findNearbyItem(canvasX, canvasY, seriesFilter);

           if (item) {
               // fill in mouse pos for any listeners out there
               item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left, 10);
               item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top, 10);
           }

           if (options.grid.autoHighlight) {
               // clear auto-highlights
               for (var i = 0; i < highlights.length; ++i) {
                   var h = highlights[i];
                   if (h.auto === eventname && !(
                       item && h.series === item.series &&
                       h.point[0] === item.datapoint[0] &&
                       h.point[1] === item.datapoint[1]
                   )) {
                       unhighlight(h.series, h.point);
                   }
               }

               if (item) {
                   highlight(item.series, item.datapoint, eventname);
               }
           }

           placeholder.trigger(eventname, [ pos, item ]);
       }

       function triggerRedrawOverlay() {
           var t = options.interaction.redrawOverlayInterval;
           if (t === -1) {      // skip event queue
               drawOverlay();
               return;
           }

           if (!redrawTimeout) {
               redrawTimeout = setTimeout(drawOverlay, t);
           }
       }

       function drawOverlay() {
           redrawTimeout = null;

           // draw highlights
           octx.save();
           overlay.clear();
           octx.translate(plotOffset.left, plotOffset.top);

           var i, hi;
           for (i = 0; i < highlights.length; ++i) {
               hi = highlights[i];

               if (hi.series.bars.show) {
                   drawBarHighlight(hi.series, hi.point);
               } else {
                   drawPointHighlight(hi.series, hi.point);
               }
           }
           octx.restore();

           executeHooks(hooks.drawOverlay, [octx]);
       }

       function highlight(s, point, auto) {
           if (isNumeric(s)) {
               s = series[s];
           }

           if (isNumeric(point)) {
               var ps = s.datapoints.pointsize;
               point = s.datapoints.points.slice(ps * point, ps * (point + 1));
           }

           var i = indexOfHighlight(s, point);
           if (i === -1) {
               highlights.push({ series: s, point: point, auto: auto });
               triggerRedrawOverlay();
           } else if (!auto) {
               highlights[i].auto = false;
           }
       }

       function unhighlight(s, point) {
           if (s == null && point == null) {
               highlights = [];
               triggerRedrawOverlay();
               return;
           }

           if (isNumeric(s)) {
               s = series[s];
           }

           if (isNumeric(point)) {
               var ps = s.datapoints.pointsize;
               point = s.datapoints.points.slice(ps * point, ps * (point + 1));
           }

           var i = indexOfHighlight(s, point);
           if (i !== -1) {
               highlights.splice(i, 1);
               triggerRedrawOverlay();
           }
       }

       function indexOfHighlight(s, p) {
           for (var i = 0; i < highlights.length; ++i) {
               var h = highlights[i];
               if (h.series === s && h.point[0] === p[0] && h.point[1] === p[1]) {
                   return i;
               }
           }
           return -1;
       }

       function drawPointHighlight(series, point) {
           var x = point[0], y = point[1],
               axisx = series.xaxis, axisy = series.yaxis,
               highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale("a", 0.5).toString();

           if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
               return;
           }

           var pointRadius = series.points.radius + series.points.lineWidth / 2;
           octx.lineWidth = pointRadius;
           octx.strokeStyle = highlightColor;
           var radius = 1.5 * pointRadius;
           x = axisx.p2c(x);
           y = axisy.p2c(y);

           octx.beginPath();
           if (series.points.symbol === "circle") {
               octx.arc(x, y, radius, 0, 2 * Math.PI, false);
           } else {
               series.points.symbol(octx, x, y, radius, false);
           }
           octx.closePath();
           octx.stroke();
       }

       function drawBarHighlight(series, point) {
           var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale("a", 0.5).toString(),
               fillStyle = highlightColor,
               barLeft = series.bars.align === "left" ? 0 : -series.bars.barWidth/2;

           octx.lineWidth = series.bars.lineWidth;
           octx.strokeStyle = highlightColor;

           drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth,
                   0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);
       }

       function getColorOrGradient(spec, bottom, top, defaultColor) {
           if (typeof spec === "string") {
               return spec;
           } else {
               // assume this is a gradient spec; IE currently only
               // supports a simple vertical gradient properly, so that's
               // what we support too
               var gradient = ctx.createLinearGradient(0, top, 0, bottom);

               for (var i = 0, l = spec.colors.length; i < l; ++i) {
                   var c = spec.colors[i];
                   if (typeof c !== "string") {
                       var co = $.color.parse(defaultColor);
                       if (c.brightness != null) {
                           co = co.scale("rgb", c.brightness);
                       }
                       if (c.opacity != null) {
                           co.a *= c.opacity;
                       }
                       c = co.toString();
                   }
                   gradient.addColorStop(i / (l - 1), c);
               }

               return gradient;
           }
       }
   }

   // Add the plot function to the top level of the jQuery object

   $.plot = function(placeholder, data, options) {
       //var t0 = new Date();
       var plot = new Plot($(placeholder), data, options, $.plot.plugins);
       //(window.console ? console.log : alert)("time used (msecs): " + ((new Date()).getTime() - t0.getTime()));
       return plot;
   };

   $.plot.version = "0.9.0-alpha";

   $.plot.plugins = [];

   // Also add the plot function as a chainable property

   $.fn.plot = function(data, options) {
       return this.each(function() {
           $.plot(this, data, options);
       });
   };

   // round to nearby lower multiple of base
   function floorInBase(n, base) {
       return base * Math.floor(n / base);
   }

})(jQuery);

@@ Line 1: / Line 1: @@
-/* Javascript plotting library for jQuery, version 0.8.2-alpha.
+/* Javascript plotting library for jQuery, version 0.9.0-alpha.
 Copyright (c) 2007-2013 IOLA and Ole Laursen.
@@ Line 6: / Line 6: @@
 */
-// first an inline dependency, jquery.colorhelpers.js, we inline it here
+(function($) {
-// for convenience
-/* Plugin for jQuery for working with colors.
+    // A jquery-esque isNumeric method since we currently support 1.4.4
- *
+    // and $.isNumeric was introduced on in 1.7
- * Version 1.1.
+    var isNumeric = $.isNumeric || function(obj) {
- *
+        return obj - parseFloat( obj ) >= 0;
- * Inspiration from jQuery color animation plugin by John Resig.
+    };
- *
- * Released under the MIT license by Ole Laursen, October 2009.
- *
- * Examples:
- *
- *   $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
- *   var c = $.color.extract($("#mydiv"), 'background-color');
- *   console.log(c.r, c.g, c.b, c.a);
- *   $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
- *
- * Note that .scale() and .add() return the same modified object
- * instead of making a new one.
- *
- * V. 1.1: Fix error handling so e.g. parsing an empty string does
- * produce a color rather than just crashing.
- */
-(function(B){B.color={};B.color.make=function(F,E,C,D){var G={};G.r=F||0;G.g=E||0;G.b=C||0;G.a=D!=null?D:1;G.add=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]+=I}return G.normalize()};G.scale=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]*=I}return G.normalize()};G.toString=function(){if(G.a>=1){return"rgb("+[G.r,G.g,G.b].join(",")+")"}else{return"rgba("+[G.r,G.g,G.b,G.a].join(",")+")"}};G.normalize=function(){function H(J,K,I){return K<J?J:(K>I?I:K)}G.r=H(0,parseInt(G.r),255);G.g=H(0,parseInt(G.g),255);G.b=H(0,parseInt(G.b),255);G.a=H(0,G.a,1);return G};G.clone=function(){return B.color.make(G.r,G.b,G.g,G.a)};return G.normalize()};B.color.extract=function(D,C){var E;do{E=D.css(C).toLowerCase();if(E!=""&&E!="transparent"){break}D=D.parent()}while(!B.nodeName(D.get(0),"body"));if(E=="rgba(0, 0, 0, 0)"){E="transparent"}return B.color.parse(E)};B.color.parse=function(F){var E,C=B.color.make;if(E=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10))}if(E=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10),parseFloat(E[4]))}if(E=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55)}if(E=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55,parseFloat(E[4]))}if(E=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(F)){return C(parseInt(E[1],16),parseInt(E[2],16),parseInt(E[3],16))}if(E=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(F)){return C(parseInt(E[1]+E[1],16),parseInt(E[2]+E[2],16),parseInt(E[3]+E[3],16))}var D=B.trim(F).toLowerCase();if(D=="transparent"){return C(255,255,255,0)}else{E=A[D]||[0,0,0];return C(E[0],E[1],E[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);
-// the actual Flot code
+    ///////////////////////////////////////////////////////////////////////////
-(function($) {
+    // The Canvas object is a wrapper around an HTML5 <canvas> tag.
+    //
+    // @constructor
+    // @param {string} cls List of classes to apply to the canvas.
+    // @param {element} container Element onto which to append the canvas.
+    //
+    // Requiring a container is a little iffy, but unfortunately canvas
+    // operations don't work unless the canvas is attached to the DOM.
-	// Cache the prototype hasOwnProperty for faster access
+    function Canvas(cls, container) {
-	var hasOwnProperty = Object.prototype.hasOwnProperty;
+        var element = container.children("." + cls)[0];
-	///////////////////////////////////////////////////////////////////////////
+        if (element == null) {
-	// The Canvas object is a wrapper around an HTML5 <canvas> tag.
-	//
-	// @constructor
-	// @param {string} cls List of classes to apply to the canvas.
-	// @param {element} container Element onto which to append the canvas.
-	//
-	// Requiring a container is a little iffy, but unfortunately canvas
-	// operations don't work unless the canvas is attached to the DOM.
-	function Canvas(cls, container) {
+            element = document.createElement("canvas");
+            element.className = cls;
-		var element = container.children("." + cls)[0];
+            $(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
+                .appendTo(container);
-		if (element == null) {
+            // If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas
-			element = document.createElement("canvas");
+            if (!element.getContext) {
-			element.className = cls;
+                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.");
+                }
+            }
+        }
-			$(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
+        this.element = element;
-				.appendTo(container);
-			// If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas
+        var context = this.context = element.getContext("2d");
-			if (!element.getContext) {
+        // Determine the screen's ratio of physical to device-independent
-				if (window.G_vmlCanvasManager) {
+        // pixels.  This is the ratio between the canvas width that the browser
-					element = window.G_vmlCanvasManager.initElement(element);
+        // advertises and the number of pixels actually present in that space.
-				} else {
-					throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
-				}
-			}
-		}
-		this.element = element;
+        // 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 context = this.context = element.getContext("2d");
+        var devicePixelRatio = window.devicePixelRatio || 1,
+            backingStoreRatio =
+                context.webkitBackingStorePixelRatio ||
+                context.mozBackingStorePixelRatio ||
+                context.msBackingStorePixelRatio ||
+                context.oBackingStorePixelRatio ||
+                context.backingStorePixelRatio || 1;
-		// Determine the screen's ratio of physical to device-independent
+        this.pixelRatio = devicePixelRatio / backingStoreRatio;
-		// 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,
+        // Size the canvas to match the internal dimensions of its container
-		// 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,
+        this.resize(container.width(), container.height());
-			backingStoreRatio =
-				context.webkitBackingStorePixelRatio ||
-				context.mozBackingStorePixelRatio ||
-				context.msBackingStorePixelRatio ||
-				context.oBackingStorePixelRatio ||
-				context.backingStorePixelRatio || 1;
-		this.pixelRatio = devicePixelRatio / backingStoreRatio;
+        // Collection of HTML div layers for text overlaid onto the canvas
-		// Size the canvas to match the internal dimensions of its container
+        this.textContainer = null;
+        this.text = {};
-		this.resize(container.width(), container.height());
+        // Cache of text fragments and metrics, so we can avoid expensively
+        // re-calculating them when the plot is re-rendered in a loop.
-		// Collection of HTML div layers for text overlaid onto the canvas
+        this._textCache = {};
+    }
-		this.textContainer = null;
+    // Resizes the canvas to the given dimensions.
-		this.text = {};
+    //
+    // @param {number} width New width of the canvas, in pixels.
+    // @param {number} width New height of the canvas, in pixels.
-		// Cache of text fragments and metrics, so we can avoid expensively
+    Canvas.prototype.resize = function(width, height) {
-		// re-calculating them when the plot is re-rendered in a loop.
-		this._textCache = {};
+        if (width <= 0 || height <= 0) {
-	}
+            throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
+        }
-	// Resizes the canvas to the given dimensions.
+        var element = this.element,
-	//
+            context = this.context,
-	// @param {number} width New width of the canvas, in pixels.
+            pixelRatio = this.pixelRatio;
-	// @param {number} width New height of the canvas, in pixels.
-	Canvas.prototype.resize = function(width, height) {
+        // 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.
-		if (width <= 0 || height <= 0) {
+        // Resizing should reset the state (excanvas seems to be buggy though)
-			throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
-		}
-		var element = this.element,
+        if (this.width !== width) {
-			context = this.context,
+            element.width = width * pixelRatio;
-			pixelRatio = this.pixelRatio;
+            element.style.width = width + "px";
+            this.width = width;
+        }
-		// Resize the canvas, increasing its density based on the display's
+        if (this.height !== height) {
-		// pixel ratio; basically giving it more pixels without increasing the
+            element.height = height * pixelRatio;
-		// size of its element, to take advantage of the fact that retina
+            element.style.height = height + "px";
-		// displays have that many more pixels in the same advertised space.
+            this.height = height;
+        }
-		// Resizing should reset the state (excanvas seems to be buggy though)
+        // 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.
-		if (this.width != width) {
+        context.restore();
-			element.width = width * pixelRatio;
+        context.save();
-			element.style.width = width + "px";
-			this.width = width;
-		}
-		if (this.height != height) {
+        // Scale the coordinate space to match the display density; so even though we
-			element.height = height * pixelRatio;
+        // may have twice as many pixels, we still want lines and other drawing to
-			element.style.height = height + "px";
+        // appear at the same size; the extra pixels will just make them crisper.
-			this.height = height;
-		}
-		// Save the context, so we can reset in case we get replotted.  The
+        context.scale(pixelRatio, pixelRatio);
-		// 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();
+    // Clears the entire canvas area, not including any overlaid HTML text
-		context.save();
-		// Scale the coordinate space to match the display density; so even though we
+    Canvas.prototype.clear = function() {
-		// may have twice as many pixels, we still want lines and other drawing to
+        this.context.clearRect(0, 0, this.width, this.height);
-		// appear at the same size; the extra pixels will just make them crisper.
+    };
-		context.scale(pixelRatio, pixelRatio);
+    // Finishes rendering the canvas, including managing the text overlay.
-	};
-	// Clears the entire canvas area, not including any overlaid HTML text
+    Canvas.prototype.render = function() {
-	Canvas.prototype.clear = function() {
+        var cache = this._textCache;
-		this.context.clearRect(0, 0, this.width, this.height);
-	};
-	// Finishes rendering the canvas, including managing the text overlay.
+        // For each text layer, add elements marked as active that haven't
+        // already been rendered, and remove those that are no longer active.
-	Canvas.prototype.render = function() {
+        for (var layerKey in cache) {
+            if (Object.prototype.hasOwnProperty.call(cache, layerKey)) {
-		var cache = this._textCache;
+                var layer = this.getTextLayer(layerKey),
+                    layerCache = cache[layerKey];
-		// For each text layer, add elements marked as active that haven't
+                layer.hide();
-		// already been rendered, and remove those that are no longer active.
-		for (var layerKey in cache) {
+                for (var styleKey in layerCache) {
-			if (hasOwnProperty.call(cache, layerKey)) {
+                    if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
+                        var styleCache = layerCache[styleKey];
+                        for (var angleKey in styleCache) {
+                            if (Object.prototype.hasOwnProperty.call(styleCache, angleKey)) {
+                                var angleCache = styleCache[angleKey];
+                                for (var key in angleCache) {
+                                    if (Object.prototype.hasOwnProperty.call(angleCache, key)) {
-				var layer = this.getTextLayer(layerKey),
+                                        var positions = angleCache[key].positions;
-					layerCache = cache[layerKey];
-				layer.hide();
+                                        for (var i = 0, position; position = positions[i]; i++) {
+                                            if (position.active) {
+                                                if (!position.rendered) {
+                                                    layer.append(position.element);
+                                                    position.rendered = true;
+                                                }
+                                            } else {
+                                                positions.splice(i--, 1);
+                                                if (position.rendered) {
+                                                    position.element.detach();
+                                                }
+                                            }
+                                        }
-				for (var styleKey in layerCache) {
+                                        if (positions.length === 0) {
-					if (hasOwnProperty.call(layerCache, styleKey)) {
+                                            delete angleCache[key];
-						var styleCache = layerCache[styleKey];
+                                        }
-						for (var key in styleCache) {
+                                    }
-							if (hasOwnProperty.call(styleCache, key)) {
+                                }
+                            }
+                        }
+                    }
+                }
-								var positions = styleCache[key].positions;
+                layer.show();
+            }
+        }
+    };
-								for (var i = 0, position; position = positions[i]; i++) {
+    // Creates (if necessary) and returns the text overlay container.
-									if (position.active) {
+    //
-										if (!position.rendered) {
+    // @param {string} classes String of space-separated CSS classes used to
-											layer.append(position.element);
+    //     uniquely identify the text layer.
-											position.rendered = true;
+    // @return {object} The jQuery-wrapped text-layer div.
-										}
-									} else {
-										positions.splice(i--, 1);
-										if (position.rendered) {
-											position.element.detach();
-										}
-									}
-								}
-								if (positions.length == 0) {
+    Canvas.prototype.getTextLayer = function(classes) {
-									delete styleCache[key];
-								}
-							}
-						}
-					}
-				}
-				layer.show();
+        var layer = this.text[classes];
-			}
-		}
-	};
-	// Creates (if necessary) and returns the text overlay container.
+        // Create the text layer if it doesn't exist
-	//
-	// @param {string} classes String of space-separated CSS classes used to
-	//     uniquely identify the text layer.
-	// @return {object} The jQuery-wrapped text-layer div.
-	Canvas.prototype.getTextLayer = function(classes) {
+        if (layer == null) {
-		var layer = this.text[classes];
+            // Create the text layer container, if it doesn't exist
-		// Create the text layer if it doesn't exist
+            if (this.textContainer == null) {
+                this.textContainer = $("<div class='flot-text'></div>")
+                    .css({
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        right: 0,
+                        "font-size": "smaller",
+                        color: "#545454"
+                    })
+                    .insertAfter(this.element);
+            }
-		if (layer == null) {
+            layer = this.text[classes] = $("<div></div>")
+                .addClass(classes)
+                .css({
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0
+                })
+                .appendTo(this.textContainer);
+        }
-			// Create the text layer container, if it doesn't exist
+        return layer;
+    };
-			if (this.textContainer == null) {
+    // Creates (if necessary) and returns a text info object.
-				this.textContainer = $("<div class='flot-text'></div>")
+    //
-					.css({
+    // The object looks like this:
-						position: "absolute",
+    //
-						top: 0,
+    // {
-						left: 0,
+    //     width: Width of the text's wrapper div.
-						bottom: 0,
+    //     height: Height of the text's wrapper div.
-						right: 0,
+    //     element: The jQuery-wrapped HTML div containing the text.
-						'font-size': "smaller",
+    //     positions: Array of positions at which this text is drawn.
-						color: "#545454"
+    // }
-					})
+    //
-					.insertAfter(this.element);
+    // The positions array contains objects that look like this:
-			}
+    //
+    // {
+    //     active: Flag indicating whether the text should be visible.
+    //     rendered: Flag indicating whether the text is currently visible.
+    //     element: The jQuery-wrapped HTML div containing the text.
+    //     x: X coordinate at which to draw the text.
+    //     y: Y coordinate at which to draw the text.
+    // }
+    //
+    // Each position after the first receives a clone of the original element.
+    //
+    // The idea is that that the width, height, and general 'identity' of the
+    // text is constant no matter where it is placed; the placements are a
+    // secondary property.
+    //
+    // Canvas maintains a cache of recently-used text info objects; getTextInfo
+    // either returns the cached element or creates a new entry.
+    //
+    // @param {string} layer A string of space-separated CSS classes uniquely
+    //     identifying the layer containing this text.
+    // @param {string} text Text string to retrieve info for.
+    // @param {(string|object)=} font Either a string of space-separated CSS
+    //     classes or a font-spec object, defining the text's font and style.
+    // @param {number=} angle Angle at which to rotate the text, in degrees.
+    // @param {number=} width Maximum width of the text before it wraps.
+    // @return {object} a text info object.
-			layer = this.text[classes] = $("<div></div>")
+    Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
-				.addClass(classes)
-				.css({
-					position: "absolute",
-					top: 0,
-					left: 0,
-					bottom: 0,
-					right: 0
-				})
-				.appendTo(this.textContainer);
-		}
-		return layer;
+        var textStyle, layerCache, styleCache, angleCache, info;
-	};
-	// Creates (if necessary) and returns a text info object.
+        text = "" + text;    // Cast to string in case we have a number or such
-	//
+        angle = (360 + (angle || 0)) % 360;  // Normalize the angle to 0...359
-	// The object looks like this:
-	//
-	// {
-	//     width: Width of the text's wrapper div.
-	//     height: Height of the text's wrapper div.
-	//     element: The jQuery-wrapped HTML div containing the text.
-	//     positions: Array of positions at which this text is drawn.
-	// }
-	//
-	// The positions array contains objects that look like this:
-	//
-	// {
-	//     active: Flag indicating whether the text should be visible.
-	//     rendered: Flag indicating whether the text is currently visible.
-	//     element: The jQuery-wrapped HTML div containing the text.
-	//     x: X coordinate at which to draw the text.
-	//     y: Y coordinate at which to draw the text.
-	// }
-	//
-	// Each position after the first receives a clone of the original element.
-	//
-	// The idea is that that the width, height, and general 'identity' of the
-	// text is constant no matter where it is placed; the placements are a
-	// secondary property.
-	//
-	// Canvas maintains a cache of recently-used text info objects; getTextInfo
-	// either returns the cached element or creates a new entry.
-	//
-	// @param {string} layer A string of space-separated CSS classes uniquely
-	//     identifying the layer containing this text.
-	// @param {string} text Text string to retrieve info for.
-	// @param {(string|object)=} font Either a string of space-separated CSS
-	//     classes or a font-spec object, defining the text's font and style.
-	// @param {number=} angle Angle at which to rotate the text, in degrees.
-	//     Angle is currently unused, it will be implemented in the future.
-	// @param {number=} width Maximum width of the text before it wraps.
-	// @return {object} a text info object.
-	Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
+        // If the font is a font-spec object, generate a CSS font definition
-		var textStyle, layerCache, styleCache, info;
+        if (typeof font === "object") {
+            textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;
+        } else {
+            textStyle = font;
+        }
-		// Cast the value to a string, in case we were given a number or such
+        // Retrieve or create the caches for the text's layer, style, and angle
-		text = "" + text;
+        layerCache = this._textCache[layer];
+        if (layerCache == null) {
+            layerCache = this._textCache[layer] = {};
+        }
-		// If the font is a font-spec object, generate a CSS font definition
+        styleCache = layerCache[textStyle];
+        if (styleCache == null) {
+            styleCache = layerCache[textStyle] = {};
+        }
-		if (typeof font === "object") {
+        angleCache = styleCache[angle];
-			textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;
+        if (angleCache == null) {
-		} else {
+            angleCache = styleCache[angle] = {};
-			textStyle = font;
+        }
-		}
-		// Retrieve (or create) the cache for the text's layer and styles
+        info = angleCache[text];
-		layerCache = this._textCache[layer];
+        // If we can't find a matching element in our cache, create a new one
-		if (layerCache == null) {
+        if (info == null) {
-			layerCache = this._textCache[layer] = {};
-		}
-		styleCache = layerCache[textStyle];
+            var element = $("<div></div>").html(text)
+                .css({
+                    position: "absolute",
+                    "max-width": width,
+                    top: -9999
+                })
+                .appendTo(this.getTextLayer(layer));
-		if (styleCache == null) {
+            if (typeof font === "object") {
-			styleCache = layerCache[textStyle] = {};
+                element.css({
-		}
+                    font: textStyle,
+                    color: font.color
+                });
+            } else if (typeof font === "string") {
+                element.addClass(font);
+            }
-		info = styleCache[text];
+            // Save the original dimensions of the text; we'll modify these
+            // later to take into account rotation, if there is any.
-		// If we can't find a matching element in our cache, create a new one
+            var textWidth = element.outerWidth(true),
+                textHeight = element.outerHeight(true);
-		if (info == null) {
+            // Apply rotation to the text using CSS3/IE matrix transforms
-			var element = $("<div></div>").html(text)
+            // Note how we also set the element's width, as a work-around for
-				.css({
+            // the way most browsers resize the div on rotate, which may cause
-					position: "absolute",
+            // the contents to wrap differently. The extra +1 is because IE
-					'max-width': width,
+            // rounds the width differently and needs a little extra help.
-					top: -9999
-				})
-				.appendTo(this.getTextLayer(layer));
-			if (typeof font === "object") {
+            if (angle) {
-				element.css({
-					font: textStyle,
-					color: font.color
-				});
-			} else if (typeof font === "string") {
-				element.addClass(font);
-			}
-			info = styleCache[text] = {
+                var radians = angle * Math.PI / 180,
-				width: element.outerWidth(true),
+                    sin = Math.sin(radians),
-				height: element.outerHeight(true),
+                    cos = Math.cos(radians),
-				element: element,
+                    a = cos.toFixed(6),     // Use fixed-point so these don't
-				positions: []
+                    b = (-sin).toFixed(6),  // show up in scientific notation
-			};
+                    c = sin.toFixed(6),     // when we add them to the string
+                    transformRule;
-			element.detach();
+                if ($.support.leadingWhitespace) {
-		}
-		return info;
+                    // The transform origin defaults to '50% 50%', producing
-	};
+                    // blurry text on some browsers (Chrome) when the width or
+                    // height happens to be odd, making 50% fractional. Avoid
+                    // this by setting the origin to rounded values.
-	// Adds a text string to the canvas text overlay.
+                    var cx = textWidth / 2,
-	//
+                        cy = textHeight / 2,
-	// The text isn't drawn immediately; it is marked as rendering, which will
+                        transformOrigin = Math.floor(cx) + "px " + Math.floor(cy) + "px";
-	// result in its addition to the canvas on the next render pass.
-	//
-	// @param {string} layer A string of space-separated CSS classes uniquely
-	//     identifying the layer containing this text.
-	// @param {number} x X coordinate at which to draw the text.
-	// @param {number} y Y coordinate at which to draw the text.
-	// @param {string} text Text string to draw.
-	// @param {(string|object)=} font Either a string of space-separated CSS
-	//     classes or a font-spec object, defining the text's font and style.
-	// @param {number=} angle Angle at which to rotate the text, in degrees.
-	//     Angle is currently unused, it will be implemented in the future.
-	// @param {number=} width Maximum width of the text before it wraps.
-	// @param {string=} halign Horizontal alignment of the text; either "left",
-	//     "center" or "right".
-	// @param {string=} valign Vertical alignment of the text; either "top",
-	//     "middle" or "bottom".
-	Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
+                    // Transforms alter the div's appearance without changing
+                    // its origin. This will make it difficult to position it
+                    // later, since we'll be positioning the new bounding box
+                    // with respect to the old origin. We can work around this
+                    // by adding a translation to align the new bounding box's
+                    // top-left corner with the origin, using the same matrix.
-		var info = this.getTextInfo(layer, text, font, angle, width),
+                    // Rather than examining all four points, we can use the
-			positions = info.positions;
+                    // angle to figure out in advance which two points are in
+                    // the top-left quadrant; we can then use the x-coordinate
+                    // of the first (left-most) point and the y-coordinate of
+                    // the second (top-most) point as the bounding box corner.
-		// Tweak the div's position to match the text's alignment
+                    var x, y;
+                    if (angle < 90) {
+                        x = Math.floor(cx * cos + cy * sin - cx);
+                        y = Math.floor(cx * sin + cy * cos - cy);
+                    } else if (angle < 180) {
+                        x = Math.floor(cy * sin - cx * cos - cx);
+                        y = Math.floor(cx * sin - cy * cos - cy);
+                    } else if (angle < 270) {
+                        x = Math.floor(-cx * cos - cy * sin - cx);
+                        y = Math.floor(-cx * sin - cy * cos - cy);
+                    } else {
+                        x = Math.floor(cx * cos - cy * sin - cx);
+                        y = Math.floor(cy * cos - cx * sin - cy);
+                    }
-		if (halign == "center") {
+                    transformRule = "matrix(" + a + "," + c + "," + b + "," + a + "," + x + "," + y + ")";
-			x -= info.width / 2;
-		} else if (halign == "right") {
-			x -= info.width;
-		}
-		if (valign == "middle") {
+                    element.css({
-			y -= info.height / 2;
+                        width: textWidth + 1,
-		} else if (valign == "bottom") {
+                        transform: transformRule,
-			y -= info.height;
+                        "-o-transform": transformRule,
-		}
+                        "-ms-transform": transformRule,
+                        "-moz-transform": transformRule,
+                        "-webkit-transform": transformRule,
+                        "transform-origin": transformOrigin,
+                        "-o-transform-origin": transformOrigin,
+                        "-ms-transform-origin": transformOrigin,
+                        "-moz-transform-origin": transformOrigin,
+                        "-webkit-transform-origin": transformOrigin
+                    });
-		// Determine whether this text already exists at this position.
+                } else {
-		// If so, mark it for inclusion in the next render pass.
-		for (var i = 0, position; position = positions[i]; i++) {
+                    // The IE7/8 matrix filter produces very ugly aliasing for
-			if (position.x == x && position.y == y) {
+                    // text with a transparent background. Using a solid color
-				position.active = true;
+                    // greatly improves text clarity, although it does result
-				return;
+                    // in ugly boxes for plots using a non-white background.
-			}
-		}
-		// If the text doesn't exist at this position, create a new entry
+                    // TODO: Instead of white use the actual background color?
+                    // This still wouldn't solve the problem when the plot has
+                    // a gradient background, but it would at least help.
-		// For the very first position we'll re-use the original element,
+                    transformRule = "progid:DXImageTransform.Microsoft.Matrix(M11=" + a + ", M12=" + b + ", M21=" + c + ", M22=" + a + ",sizingMethod='auto expand')";
-		// while for subsequent ones we'll clone it.
-		position = {
+                    element.css({
-			active: true,
+                        width: textWidth + 1,
-			rendered: false,
+                        filter: transformRule,
-			element: positions.length ? info.element.clone() : info.element,
+                        "-ms-filter": transformRule,
-			x: x,
+                        "background-color": "#fff"
-			y: y
+                    });
-		};
+                }
-		positions.push(position);
+                // Compute the final dimensions of the text's bounding box
-		// Move the element to its final position within the container
+                var ac = Math.abs(cos),
+                    as = Math.abs(sin),
+                    originalWidth = textWidth;
+                textWidth = Math.round(ac * textWidth + as * textHeight);
+                textHeight = Math.round(as * originalWidth + ac * textHeight);
+            }
-		position.element.css({
+            info = angleCache[text] = {
-			top: Math.round(y),
+                width: textWidth,
-			left: Math.round(x),
+                height: textHeight,
-			'text-align': halign	// In case the text wraps
+                element: element,
-		});
+                positions: []
-	};
+            };
-	// Removes one or more text strings from the canvas text overlay.
+            element.detach();
-	//
+        }
-	// If no parameters are given, all text within the layer is removed.
-	//
-	// Note that the text is not immediately removed; it is simply marked as
-	// inactive, which will result in its removal on the next render pass.
-	// This avoids the performance penalty for 'clear and redraw' behavior,
-	// where we potentially get rid of all text on a layer, but will likely
-	// add back most or all of it later, as when redrawing axes, for example.
-	//
-	// @param {string} layer A string of space-separated CSS classes uniquely
-	//     identifying the layer containing this text.
-	// @param {number=} x X coordinate of the text.
-	// @param {number=} y Y coordinate of the text.
-	// @param {string=} text Text string to remove.
-	// @param {(string|object)=} font Either a string of space-separated CSS
-	//     classes or a font-spec object, defining the text's font and style.
-	// @param {number=} angle Angle at which the text is rotated, in degrees.
-	//     Angle is currently unused, it will be implemented in the future.
-	Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
+        return info;
-		if (text == null) {
+    };
-			var layerCache = this._textCache[layer];
-			if (layerCache != null) {
-				for (var styleKey in layerCache) {
-					if (hasOwnProperty.call(layerCache, styleKey)) {
-						var styleCache = layerCache[styleKey];
-						for (var key in styleCache) {
-							if (hasOwnProperty.call(styleCache, key)) {
-								var positions = styleCache[key].positions;
-								for (var i = 0, position; position = positions[i]; i++) {
-									position.active = false;
-								}
-							}
-						}
-					}
-				}
-			}
-		} else {
-			var positions = this.getTextInfo(layer, text, font, angle).positions;
-			for (var i = 0, position; position = positions[i]; i++) {
-				if (position.x == x && position.y == y) {
-					position.active = false;
-				}
-			}
-		}
-	};
-	///////////////////////////////////////////////////////////////////////////
+    // Adds a text string to the canvas text overlay.
-	// The top-level container for the entire plot.
+    //
+    // The text isn't drawn immediately; it is marked as rendering, which will
+    // result in its addition to the canvas on the next render pass.
+    //
+    // @param {string} layer A string of space-separated CSS classes uniquely
+    //     identifying the layer containing this text.
+    // @param {number} x X coordinate at which to draw the text.
+    // @param {number} y Y coordinate at which to draw the text.
+    // @param {string} text Text string to draw.
+    // @param {(string|object)=} font Either a string of space-separated CSS
+    //     classes or a font-spec object, defining the text's font and style.
+    // @param {number=} angle Angle at which to rotate the text, in degrees.
+    // @param {number=} width Maximum width of the text before it wraps.
+    // @param {string=} halign Horizontal alignment of the text; either "left",
+    //     "center" or "right".
+    // @param {string=} valign Vertical alignment of the text; either "top",
+    //     "middle" or "bottom".
+    Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
+        var info = this.getTextInfo(layer, text, font, angle, width),
+            positions = info.positions;
+        // Tweak the div's position to match the text's alignment
+        if (halign === "center") {
+            x -= info.width / 2;
+        } else if (halign === "right") {
+            x -= info.width;
+        }
+        if (valign === "middle") {
+            y -= info.height / 2;
+        } else if (valign === "bottom") {
+            y -= info.height;
+        }
+        // Determine whether this text already exists at this position.
+        // If so, mark it for inclusion in the next render pass.
+        for (var i = 0, position; position = positions[i]; i++) {
+            if (position.x === x && position.y === y) {
+                position.active = true;
+                return;
+            }
+        }
+        // If the text doesn't exist at this position, create a new entry
+        // For the very first position we'll re-use the original element,
+        // while for subsequent ones we'll clone it.
+        position = {
+            active: true,
+            rendered: false,
+            element: positions.length ? info.element.clone() : info.element,
+            x: x,
+            y: y
+        };
+        positions.push(position);
+        // Move the element to its final position within the container
+        position.element.css({
+            top: Math.round(y),
+            left: Math.round(x),
+            "text-align": halign    // In case the text wraps
+        });
+    };
+    // Removes one or more text strings from the canvas text overlay.
+    //
+    // If no parameters are given, all text within the layer is removed.
+    //
+    // Note that the text is not immediately removed; it is simply marked as
+    // inactive, which will result in its removal on the next render pass.
+    // This avoids the performance penalty for 'clear and redraw' behavior,
+    // where we potentially get rid of all text on a layer, but will likely
+    // add back most or all of it later, as when redrawing axes, for example.
+    //
+    // @param {string} layer A string of space-separated CSS classes uniquely
+    //     identifying the layer containing this text.
+    // @param {number=} x X coordinate of the text.
+    // @param {number=} y Y coordinate of the text.
+    // @param {string=} text Text string to remove.
+    // @param {(string|object)=} font Either a string of space-separated CSS
+    //     classes or a font-spec object, defining the text's font and style.
+    // @param {number=} angle Angle at which the text is rotated, in degrees.
+    //     Angle is currently unused, it will be implemented in the future.
+    Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
+        var i, positions, position;
+        if (text == null) {
+            var layerCache = this._textCache[layer];
+            if (layerCache != null) {
+                for (var styleKey in layerCache) {
+                    if (Object.prototype.hasOwnProperty.call(layerCache, styleKey)) {
+                        var styleCache = layerCache[styleKey];
+                        for (var angleKey in styleCache) {
+                            if (Object.prototype.hasOwnProperty.call(styleCache, angleKey)) {
+                                var angleCache = styleCache[angleKey];
+                                for (var key in angleCache) {
+                                    if (Object.prototype.hasOwnProperty.call(angleCache, key)) {
+                                        positions = angleCache[key].positions;
+                                        for (i = 0; position = positions[i]; i++) {
+                                            position.active = false;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        } else {
+            positions = this.getTextInfo(layer, text, font, angle).positions;
+            for (i = 0; position = positions[i]; i++) {
+                if (position.x === x && position.y === y) {
+                    position.active = false;
+                }
+            }
+        }
+    };
+    ///////////////////////////////////////////////////////////////////////////
+    // The top-level container for the entire plot.
      function Plot(placeholder, data_, options_, plugins) {
@@ Line 513: / Line 607: @@
                  },
                  xaxis: {
-                     show: null, // null = auto-detect, true = always, false = never
-                     position: "bottom", // or "top"
+                     show: null,             // null = auto-detect, true = always, false = never
-                     mode: null, // null or "time"
+                     position: "bottom",     // or "top"
-                     font: null, // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }
+                     mode: null,             // null or "time"
-                     color: null, // base color, labels, ticks
-                     tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
+                    color: null,            // base color, labels, ticks
-                     transform: null, // null or f: number -> number to transform axis
+                     font: null,             // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }
+                     min: null,              // min. value to show, null means set automatically
+                     max: null,              // max. value to show, null means set automatically
+                    autoscaleMargin: null,  // margin in % to add if auto-setting min/max
+                     transform: null,        // null or f: number -> number to transform axis
                      inverseTransform: null, // if transform is set, this should be the inverse function
-                    min: null, // min. value to show, null means set automatically
-                    max: null, // max. value to show, null means set automatically
+                     ticks: null,            // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
-                    autoscaleMargin: null, // margin in % to add if auto-setting min/max
+                    tickSize: null,         // number or [number, "unit"]
-                     ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
+                    minTickSize: null,      // number or [number, "unit"]
-                     tickFormatter: null, // fn: number -> string
+                     tickFormatter: null,    // fn: number -> string
-                     labelWidth: null, // size of tick labels in pixels
+                     tickDecimals: null,     // no. of decimals, null means auto
-                    labelHeight: null,
-                     reserveSpace: null, // whether to reserve space even if axis isn't shown
+                     tickColor: null,        // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
-                     tickLength: null, // size in pixels of ticks, or "full" for whole line
+                     tickLength: null,       // size in pixels of ticks, or "full" for whole line
-                     alignTicksWithAxis: null, // axis number or null for no sync
-                     tickDecimals: null, // no. of decimals, null means auto
+                     tickWidth: null,        // width of tick labels in pixels
-                     tickSize: null, // number or [number, "unit"]
+                     tickHeight: null,       // height of tick labels in pixels
-                     minTickSize: null // number or [number, "unit"]
+                    tickFont: null,         // null or font-spec object (see font, above)
+                     label: null,            // null or an axis label string
+                    labelFont: null,        // null or font-spec object (see font, above)
+                     labelPadding: 2,        // spacing between the axis and its label
+                    reserveSpace: null,     // whether to reserve space even if axis isn't shown
+                    alignTicksWithAxis: null    // axis number or null for no sync
                  },
                  yaxis: {
+                    position: "left",       // or "right"
                      autoscaleMargin: 0.02,
-                     position: "left" // or "right"
+                     labelPadding: 2
                  },
                  xaxes: [],
@@ Line 548: / Line 656: @@
                          fill: true,
                          fillColor: "#ffffff",
+                        strokeColor: null,
                          symbol: "circle" // or callback
                      },
@@ Line 599: / Line 708: @@
                  hooks: {}
              },
-        surface = 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
+            overlay = null,     // canvas for interactive stuff on top of plot
-        eventHolder = null, // jQuery object that events should be bound to
+            eventHolder = null, // jQuery object that events should be bound to
-        ctx = null, octx = null,
+            ctx = null, octx = null,
-        xaxes = [], yaxes = [],
+            xaxes = [], yaxes = [],
-        plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
+            plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
-        plotWidth = 0, plotHeight = 0,
+            plotWidth = 0, plotHeight = 0,
-        hooks = {
+            hooks = {
-            processOptions: [],
+                processOptions: [],
-            processRawData: [],
+                processRawData: [],
-            processDatapoints: [],
+                processDatapoints: [],
-            processOffset: [],
+                processOffset: [],
-            drawBackground: [],
+                drawBackground: [],
-            drawSeries: [],
+                drawSeries: [],
-            draw: [],
+                draw: [],
-            bindEvents: [],
+                bindEvents: [],
-            drawOverlay: [],
+                drawOverlay: [],
-            shutdown: []
+                shutdown: []
-        },
+            },
-        plot = this;
+            plot = this;
          // public functions
@@ Line 637: / Line 746: @@
          plot.getData = function () { return series; };
          plot.getAxes = function () {
-             var res = {}, i;
+             var res = {};
              $.each(xaxes.concat(yaxes), function (_, axis) {
-                 if (axis)
+                 if (axis) {
-                     res[axis.direction + (axis.n != 1 ? axis.n : "") + "axis"] = axis;
+                     res[axis.direction + (axis.n !== 1 ? axis.n : "") + "axis"] = axis;
+                }
              });
              return res;
@@ Line 660: / Line 770: @@
          plot.shutdown = shutdown;
          plot.resize = function () {
-        	var width = placeholder.width(),
+            var width = placeholder.width(),
-        		height = placeholder.height();
+                height = placeholder.height();
              surface.resize(width, height);
              overlay.resize(width, height);
@@ Line 681: / Line 791: @@
          function executeHooks(hook, args) {
              args = [plot].concat(args);
-             for (var i = 0; i < hook.length; ++i)
+             for (var i = 0; i < hook.length; ++i) {
                  hook[i].apply(this, args);
+            }
          }
@@ Line 696: / Line 807: @@
                  var p = plugins[i];
                  p.init(plot, classes);
-                 if (p.options)
+                 if (p.options) {
                      $.extend(true, options, p.options);
+                }
              }
          }
@@ Line 711: / Line 823: @@
              if (opts && opts.colors) {
-            	options.colors = opts.colors;
+                options.colors = opts.colors;
              }
-             if (options.xaxis.color == null)
+             if (options.xaxis.color == null) {
-                 options.xaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
+                 options.xaxis.color = $.color.parse(options.grid.color).scale("a", 0.22).toString();
-             if (options.yaxis.color == null)
+            }
-                 options.yaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
+             if (options.yaxis.color == null) {
+                 options.yaxis.color = $.color.parse(options.grid.color).scale("a", 0.22).toString();
+            }
-             if (options.xaxis.tickColor == null) // grid.tickColor for back-compatibility
+             if (options.xaxis.tickColor == null) { // grid.tickColor for back-compatibility
                  options.xaxis.tickColor = options.grid.tickColor || options.xaxis.color;
-             if (options.yaxis.tickColor == null) // grid.tickColor for back-compatibility
+            }
+             if (options.yaxis.tickColor == null) { // grid.tickColor for back-compatibility
                  options.yaxis.tickColor = options.grid.tickColor || options.yaxis.color;
+            }
-             if (options.grid.borderColor == null)
+             if (options.grid.borderColor == null) {
                  options.grid.borderColor = options.grid.color;
-             if (options.grid.tickColor == null)
+            }
-                 options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString();
+             if (options.grid.tickColor == null) {
+                 options.grid.tickColor = $.color.parse(options.grid.color).scale("a", 0.22).toString();
+            }
              // Fill in defaults for axis options, including any unspecified
@@ Line 752: / Line 870: @@
                  if (axisOptions && !axisOptions.tickColor) {
                      axisOptions.tickColor = axisOptions.color;
+                }
+                // Compatibility with markrcote/flot-axislabels
+                if (axisOptions) {
+                    if (!axisOptions.label && axisOptions.axisLabel) {
+                        axisOptions.label = axisOptions.axisLabel;
+                    }
+                    if (!axisOptions.labelPadding && axisOptions.axisLabelPadding) {
+                        axisOptions.labelPadding = axisOptions.axisLabelPadding;
+                    }
                  }
@@ Line 757: / Line 886: @@
                  options.xaxes[i] = axisOptions;
+                fontDefaults.color = axisOptions.color;
                  if (axisOptions.font) {
                      axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
-                    if (!axisOptions.font.color) {
+                }
-                        axisOptions.font.color = axisOptions.color;
+                if (axisOptions.tickFont || axisOptions.font) {
-                     }
+                    axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont);
+                }
+                if (axisOptions.label && (axisOptions.labelFont || axisOptions.font)) {
+                     axisOptions.labelFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.labelFont);
                  }
              }
@@ Line 771: / Line 904: @@
                  if (axisOptions && !axisOptions.tickColor) {
                      axisOptions.tickColor = axisOptions.color;
+                }
+                // Compatibility with markrcote/flot-axislabels
+                if (axisOptions) {
+                    if (!axisOptions.label && axisOptions.axisLabel) {
+                        axisOptions.label = axisOptions.axisLabel;
+                    }
+                    if (!axisOptions.labelPadding && axisOptions.axisLabelPadding) {
+                        axisOptions.labelPadding = axisOptions.axisLabelPadding;
+                    }
                  }
@@ Line 776: / Line 920: @@
                  options.yaxes[i] = axisOptions;
+                fontDefaults.color = axisOptions.color;
                  if (axisOptions.font) {
                      axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
-                    if (!axisOptions.font.color) {
+                }
-                        axisOptions.font.color = axisOptions.color;
+                if (axisOptions.tickFont || axisOptions.font) {
-                     }
+                    axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont);
+                }
+                if (axisOptions.label && (axisOptions.labelFont || axisOptions.font)) {
+                     axisOptions.labelFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.labelFont);
                  }
              }
              // backwards compatibility, to be removed in future
-             if (options.xaxis.noTicks && options.xaxis.ticks == null)
+             if (options.xaxis.noTicks && options.xaxis.ticks == null) {
                  options.xaxis.ticks = options.xaxis.noTicks;
-             if (options.yaxis.noTicks && options.yaxis.ticks == null)
+            }
+             if (options.yaxis.noTicks && options.yaxis.ticks == null) {
                  options.yaxis.ticks = options.yaxis.noTicks;
+            }
              if (options.x2axis) {
                  options.xaxes[1] = $.extend(true, {}, options.xaxis, options.x2axis);
@@ Line 797: / Line 947: @@
                  options.yaxes[1].position = "right";
              }
-             if (options.grid.coloredAreas)
+             if (options.grid.coloredAreas) {
                  options.grid.markings = options.grid.coloredAreas;
-             if (options.grid.coloredAreasColor)
+            }
+             if (options.grid.coloredAreasColor) {
                  options.grid.markingsColor = options.grid.coloredAreasColor;
-             if (options.lines)
+            }
+             if (options.lines) {
                  $.extend(true, options.series.lines, options.lines);
-             if (options.points)
+            }
+             if (options.points) {
                  $.extend(true, options.series.points, options.points);
-             if (options.bars)
+            }
+             if (options.bars) {
                  $.extend(true, options.series.bars, options.bars);
-             if (options.shadowSize != null)
+            }
+             if (options.shadowSize != null) {
                  options.series.shadowSize = options.shadowSize;
-             if (options.highlightColor != null)
+            }
+             if (options.highlightColor != null) {
                  options.series.highlightColor = options.highlightColor;
+            }
              // save options on axes for future reference
-             for (i = 0; i < options.xaxes.length; ++i)
+             for (i = 0; i < options.xaxes.length; ++i) {
                  getOrCreateAxis(xaxes, i + 1).options = options.xaxes[i];
-             for (i = 0; i < options.yaxes.length; ++i)
+            }
+             for (i = 0; i < options.yaxes.length; ++i) {
                  getOrCreateAxis(yaxes, i + 1).options = options.yaxes[i];
+            }
              // add hooks from options
-             for (var n in hooks)
+             for (var n in hooks) {
-                 if (options.hooks[n] && options.hooks[n].length)
+                 if (options.hooks[n] && options.hooks[n].length) {
                      hooks[n] = hooks[n].concat(options.hooks[n]);
+                }
+            }
              executeHooks(hooks.processOptions, [options]);
@@ Line 844: / Line 1,005: @@
                      d[i].data = s.data;
-                 }
+                 } else {
-                else
                      s.data = d[i];
+                }
                  res.push(s);
              }
@@ Line 855: / Line 1,016: @@
          function axisNumber(obj, coord) {
              var a = obj[coord + "axis"];
-             if (typeof a == "object") // if we got a real axis, extract number
+             if (typeof a === "object") { // if we got a real axis, extract number
                  a = a.n;
-             if (typeof a != "number")
+            }
+             if (!isNumeric(a)) {
                  a = 1; // default to first axis
+            }
              return a;
          }
@@ Line 872: / Line 1,035: @@
              for (i = 0; i < xaxes.length; ++i) {
                  axis = xaxes[i];
-                 if (axis && axis.used)
+                 if (axis && axis.used) {
                      res["x" + axis.n] = axis.c2p(pos.left);
+                }
              }
              for (i = 0; i < yaxes.length; ++i) {
                  axis = yaxes[i];
-                 if (axis && axis.used)
+                 if (axis && axis.used) {
                      res["y" + axis.n] = axis.c2p(pos.top);
+                }
              }
-             if (res.x1 !== undefined)
+             if (res.x1 !== undefined) {
                  res.x = res.x1;
-             if (res.y1 !== undefined)
+            }
+             if (res.y1 !== undefined) {
                  res.y = res.y1;
+            }
              return res;
@@ Line 898: / Line 1,065: @@
                  if (axis && axis.used) {
                      key = "x" + axis.n;
-                     if (pos[key] == null && axis.n == 1)
+                     if (pos[key] == null && axis.n === 1) {
                          key = "x";
+                    }
                      if (pos[key] != null) {
@@ Line 912: / Line 1,080: @@
                  if (axis && axis.used) {
                      key = "y" + axis.n;
-                     if (pos[key] == null && axis.n == 1)
+                     if (pos[key] == null && axis.n === 1) {
                          key = "y";
+                    }
                      if (pos[key] != null) {
@@ Line 926: / Line 1,095: @@
          function getOrCreateAxis(axes, number) {
-             if (!axes[number - 1])
+             if (!axes[number - 1]) {
                  axes[number - 1] = {
                      n: number, // save the number for future reference
-                     direction: axes == xaxes ? "x" : "y",
+                     direction: axes === xaxes ? "x" : "y",
-                     options: $.extend(true, {}, axes == xaxes ? options.xaxis : options.yaxis)
+                     options: $.extend(true, {}, axes === xaxes ? options.xaxis : options.yaxis)
                  };
+            }
              return axes[number - 1];
@@ Line 947: / Line 1,117: @@
                  if (sc != null) {
                      neededColors--;
-                     if (typeof sc == "number" && sc > maxIndex) {
+                     if (isNumeric(sc) && sc > maxIndex) {
                          maxIndex = sc;
                      }
@@ Line 978: / Line 1,148: @@
                  // it will end up producing only white or black colors.
-                 if (i % colorPoolSize == 0 && i) {
+                 if (i % colorPoolSize === 0 && i) {
                      if (variation >= 0) {
                          if (variation < 0.5) {
                              variation = -variation - 0.2;
-                         } else variation = 0;
+                         } else {
-                     } else variation = -variation;
+                            variation = 0;
+                        }
+                     } else {
+                        variation = -variation;
+                    }
                  }
-                 colors[i] = c.scale('rgb', 1 + variation);
+                 colors[i] = c.scale("rgb", 1 + variation);
              }
@@ Line 999: / Line 1,173: @@
                      s.color = colors[colori].toString();
                      ++colori;
-                 }
+                 } else if (isNumeric(s.color)) {
-                else if (typeof s.color == "number")
                      s.color = colors[s.color].toString();
+                }
                  // turn on lines automatically in case nothing is set
                  if (s.lines.show == null) {
                      var v, show = true;
-                     for (v in s)
+                     for (v in s) {
                          if (s[v] && s[v].show) {
                              show = false;
                              break;
                          }
-                     if (show)
+                    }
+                     if (show) {
                          s.lines.show = true;
+                    }
                  }
@@ Line 1,032: / Line 1,208: @@
                  bottomSentry = Number.NEGATIVE_INFINITY,
                  fakeInfinity = Number.MAX_VALUE,
-                 i, j, k, m, length,
+                 i, j, k, m, s, points, ps, val, f, p, data, format;
-                s, points, ps, x, y, axis, val, f, p,
-                data, format;
              function updateAxis(axis, min, max) {
-                 if (min < axis.datamin && min != -fakeInfinity)
+                 if (min < axis.datamin && min !== -fakeInfinity) {
                      axis.datamin = min;
-                 if (max > axis.datamax && max != fakeInfinity)
+                }
+                 if (max > axis.datamax && max !== fakeInfinity) {
                      axis.datamax = max;
+                }
              }
@@ Line 1,053: / Line 1,229: @@
                  s = series[i];
                  s.datapoints = { points: [] };
                  executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]);
              }
@@ Line 1,082: / Line 1,257: @@
                  }
-                 if (s.datapoints.pointsize != null)
+                 if (s.datapoints.pointsize != null) {
                      continue; // already filled in
+                }
                  s.datapoints.pointsize = format.length;
@@ Line 1,105: / Line 1,281: @@
                                  if (f.number && val != null) {
                                      val = +val; // convert to number
-                                     if (isNaN(val))
+                                     if (isNaN(val)) {
                                          val = null;
-                                     else if (val == Infinity)
+                                     } else if (val === Infinity) {
                                          val = fakeInfinity;
-                                     else if (val == -Infinity)
+                                     } else if (val === -Infinity) {
                                          val = -fakeInfinity;
+                                    }
                                  }
                                  if (val == null) {
-                                     if (f.required)
+                                     if (f.required) {
                                          nullify = true;
+                                    }
-                                     if (f.defaultValue != null)
+                                     if (f.defaultValue != null) {
                                          val = f.defaultValue;
+                                    }
                                  }
                              }
@@ Line 1,132: / Line 1,311: @@
                                  f = format[m];
                                  // extract min/max info
-                                 if (f.autoscale !== false) {
+                                 if (f.autoscale) {
                                      if (f.x) {
                                          updateAxis(s.xaxis, val, val);
@@ Line 1,143: / Line 1,322: @@
                              points[k + m] = null;
                          }
-                     }
+                     } else {
-                    else {
                          // a little bit of line specific stuff that
                          // perhaps shouldn't be here, but lacking
                          // better means...
-                         if (insertSteps && k > 0
+                         if (insertSteps && k > 0 &&
-                            && points[k - ps] != null
+                            points[k - ps] != null &&
-                            && points[k - ps] != points[k]
+                            points[k - ps] !== points[k] &&
-                            && points[k - ps + 1] != points[k + 1]) {
+                            points[k - ps + 1] !== points[k + 1]) {
                              // copy the point to make room for a middle point
-                             for (m = 0; m < ps; ++m)
+                             for (m = 0; m < ps; ++m) {
                                  points[k + ps + m] = points[k + m];
+                            }
                              // middle point has same y
@@ Line 1,184: / Line 1,363: @@
                  for (j = 0; j < points.length; j += ps) {
-                     if (points[j] == null)
+                     if (points[j] == null) {
                          continue;
+                    }
                      for (m = 0; m < ps; ++m) {
                          val = points[j + m];
                          f = format[m];
-                         if (!f || f.autoscale === false || val == fakeInfinity || val == -fakeInfinity)
+                         if (!f || f.autoscale === false || val === fakeInfinity || val === -fakeInfinity) {
                              continue;
+                        }
                          if (f.x) {
-                             if (val < xmin)
+                             if (val < xmin) {
                                  xmin = val;
-                             if (val > xmax)
+                            }
+                             if (val > xmax) {
                                  xmax = val;
+                            }
                          }
                          if (f.y) {
-                             if (val < ymin)
+                             if (val < ymin) {
                                  ymin = val;
-                             if (val > ymax)
+                            }
+                             if (val > ymax) {
                                  ymax = val;
+                            }
                          }
                      }
@@ Line 1,213: / Line 1,398: @@
                      switch (s.bars.align) {
-                        case "left":
+                    case "left":
-                            delta = 0;
+                        delta = 0;
-                            break;
+                        break;
-                        case "right":
+                    case "right":
-                            delta = -s.bars.barWidth;
+                        delta = -s.bars.barWidth;
-                            break;
+                        break;
-                        default:
+                    case "center":
-                            delta = -s.bars.barWidth / 2;
+                        delta = -s.bars.barWidth / 2;
+                        break;
+                    default:
+                        throw new Error("Invalid bar alignment: " + s.bars.align);
                      }
@@ Line 1,226: / Line 1,414: @@
                          ymin += delta;
                          ymax += delta + s.bars.barWidth;
-                     }
+                     } else {
-                    else {
                          xmin += delta;
                          xmax += delta + s.bars.barWidth;
@@ Line 1,238: / Line 1,425: @@
              $.each(allAxes(), function (_, axis) {
-                 if (axis.datamin == topSentry)
+                 if (axis.datamin === topSentry) {
                      axis.datamin = null;
-                 if (axis.datamax == bottomSentry)
+                }
+                 if (axis.datamax === bottomSentry) {
                      axis.datamax = null;
+                }
              });
          }
@@ Line 1,253: / Line 1,442: @@
                  .children(":not(.flot-base,.flot-overlay)").remove();
-             if (placeholder.css("position") == 'static')
+             if (placeholder.css("position") === "static") {
                  placeholder.css("position", "relative"); // for positioning labels and overlay
+            }
              surface = new Canvas("flot-base", placeholder);
@@ Line 1,292: / Line 1,482: @@
              }
-             if (options.grid.clickable)
+             if (options.grid.clickable) {
                  eventHolder.click(onClick);
+            }
              executeHooks(hooks.bindEvents, [eventHolder]);
@@ Line 1,299: / Line 1,490: @@
          function shutdown() {
-             if (redrawTimeout)
+             if (redrawTimeout) {
                  clearTimeout(redrawTimeout);
+            }
              eventHolder.unbind("mousemove", onMouseMove);
@@ Line 1,320: / Line 1,512: @@
              // precompute how much the axis is scaling a point
              // in canvas space
-             if (axis.direction == "x") {
+             if (axis.direction === "x") {
                  s = axis.scale = plotWidth / Math.abs(t(axis.max) - t(axis.min));
                  m = Math.min(t(axis.max), t(axis.min));
-             }
+             } else {
-            else {
                  s = axis.scale = plotHeight / Math.abs(t(axis.max) - t(axis.min));
                  s = -s;
@@ Line 1,331: / Line 1,522: @@
              // data point to canvas coordinate
-             if (t == identity) // slight optimization
+             if (t === identity) { // slight optimization
                  axis.p2c = function (p) { return (p - m) * s; };
-             else
+             } else {
                  axis.p2c = function (p) { return (t(p) - m) * s; };
+            }
              // canvas coordinate to data point
-             if (!it)
+             if (!it) {
                  axis.c2p = function (c) { return m + c / s; };
-             else
+             } else {
                  axis.c2p = function (c) { return it(m + c / s); };
+            }
          }
@@ Line 1,346: / Line 1,539: @@
              var opts = axis.options,
                  ticks = axis.ticks || [],
-                 labelWidth = opts.labelWidth || 0,
+                 // Label width & height are deprecated; remove in 1.0!
-                 labelHeight = opts.labelHeight || 0,
+                tickWidth = opts.tickWidth || opts.labelWidth || 0,
-                 maxWidth = labelWidth || axis.direction == "x" ? Math.floor(surface.width / (ticks.length || 1)) : null,
+                 tickHeight = opts.tickHeight || opts.labelHeight || 0,
-                 legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
+                 maxWidth = tickWidth || axis.direction === "x" ? Math.floor(surface.width / (ticks.length || 1)) : null,
-                layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
+                 layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
-                 font = opts.font || "flot-tick-label tickLabel";
+                 font = opts.tickFont || "flot-tick-label tickLabel";
              for (var i = 0; i < ticks.length; ++i) {
@@ Line 1,357: / Line 1,550: @@
                  var t = ticks[i];
-                 if (!t.label)
+                 if (!t.label) {
                      continue;
+                }
                  var info = surface.getTextInfo(layer, t.label, font, null, maxWidth);
-                 labelWidth = Math.max(labelWidth, info.width);
+                 tickWidth = Math.max(tickWidth, info.width);
-                 labelHeight = Math.max(labelHeight, info.height);
+                 tickHeight = Math.max(tickHeight, info.height);
              }
-             axis.labelWidth = opts.labelWidth || labelWidth;
+             axis.tickWidth = opts.tickWidth || opts.labelWidth || tickWidth;
-             axis.labelHeight = opts.labelHeight || labelHeight;
+             axis.tickHeight = opts.tickHeight || opts.labelHeight || tickHeight;
+            // Label width/height properties are deprecated; remove in 1.0!
+            axis.labelWidth = axis.tickWidth;
+            axis.labelHeight = axis.tickHeight;
          }
+        ///////////////////////////////////////////////////////////////////////
+        // Compute the axis bounding box based on the dimensions of its label
+        // and tick labels, then adjust the plotOffset to make room for it.
+        //
+        // This first phase only considers one dimension per axis; the other
+        // dimension depends on the other axes, and will be calculated later.
          function allocateAxisBoxFirstPhase(axis) {
-            // find the bounding box of the axis by looking at label
-            // widths/heights and ticks, make room by diminishing the
-            // plotOffset; this first phase only looks at one
-            // dimension per axis, the other dimension depends on the
-            // other axes so will have to wait
-             var lw = axis.labelWidth,
+             var contentWidth = axis.tickWidth,
-                 lh = axis.labelHeight,
+                 contentHeight = axis.tickHeight,
-                 pos = axis.options.position,
+                 axisOptions = axis.options,
-                 tickLength = axis.options.tickLength,
+                 tickLength = axisOptions.tickLength,
+                axisPosition = axisOptions.position,
                  axisMargin = options.grid.axisMargin,
                  padding = options.grid.labelMargin,
-                 all = axis.direction == "x" ? xaxes : yaxes,
+                 all = axis.direction === "x" ? xaxes : yaxes,
-                 index, innermost;
+                 innermost;
-             // determine axis margin
+             // Determine the margin around the axis
-             var samePosition = $.grep(all, function (a) {
-                 return a && a.options.position == pos && a.reserveSpace;
+             var samePosition = $.grep(all, function(axis) {
+                 return axis && axis.options.position === axisPosition && axis.reserveSpace;
              });
-             if ($.inArray(axis, samePosition) == samePosition.length - 1)
+             if ($.inArray(axis, samePosition) === samePosition.length - 1) {
                  axisMargin = 0; // outermost
+            }
              // Determine whether the axis is the first (innermost) on its side
-             innermost = $.inArray(axis, samePosition) == 0;
+             innermost = $.inArray(axis, samePosition) === 0;
-             // determine tick length - if we're innermost, we can use "full"
+             // Determine the length of the tick marks
              if (tickLength == null) {
-                 if (innermost)
+                 if (innermost) {
                      tickLength = "full";
-                 else
+                 } else {
                      tickLength = 5;
+                }
              }
-             if (!isNaN(+tickLength))
+             if (!isNaN(+tickLength)) {
                  padding += +tickLength;
+            }
-             // compute box
+             // Measure the dimensions of the axis label, if it has one
-            if (axis.direction == "x") {
-                lh += padding;
-                if (pos == "bottom") {
+            if (axisOptions.label) {
-                    plotOffset.bottom += lh + axisMargin;
+                var layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
-                    axis.box = { top: surface.height - plotOffset.bottom, height: lh };
+                    font = axisOptions.labelFont || "flot-axis-label axisLabels " + axis.direction + axis.n + "axisLabel",
-                }
+                     angle = axis.direction === "x" ? 0 : axisOptions.position === "right" ? 90 : -90,
-                else {
+                     labelInfo = surface.getTextInfo(layer, axisOptions.label, font, angle);
-                     axis.box = { top: plotOffset.top + axisMargin, height: lh };
+                contentWidth += labelInfo.width + axisOptions.labelPadding;
-                     plotOffset.top += lh + axisMargin;
+                 contentHeight += labelInfo.height + axisOptions.labelPadding;
-                 }
              }
-            else {
-                lw += padding;
-                 if (pos == "left") {
+            // Compute the axis bounding box and update the plot bounds
-                     axis.box = { left: plotOffset.left + axisMargin, width: lw };
-                     plotOffset.left += lw + axisMargin;
+            if (axis.direction === "x") {
+                contentHeight += padding;
+                 if (axisPosition === "top") {
+                     axis.box = { top: plotOffset.top + axisMargin, height: contentHeight };
+                     plotOffset.top += contentHeight + axisMargin;
+                } else {
+                    plotOffset.bottom += contentHeight + axisMargin;
+                    axis.box = { top: surface.height - plotOffset.bottom, height: contentHeight };
                  }
-                else {
+            } else {
-                     plotOffset.right += lw + axisMargin;
+                contentWidth += padding;
-                     axis.box = { left: surface.width - plotOffset.right, width: lw };
+                if (axisPosition === "right") {
+                     plotOffset.right += contentWidth + axisMargin;
+                     axis.box = { left: surface.width - plotOffset.right, width: contentWidth };
+                } else {
+                    axis.box = { left: plotOffset.left + axisMargin, width: contentWidth };
+                    plotOffset.left += contentWidth + axisMargin;
                  }
              }
-             // save for future reference
+             axis.position = axisPosition;
-             axis.position = pos;
              axis.tickLength = tickLength;
              axis.box.padding = padding;
@@ Line 1,445: / Line 1,657: @@
              // now that all axis boxes have been placed in one
              // dimension, we can set the remaining dimension coordinates
-             if (axis.direction == "x") {
+             if (axis.direction === "x") {
-                 axis.box.left = plotOffset.left - axis.labelWidth / 2;
+                 axis.box.left = plotOffset.left - axis.tickWidth / 2;
-                 axis.box.width = surface.width - plotOffset.left - plotOffset.right + axis.labelWidth;
+                 axis.box.width = surface.width - plotOffset.left - plotOffset.right + axis.tickWidth;
-             }
+             } else {
-            else {
+                 axis.box.top = plotOffset.top - axis.tickHeight / 2;
-                 axis.box.top = plotOffset.top - axis.labelHeight / 2;
+                 axis.box.height = surface.height - plotOffset.bottom - plotOffset.top + axis.tickHeight;
-                 axis.box.height = surface.height - plotOffset.bottom - plotOffset.top + axis.labelHeight;
              }
          }
@@ Line 1,460: / Line 1,671: @@
              var minMargin = options.grid.minBorderMargin,
-                 margins = { x: 0, y: 0 }, i, axis;
+                 margins = { x: 0, y: 0 }, i;
              // check stuff from the plot (FIXME: this should just read
@@ Line 1,467: / Line 1,678: @@
              if (minMargin == null) {
                  minMargin = 0;
-                 for (i = 0; i < series.length; ++i)
+                 for (i = 0; i < series.length; ++i) {
                      minMargin = Math.max(minMargin, 2 * (series[i].points.radius + series[i].points.lineWidth/2));
+                }
              }
@@ Line 1,478: / Line 1,690: @@
              $.each(allAxes(), function (_, axis) {
                  var dir = axis.direction;
-                 if (axis.reserveSpace)
+                 if (axis.reserveSpace) {
-                     margins[dir] = Math.ceil(Math.max(margins[dir], (dir == "x" ? axis.labelWidth : axis.labelHeight) / 2));
+                     margins[dir] = Math.ceil(Math.max(margins[dir], (dir === "x" ? axis.tickWidth : axis.tickHeight) / 2));
+                }
              });
@@ Line 1,489: / Line 1,702: @@
          function setupGrid() {
-             var i, axes = allAxes(), showGrid = options.grid.show;
+             var axes = allAxes(),
+                showGrid = options.grid.show,
+                margin = options.grid.margin || 0,
+                i, a;
              // Initialize the plot's offset from the edge of the canvas
-             for (var a in plotOffset) {
+             for (a in plotOffset) {
-                 var margin = options.grid.margin || 0;
+                 if (Object.prototype.hasOwnProperty.call(plotOffset, a)) {
-                plotOffset[a] = typeof margin == "number" ? margin : margin[a] || 0;
+                    plotOffset[a] = isNumeric(margin) ? margin : margin[a] || 0;
+                }
              }
@@ Line 1,502: / Line 1,719: @@
              // If the grid is visible, add its border width to the offset
-             for (var a in plotOffset) {
+             for (a in plotOffset) {
-                 if(typeof(options.grid.borderWidth) == "object") {
+                 if(typeof(options.grid.borderWidth) === "object") {
                      plotOffset[a] += showGrid ? options.grid.borderWidth[a] : 0;
-                 }
+                 } else {
-                else {
                      plotOffset[a] += showGrid ? options.grid.borderWidth : 0;
                  }
@@ Line 1,514: / Line 1,730: @@
              $.each(axes, function (_, axis) {
                  axis.show = axis.options.show;
-                 if (axis.show == null)
+                 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;
@@ Line 1,531: / Line 1,748: @@
                      setTicks(axis);
                      snapRangeToTicks(axis, axis.ticks);
-                    // find labelWidth/Height for axis
                      measureTickLabels(axis);
                  });
@@ Line 1,538: / Line 1,754: @@
                  // axis bounding boxes, start from the outside
                  // (reverse order)
-                 for (i = allocatedAxes.length - 1; i >= 0; --i)
+                 for (i = allocatedAxes.length - 1; i >= 0; --i) {
                      allocateAxisBoxFirstPhase(allocatedAxes[i]);
+                }
                  // make sure we've got enough space for things that
@@ Line 1,571: / Line 1,788: @@
                  delta = max - min;
-             if (delta == 0.0) {
+             if (delta === 0.0) {
                  // degenerate case
-                 var widen = max == 0 ? 1 : 0.01;
+                 var widen = max === 0 ? 1 : 0.01;
-                 if (opts.min == null)
+                 if (opts.min == null) {
                      min -= widen;
+                }
                  // always widen max if we couldn't widen min to ensure we
                  // don't fall into min == max which doesn't work
-                 if (opts.max == null || opts.min != null)
+                 if (opts.max == null || opts.min != null) {
                      max += widen;
-            }
+                }
-             else {
+             } else {
                  // consider autoscaling
                  var margin = opts.autoscaleMargin;
@@ Line 1,590: / Line 1,808: @@
                          // make sure we don't go below zero if all values
                          // are positive
-                         if (min < 0 && axis.datamin != null && axis.datamin >= 0)
+                         if (min < 0 && axis.datamin != null && axis.datamin >= 0) {
                              min = 0;
+                        }
                      }
                      if (opts.max == null) {
                          max += delta * margin;
-                         if (max > 0 && axis.datamax != null && axis.datamax <= 0)
+                         if (max > 0 && axis.datamax != null && axis.datamax <= 0) {
                              max = 0;
+                        }
                      }
                  }
@@ Line 1,609: / Line 1,829: @@
              // estimate number of ticks
              var noTicks;
-             if (typeof opts.ticks == "number" && opts.ticks > 0)
+             if (isNumeric(opts.ticks) && opts.ticks > 0) {
                  noTicks = opts.ticks;
-             else
+             } 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" ? surface.width : surface.height);
+                 noTicks = 0.3 * Math.sqrt(axis.direction === "x" ? surface.width : surface.height);
+            }
              var delta = (axis.max - axis.min) / noTicks,
@@ Line 1,656: / Line 1,877: @@
              // we'll add an especially friendly make sure they remembered to include it.
-             if (opts.mode == "time" && !axis.tickGenerator) {
+             if (opts.mode === "time" && !axis.tickGenerator) {
                  throw new Error("Time mode requires the flot.time plugin.");
              }
@@ Line 1,678: / Line 1,899: @@
                          ticks.push(v);
                          ++i;
-                     } while (v < axis.max && v != prev);
+                     } while (v < axis.max && v !== prev);
                      return ticks;
                  };
-				axis.tickFormatter = function (value, axis) {
+                axis.tickFormatter = function (value, axis) {
-					var factor = axis.tickDecimals ? Math.pow(10, axis.tickDecimals) : 1;
+                    var factor = axis.tickDecimals ? Math.pow(10, axis.tickDecimals) : 1;
-					var formatted = "" + Math.round(value * factor) / factor;
+                    var formatted = "" + Math.round(value * factor) / factor;
-					// If tickDecimals was specified, ensure that we have exactly that
+                    // If tickDecimals was specified, ensure that we have exactly that
-					// much precision; otherwise default to the value's own precision.
+                    // much precision; otherwise default to the value's own precision.
-					if (axis.tickDecimals != null) {
+                    if (axis.tickDecimals != null) {
-						var decimal = formatted.indexOf(".");
+                        var decimal = formatted.indexOf(".");
-						var precision = decimal == -1 ? 0 : formatted.length - decimal - 1;
+                        var precision = decimal === -1 ? 0 : formatted.length - decimal - 1;
-						if (precision < axis.tickDecimals) {
+                        if (precision < axis.tickDecimals) {
-							return (precision ? formatted : formatted + ".") + ("" + factor).substr(1, axis.tickDecimals - precision);
+                            return (precision ? formatted : formatted + ".") + ("" + factor).substr(1, axis.tickDecimals - precision);
-						}
+                        }
-					}
+                    }
                      return formatted;
@@ Line 1,702: / Line 1,923: @@
              }
-             if ($.isFunction(opts.tickFormatter))
+             if ($.isFunction(opts.tickFormatter)) {
                  axis.tickFormatter = function (v, axis) { return "" + opts.tickFormatter(v, axis); };
+            }
              if (opts.alignTicksWithAxis != null) {
-                 var otherAxis = (axis.direction == "x" ? xaxes : yaxes)[opts.alignTicksWithAxis - 1];
+                 var otherAxis = (axis.direction === "x" ? xaxes : yaxes)[opts.alignTicksWithAxis - 1];
-                 if (otherAxis && otherAxis.used && otherAxis != axis) {
+                 if (otherAxis && otherAxis.used && otherAxis !== axis) {
                      // consider snapping min/max to outermost nice ticks
                      var niceTicks = axis.tickGenerator(axis);
                      if (niceTicks.length > 0) {
-                         if (opts.min == null)
+                         if (opts.min == null) {
                              axis.min = Math.min(axis.min, niceTicks[0]);
-                         if (opts.max == null && niceTicks.length > 1)
+                        }
+                         if (opts.max == null && niceTicks.length > 1) {
                              axis.max = Math.max(axis.max, niceTicks[niceTicks.length - 1]);
+                        }
                      }
@@ Line 1,737: / Line 1,961: @@
                          // with an extra decimal doesn't give us a
                          // zero at end
-                         if (!(ts.length > 1 && /\..*0$/.test((ts[1] - ts[0]).toFixed(extraDec))))
+                         if (!(ts.length > 1 && /\..*0$/.test((ts[1] - ts[0]).toFixed(extraDec)))) {
                              axis.tickDecimals = extraDec;
+                        }
                      }
                  }
@@ Line 1,746: / Line 1,971: @@
          function setTicks(axis) {
              var oticks = axis.options.ticks, ticks = [];
-             if (oticks == null || (typeof oticks == "number" && oticks > 0))
+             if (oticks == null || (isNumeric(oticks) && oticks > 0)) {
                  ticks = axis.tickGenerator(axis);
-             else if (oticks) {
+             } else if (oticks) {
-                 if ($.isFunction(oticks))
+                 if ($.isFunction(oticks)) {
                      // generate the ticks
                      ticks = oticks(axis);
-                 else
+                 } else {
                      ticks = oticks;
+                }
              }
@@ Line 1,762: / Line 1,988: @@
                  var label = null;
                  var t = ticks[i];
-                 if (typeof t == "object") {
+                 if (typeof t === "object") {
                      v = +t[0];
-                     if (t.length > 1)
+                     if (t.length > 1) {
                          label = t[1];
-                }
+                    }
-                 else
+                 } else {
                      v = +t;
-                 if (label == null)
+                }
+                 if (label == null) {
                      label = axis.tickFormatter(v, axis);
-                 if (!isNaN(v))
+                }
+                 if (!isNaN(v)) {
                      axis.ticks.push({ v: v, label: label });
+                }
              }
          }
@@ Line 1,779: / Line 2,008: @@
              if (axis.options.autoscaleMargin && ticks.length > 0) {
                  // snap to ticks
-                 if (axis.options.min == null)
+                 if (axis.options.min == null) {
                      axis.min = Math.min(axis.min, ticks[0].v);
-                 if (axis.options.max == null && ticks.length > 1)
+                }
+                 if (axis.options.max == null && ticks.length > 1) {
                      axis.max = Math.max(axis.max, ticks[ticks.length - 1].v);
+                }
              }
          }
@@ Line 1,795: / Line 2,026: @@
              // draw background, if any
-             if (grid.show && grid.backgroundColor)
+             if (grid.show && grid.backgroundColor) {
                  drawBackground();
+            }
              if (grid.show && !grid.aboveData) {
@@ Line 1,826: / Line 2,058: @@
              for (var i = 0; i < axes.length; ++i) {
                  axis = axes[i];
-                 if (axis.direction == coord) {
+                 if (axis.direction === coord) {
                      key = coord + axis.n + "axis";
-                     if (!ranges[key] && axis.n == 1)
+                     if (!ranges[key] && axis.n === 1) {
                          key = coord + "axis"; // support x1axis as xaxis
+                    }
                      if (ranges[key]) {
                          from = ranges[key].from;
@@ Line 1,840: / Line 2,073: @@
              // backwards-compat stuff - to be removed in future
              if (!ranges[key]) {
-                 axis = coord == "x" ? xaxes[0] : yaxes[0];
+                 axis = coord === "x" ? xaxes[0] : yaxes[0];
                  from = ranges[coord + "1"];
                  to = ranges[coord + "2"];
@@ Line 1,891: / Line 2,124: @@
                      // fill in missing
-                     if (xrange.from == null)
+                     if (xrange.from == null) {
                          xrange.from = xrange.axis.min;
-                     if (xrange.to == null)
+                    }
+                     if (xrange.to == null) {
                          xrange.to = xrange.axis.max;
-                     if (yrange.from == null)
+                    }
+                     if (yrange.from == null) {
                          yrange.from = yrange.axis.min;
-                     if (yrange.to == null)
+                    }
+                     if (yrange.to == null) {
                          yrange.to = yrange.axis.max;
+                    }
                      // clip
                      if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max ||
-                         yrange.to < yrange.axis.min || yrange.from > yrange.axis.max)
+                         yrange.to < yrange.axis.min || yrange.from > yrange.axis.max) {
                          continue;
+                    }
                      xrange.from = Math.max(xrange.from, xrange.axis.min);
@@ Line 1,910: / Line 2,148: @@
                      yrange.to = Math.min(yrange.to, yrange.axis.max);
-                     if (xrange.from == xrange.to && yrange.from == yrange.to)
+                     if (xrange.from === xrange.to && yrange.from === yrange.to) {
                          continue;
+                    }
                      // then draw
@@ Line 1,919: / Line 2,158: @@
                      yrange.to = yrange.axis.p2c(yrange.to);
-                     if (xrange.from == xrange.to || yrange.from == yrange.to) {
+                     if (xrange.from === xrange.to || yrange.from === yrange.to) {
                          // draw line
                          ctx.beginPath();
@@ Line 1,927: / Line 2,166: @@
                          ctx.lineTo(xrange.to, yrange.to);
                          ctx.stroke();
-                     }
+                     } else {
-                    else {
                          // fill area
                          ctx.fillStyle = m.color || options.grid.markingsColor;
@@ Line 1,945: / Line 2,183: @@
                  var axis = axes[j], box = axis.box,
                      t = axis.tickLength, x, y, xoff, yoff;
-                 if (!axis.show || axis.ticks.length == 0)
+                 if (!axis.show || axis.ticks.length === 0) {
                      continue;
+                }
                  ctx.lineWidth = 1;
                  // find the edges
-                 if (axis.direction == "x") {
+                 if (axis.direction === "x") {
                      x = 0;
-                     if (t == "full")
+                     if (t === "full") {
-                         y = (axis.position == "top" ? 0 : plotHeight);
+                         y = (axis.position === "top" ? 0 : plotHeight);
-                     else
+                     } else {
-                         y = box.top - plotOffset.top + (axis.position == "top" ? box.height : 0);
+                         y = box.top - plotOffset.top + (axis.position === "top" ? box.height : 0);
-                }
+                    }
-                 else {
+                 } else {
                      y = 0;
-                     if (t == "full")
+                     if (t === "full") {
-                         x = (axis.position == "left" ? 0 : plotWidth);
+                         x = (axis.position === "left" ? 0 : plotWidth);
-                     else
+                     } else {
-                         x = box.left - plotOffset.left + (axis.position == "left" ? box.width : 0);
+                         x = box.left - plotOffset.left + (axis.position === "left" ? box.width : 0);
+                    }
                  }
@@ Line 1,971: / Line 2,211: @@
                      ctx.beginPath();
                      xoff = yoff = 0;
-                     if (axis.direction == "x")
+                     if (axis.direction === "x") {
                          xoff = plotWidth + 1;
-                     else
+                     } else {
                          yoff = plotHeight + 1;
+                    }
-                     if (ctx.lineWidth == 1) {
+                     if (ctx.lineWidth === 1) {
-                         if (axis.direction == "x") {
+                         if (axis.direction === "x") {
                              y = Math.floor(y) + 0.5;
                          } else {
@@ Line 1,999: / Line 2,240: @@
                      xoff = yoff = 0;
-                     if (isNaN(v) || v < axis.min || v > axis.max
+                     if (isNaN(v) || v < axis.min || v > axis.max || (
                          // skip those lying on the axes if we got a border
-                         || (t == "full"
+                         t === "full" && ((typeof bw === "object" && bw[axis.position] > 0) || bw > 0) &&
-                            && ((typeof bw == "object" && bw[axis.position] > 0) || bw > 0)
+                        (v === axis.min || v === axis.max)
-                            && (v == axis.min || v == axis.max)))
+                    )) {
                          continue;
+                    }
-                     if (axis.direction == "x") {
+                     if (axis.direction === "x") {
                          x = axis.p2c(v);
-                         yoff = t == "full" ? -plotHeight : t;
+                         yoff = t === "full" ? -plotHeight : t;
-                         if (axis.position == "top")
+                         if (axis.position === "top") {
                              yoff = -yoff;
-                    }
+                        }
-                     else {
+                     } else {
                          y = axis.p2c(v);
-                         xoff = t == "full" ? -plotWidth : t;
+                         xoff = t === "full" ? -plotWidth : t;
-                         if (axis.position == "left")
+                         if (axis.position === "left") {
                              xoff = -xoff;
+                        }
                      }
-                     if (ctx.lineWidth == 1) {
+                     if (ctx.lineWidth === 1) {
-                         if (axis.direction == "x")
+                         if (axis.direction === "x") {
                              x = Math.floor(x) + 0.5;
-                         else
+                         } else {
                              y = Math.floor(y) + 0.5;
+                        }
                      }
@@ Line 2,041: / Line 2,285: @@
                  // line by line instead of as one rectangle
                  bc = options.grid.borderColor;
-                 if(typeof bw == "object" || typeof bc == "object") {
+                 if(typeof bw === "object" || typeof bc === "object") {
                      if (typeof bw !== "object") {
                          bw = {top: bw, right: bw, bottom: bw, left: bw};
@@ Line 2,084: / Line 2,328: @@
                          ctx.stroke();
                      }
-                 }
+                 } else {
-                else {
                      ctx.lineWidth = bw;
                      ctx.strokeStyle = options.grid.borderColor;
@@ Line 2,098: / Line 2,341: @@
              $.each(allAxes(), function (_, axis) {
+                if (!axis.show || axis.ticks.length === 0) {
+                    return;
+                }
                  var box = axis.box,
-                     legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
+                     axisOptions = axis.options,
-                     layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
+                    layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
-                     font = axis.options.font || "flot-tick-label tickLabel",
+                     labelFont = axisOptions.labelFont || "flot-axis-label axisLabels " + axis.direction + axis.n + "axisLabel",
+                     tickFont = axisOptions.tickFont || "flot-tick-label tickLabel",
                      tick, x, y, halign, valign;
-                // Remove text before checking for axis.show and ticks.length;
-                // otherwise plugins, like flot-tickrotor, that draw their own
-                // tick labels will end up with both theirs and the defaults.
                  surface.removeText(layer);
-                 if (!axis.show || axis.ticks.length == 0)
+                 if (axisOptions.label) {
-                     return;
+                    if (axis.direction === "x") {
+                        if (axisOptions.position === "top") {
+                            surface.addText(layer, box.left + box.width / 2, box.top, axisOptions.label, labelFont, 0, null, "center", "top");
+                        } else {
+                            surface.addText(layer, box.left + box.width / 2, box.top + box.height, axisOptions.label, labelFont, 0, null, "center", "bottom");
+                        }
+                     } else {
+                        if (axisOptions.position === "right") {
+                            surface.addText(layer, box.left + box.width, box.top + box.height / 2, axisOptions.label, labelFont, 90, null, "right", "middle");
+                        } else {
+                            surface.addText(layer, box.left, box.top + box.height / 2, axisOptions.label, labelFont, -90, null, "left", "middle");
+                        }
+                    }
+                }
+                // Add labels for the ticks on this axis
                  for (var i = 0; i < axis.ticks.length; ++i) {
                      tick = axis.ticks[i];
-                     if (!tick.label || tick.v < axis.min || tick.v > axis.max)
+                     if (!tick.label || tick.v < axis.min || tick.v > axis.max) {
                          continue;
+                    }
-                     if (axis.direction == "x") {
+                     if (axis.direction === "x") {
                          halign = "center";
                          x = plotOffset.left + axis.p2c(tick.v);
-                         if (axis.position == "bottom") {
+                         if (axis.position === "bottom") {
                              y = box.top + box.padding;
                          } else {
@@ Line 2,131: / Line 2,391: @@
                          valign = "middle";
                          y = plotOffset.top + axis.p2c(tick.v);
-                         if (axis.position == "left") {
+                         if (axis.position === "left") {
                              x = box.left + box.width - box.padding;
                              halign = "right";
@@ Line 2,139: / Line 2,399: @@
                      }
-                     surface.addText(layer, x, y, tick.label, font, null, null, halign, valign);
+                     surface.addText(layer, x, y, tick.label, tickFont, null, null, halign, valign);
                  }
              });
@@ Line 2,145: / Line 2,405: @@
          function drawSeries(series) {
-             if (series.lines.show)
+             if (series.lines.show) {
                  drawSeriesLines(series);
-             if (series.bars.show)
+            }
+             if (series.bars.show) {
                  drawSeriesBars(series);
-             if (series.points.show)
+            }
+             if (series.points.show) {
                  drawSeriesPoints(series);
+            }
          }
@@ Line 2,164: / Line 2,427: @@
                          x2 = points[i], y2 = points[i + 1];
-                     if (x1 == null || x2 == null)
+                     if (x1 == null || x2 == null) {
                          continue;
+                    }
                      // clip with ymin
                      if (y1 <= y2 && y1 < axisy.min) {
-                         if (y2 < axisy.min)
+                         if (y2 < axisy.min) {
                              continue;   // line segment is outside
+                        }
                          // compute new intersection point
                          x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y1 = axisy.min;
-                     }
+                     } else if (y2 <= y1 && y2 < axisy.min) {
-                    else if (y2 <= y1 && y2 < axisy.min) {
+                         if (y1 < axisy.min) {
-                         if (y1 < axisy.min)
                              continue;
+                        }
                          x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y2 = axisy.min;
@@ Line 2,184: / Line 2,449: @@
                      // clip with ymax
                      if (y1 >= y2 && y1 > axisy.max) {
-                         if (y2 > axisy.max)
+                         if (y2 > axisy.max) {
                              continue;
+                        }
                          x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y1 = axisy.max;
-                     }
+                     } else if (y2 >= y1 && y2 > axisy.max) {
-                    else if (y2 >= y1 && y2 > axisy.max) {
+                         if (y1 > axisy.max) {
-                         if (y1 > axisy.max)
                              continue;
+                        }
                          x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y2 = axisy.max;
@@ Line 2,198: / Line 2,464: @@
                      // clip with xmin
                      if (x1 <= x2 && x1 < axisx.min) {
-                         if (x2 < axisx.min)
+                         if (x2 < axisx.min) {
                              continue;
+                        }
                          y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x1 = axisx.min;
-                     }
+                     } else if (x2 <= x1 && x2 < axisx.min) {
-                    else if (x2 <= x1 && x2 < axisx.min) {
+                         if (x1 < axisx.min) {
-                         if (x1 < axisx.min)
                              continue;
+                        }
                          y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x2 = axisx.min;
@@ Line 2,212: / Line 2,479: @@
                      // clip with xmax
                      if (x1 >= x2 && x1 > axisx.max) {
-                         if (x2 > axisx.max)
+                         if (x2 > axisx.max) {
                              continue;
+                        }
                          y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x1 = axisx.max;
-                     }
+                     } else if (x2 >= x1 && x2 > axisx.max) {
-                    else if (x2 >= x1 && x2 > axisx.max) {
+                         if (x1 > axisx.max) {
-                         if (x1 > axisx.max)
                              continue;
+                        }
                          y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x2 = axisx.max;
                      }
-                     if (x1 != prevx || y1 != prevy)
+                     if (x1 !== prevx || y1 !== prevy) {
                          ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
+                    }
                      prevx = x2;
@@ Line 2,238: / Line 2,507: @@
                      ps = datapoints.pointsize,
                      bottom = Math.min(Math.max(0, axisy.min), axisy.max),
-                     i = 0, top, areaOpen = false,
+                     i = 0, areaOpen = false,
                      ypos = 1, segmentStart = 0, segmentEnd = 0;
@@ Line 2,245: / Line 2,514: @@
                  // end we go backwards to sketch the bottom
                  while (true) {
-                     if (ps > 0 && i > points.length + ps)
+                     if (ps > 0 && i > points.length + ps) {
                          break;
+                    }
                      i += ps; // ps is negative if going backwards
@@ Line 2,263: / Line 2,533: @@
                          }
-                         if (ps < 0 && i == segmentStart + ps) {
+                         if (ps < 0 && i === segmentStart + ps) {
                              // done with the reverse sweep
                              ctx.fill();
@@ Line 2,274: / Line 2,544: @@
                      }
-                     if (x1 == null || x2 == null)
+                     if (x1 == null || x2 == null) {
                          continue;
+                    }
                      // clip x values
@@ Line 2,281: / Line 2,552: @@
                      // clip with xmin
                      if (x1 <= x2 && x1 < axisx.min) {
-                         if (x2 < axisx.min)
+                         if (x2 < axisx.min) {
                              continue;
+                        }
                          y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x1 = axisx.min;
-                     }
+                     } else if (x2 <= x1 && x2 < axisx.min) {
-                    else if (x2 <= x1 && x2 < axisx.min) {
+                         if (x1 < axisx.min) {
-                         if (x1 < axisx.min)
                              continue;
+                        }
                          y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x2 = axisx.min;
@@ Line 2,295: / Line 2,567: @@
                      // clip with xmax
                      if (x1 >= x2 && x1 > axisx.max) {
-                         if (x2 > axisx.max)
+                         if (x2 > axisx.max) {
                              continue;
+                        }
                          y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x1 = axisx.max;
-                     }
+                     } else if (x2 >= x1 && x2 > axisx.max) {
-                    else if (x2 >= x1 && x2 > axisx.max) {
+                         if (x1 > axisx.max) {
-                         if (x1 > axisx.max)
                              continue;
+                        }
                          y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                          x2 = axisx.max;
@@ Line 2,319: / Line 2,592: @@
                          ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
                          continue;
-                     }
+                     } else if (y1 <= axisy.min && y2 <= axisy.min) {
-                    else if (y1 <= axisy.min && y2 <= axisy.min) {
                          ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
                          ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
@@ Line 2,339: / Line 2,611: @@
                          x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y1 = axisy.min;
-                     }
+                     } else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
-                    else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
                          x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y2 = axisy.min;
@@ Line 2,349: / Line 2,620: @@
                          x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y1 = axisy.max;
-                     }
+                     } else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
-                    else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
                          x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                          y2 = axisy.max;
@@ Line 2,357: / Line 2,627: @@
                      // if the x value was changed we got a rectangle
                      // to fill
-                     if (x1 != x1old) {
+                     if (x1 !== x1old) {
                          ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1));
                          // it goes to (x1, y1), but we fill that below
@@ Line 2,369: / Line 2,639: @@
                      // fill the other rectangle if it's there
-                     if (x2 != x2old) {
+                     if (x2 !== x2old) {
                          ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
                          ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2));
@@ Line 2,402: / Line 2,672: @@
              }
-             if (lw > 0)
+             if (lw > 0) {
                  plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis);
+            }
              ctx.restore();
          }
@@ Line 2,413: / Line 2,684: @@
                  for (var i = 0; i < points.length; i += ps) {
                      var x = points[i], y = points[i + 1];
-                     if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
+                     if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
                          continue;
+                    }
                      ctx.beginPath();
                      x = axisx.p2c(x);
                      y = axisy.p2c(y) + offset;
-                     if (symbol == "circle")
+                     if (symbol === "circle") {
                          ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
-                     else
+                     } else {
                          symbol(ctx, x, y, radius, shadow);
+                    }
                      ctx.closePath();
@@ Line 2,441: / Line 2,714: @@
                  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 )
+             if( lw === 0 ) {
                  lw = 0.0001;
+            }
              if (lw > 0 && sw > 0) {
@@ Line 2,463: / Line 2,737: @@
              ctx.lineWidth = lw;
-             ctx.strokeStyle = series.color;
+             ctx.strokeStyle = series.points.strokeColor || series.color;
              plotPoints(series.datapoints, radius,
                         getFillStyle(series.points, series.color), 0, false,
@@ Line 2,470: / Line 2,744: @@
          }
-         function drawBar(x, y, b, barLeft, barRight, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
+         function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
              var left, right, bottom, top,
                  drawLeft, drawRight, drawTop, drawBottom,
@@ Line 2,494: / Line 2,768: @@
                      drawRight = false;
                  }
-             }
+             } else {
-            else {
                  drawLeft = drawRight = drawTop = true;
                  drawBottom = false;
@@ Line 2,515: / Line 2,788: @@
              // clip
              if (right < axisx.min || left > axisx.max ||
-                 top < axisy.min || bottom > axisy.max)
+                 top < axisy.min || bottom > axisy.max) {
                  return;
+            }
              if (left < axisx.min) {
@@ Line 2,545: / Line 2,819: @@
              // fill the bar
              if (fillStyleCallback) {
+                c.beginPath();
+                c.moveTo(left, bottom);
+                c.lineTo(left, top);
+                c.lineTo(right, top);
+                c.lineTo(right, bottom);
                  c.fillStyle = fillStyleCallback(bottom, top);
-                 c.fillRect(left, top, right - left, bottom - top)
+                 c.fill();
              }
@@ Line 2,554: / Line 2,833: @@
                  // FIXME: inline moveTo is buggy with excanvas
-                 c.moveTo(left, bottom);
+                 c.moveTo(left, bottom + offset);
-                 if (drawLeft)
+                 if (drawLeft) {
-                     c.lineTo(left, top);
+                     c.lineTo(left, top + offset);
-                 else
+                 } else {
-                     c.moveTo(left, top);
+                     c.moveTo(left, top + offset);
-                 if (drawTop)
+                }
-                     c.lineTo(right, top);
+                 if (drawTop) {
-                 else
+                     c.lineTo(right, top + offset);
-                     c.moveTo(right, top);
+                 } else {
-                 if (drawRight)
+                     c.moveTo(right, top + offset);
-                     c.lineTo(right, bottom);
+                }
-                 else
+                 if (drawRight) {
-                     c.moveTo(right, bottom);
+                     c.lineTo(right, bottom + offset);
-                 if (drawBottom)
+                 } else {
-                     c.lineTo(left, bottom);
+                     c.moveTo(right, bottom + offset);
-                 else
+                }
-                     c.moveTo(left, bottom);
+                 if (drawBottom) {
+                     c.lineTo(left, bottom + offset);
+                 } else {
+                     c.moveTo(left, bottom + offset);
+                }
                  c.stroke();
              }
@@ Line 2,576: / Line 2,859: @@
          function drawSeriesBars(series) {
-             function plotBars(datapoints, barLeft, barRight, fillStyleCallback, axisx, axisy) {
+             function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) {
                  var points = datapoints.points, ps = datapoints.pointsize;
                  for (var i = 0; i < points.length; i += ps) {
-                     if (points[i] == null)
+                     if (points[i] == null) {
                          continue;
-                     drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
+                    }
+                     drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
                  }
              }
@@ Line 2,596: / Line 2,880: @@
              switch (series.bars.align) {
-                case "left":
+            case "left":
-                    barLeft = 0;
+                barLeft = 0;
-                    break;
+                break;
-                case "right":
+            case "right":
-                    barLeft = -series.bars.barWidth;
+                barLeft = -series.bars.barWidth;
-                    break;
+                break;
-                default:
+            case "center":
-                    barLeft = -series.bars.barWidth / 2;
+                barLeft = -series.bars.barWidth / 2;
+                break;
+            default:
+                throw new Error("Invalid bar alignment: " + series.bars.align);
              }
              var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;
-             plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, fillStyleCallback, series.xaxis, series.yaxis);
+             plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis);
              ctx.restore();
          }
@@ Line 2,613: / Line 2,900: @@
          function getFillStyle(filloptions, seriesColor, bottom, top) {
              var fill = filloptions.fill;
-             if (!fill)
+             if (!fill) {
                  return null;
+            }
-             if (filloptions.fillColor)
+             if (filloptions.fillColor) {
                  return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
+            }
              var c = $.color.parse(seriesColor);
-             c.a = typeof fill == "number" ? fill : 0.4;
+             c.a = isNumeric(fill) ? fill : 0.4;
              c.normalize();
              return c.toString();
@@ Line 2,629: / Line 2,918: @@
              placeholder.find(".legend").remove();
-             if (!options.legend.show)
+             if (!options.legend.show) {
                  return;
+            }
              var fragments = [], entries = [], rowStarted = false,
-                 lf = options.legend.labelFormatter, s, label;
+                 lf = options.legend.labelFormatter, s, label, i;
              // Build a list of legend entries, with each having a label and a color
-             for (var i = 0; i < series.length; ++i) {
+             for (i = 0; i < series.length; ++i) {
                  s = series[i];
                  if (s.label) {
@@ Line 2,655: / Line 2,945: @@
                  if ($.isFunction(options.legend.sorted)) {
                      entries.sort(options.legend.sorted);
-                 } else if (options.legend.sorted == "reverse") {
+                 } else if (options.legend.sorted === "reverse") {
-                	entries.reverse();
+                    entries.reverse();
                  } else {
-                     var ascending = options.legend.sorted != "descending";
+                     var ascending = options.legend.sorted !== "descending";
                      entries.sort(function(a, b) {
-                         return a.label == b.label ? 0 : (
+                         return a.label === b.label ? 0 : (
-                             (a.label < b.label) != ascending ? 1 : -1   // Logical XOR
+                             (a.label < b.label) !== ascending ? 1 : -1   // Logical XOR
                          );
                      });
@@ Line 2,669: / Line 2,959: @@
              // Generate markup for the list of entries, in their final order
-             for (var i = 0; i < entries.length; ++i) {
+             for (i = 0; i < entries.length; ++i) {
                  var entry = entries[i];
-                 if (i % options.legend.noColumns == 0) {
+                 if (i % options.legend.noColumns === 0) {
-                     if (rowStarted)
+                     if (rowStarted) {
-                         fragments.push('</tr>');
+                         fragments.push("</tr>");
-                     fragments.push('<tr>');
+                    }
+                     fragments.push("<tr>");
                      rowStarted = true;
                  }
                  fragments.push(
-                     '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + entry.color + ';overflow:hidden"></div></div></td>' +
+                     "<td class='legendColorBox'><div style='border:1px solid " + options.legend.labelBoxBorderColor + ";padding:1px'><div style='width:4px;height:0;border:5px solid " + entry.color + ";overflow:hidden'></div></div></td>" +
-                     '<td class="legendLabel">' + entry.label + '</td>'
+                     "<td class='legendLabel'>" + entry.label + "</td>"
                  );
              }
-             if (rowStarted)
+             if (rowStarted) {
-                 fragments.push('</tr>');
+                 fragments.push("</tr>");
+            }
-             if (fragments.length == 0)
+             if (fragments.length === 0) {
                  return;
+            }
-             var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
+             var table = "<table style='font-size:smaller;color:" + options.grid.color + "'>" + fragments.join("") + "</table>";
-             if (options.legend.container != null)
+             if (options.legend.container != null) {
                  $(options.legend.container).html(table);
-             else {
+             } else {
                  var pos = "",
                      p = options.legend.position,
                      m = options.legend.margin;
-                 if (m[0] == null)
+                 if (m[0] == null) {
                      m = [m, m];
-                 if (p.charAt(0) == "n")
+                }
-                     pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
+                 if (p.charAt(0) === "n") {
-                 else if (p.charAt(0) == "s")
+                     pos += "top:" + (m[1] + plotOffset.top) + "px;";
-                     pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
+                 } else if (p.charAt(0) === "s") {
-                 if (p.charAt(1) == "e")
+                     pos += "bottom:" + (m[1] + plotOffset.bottom) + "px;";
-                     pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
+                }
-                 else if (p.charAt(1) == "w")
+                 if (p.charAt(1) === "e") {
-                     pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
+                     pos += "right:" + (m[0] + plotOffset.right) + "px;";
-                 var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder);
+                 } else if (p.charAt(1) === "w") {
-                 if (options.legend.backgroundOpacity != 0.0) {
+                     pos += "left:" + (m[0] + plotOffset.left) + "px;";
+                }
+                 var legend = $("<div class='legend'>" + table.replace("style='", "style='position:absolute;" + pos +";") + "</div>").appendTo(placeholder);
+                 if (options.legend.backgroundOpacity !== 0.0) {
                      // put in the transparent background
                      // separately to avoid blended labels and
@@ Line 2,717: / Line 3,013: @@
                      if (c == null) {
                          c = options.grid.backgroundColor;
-                         if (c && typeof c == "string")
+                         if (c && typeof c === "string") {
                              c = $.color.parse(c);
-                         else
+                         } else {
-                             c = $.color.extract(legend, 'background-color');
+                             c = $.color.extract(legend, "background-color");
+                        }
                          c.a = 1;
                          c = c.toString();
                      }
                      var div = legend.children();
-                     $('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity);
+                     $("<div style='position:absolute;width:" + div.width() + "px;height:" + div.height() + "px;" + pos +"background-color:" + c + ";'> </div>").prependTo(legend).css("opacity", options.legend.backgroundOpacity);
                  }
              }
@@ Line 2,740: / Line 3,037: @@
              var maxDistance = options.grid.mouseActiveRadius,
                  smallestDistance = maxDistance * maxDistance + 1,
-                 item = null, foundPoint = false, i, j, ps;
+                 item = null, i, j, ps;
              for (i = series.length - 1; i >= 0; --i) {
-                 if (!seriesFilter(series[i]))
+                 if (!seriesFilter(series[i])) {
                      continue;
+                }
                  var s = series[i],
@@ Line 2,753: / Line 3,051: @@
                      my = axisy.c2p(mouseY),
                      maxx = maxDistance / axisx.scale,
-                     maxy = maxDistance / axisy.scale;
+                     maxy = maxDistance / axisy.scale,
+                    x, y;
                  ps = s.datapoints.pointsize;
                  // with inverse transforms, we can't use the maxx/maxy
                  // optimization, sadly
-                 if (axisx.options.inverseTransform)
+                 if (axisx.options.inverseTransform) {
                      maxx = Number.MAX_VALUE;
-                 if (axisy.options.inverseTransform)
+                }
+                 if (axisy.options.inverseTransform) {
                      maxy = Number.MAX_VALUE;
+                }
                  if (s.lines.show || s.points.show) {
                      for (j = 0; j < points.length; j += ps) {
-                         var x = points[j], y = points[j + 1];
-                         if (x == null)
+                         x = points[j];
+                        y = points[j + 1];
+                         if (x == null) {
                              continue;
+                        }
                          // For points and lines, the cursor must be within a
                          // certain distance to the data point
                          if (x - mx > maxx || x - mx < -maxx ||
-                             y - my > maxy || y - my < -maxy)
+                             y - my > maxy || y - my < -maxy) {
                              continue;
+                        }
                          // We have to calculate distances in pixels, not in
@@ Line 2,791: / Line 3,097: @@
                  if (s.bars.show && !item) { // no other point can be nearby
+                     var barLeft = s.bars.align === "left" ? 0 : -s.bars.barWidth/2,
-                     var barLeft, barRight;
+                        barRight = barLeft + s.bars.barWidth;
-                    switch (s.bars.align) {
-                        case "left":
-                            barLeft = 0;
-                            break;
-                        case "right":
-                            barLeft = -s.bars.barWidth;
-                            break;
-                        default:
-                            barLeft = -s.bars.barWidth / 2;
-                    }
-                    barRight = barLeft + s.bars.barWidth;
                      for (j = 0; j < points.length; j += ps) {
-                         var x = points[j], y = points[j + 1], b = points[j + 2];
+                         x = points[j];
-                         if (x == null)
+                        y = points[j + 1];
+                        var b = points[j + 2];
+                         if (x == null) {
                              continue;
+                        }
                          // for a bar graph, the cursor must be inside the bar
@@ Line 2,817: / Line 3,113: @@
                               my >= y + barLeft && my <= y + barRight) :
                              (mx >= x + barLeft && mx <= x + barRight &&
-                              my >= Math.min(b, y) && my <= Math.max(b, y)))
+                              my >= Math.min(b, y) && my <= Math.max(b, y))) {
-                                item = [i, j / ps];
+                            item = [i, j / ps];
+                        }
                      }
                  }
@@ Line 2,838: / Line 3,135: @@
          function onMouseMove(e) {
-             if (options.grid.hoverable)
+             if (options.grid.hoverable) {
                  triggerClickHoverEvent("plothover", e,
-                                        function (s) { return s["hoverable"] != false; });
+                                        function (s) { return s.hoverable !== false; });
+            }
          }
          function onMouseLeave(e) {
-             if (options.grid.hoverable)
+             if (options.grid.hoverable) {
                  triggerClickHoverEvent("plothover", e,
-                                        function (s) { return false; });
+                                        function () { return false; });
+            }
          }
          function onClick(e) {
              triggerClickHoverEvent("plotclick", e,
-                                    function (s) { return s["clickable"] != false; });
+                                    function (s) { return s.clickable !== false; });
          }
@@ Line 2,877: / Line 3,176: @@
                  for (var i = 0; i < highlights.length; ++i) {
                      var h = highlights[i];
-                     if (h.auto == eventname &&
+                     if (h.auto === eventname && !(
-                        !(item && h.series == item.series &&
+                        item && h.series === item.series &&
-                          h.point[0] == item.datapoint[0] &&
+                        h.point[0] === item.datapoint[0] &&
-                          h.point[1] == item.datapoint[1]))
+                        h.point[1] === item.datapoint[1]
+                    )) {
                          unhighlight(h.series, h.point);
+                    }
                  }
-                 if (item)
+                 if (item) {
                      highlight(item.series, item.datapoint, eventname);
+                }
              }
@@ Line 2,893: / Line 3,195: @@
          function triggerRedrawOverlay() {
              var t = options.interaction.redrawOverlayInterval;
-             if (t == -1) {      // skip event queue
+             if (t === -1) {      // skip event queue
                  drawOverlay();
                  return;
              }
-             if (!redrawTimeout)
+             if (!redrawTimeout) {
                  redrawTimeout = setTimeout(drawOverlay, t);
+            }
          }
@@ Line 2,914: / Line 3,217: @@
                  hi = highlights[i];
-                 if (hi.series.bars.show)
+                 if (hi.series.bars.show) {
                      drawBarHighlight(hi.series, hi.point);
-                 else
+                 } else {
                      drawPointHighlight(hi.series, hi.point);
+                }
              }
              octx.restore();
@@ Line 2,925: / Line 3,229: @@
          function highlight(s, point, auto) {
-             if (typeof s == "number")
+             if (isNumeric(s)) {
                  s = series[s];
+            }
-             if (typeof point == "number") {
+             if (isNumeric(point)) {
                  var ps = s.datapoints.pointsize;
                  point = s.datapoints.points.slice(ps * point, ps * (point + 1));
@@ Line 2,934: / Line 3,239: @@
              var i = indexOfHighlight(s, point);
-             if (i == -1) {
+             if (i === -1) {
                  highlights.push({ series: s, point: point, auto: auto });
                  triggerRedrawOverlay();
-             }
+             } else if (!auto) {
-            else if (!auto)
                  highlights[i].auto = false;
+            }
          }
@@ Line 2,950: / Line 3,254: @@
              }
-             if (typeof s == "number")
+             if (isNumeric(s)) {
                  s = series[s];
+            }
-             if (typeof point == "number") {
+             if (isNumeric(point)) {
                  var ps = s.datapoints.pointsize;
                  point = s.datapoints.points.slice(ps * point, ps * (point + 1));
@@ Line 2,959: / Line 3,264: @@
              var i = indexOfHighlight(s, point);
-             if (i != -1) {
+             if (i !== -1) {
                  highlights.splice(i, 1);
                  triggerRedrawOverlay();
              }
@@ Line 2,969: / Line 3,273: @@
              for (var i = 0; i < highlights.length; ++i) {
                  var h = highlights[i];
-                 if (h.series == s && h.point[0] == p[0]
+                 if (h.series === s && h.point[0] === p[0] && h.point[1] === p[1]) {
-                    && h.point[1] == p[1])
                      return i;
+                }
              }
              return -1;
@@ Line 2,979: / Line 3,283: @@
              var x = point[0], y = point[1],
                  axisx = series.xaxis, axisy = series.yaxis,
-                 highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString();
+                 highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale("a", 0.5).toString();
-             if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
+             if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
                  return;
+            }
              var pointRadius = series.points.radius + series.points.lineWidth / 2;
@@ Line 2,992: / Line 3,297: @@
              octx.beginPath();
-             if (series.points.symbol == "circle")
+             if (series.points.symbol === "circle") {
                  octx.arc(x, y, radius, 0, 2 * Math.PI, false);
-             else
+             } else {
                  series.points.symbol(octx, x, y, radius, false);
+            }
              octx.closePath();
              octx.stroke();
@@ Line 3,001: / Line 3,307: @@
          function drawBarHighlight(series, point) {
-             var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(),
+             var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale("a", 0.5).toString(),
                  fillStyle = highlightColor,
-                 barLeft;
+                 barLeft = series.bars.align === "left" ? 0 : -series.bars.barWidth/2;
-            switch (series.bars.align) {
-                case "left":
-                    barLeft = 0;
-                    break;
-                case "right":
-                    barLeft = -series.bars.barWidth;
-                    break;
-                default:
-                    barLeft = -series.bars.barWidth / 2;
-            }
              octx.lineWidth = series.bars.lineWidth;
@@ Line 3,020: / Line 3,315: @@
              drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth,
-                     function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);
+, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);
          }
          function getColorOrGradient(spec, bottom, top, defaultColor) {
-             if (typeof spec == "string")
+             if (typeof spec === "string") {
                  return spec;
-             else {
+             } else {
                  // assume this is a gradient spec; IE currently only
                  // supports a simple vertical gradient properly, so that's
@@ Line 3,034: / Line 3,329: @@
                  for (var i = 0, l = spec.colors.length; i < l; ++i) {
                      var c = spec.colors[i];
-                     if (typeof c != "string") {
+                     if (typeof c !== "string") {
                          var co = $.color.parse(defaultColor);
-                         if (c.brightness != null)
+                         if (c.brightness != null) {
-                             co = co.scale('rgb', c.brightness);
+                             co = co.scale("rgb", c.brightness);
-                         if (c.opacity != null)
+                        }
+                         if (c.opacity != null) {
                              co.a *= c.opacity;
+                        }
                          c = co.toString();
                      }
@@ Line 3,059: / Line 3,356: @@
      };
-     $.plot.version = "0.8.2-alpha";
+     $.plot.version = "0.9.0-alpha";
      $.plot.plugins = [];