Warning, file /office/tellico/xslt/report-templates/jquery.flot.js was not indexed or was modified since last indexation (in which case cross-reference links may be missing, inaccurate or erroneous).

 /* Javascript plotting library for jQuery, v. 0.5.
  *
  * Released under the MIT license by IOLA, December 2007.
  *
  */
 
 (function($) {
     function Plot(target, 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
                 },
                 xaxis: {
                     mode: null, // null or "time"
                     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
                     ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
                     tickFormatter: null, // fn: number -> string
                     labelWidth: null, // size of tick labels in pixels
                     labelHeight: null,
                     
                     // mode specific options
                     tickDecimals: null, // no. of decimals, null means auto
                     tickSize: null, // number or [number, "unit"]
                     minTickSize: null, // number or [number, "unit"]
                     monthNames: null, // list of names of months
                     timeformat: null // format string to use
                 },
                 yaxis: {
                     autoscaleMargin: 0.02
                 },
                 x2axis: {
                     autoscaleMargin: null
                 },
                 y2axis: {
                     autoscaleMargin: 0.02
                 },
                 series: {
                     points: {
                         show: false,
                         radius: 3,
                         lineWidth: 2, // in pixels
                         fill: true,
                         fillColor: "#ffffff"
                     },
                     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
                     },
                     bars: {
                         show: false,
                         lineWidth: 2, // in pixels
                         barWidth: 1, // in units of the x axis
                         fill: true,
                         fillColor: null,
                         align: "left", // or "center" 
                         horizontal: false // when horizontal, left is now top
                     },
                     shadowSize: 3
                 },
                 grid: {
                     show: true,
                     color: "#545454", // primary color used for outline and labels
                     backgroundColor: null, // null for transparent, else color
                     tickColor: "#dddddd", // color used for the ticks
                     labelMargin: 5, // in pixels
                     borderWidth: 2, // in pixels
                     borderColor: null, // set if different from the grid color
                     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
                 },
                 selection: {
                     mode: null, // one of null, "x", "y" or "xy"
                     color: "#e8cfac"
                 }
             },
         canvas = 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,
         axes = { xaxis: {}, yaxis: {}, x2axis: {}, y2axis: {} },
         plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
         canvasWidth = 0, canvasHeight = 0,
         plotWidth = 0, plotHeight = 0,
         hooks = {
             processOptions: [],
             processRawData: [],
             processDatapoints: [],
             draw: [],
             bindEvents: [],
             drawOverlay: []
         },
         plot = this,
         // dedicated to storing data for buggy standard compliance cases
         workarounds = {};
 
         // public functions
         plot.setData = setData;
         plot.setupGrid = setupGrid;
         plot.draw = draw;
         plot.clearSelection = clearSelection;
         plot.setSelection = setSelection;
         plot.getSelection = getSelection;
         plot.getCanvas = function() { return canvas; };
         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() { return axes; };
         plot.getOptions = function() { return options; };
         plot.highlight = highlight;
         plot.unhighlight = unhighlight;
         plot.triggerRedrawOverlay = triggerRedrawOverlay;
         plot.pointOffset = function(point) {
             return { left: parseInt(axisSpecToRealAxis(point, "xaxis").p2c(+point.x) + plotOffset.left),
                      top: parseInt(axisSpecToRealAxis(point, "yaxis").p2c(+point.y) + plotOffset.top) };
         };
         
 
         // public attributes
         plot.hooks = hooks;
         
         // initialize
         initPlugins(plot);
         parseOptions(options_);
         constructCanvas();
         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() {
             for (var i = 0; i < plugins.length; ++i) {
                 var p = plugins[i];
                 p.init(plot);
                 if (p.options)
                     $.extend(true, options, p.options);
             }
         }
         
         function parseOptions(opts) {
             $.extend(true, options, opts);
             if (options.grid.borderColor == null)
                 options.grid.borderColor = options.grid.color;
             // 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.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)
                 options.series.shadowSize = options.shadowSize;
 
             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) {
                     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 axisSpecToRealAxis(obj, attr) {
             var a = obj[attr];
             if (!a || a == 1)
                 return axes[attr];
             if (typeof a == "number")
                 return axes[attr.charAt(0) + a + attr.slice(1)];
             return a; // assume it's OK
         }
         
         function fillInSeriesOptions() {
             var i;
             
             // collect what we already got of colors
             var neededColors = series.length,
                 usedColors = [],
                 assignedColors = [];
             for (i = 0; i < series.length; ++i) {
                 var sc = series[i].color;
                 if (sc != null) {
                     --neededColors;
                     if (typeof sc == "number")
                         assignedColors.push(sc);
                     else
                         usedColors.push(parseColor(series[i].color));
                 }
             }
             
             // we might need to generate more colors if higher indices
             // are assigned
             for (i = 0; i < assignedColors.length; ++i) {
                 neededColors = Math.max(neededColors, assignedColors[i] + 1);
             }
 
             // produce colors as needed
             var colors = [], variation = 0;
             i = 0;
             while (colors.length < neededColors) {
                 var c;
                 if (options.colors.length == i) // check degenerate case
                     c = new Color(100, 100, 100);
                 else
                     c = parseColor(options.colors[i]);
 
                 // vary color if needed
                 var sign = variation % 2 == 1 ? -1 : 1;
                 var factor = 1 + sign * Math.ceil(variation / 2) * 0.2;
                 c.scale(factor, factor, factor);
 
                 // FIXME: if we're getting to close to something else,
                 // we should probably skip this one
                 colors.push(c);
                 
                 ++i;
                 if (i >= options.colors.length) {
                     i = 0;
                     ++variation;
                 }
             }
 
             // fill in the options
             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 (typeof s.color == "number")
                     s.color = colors[s.color].toString();
 
                 // turn on lines automatically in case nothing is set
                 if (s.lines.show == null && !s.bars.show && !s.points.show)
                     s.lines.show = true;
 
                 // setup axes
                 s.xaxis = axisSpecToRealAxis(s, "xaxis");
                 s.yaxis = axisSpecToRealAxis(s, "yaxis");
             }
         }
         
         function processData() {
             var topSentry = Number.POSITIVE_INFINITY,
                 bottomSentry = Number.NEGATIVE_INFINITY,
                 i, j, k, m, length,
                 s, points, ps, x, y, axis;
 
             for (axis in axes) {
                 axes[axis].datamin = topSentry;
                 axes[axis].datamax = bottomSentry;
                 axes[axis].min = options[axis].min;
                 axes[axis].max = options[axis].max;
                 axes[axis].used = false;
             }
 
             function updateAxis(axis, min, max) {
                 if (min < axis.datamin)
                     axis.datamin = min;
                 if (max > axis.datamax)
                     axis.datamax = max;
             }
 
             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];
 
                 if (s.datapoints.pointsize != null)
                     continue; // already filled in
 
                 var data = s.data, format = [], p;
 
                 // determine the point size
                 if (s.bars.show) {
                     s.datapoints.pointsize = 3;
                     format.push({ d: 0 });
                 }
                 else
                     s.datapoints.pointsize = 2;
                 
                 /*
                 // examine data to find out how to copy
                 for (j = 0; j < data.length; ++j) {
                 }*/
                 
                 ps = s.datapoints.pointsize;
                 points = s.datapoints.points;
 
                 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];
 
                     if (p != null) {
                         x = p[0];
                         y = p[1];
                     }
                     else
                         y = x = null;
 
                     if (x != null) {
                         x = +x; // convert to number
                         if (isNaN(x))
                             x = null;
                     }
 
                     if (y != null) {
                         y = +y; // convert to number
                         if (isNaN(y))
                             y = null;
                     }
 
                     // check validity of point, making sure both are cleared
                     if (x == null && y != null) {
                         // extract min/max info before we whack
                         updateAxis(s.yaxis, y, y);
                         y = null;
                     }
 
                     if (y == null && x != null) {
                         updateAxis(s.xaxis, x, x);
                         x = null;
                     }
                     
                     if (insertSteps && x != null && k > 0
                         && points[k - ps] != null
                         && points[k - ps] != x && points[k - ps + 1] != y) {
                         points[k + 1] = points[k - ps + 1];
                         points[k] = x;
                             
                         // copy the remainding from real point
                         for (m = 2; m < ps; ++m)
                             points[k + m] = p[m] == null ? format[m-2].d : p[m];
                         k += ps;
                     }
 
                     for (m = 2; m < ps; ++m)
                         points[k + m] = p == null || p[m] == null ? format[m-2].d : p[m];
                     
                     points[k] = x;
                     points[k + 1] = y;
                 }
             }
 
             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;
 
                 var xmin = topSentry, ymin = topSentry,
                     xmax = bottomSentry, ymax = bottomSentry;
                 
                 for (j = 0; j < points.length; j += ps) {
                     x = points[j];
 
                     if (x == null)
                         continue;
 
                     if (x < xmin)
                         xmin = x;
                     if (x > xmax)
                         xmax = x;
 
                     y = points[j + 1];
 
                     if (y < ymin)
                         ymin = y;
                     if (y > ymax)
                         ymax = y;
                 }
                 
                 if (s.bars.show) {
                     // make sure we got room for the bar on the dancing floor
                     var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2;
                     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);
             }
 
             for (axis in axes) {
                 if (axes[axis].datamin == topSentry)
                     axes[axis].datamin = null;
                 if (axes[axis].datamax == bottomSentry)
                     axes[axis].datamax = null;
             }
         }
 
         function constructCanvas() {
             function makeCanvas(width, height) {
                 var c = document.createElement('canvas');
                 c.width = width;
                 c.height = height;
                 if ($.browser.msie) // excanvas hack
                     c = window.G_vmlCanvasManager.initElement(c);
                 return c;
             }
             
             canvasWidth = target.width();
             canvasHeight = target.height();
             target.html(""); // clear target
             if (target.css("position") == 'static')
                 target.css("position", "relative"); // for positioning labels and overlay
 
             if (canvasWidth <= 0 || canvasHeight <= 0)
                 throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
 
             if ($.browser.msie) // excanvas hack
                 window.G_vmlCanvasManager.init_(document); // make sure everything is setup
             
             // the canvas
             canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(target).get(0);
             ctx = canvas.getContext("2d");
 
             // overlay canvas for interactive features
             overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(target).get(0);
             octx = overlay.getContext("2d");
             octx.stroke();
         }
 
         function bindEvents() {
             // we include the canvas in the event holder too, because IE 7
             // sometimes has trouble with the stacking order
             eventHolder = $([overlay, canvas]);
 
             // bind events
             if (options.selection.mode != null
                 || options.grid.hoverable)
                 eventHolder.mousemove(onMouseMove);
 
             if (options.selection.mode != null)
                 eventHolder.mousedown(onMouseDown);
 
             if (options.grid.clickable)
                 eventHolder.click(onClick);
 
             executeHooks(hooks.bindEvents, [eventHolder]);
         }
 
         function setupGrid() {
             function setTransformationHelpers(axis) {
                 var s, m;
                     
                 // add transformation helpers
                 if (axis == axes.xaxis || axis == axes.x2axis) {
                     // precompute how much the axis is scaling a point
                     // in canvas space
                     s = axis.scale = plotWidth / (axis.max - axis.min);
                     m = axis.min;
                     
                     // data point to canvas coordinate
                     axis.p2c = function (p) { return (p - m) * s; };
                     // canvas coordinate to data point 
                     axis.c2p = function (c) { return m + c / s; };
                 }
                 else {
                     s = axis.scale = plotHeight / (axis.max - axis.min);
                     m = axis.max;
                     
                     axis.p2c = function (p) { return (m - p) * s; };
                     axis.c2p = function (p) { return m - p / s; };
                 }
             }
 
             var axis;
             for (axis in axes)
                 setRange(axes[axis], options[axis]);
             
             if (options.grid.show) {
                 for (axis in axes) {
                     prepareTickGeneration(axes[axis], options[axis]);
                     setTicks(axes[axis], options[axis]);
                 }                    
 
                 setGridSpacing();
             }
             else {
                 plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = 0;
                 plotWidth = canvasWidth;
                 plotHeight = canvasHeight;
             }
             
             for (axis in axes)
                 setTransformationHelpers(axes[axis]);
 
             if (options.grid.show)
                 insertLabels();
             
             insertLegend();
         }
         
         function setRange(axis, axisOptions) {
             var min = +(axisOptions.min != null ? axisOptions.min : axis.datamin),
                 max = +(axisOptions.max != null ? axisOptions.max : axis.datamax);
 
             if (max - min == 0.0) {
                 // degenerate case
                 var widen = max == 0 ? 1 : 0.01;
 
                 if (axisOptions.min == null)
                     min -= widen;
                 // alway widen max if we couldn't widen min to ensure we
                 // don't fall into min == max which doesn't work
                 if (axisOptions.max == null || axisOptions.min != null)
                     max += widen;
             }
             else {
                 // consider autoscaling
                 var margin = axisOptions.autoscaleMargin;
                 if (margin != null) {
                     if (axisOptions.min == null) {
                         min -= (max - min) * 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 (axisOptions.max == null) {
                         max += (max - min) * margin;
                         if (max > 0 && axis.datamax != null && axis.datamax <= 0)
                             max = 0;
                     }
                 }
             }
             axis.min = min;
             axis.max = max;
         }
 
         function prepareTickGeneration(axis, axisOptions) {
             // estimate number of ticks
             var noTicks;
             if (typeof axisOptions.ticks == "number" && axisOptions.ticks > 0)
                 noTicks = axisOptions.ticks;
             else if (axis == axes.xaxis || axis == axes.x2axis)
                 noTicks = canvasWidth / 100;
             else
                 noTicks = canvasHeight / 60;
             
             var delta = (axis.max - axis.min) / noTicks;
             var size, generator, unit, formatter, i, magn, norm;
 
             if (axisOptions.mode == "time") {
                 // pretty handling of time
                 
                 // map of app. size of time units in milliseconds
                 var timeUnitSize = {
                     "second": 1000,
                     "minute": 60 * 1000,
                     "hour": 60 * 60 * 1000,
                     "day": 24 * 60 * 60 * 1000,
                     "month": 30 * 24 * 60 * 60 * 1000,
                     "year": 365.2425 * 24 * 60 * 60 * 1000
                 };
 
 
                 // the allowed tick sizes, after 1 year we use
                 // an integer algorithm
                 var spec = [
                     [1, "second"], [2, "second"], [5, "second"], [10, "second"],
                     [30, "second"], 
                     [1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"],
                     [30, "minute"], 
                     [1, "hour"], [2, "hour"], [4, "hour"],
                     [8, "hour"], [12, "hour"],
                     [1, "day"], [2, "day"], [3, "day"],
                     [0.25, "month"], [0.5, "month"], [1, "month"],
                     [2, "month"], [3, "month"], [6, "month"],
                     [1, "year"]
                 ];
 
                 var minSize = 0;
                 if (axisOptions.minTickSize != null) {
                     if (typeof axisOptions.tickSize == "number")
                         minSize = axisOptions.tickSize;
                     else
                         minSize = axisOptions.minTickSize[0] * timeUnitSize[axisOptions.minTickSize[1]];
                 }
 
                 for (i = 0; i < spec.length - 1; ++i)
                     if (delta < (spec[i][0] * timeUnitSize[spec[i][1]]
                                  + spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2
                        && spec[i][0] * timeUnitSize[spec[i][1]] >= minSize)
                         break;
                 size = spec[i][0];
                 unit = spec[i][1];
                 
                 // special-case the possibility of several years
                 if (unit == "year") {
                     magn = Math.pow(10, Math.floor(Math.log(delta / timeUnitSize.year) / Math.LN10));
                     norm = (delta / timeUnitSize.year) / magn;
                     if (norm < 1.5)
                         size = 1;
                     else if (norm < 3)
                         size = 2;
                     else if (norm < 7.5)
                         size = 5;
                     else
                         size = 10;
 
                     size *= magn;
                 }
 
                 if (axisOptions.tickSize) {
                     size = axisOptions.tickSize[0];
                     unit = axisOptions.tickSize[1];
                 }
                 
                 generator = function(axis) {
                     var ticks = [],
                         tickSize = axis.tickSize[0], unit = axis.tickSize[1],
                         d = new Date(axis.min);
                     
                     var step = tickSize * timeUnitSize[unit];
 
                     if (unit == "second")
                         d.setUTCSeconds(floorInBase(d.getUTCSeconds(), tickSize));
                     if (unit == "minute")
                         d.setUTCMinutes(floorInBase(d.getUTCMinutes(), tickSize));
                     if (unit == "hour")
                         d.setUTCHours(floorInBase(d.getUTCHours(), tickSize));
                     if (unit == "month")
                         d.setUTCMonth(floorInBase(d.getUTCMonth(), tickSize));
                     if (unit == "year")
                         d.setUTCFullYear(floorInBase(d.getUTCFullYear(), tickSize));
                     
                     // reset smaller components
                     d.setUTCMilliseconds(0);
                     if (step >= timeUnitSize.minute)
                         d.setUTCSeconds(0);
                     if (step >= timeUnitSize.hour)
                         d.setUTCMinutes(0);
                     if (step >= timeUnitSize.day)
                         d.setUTCHours(0);
                     if (step >= timeUnitSize.day * 4)
                         d.setUTCDate(1);
                     if (step >= timeUnitSize.year)
                         d.setUTCMonth(0);
 
 
                     var carry = 0, v = Number.NaN, prev;
                     do {
                         prev = v;
                         v = d.getTime();
                         ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
                         if (unit == "month") {
                             if (tickSize < 1) {
                                 // a bit complicated - we'll divide the month
                                 // up but we need to take care of fractions
                                 // so we don't end up in the middle of a day
                                 d.setUTCDate(1);
                                 var start = d.getTime();
                                 d.setUTCMonth(d.getUTCMonth() + 1);
                                 var end = d.getTime();
                                 d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize);
                                 carry = d.getUTCHours();
                                 d.setUTCHours(0);
                             }
                             else
                                 d.setUTCMonth(d.getUTCMonth() + tickSize);
                         }
                         else if (unit == "year") {
                             d.setUTCFullYear(d.getUTCFullYear() + tickSize);
                         }
                         else
                             d.setTime(v + step);
                     } while (v < axis.max && v != prev);
 
                     return ticks;
                 };
 
                 formatter = function (v, axis) {
                     var d = new Date(v);
 
                     // first check global format
                     if (axisOptions.timeformat != null)
                         return $.plot.formatDate(d, axisOptions.timeformat, axisOptions.monthNames);
                     
                     var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];
                     var span = axis.max - axis.min;
                     
                     if (t < timeUnitSize.minute)
                         fmt = "%h:%M:%S";
                     else if (t < timeUnitSize.day) {
                         if (span < 2 * timeUnitSize.day)
                             fmt = "%h:%M";
                         else
                             fmt = "%b %d %h:%M";
                     }
                     else if (t < timeUnitSize.month)
                         fmt = "%b %d";
                     else if (t < timeUnitSize.year) {
                         if (span < timeUnitSize.year)
                             fmt = "%b";
                         else
                             fmt = "%b %y";
                     }
                     else
                         fmt = "%y";
                     
                     return $.plot.formatDate(d, fmt, axisOptions.monthNames);
                 };
             }
             else {
                 // pretty rounding of base-10 numbers
                 var maxDec = axisOptions.tickDecimals;
                 var dec = -Math.floor(Math.log(delta) / Math.LN10);
                 if (maxDec != null && dec > maxDec)
                     dec = maxDec;
                 
                 magn = Math.pow(10, -dec);
                 norm = delta / magn; // norm is between 1.0 and 10.0
                 
                 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 (axisOptions.minTickSize != null && size < axisOptions.minTickSize)
                     size = axisOptions.minTickSize;
 
                 if (axisOptions.tickSize != null)
                     size = axisOptions.tickSize;
                 
                 axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec);
                 
                 generator = function (axis) {
                     var ticks = [];
 
                     // spew out all possible ticks
                     var start = floorInBase(axis.min, axis.tickSize),
                         i = 0, v = Number.NaN, prev;
                     do {
                         prev = v;
                         v = start + i * axis.tickSize;
                         ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
                         ++i;
                     } while (v < axis.max && v != prev);
                     return ticks;
                 };
 
                 formatter = function (v, axis) {
                     return v.toFixed(axis.tickDecimals);
                 };
             }
 
             axis.tickSize = unit ? [size, unit] : size;
             axis.tickGenerator = generator;
             if ($.isFunction(axisOptions.tickFormatter))
                 axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); };
             else
                 axis.tickFormatter = formatter;
             if (axisOptions.labelWidth != null)
                 axis.labelWidth = axisOptions.labelWidth;
             if (axisOptions.labelHeight != null)
                 axis.labelHeight = axisOptions.labelHeight;
         }
         
         function setTicks(axis, axisOptions) {
             axis.ticks = [];
 
             if (!axis.used)
                 return;
             
             if (axisOptions.ticks == null)
                 axis.ticks = axis.tickGenerator(axis);
             else if (typeof axisOptions.ticks == "number") {
                 if (axisOptions.ticks > 0)
                     axis.ticks = axis.tickGenerator(axis);
             }
             else if (axisOptions.ticks) {
                 var ticks = axisOptions.ticks;
 
                 if ($.isFunction(ticks))
                     // generate the ticks
                     ticks = ticks({ min: axis.min, max: axis.max });
                 
                 // clean up the user-supplied ticks, copy them over
                 var i, v;
                 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);
                     axis.ticks[i] = { v: v, label: label };
                 }
             }
 
             if (axisOptions.autoscaleMargin != null && axis.ticks.length > 0) {
                 // snap to ticks
                 if (axisOptions.min == null)
                     axis.min = Math.min(axis.min, axis.ticks[0].v);
                 if (axisOptions.max == null && axis.ticks.length > 1)
                     axis.max = Math.min(axis.max, axis.ticks[axis.ticks.length - 1].v);
             }
         }
         
         function setGridSpacing() {
             function measureXLabels(axis) {
                 // to avoid measuring the widths of the labels, we
                 // construct fixed-size boxes and put the labels inside
                 // them, we don't need the exact figures and the
                 // fixed-size box content is easy to center
                 if (axis.labelWidth == null)
                     axis.labelWidth = canvasWidth / 6;
 
                 // measure x label heights
                 if (axis.labelHeight == null) {
                     labels = [];
                     for (i = 0; i < axis.ticks.length; ++i) {
                         l = axis.ticks[i].label;
                         if (l)
                             labels.push('<div class="tickLabel" style="float:left;width:' + axis.labelWidth + 'px">' + l + '</div>');
                     }
                     
                     axis.labelHeight = 0;
                     if (labels.length > 0) {
                         var dummyDiv = $('<div style="position:absolute;top:-10000px;width:10000px;font-size:smaller">'
                                          + labels.join("") + '<div style="clear:left"></div></div>').appendTo(target);
                         axis.labelHeight = dummyDiv.height();
                         dummyDiv.remove();
                     }
                 }
             }
             
             function measureYLabels(axis) {
                 if (axis.labelWidth == null || axis.labelHeight == null) {
                     var i, labels = [], l;
                     // calculate y label dimensions
                     for (i = 0; i < axis.ticks.length; ++i) {
                         l = axis.ticks[i].label;
                         if (l)
                             labels.push('<div class="tickLabel">' + l + '</div>');
                     }
                     
                     if (labels.length > 0) {
                         var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'
                                          + labels.join("") + '</div>').appendTo(target);
                         if (axis.labelWidth == null)
                             axis.labelWidth = dummyDiv.width();
                         if (axis.labelHeight == null)
                             axis.labelHeight = dummyDiv.find("div").height();
                         dummyDiv.remove();
                     }
                     
                     if (axis.labelWidth == null)
                         axis.labelWidth = 0;
                     if (axis.labelHeight == null)
                         axis.labelHeight = 0;
                 }
             }
 
             // get the most space needed around the grid for things
             // that may stick out
             var maxOutset = options.grid.borderWidth;
             for (i = 0; i < series.length; ++i)
                 maxOutset = Math.max(maxOutset, 2 * (series[i].points.radius + series[i].points.lineWidth/2));
             
             plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset;
             
             var margin = options.grid.labelMargin + options.grid.borderWidth;
             
             measureXLabels(axes.xaxis);
             measureYLabels(axes.yaxis);
             measureXLabels(axes.x2axis);
             measureYLabels(axes.y2axis);
             
             if (axes.xaxis.labelHeight > 0)
                 plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin);
             if (axes.yaxis.labelWidth > 0)
                     plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + margin);
             
             if (axes.x2axis.labelHeight > 0)
                 plotOffset.top = Math.max(maxOutset, axes.x2axis.labelHeight + margin);
             
             if (axes.y2axis.labelWidth > 0)
                 plotOffset.right = Math.max(maxOutset, axes.y2axis.labelWidth + margin);
             
             plotWidth = canvasWidth - plotOffset.left - plotOffset.right;
             plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top;
         }
         
         function draw() {
             if (options.grid.show)
                 drawGrid();
 
             for (var i = 0; i < series.length; ++i)
                 drawSeries(series[i]);
 
             executeHooks(hooks.draw, [ctx]);
         }
 
         function extractRange(ranges, coord) {
             var firstAxis = coord + "axis",
                 secondaryAxis = coord + "2axis",
                 axis, from, to, reverse;
 
             if (ranges[firstAxis]) {
                 axis = axes[firstAxis];
                 from = ranges[firstAxis].from;
                 to = ranges[firstAxis].to;
             }
             else if (ranges[secondaryAxis]) {
                 axis = axes[secondaryAxis];
                 from = ranges[secondaryAxis].from;
                 to = ranges[secondaryAxis].to;
             }
             else {
                 // backwards-compat stuff - to be removed in future
                 axis = axes[firstAxis];
                 from = ranges[coord + "1"];
                 to = ranges[coord + "2"];
             }
 
             // auto-reverse as an added bonus
             if (from != null && to != null && from > to)
                 return { from: to, to: from, axis: axis };
             
             return { from: from, to: to, axis: axis };
         }
         
         function drawGrid() {
             var i;
             
             ctx.save();
             ctx.clearRect(0, 0, canvasWidth, canvasHeight);
             ctx.translate(plotOffset.left, plotOffset.top);
 
             // draw background, if any
             if (options.grid.backgroundColor) {
                 ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)");
                 ctx.fillRect(0, 0, plotWidth, plotHeight);
             }
 
             // draw markings
             var markings = options.grid.markings;
             if (markings) {
                 if ($.isFunction(markings))
                     // xmin etc. are backwards-compatible, to be removed in future
                     markings = markings({ xmin: axes.xaxis.min, xmax: axes.xaxis.max, ymin: axes.yaxis.min, ymax: axes.yaxis.max, xaxis: axes.xaxis, yaxis: axes.yaxis, x2axis: axes.x2axis, y2axis: axes.y2axis });
 
                 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.strokeStyle = m.color || options.grid.markingsColor;
                         ctx.beginPath();
                         ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth;
                         //ctx.moveTo(Math.floor(xrange.from), yrange.from);
                         //ctx.lineTo(Math.floor(xrange.to), yrange.to);
                         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 inner grid
             ctx.lineWidth = 1;
             ctx.strokeStyle = options.grid.tickColor;
             ctx.beginPath();
             var v, axis = axes.xaxis;
             for (i = 0; i < axis.ticks.length; ++i) {
                 v = axis.ticks[i].v;
                 if (v <= axis.min || v >= axes.xaxis.max)
                     continue;   // skip those lying on the axes
 
                 ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 0);
                 ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, plotHeight);
             }
 
             axis = axes.yaxis;
             for (i = 0; i < axis.ticks.length; ++i) {
                 v = axis.ticks[i].v;
                 if (v <= axis.min || v >= axis.max)
                     continue;
 
                 ctx.moveTo(0, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
                 ctx.lineTo(plotWidth, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
             }
 
             axis = axes.x2axis;
             for (i = 0; i < axis.ticks.length; ++i) {
                 v = axis.ticks[i].v;
                 if (v <= axis.min || v >= axis.max)
                     continue;
     
                 ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, -5);
                 ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 5);
             }
 
             axis = axes.y2axis;
             for (i = 0; i < axis.ticks.length; ++i) {
                 v = axis.ticks[i].v;
                 if (v <= axis.min || v >= axis.max)
                     continue;
 
                 ctx.moveTo(plotWidth-5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
                 ctx.lineTo(plotWidth+5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
             }
             
             ctx.stroke();
             
             if (options.grid.borderWidth) {
                 // draw border
                 var bw = options.grid.borderWidth;
                 ctx.lineWidth = bw;
                 ctx.strokeStyle = options.grid.borderColor;
                 ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw);
             }
 
             ctx.restore();
         }
 
         function insertLabels() {
             target.find(".tickLabels").remove();
             
             var html = ['<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">'];
 
             function addLabels(axis, labelGenerator) {
                 for (var i = 0; i < axis.ticks.length; ++i) {
                     var tick = axis.ticks[i];
                     if (!tick.label || tick.v < axis.min || tick.v > axis.max)
                         continue;
                     html.push(labelGenerator(tick, axis));
                 }
             }
 
             var margin = options.grid.labelMargin + options.grid.borderWidth;
             
             addLabels(axes.xaxis, function (tick, axis) {
                 return '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
             });
             
             
             addLabels(axes.yaxis, function (tick, axis) {
                 return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;right:' + (plotOffset.right + plotWidth + margin) + 'px;width:' + axis.labelWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
             });
             
             addLabels(axes.x2axis, function (tick, axis) {
                 return '<div style="position:absolute;bottom:' + (plotOffset.bottom + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
             });
             
             addLabels(axes.y2axis, function (tick, axis) {
                 return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;left:' + (plotOffset.left + plotWidth + margin) +'px;width:' + axis.labelWidth + 'px;text-align:left" class="tickLabel">' + tick.label + "</div>";
             });
 
             html.push('</div>');
             
             target.append(html.join(""));
         }
 
         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),
                     top, lastX = 0, areaOpen = false;
                 
                 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 (areaOpen && x1 != null && x2 == null) {
                         // close area
                         ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom));
                         ctx.fill();
                         areaOpen = false;
                         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));
                         lastX = x2;
                         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));
                         lastX = x2;
                         continue;
                     }
                     
                     // else it's a bit more complicated, there might
                     // be two rectangles and two triangles we need to fill
                     // in; to find these keep track of the current x values
                     var x1old = x1, x2old = x2;
 
                     // and clip the y values, without shortcutting
                     
                     // 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) {
                         if (y1 <= axisy.min)
                             top = axisy.min;
                         else
                             top = axisy.max;
                         
                         ctx.lineTo(axisx.p2c(x1old), axisy.p2c(top));
                         ctx.lineTo(axisx.p2c(x1), axisy.p2c(top));
                     }
                     
                     // fill the triangles
                     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) {
                         if (y2 <= axisy.min)
                             top = axisy.min;
                         else
                             top = axisy.max;
                         
                         ctx.lineTo(axisx.p2c(x2), axisy.p2c(top));
                         ctx.lineTo(axisx.p2c(x2old), axisy.p2c(top));
                     }
 
                     lastX = Math.max(x2, x2old);
                 }
 
                 if (areaOpen) {
                     ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom));
                     ctx.fill();
                 }
             }
             
             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)";
                 var xoffset = 1;
                 plotLine(series.datapoints, xoffset, Math.sqrt((lw/2 + sw/2)*(lw/2 + sw/2) - xoffset*xoffset), series.xaxis, series.yaxis);
                 ctx.lineWidth = sw/2;
                 plotLine(series.datapoints, xoffset, Math.sqrt((lw/2 + sw/4)*(lw/2 + sw/4) - xoffset*xoffset), 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, circumference, axisx, axisy) {
                 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();
                     ctx.arc(axisx.p2c(x), axisy.p2c(y) + offset, radius, 0, circumference, false);
                     if (fillStyle) {
                         ctx.fillStyle = fillStyle;
                         ctx.fill();
                     }
                     ctx.stroke();
                 }
             }
             
             ctx.save();
             ctx.translate(plotOffset.left, plotOffset.top);
 
             var lw = series.lines.lineWidth,
                 sw = series.shadowSize,
                 radius = series.points.radius;
             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, Math.PI,
                            series.xaxis, series.yaxis);
 
                 ctx.strokeStyle = "rgba(0,0,0,0.2)";
                 plotPoints(series.datapoints, radius, null, w/2, Math.PI,
                            series.xaxis, series.yaxis);
             }
 
             ctx.lineWidth = lw;
             ctx.strokeStyle = series.color;
             plotPoints(series.datapoints, radius,
                        getFillStyle(series.points, series.color), 0, 2 * Math.PI,
                        series.xaxis, series.yaxis);
             ctx.restore();
         }
 
         function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal) {
             var left, right, bottom, top,
                 drawLeft, drawRight, drawTop, drawBottom,
                 tmp;
 
             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 (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);
                 }
             }
 
             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 = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
             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 = parseColor(seriesColor);
             c.a = typeof fill == "number" ? fill : 0.4;
             c.normalize();
             return c.toString();
         }
         
         function insertLegend() {
             target.find(".legend").remove();
 
             if (!options.legend.show)
                 return;
             
             var fragments = [], rowStarted = false,
                 lf = options.legend.labelFormatter, s, label;
             for (i = 0; i < series.length; ++i) {
                 s = series[i];
                 label = s.label;
                 if (!label)
                     continue;
                 
                 if (i % options.legend.noColumns == 0) {
                     if (rowStarted)
                         fragments.push('</tr>');
                     fragments.push('<tr>');
                     rowStarted = true;
                 }
 
                 if (lf)
                     label = lf(label, s);
                 
                 fragments.push(
                     '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + s.color + ';overflow:hidden"></div></div></td>' +
                     '<td class="legendLabel">' + label + '</td>');
             }
             if (rowStarted)
                 fragments.push('</tr>');
             
             if (fragments.length == 0)
                 return;
 
             var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
             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 = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(target);
                 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) {
                         var tmp;
                         if (options.grid.backgroundColor && typeof options.grid.backgroundColor == "string")
                             tmp = options.grid.backgroundColor;
                         else
                             tmp = extractColor(legend);
                         c = parseColor(tmp).adjust(null, null, null, 1).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);
                 }
             }
         }
 
 
         // interactive features
         
         var lastMousePos = { pageX: null, pageY: null },
             selection = {
                 first: { x: -1, y: -1}, second: { x: -1, y: -1},
                 show: false,
                 active: false
             },
             highlights = [],
             clickIsMouseUp = false,
             redrawTimeout = null,
             hoverTimeout = 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,
                 lowestDistance = maxDistance * maxDistance + 1,
                 item = null, foundPoint = false, i, j;
 
             for (var i = 0; i < series.length; ++i) {
                 if (!seriesFilter(series[i]))
                     continue;
                 
                 var s = series[i],
                     axisx = s.xaxis,
                     axisy = s.yaxis,
                     points = s.datapoints.points,
                     ps = s.datapoints.pointsize,
                     mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
                     my = axisy.c2p(mouseY),
                     maxx = maxDistance / axisx.scale,
                     maxy = maxDistance / axisy.scale;
 
                 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)
                             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; // no idea in taking sqrt
                         if (dist < lowestDistance) {
                             lowestDistance = 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) {
                         var x = points[j], y = points[j + 1], 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];
                 
                 return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps),
                          dataIndex: j,
                          series: series[i],
                          seriesIndex: i };
             }
             
             return null;
         }
 
         function onMouseMove(e) {
             lastMousePos.pageX = e.pageX;
             lastMousePos.pageY = e.pageY;
             
             if (options.grid.hoverable)
                 triggerClickHoverEvent("plothover", lastMousePos,
                                        function (s) { return s["hoverable"] != false; });
 
             if (selection.active) {
                 target.trigger("plotselecting", [ getSelection() ]);
 
                 updateSelection(lastMousePos);
             }
         }
         
         function onMouseDown(e) {
             if (e.which != 1)  // only accept left-click
                 return;
             
             // cancel out any text selections
             document.body.focus();
 
             // prevent text selection and drag in old-school browsers
             if (document.onselectstart !== undefined && workarounds.onselectstart == null) {
                 workarounds.onselectstart = document.onselectstart;
                 document.onselectstart = function () { return false; };
             }
             if (document.ondrag !== undefined && workarounds.ondrag == null) {
                 workarounds.ondrag = document.ondrag;
                 document.ondrag = function () { return false; };
             }
             
             setSelectionPos(selection.first, e);
                 
             lastMousePos.pageX = null;
             selection.active = true;
             $(document).one("mouseup", onSelectionMouseUp);
         }
 
         function onClick(e) {
             if (clickIsMouseUp) {
                 clickIsMouseUp = false;
                 return;
             }
 
             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(),
                 pos = { pageX: event.pageX, pageY: event.pageY },
                 canvasX = event.pageX - offset.left - plotOffset.left,
                 canvasY = event.pageY - offset.top - plotOffset.top;
 
             if (axes.xaxis.used)
                 pos.x = axes.xaxis.c2p(canvasX);
             if (axes.yaxis.used)
                 pos.y = axes.yaxis.c2p(canvasY);
             if (axes.x2axis.used)
                 pos.x2 = axes.x2axis.c2p(canvasX);
             if (axes.y2axis.used)
                 pos.y2 = axes.y2axis.c2p(canvasY);
 
             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);
                 item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top);
             }
 
             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 == item.datapoint))
                         unhighlight(h.series, h.point);
                 }
                 
                 if (item)
                     highlight(item.series, item.datapoint, eventname);
             }
             
             target.trigger(eventname, [ pos, item ]);
         }
 
         function triggerRedrawOverlay() {
             if (!redrawTimeout)
                 redrawTimeout = setTimeout(drawOverlay, 30);
         }
 
         function drawOverlay() {
             redrawTimeout = null;
 
             // draw highlights
             octx.save();
             octx.clearRect(0, 0, canvasWidth, canvasHeight);
             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);
             }
 
             // draw selection
             if (selection.show && selectionIsSane()) {
                 octx.strokeStyle = parseColor(options.selection.color).scale(null, null, null, 0.8).toString();
                 octx.lineWidth = 1;
                 ctx.lineJoin = "round";
                 octx.fillStyle = parseColor(options.selection.color).scale(null, null, null, 0.4).toString();
                 
                 var x = Math.min(selection.first.x, selection.second.x),
                     y = Math.min(selection.first.y, selection.second.y),
                     w = Math.abs(selection.second.x - selection.first.x),
                     h = Math.abs(selection.second.y - selection.first.y);
                 
                 octx.fillRect(x, y, w, h);
                 octx.strokeRect(x, y, w, h);
             }
             octx.restore();
             
             executeHooks(hooks.drawOverlay, [octx]);
         }
         
         function highlight(s, point, auto) {
             if (typeof s == "number")
                 s = series[s];
 
             if (typeof point == "number")
                 point = s.data[point];
 
             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();
             }
             
             if (typeof s == "number")
                 s = series[s];
 
             if (typeof point == "number")
                 point = s.data[point];
 
             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;
             
             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 = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
             var radius = 1.5 * pointRadius;
             octx.beginPath();
             octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, false);
             octx.stroke();
         }
 
         function drawBarHighlight(series, point) {
             octx.lineWidth = series.bars.lineWidth;
             octx.strokeStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
             var fillStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
             var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
             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);
         }
 
         function getSelection() {
             if (!selectionIsSane())
                 return null;
             
             var x1 = Math.min(selection.first.x, selection.second.x),
                 x2 = Math.max(selection.first.x, selection.second.x),
                 y1 = Math.max(selection.first.y, selection.second.y),
                 y2 = Math.min(selection.first.y, selection.second.y);
 
             var r = {};
             if (axes.xaxis.used)
                 r.xaxis = { from: axes.xaxis.c2p(x1), to: axes.xaxis.c2p(x2) };
             if (axes.x2axis.used)
                 r.x2axis = { from: axes.x2axis.c2p(x1), to: axes.x2axis.c2p(x2) };
             if (axes.yaxis.used)
                 r.yaxis = { from: axes.yaxis.c2p(y1), to: axes.yaxis.c2p(y2) };
             if (axes.y2axis.used)
                 r.y2axis = { from: axes.y2axis.c2p(y1), to: axes.y2axis.c2p(y2) };
             return r;
         }
         
         function triggerSelectedEvent() {
             var r = getSelection();
             
             target.trigger("plotselected", [ r ]);
 
             // backwards-compat stuff, to be removed in future
             if (axes.xaxis.used && axes.yaxis.used)
                 target.trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
         }
         
         function onSelectionMouseUp(e) {
             // revert drag stuff for old-school browsers
             if (document.onselectstart !== undefined)
                 document.onselectstart = workarounds.onselectstart;
             if (document.ondrag !== undefined)
                 document.ondrag = workarounds.ondrag;
             
             // no more draggy-dee-drag
             selection.active = false;
             updateSelection(e);
             
             if (selectionIsSane()) {
                 triggerSelectedEvent();
                 clickIsMouseUp = true;
             }
             else {
                 // this counts as a clear
                 target.trigger("plotunselected", [ ]);
                 target.trigger("plotselecting", [ null ]);
             }
             
             return false;
         }
 
         function setSelectionPos(pos, e) {
             var offset = eventHolder.offset();
             pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plotWidth);
             pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plotHeight);
             
             if (options.selection.mode == "y") {
                 if (pos == selection.first)
                     pos.x = 0;
                 else
                     pos.x = plotWidth;
             }
 
             if (options.selection.mode == "x") {
                 if (pos == selection.first)
                     pos.y = 0;
                 else
                     pos.y = plotHeight;
             }
         }
 
         function updateSelection(pos) {
             if (pos.pageX == null)
                 return;
 
             setSelectionPos(selection.second, pos);
             if (selectionIsSane()) {
                 selection.show = true;
                 triggerRedrawOverlay();
             }
             else
                 clearSelection(true);
         }
 
         function clearSelection(preventEvent) {
             if (selection.show) {
                 selection.show = false;
                 triggerRedrawOverlay();
                 if (!preventEvent)
                     target.trigger("plotunselected", [ ]);
             }
         }
 
         function setSelection(ranges, preventEvent) {
             var range;
             
             if (options.selection.mode == "y") {
                 selection.first.x = 0;
                 selection.second.x = plotWidth;
             }
             else {
                 range = extractRange(ranges, "x");
                 
                 selection.first.x = range.axis.p2c(range.from);
                 selection.second.x = range.axis.p2c(range.to);
             }
             
             if (options.selection.mode == "x") {
                 selection.first.y = 0;
                 selection.second.y = plotHeight;
             }
             else {
                 range = extractRange(ranges, "y");
                 
                 selection.first.y = range.axis.p2c(range.from);
                 selection.second.y = range.axis.p2c(range.to);
             }
 
             selection.show = true;
             triggerRedrawOverlay();
             if (!preventEvent)
                 triggerSelectedEvent();
         }
         
         function selectionIsSane() {
             var minSize = 5;
             return Math.abs(selection.second.x - selection.first.x) >= minSize &&
                 Math.abs(selection.second.y - selection.first.y) >= minSize;
         }
         
         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];
                     gradient.addColorStop(i / (l - 1), typeof c == "string" ? c : parseColor(defaultColor).scale(c.brightness, c.brightness, c.brightness, c.opacity));
                 }
                 
                 return gradient;
             }
         }
     }
 
     $.plot = function(target, data, options) {
         var plot = new Plot($(target), data, options, $.plot.plugins);
         /*var t0 = new Date();
         var t1 = new Date();
         var tstr = "time used (msecs): " + (t1.getTime() - t0.getTime())
         if (window.console)
             console.log(tstr);
         else
             alert(tstr);*/
         return plot;
     };
 
     $.plot.plugins = [];
 
     // returns a string with the date d formatted according to fmt
     $.plot.formatDate = function(d, fmt, monthNames) {
         var leftPad = function(n) {
             n = "" + n;
             return n.length == 1 ? "0" + n : n;
         };
         
         var r = [];
         var escape = false;
         if (monthNames == null)
             monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
         for (var i = 0; i < fmt.length; ++i) {
             var c = fmt.charAt(i);
             
             if (escape) {
                 switch (c) {
                 case 'h': c = "" + d.getUTCHours(); break;
                 case 'H': c = leftPad(d.getUTCHours()); break;
                 case 'M': c = leftPad(d.getUTCMinutes()); break;
                 case 'S': c = leftPad(d.getUTCSeconds()); break;
                 case 'd': c = "" + d.getUTCDate(); break;
                 case 'm': c = "" + (d.getUTCMonth() + 1); break;
                 case 'y': c = "" + d.getUTCFullYear(); break;
                 case 'b': c = "" + monthNames[d.getUTCMonth()]; break;
                 }
                 r.push(c);
                 escape = false;
             }
             else {
                 if (c == "%")
                     escape = true;
                 else
                     r.push(c);
             }
         }
         return r.join("");
     };
     
     // round to nearby lower multiple of base
     function floorInBase(n, base) {
         return base * Math.floor(n / base);
     }
     
     function clamp(min, value, max) {
         if (value < min)
             return min;
         else if (value > max)
             return max;
         else
             return value;
     }
     
     // color helpers, inspiration from the jquery color animation
     // plugin by John Resig
     function Color (r, g, b, a) {
        
         var rgba = ['r','g','b','a'];
         var x = 4; //rgba.length
        
         while (-1<--x) {
             this[rgba[x]] = arguments[x] || ((x==3) ? 1.0 : 0);
         }
        
         this.toString = function() {
             if (this.a >= 1.0) {
                 return "rgb("+[this.r,this.g,this.b].join(",")+")";
             } else {
                 return "rgba("+[this.r,this.g,this.b,this.a].join(",")+")";
             }
         };
 
         this.scale = function(rf, gf, bf, af) {
             x = 4; //rgba.length
             while (-1<--x) {
                 if (arguments[x] != null)
                     this[rgba[x]] *= arguments[x];
             }
             return this.normalize();
         };
 
         this.adjust = function(rd, gd, bd, ad) {
             x = 4; //rgba.length
             while (-1<--x) {
                 if (arguments[x] != null)
                     this[rgba[x]] += arguments[x];
             }
             return this.normalize();
         };
 
         this.clone = function() {
             return new Color(this.r, this.b, this.g, this.a);
         };
 
         var limit = function(val,minVal,maxVal) {
             return Math.max(Math.min(val, maxVal), minVal);
         };
 
         this.normalize = function() {
             this.r = clamp(0, parseInt(this.r), 255);
             this.g = clamp(0, parseInt(this.g), 255);
             this.b = clamp(0, parseInt(this.b), 255);
             this.a = clamp(0, this.a, 1);
             return this;
         };
 
         this.normalize();
     }
     
     var lookupColors = {
         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]
     };    
 
     function extractColor(element) {
         var color, elem = element;
         do {
             color = elem.css("background-color").toLowerCase();
             // keep going until we find an element that has color, or
             // we hit the body
             if (color != '' && color != 'transparent')
                 break;
             elem = elem.parent();
         } while (!$.nodeName(elem.get(0), "body"));
 
         // catch Safari's way of signalling transparent
         if (color == "rgba(0, 0, 0, 0)")
             return "transparent";
         
         return color;
     }
     
     // parse string, returns Color
     function parseColor(str) {
         var result;
 
         // Look for rgb(num,num,num)
         if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
             return new Color(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10));
         
         // Look for rgba(num,num,num,num)
         if (result = /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(str))
             return new Color(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10), parseFloat(result[4]));
             
         // Look for rgb(num%,num%,num%)
         if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
             return new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55);
 
         // Look for rgba(num%,num%,num%,num)
         if (result = /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(str))
             return new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55, parseFloat(result[4]));
         
         // Look for #a0b1c2
         if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
             return new Color(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16));
 
         // Look for #fff
         if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
             return new Color(parseInt(result[1]+result[1], 16), parseInt(result[2]+result[2], 16), parseInt(result[3]+result[3], 16));
 
         // Otherwise, we're most likely dealing with a named color
         var name = $.trim(str).toLowerCase();
         if (name == "transparent")
             return new Color(255, 255, 255, 0);
         else {
             result = lookupColors[name];
             return new Color(result[0], result[1], result[2]);
         }
     }
         
 })(jQuery);