pbosetti-flotr 1.3.3 → 1.3.4

data/lib/jquery.flot.js

@@ -0,0 +1,2187 @@
+/*
+ * Flot v0.9.0
+ *
+ * Released under the MIT license.
+ */
+
+( function( $ ) {
+    function Plot( target_, data_, options_ ) {
+        var series = [];
+        var 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: {
+                label: null,
+                showLabels: true,
+                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: {
+                label: null,
+                showLabels: true,
+                autoscaleMargin: 0.02
+            },
+            points: {
+                show: false,
+                radius: 3,
+                lineWidth: 2, // in pixels
+                fill: true,
+                fillColor: "#ffffff"
+            },
+            lines: {
+                show: false,
+                lineWidth: 2, // in pixels
+                fill: false,
+                fillColor: null
+            },
+            bars: {
+                show: false,
+                lineWidth: 2, // in pixels
+                barWidth: 1, // in units of the x axis
+                fill: true,
+                fillOpacity: 0.4,
+                fillColor: null
+            },
+            deltas: {
+                show: false,
+                color: { above: '#A00', below: '#00A', equal: '#D52' },
+                markerWidth: 3
+            },
+            grid: {
+                showLines: 'both',
+                showBorder: true,
+                markers: [], // see API.txt for details
+                labelFontSize: 16, // default is 16px font size for axis labels
+                color: "#545454", // primary color used for outline and labels
+                backgroundColor: null, // null for transparent, else color
+                tickColor: "#dddddd", // color used for the ticks
+                tickWidth: 1, // thickness of grid lines
+                labelMargin: 3, // in pixels
+                borderWidth: 2,
+                clickable: null,
+                hoverable: false,
+                hoverColor: null,
+                hoverFill: null,
+                hoverRadius: null,
+                mouseCatchingArea: 15,
+                coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas
+                coloredAreasColor: "#f4f4f4"
+            },
+            hints: {
+                show: false,
+                showColorBox: true,
+                showSeriesLabel: true,
+                labelFormatter: defaultLabelFormatter,
+                hintFormatter: defaultHintFormatter,
+                backgroundColor: "#DDD", // null means auto-detect
+                backgroundOpacity: 0.7, // set to 0 to avoid background
+                borderColor: "#BBB" // set to 'transparent' for none
+            },
+            selection: {
+                snapToTicks: false, // boolean for if we should snap to ticks on selection
+                mode: null, // one of null, "x", "y" or "xy"
+                color: "#e8cfac"
+            },
+            shadowSize: 4,
+            sortData: true
+        };
+
+        var canvas = null, overlay = null, eventHolder = null, 
+            ctx = null, octx = null,
+            target = target_,
+            xaxis = {}, yaxis = {},
+            plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
+            canvasWidth = 0, canvasHeight = 0,
+            plotWidth = 0, plotHeight = 0,
+            hozScale = 0, vertScale = 0,
+            hintDiv = null, hintBackground = null,
+            lastMarker = null,
+            // dedicated to storing data for buggy standard compliance cases
+            workarounds = {},
+            // buffer constants
+            RIGHT_SIDE_BUFFER = 10,
+            BOTTOM_SIDE_BUFFER = 10;
+        
+        this.setData = setData;
+        this.setupGrid = setupGrid;
+        this.highlight = highlight;
+        this.draw = draw;
+        this.cleanup = cleanup;
+        this.clearSelection = clearSelection;
+        this.setSelection = setSelection;
+        this.getCanvas = function () { return canvas; };
+        this.getPlotOffset = function () { return plotOffset; };
+        this.getData = function () { return series; };
+        this.getAxes = function () { return { xaxis: xaxis, yaxis: yaxis }; };
+        
+        // initialize
+        $.extend( true, options, options_ );
+        setData( data_ );
+        constructCanvas();
+        setupGrid();
+        draw();
+        
+        // kill hints and highlighted points when the mouse leaves the graph
+        if( options.grid.hoverable ) $(target).mouseout( cleanup );
+
+        function setData( d ) {
+            series = parseData(d);
+            fillInSeriesOptions();
+            processData();
+        }
+        
+        // normalize the data given to the call to $.plot. If we're
+        // going to be monitoring mousemove's then sort the data
+        function parseData( d ) {
+            function sortData( a, b ) {
+                if( !a || !b )       return  0;
+                if( a.x > b.x )      return  1;
+                else if( a.x < b.x ) return -1;
+                else                 return  0;
+            }
+
+            var res = [];
+            for( var i = 0; i < d.length; ++i ) {
+                var s = {};
+                if( d[i].data ) {
+                    for( var v in d[i] ) s[v] = d[i][v];
+                }
+                else {
+                    s.data = d[i];
+                }
+                res.push( s );
+            }
+            
+            // normalize the old style [x,y] data format
+            for( var i in res ) {
+                for( var j in res[i].data ) {
+                    var datapoint = res[i].data[j];
+                    if( datapoint != null && datapoint.x == undefined ) {
+                        res[i].data[j] = { x: datapoint[0], y: datapoint[1] };
+                    }
+                }
+                if( options.sortData ) res[i].data.sort( sortData );
+            }
+            return res;
+        }
+
+        function fillInSeriesOptions() {
+            var i;
+            
+            // collect what we already got of colors
+            var neededColors = series.length;
+            var usedColors = [];
+            var 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 = [];
+            var variation = 0;
+            i = 0;
+            while( colors.length < neededColors ) {
+                var c;
+                if( options.colors.length == i ) { 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();
+                }
+
+                // copy the rest
+                s.lines =  $.extend(true, {}, options.lines,  s.lines);
+                s.points = $.extend(true, {}, options.points, s.points);
+                s.bars =   $.extend(true, {}, options.bars,   s.bars);
+                s.deltas = $.extend(true, {}, options.deltas, s.deltas);
+                s.hints =  $.extend(true, {}, options.hints,  s.hints);
+                if (s.shadowSize == null) s.shadowSize = options.shadowSize;
+            }
+        }
+        
+        function processData() {
+            var top_sentry = Number.POSITIVE_INFINITY,
+                bottom_sentry = Number.NEGATIVE_INFINITY;
+            
+            xaxis.datamin = yaxis.datamin = top_sentry;
+            xaxis.datamax = yaxis.datamax = bottom_sentry;
+
+            for( var i = 0; i < series.length; ++i ) {
+                var data = series[i].data;
+                for( var j = 0; j < data.length; ++j ) {
+                    if( data[j] == null ) continue;
+                    
+                    var x = data[j].x, y = data[j].y;
+
+                    // convert to number
+                    if( x == null || y == null ||
+                        isNaN( x = +x ) || isNaN( y = +y ) ) {
+                        data[j] = null; // mark this point as invalid
+                        continue;
+                    }
+
+                    if( x < xaxis.datamin )      xaxis.datamin = x;
+                    if( x > xaxis.datamax )      xaxis.datamax = x;
+                    if( y < yaxis.datamin )      yaxis.datamin = y;
+                    if( y > yaxis.datamax )      yaxis.datamax = y;
+                }
+            }
+            
+            if( xaxis.datamin == top_sentry )           xaxis.datamin = 0;
+            if( yaxis.datamin == top_sentry )           yaxis.datamin = 0;
+            if( xaxis.datamax == bottom_sentry )        xaxis.datamax = 1;
+            if( yaxis.datamax == bottom_sentry )        yaxis.datamax = 1;
+        }
+
+        function constructCanvas() {
+            canvasWidth = target.width();
+            canvasHeight = target.height();
+            target.html( '' ).css( 'position', 'relative' );
+
+            if( canvasWidth <= 0 || canvasHeight <= 0 ) {
+                throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
+            }
+
+            // the canvas
+            canvas = $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo( target ).get( 0 );
+            if( $.browser.msie ) { canvas = window.G_vmlCanvasManager.initElement( canvas ); }
+            ctx = canvas.getContext( '2d' );
+
+            // overlay canvas for interactive features
+            overlay = $('<canvas style="position:absolute;left:0px;top:0px;" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo( target ).get( 0 );
+            if( $.browser.msie ) { overlay = window.G_vmlCanvasManager.initElement( overlay ); }
+            octx = overlay.getContext( '2d' );
+
+            // 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 ) {
+                eventHolder.mousedown( onMouseDown ).mousemove( onMouseMove );
+            }
+
+            if( options.grid.hoverable ) {            
+                eventHolder.mousemove( onMouseMove );
+            }
+
+            if( options.grid.clickable ) {
+                eventHolder.click( onClick );
+            }
+        }
+
+        function setupGrid() {
+            // x axis
+            setRange( xaxis, options.xaxis );
+            prepareTickGeneration( xaxis, options.xaxis );
+            setTicks( xaxis, options.xaxis );
+            extendXRangeIfNeededByBar();
+
+            // y axis
+            setRange( yaxis, options.yaxis );
+            prepareTickGeneration( yaxis, options.yaxis );
+            setTicks( yaxis, options.yaxis );
+
+            setSpacing();
+            insertTickLabels();
+            insertLegend();
+            insertAxisLabels();
+        }
+        
+        function setRange( axis, axisOptions ) {
+            var min = axisOptions.min != null ? axisOptions.min : axis.datamin;
+            var max = axisOptions.max != null ? axisOptions.max : axis.datamax;
+
+            if( max - min == 0.0 ) {
+                // degenerate case
+                var widen;
+                if( max == 0.0 )    widen = 1.0;
+                else                widen = 0.01;
+
+                min -= widen;
+                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 >= 0 ) min = 0;
+                    }
+                    if( axisOptions.max == null ) {
+                        max += ( max - min ) * margin;
+                        if( max > 0 && 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 == xaxis ) {
+                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
+
+                function formatDate( 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( '' );
+                }
+
+                // 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 ) {
+                    minSize = typeof axisOptions.tickSize == 'number' ?
+                                  axisOptions.tickSize:
+                                  axisOptions.minTickSize[0] *
+                                    timeUnitSize[axisOptions.minTickSize[1]];
+                }
+
+                for( i = 0; i < spec.length - 1; ++i ) {
+                    var d = spec[i][0] * timeUnitSize[spec[i][1]] +
+                            spec[i + 1][0] * timeUnitSize[spec[i + 1][1]];
+                    if( delta < d / 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 ) {
+                        return 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 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 && 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 || dec + 1 <= maxDec ) ) {
+                        size = 2.5;
+                        ++dec;
+                    }
+                }
+                else if( norm < 7.5 ) {  size = 5; }
+                else {                   size = 10; }
+
+                size *= magn;
+                
+                if( axisOptions.minTickSize && size < axisOptions.minTickSize ) {
+                    size = axisOptions.minTickSize;
+                }
+
+                if( axisOptions.tickSize ) {
+                    size = axisOptions.tickSize;
+                }
+
+                axis.tickDecimals = Math.max( 0, ( maxDec ) ? maxDec : dec );
+
+                generator = function( axis ) {
+                    var ticks = [];
+                    var start = floorInBase( axis.min, axis.tickSize );
+                    // then spew out all possible ticks
+                    var 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 )  axis.labelWidth = axisOptions.labelWidth;
+            if( axisOptions.labelHeight ) axis.labelHeight = axisOptions.labelHeight;
+        }
+        
+        function extendXRangeIfNeededByBar() {
+            if( !options.xaxis.max ) {
+                // great, we're autoscaling, check if we might need a bump
+                var newmax = xaxis.max;
+                for( var i = 0; i < series.length; ++i ) {
+                    if( series[i].bars.show && series[i].bars.barWidth +
+                                               xaxis.datamax > newmax ) {
+                        newmax = xaxis.datamax + series[i].bars.barWidth;
+                    }
+                }
+                xaxis.max = newmax;
+            }
+        }
+
+        function setTicks( axis, axisOptions ) {
+            axis.ticks = [];
+
+            if( !axisOptions.ticks ) {
+                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 ) label = axis.tickFormatter( v, axis );
+                    axis.ticks[i] = { v: v, label: label };
+                }
+            }
+
+            if( axisOptions.autoscaleMargin && axis.ticks.length > 0 ) {
+                // snap to ticks
+                if( !axisOptions.min ) {
+                    axis.min = Math.min( axis.min, axis.ticks[0].v );
+                }
+                if( !axisOptions.max && axis.ticks.length > 1 ) {
+                    axis.max = Math.min( axis.max, axis.ticks[axis.ticks.length - 1].v );
+                }
+            }
+        }
+
+        function setSpacing() {
+            var i, l,
+                labels = [];
+
+            if( !yaxis.labelWidth || !yaxis.labelHeight ) {
+                // calculate y label dimensions
+                for( i = 0; i < yaxis.ticks.length; ++i ) {
+                    l = yaxis.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( !yaxis.labelWidth )  yaxis.labelWidth = dummyDiv.width();
+                    if( !yaxis.labelHeight ) yaxis.labelHeight = dummyDiv.find('div').height();
+                    dummyDiv.remove();
+                }
+
+                if( !yaxis.labelWidth )  yaxis.labelWidth = 0;
+                if( !yaxis.labelHeight ) yaxis.labelHeight = 0;
+            }
+
+            var maxOutset = options.grid.borderWidth / 2;
+            if( options.points.show ) {
+                maxOutset = Math.max( maxOutset, options.points.radius +
+                                                 options.points.lineWidth / 2 );
+            }
+            for( i = 0; i < series.length; ++i ) {
+                if( series[i].points.show ) {
+                    maxOutset = Math.max( maxOutset, series[i].points.radius +
+                                                     series[i].points.lineWidth / 2 );
+                }
+            }
+
+            plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset;
+
+            if( yaxis.labelWidth > 0 && options.xaxis.showLabels ) {
+                plotOffset.left += yaxis.labelWidth + options.grid.labelMargin;
+            }
+
+            plotWidth = canvasWidth - plotOffset.left - plotOffset.right - RIGHT_SIDE_BUFFER;
+
+            // set width for labels; to avoid measuring the widths of
+            // the labels, we construct fixed-size boxes and put the
+            // labels inside them, the fixed-size boxes are easy to
+            // mid-align
+            if( !xaxis.labelWidth ) xaxis.labelWidth = plotWidth / 6;
+
+            if( !xaxis.labelHeight ) {
+                // measure x label heights
+                labels = [];
+                for( i = 0; i < xaxis.ticks.length; ++i ) {
+                    l = xaxis.ticks[i].label;
+                    if( l ) labels.push( '<span class="tickLabel" width="' + xaxis.labelWidth + '">' + l + '</span>' );
+                }
+
+                xaxis.labelHeight = 0;
+                if( labels.length > 0 ) {
+                    var dummyDiv = $( '<div style="position:absolute;top:-10000px;font-size:smaller">' +
+                                      labels.join('') + '</div>' ).appendTo( target );
+                    xaxis.labelHeight = dummyDiv.height();
+                    dummyDiv.remove();
+                }
+            }
+
+            if( xaxis.labelHeight > 0 && options.yaxis.showLabels ) {
+                plotOffset.bottom += xaxis.labelHeight + options.grid.labelMargin;
+            }
+
+            // add a bit of extra buffer on the bottom of the graph to account
+            // for the axis label, if there is one
+            if( options.xaxis.label ) plotOffset.bottom += BOTTOM_SIDE_BUFFER;
+
+            plotHeight = canvasHeight - plotOffset.bottom - BOTTOM_SIDE_BUFFER - plotOffset.top;
+            hozScale = plotWidth / ( xaxis.max - xaxis.min );
+            vertScale = plotHeight / ( yaxis.max - yaxis.min );
+        }
+
+        function draw() {
+            drawGrid();
+            drawMarkers();
+            for( var i = 0; i < series.length; i++ ) {
+                drawSeries( series[i] );
+            }
+        }
+
+        function tHoz( x ) {   return ( x - xaxis.min ) * hozScale; }
+        function tVert( y ) {  return plotHeight - ( y - yaxis.min ) * vertScale; }
+
+        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 = options.grid.backgroundColor;
+                ctx.fillRect( 0, 0, plotWidth, plotHeight );
+            }
+
+            // draw colored areas
+            if( options.grid.coloredAreas ) {
+                var areas = options.grid.coloredAreas;
+                if( $.isFunction( areas ) ) {
+                    areas = areas( { xmin: xaxis.min, xmax: xaxis.max,
+                                     ymin: yaxis.min, ymax: yaxis.max } );
+                }
+
+                for( i = 0; i < areas.length; ++i ) {
+                    var a = areas[i];
+
+                    // clip
+                    if( !a.x1 || a.x1 < xaxis.min )  a.x1 = xaxis.min;
+                    if( !a.x2 || a.x2 > xaxis.max )  a.x2 = xaxis.max;
+                    if( !a.y1 || a.y1 < yaxis.min )  a.y1 = yaxis.min;
+                    if( !a.y2 || a.y2 > yaxis.max )  a.y2 = yaxis.max;
+
+                    var tmp;
+                    if( a.x1 > a.x2 ) {
+                        tmp = a.x1;
+                        a.x1 = a.x2;
+                        a.x2 = tmp;
+                    }
+                    if (a.y1 > a.y2) {
+                        tmp = a.y1;
+                        a.y1 = a.y2;
+                        a.y2 = tmp;
+                    }
+
+                    if( a.x1 >= xaxis.max || a.x2 <= xaxis.min || a.x1 == a.x2 ||
+                        a.y1 >= yaxis.max || a.y2 <= yaxis.min || a.y1 == a.y2 ) {
+                        continue;
+                    }
+
+                    ctx.fillStyle = a.color || options.grid.coloredAreasColor;
+                    ctx.fillRect( Math.floor( tHoz( a.x1 ) ),
+                                  Math.floor( tVert( a.y2 ) ),
+                                  Math.floor( tHoz( a.x2 ) - tHoz( a.x1 ) ),
+                                  Math.floor( tVert( a.y1 ) - tVert( a.y2 ) ) );
+                }
+            }
+
+            // draw the inner grid
+            ctx.lineWidth = options.grid.tickWidth;
+            ctx.strokeStyle = options.grid.tickColor;
+            ctx.beginPath();
+            var v;
+            if( options.grid.showLines == 'x' || options.grid.showLines == 'both' ) {
+                for( i = 0; i < xaxis.ticks.length; ++i ) {
+                    v = xaxis.ticks[i].v;
+                    // skip those lying on the axes
+                    if( v <= xaxis.min || v >= xaxis.max ) continue;
+
+                     ctx.moveTo( Math.floor( tHoz( v ) ) + ctx.lineWidth / 2, 0 );
+                     ctx.lineTo( Math.floor( tHoz( v ) ) + ctx.lineWidth / 2, plotHeight );
+                }
+            }
+
+            if( options.grid.showLines == 'y' || options.grid.showLines == 'both' ) {
+                for( i = 0; i < yaxis.ticks.length; ++i ) {
+                    v = yaxis.ticks[i].v;
+                    if( v <= yaxis.min || v >= yaxis.max ) continue;
+
+                    ctx.moveTo( 0, Math.floor( tVert( v ) ) + ctx.lineWidth / 2 );
+                    ctx.lineTo( plotWidth, Math.floor( tVert( v ) ) + ctx.lineWidth / 2 );
+                }
+            }
+
+            ctx.stroke();
+
+            if( options.grid.showBorder && options.grid.borderWidth ) {
+                // draw border
+                ctx.lineWidth = options.grid.borderWidth;
+                ctx.strokeStyle = options.grid.color;
+                ctx.lineJoin = 'round';
+                ctx.strokeRect( 0, 0, plotWidth, plotHeight );
+                ctx.restore();
+            }
+        }
+
+        function insertTickLabels() {
+            target.find('.tickLabels').remove();
+
+            var i, tick;
+            var html = '<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">';
+
+            // do the x-axis
+            if( options.xaxis.showLabels ) {
+                for( i = 0; i < xaxis.ticks.length; ++i ) {
+                    tick = xaxis.ticks[i];
+                    if( !tick.label || tick.v < xaxis.min || tick.v > xaxis.max ) continue;
+                    html += '<div style="position:absolute;top:' +
+                            ( plotOffset.top + plotHeight + options.grid.labelMargin ) +
+                            'px;left:' + ( plotOffset.left + tHoz( tick.v ) - xaxis.labelWidth / 2) +
+                            'px;width:' + xaxis.labelWidth + 'px;text-align:center" class="tickLabel">' +
+                            tick.label + "</div>";
+                }
+            }
+
+            // do the y-axis
+            if( options.yaxis.showLabels ) {
+                for( i = 0; i < yaxis.ticks.length; ++i ) {
+                    tick = yaxis.ticks[i];
+                    if( !tick.label || tick.v < yaxis.min || tick.v > yaxis.max ) continue;
+                    html += '<div style="position:absolute;top:' +
+                            ( plotOffset.top + tVert( tick.v ) - yaxis.labelHeight / 2 ) +
+                            'px;left:0;width:' + yaxis.labelWidth + 'px;text-align:right" class="tickLabel">' +
+                            tick.label + "</div>";
+                }
+            }
+
+            html += '</div>';
+
+            target.append( html );
+        }
+
+        function insertAxisLabels() {
+            if( options.xaxis.label ) {
+                yLocation = plotOffset.top + plotHeight + ( xaxis.labelHeight * 1.5 );
+                xLocation = plotOffset.left;
+                target.find('#xaxislabel').remove();
+                target.append( "<div id='xaxislabel' style='color:" +
+                               options.grid.color + ";width:" + plotWidth +
+                               "px;text-align:center;position:absolute;top:" +
+                               yLocation + "px;left:" + xLocation + "px;'>" +
+                               options.xaxis.label + "</div>" );
+            }
+            if( options.yaxis.label ) {
+                var element;
+                if( $.browser.msie ) {
+                    element = "<span class='yaxis axislabel' style='writing-mode: tb-rl;filter: flipV flipH;'>" +
+                              options.yaxis.label + "</span>";
+                }
+                else {
+                    // we'll use svg instead
+                    var element = document.createElement( 'object' );
+                    element.setAttribute( 'type', 'image/svg+xml' );
+                    xAxisHeight = $('#xaxislabel').height();
+                    string = '<svg:svg baseProfile="full" height="' + plotHeight +
+                             '" width="' + xAxisHeight * 1.5 +
+                             '" xmlns:svg="http://www.w3.org/2000/svg" ' +
+                             'xmlns="http://www.w3.org/2000/svg" xmlns:xlink=' +
+                             '"http://www.w3.org/1999/xlink"><svg:g>';
+                    string += '<svg:text text-anchor="middle" style="fill:#545454; ' +
+                              'stroke:none" x="' + options.grid.labelFontSize + '" y="' +
+                              plotHeight / 2 + '" ' + 'transform="rotate(-90,' +
+                              options.grid.labelFontSize + ',' + plotHeight / 2 +
+                              ')" font-size="' + options.grid.labelFontSize + '">' +
+                              options.yaxis.label + '</svg:text></svg:g></svg:svg>';
+                    element.setAttribute( 'data', 'data:image/svg+xml,' + string );
+                }
+
+                xLocation = plotOffset.left - ( yaxis.labelWidth * 1.5 ) -
+                            options.grid.labelFontSize;
+                yLocation = plotOffset.top;
+
+                var yAxisLabel = $("<div id='yaxislabel' style='color:" +
+                                   options.grid.color + ";height:" + plotHeight +
+                                   "px;text-align:center;position:absolute;top:" +
+                                   yLocation + "px;left:" + xLocation + "px;'</div>");
+                yAxisLabel.append( element );
+
+                target.find('#yaxislabel').remove().end().append( yAxisLabel );
+            }
+        }
+
+        function drawSeries( series ) {
+            if( series.lines.show || ( !series.bars.show && !series.points.show && !series.deltas.show ) ) {
+                drawSeriesLines( series );
+            }
+            if( series.bars.show )    drawSeriesBars( series );
+            if( series.points.show )  drawSeriesPoints( series );
+            if( series.deltas.show )  drawSeriesDeltas( series );
+        }
+
+        function drawSeriesLines( series ) {
+            function plotLine( data, offset ) {
+                var prev = cur = drawx = drawy = null;
+
+                ctx.beginPath();
+                for( var i = 0; i < data.length; ++i ) {
+                    prev = cur;
+                    cur = data[i];
+
+                    if( !prev || !cur ) continue;
+
+                    var x1 = prev.x, y1 = prev.y,
+                        x2 = cur.x, y2 = cur.y;
+
+                    // clip with ymin
+                    if( y1 <= y2 && y1 < yaxis.min ) {
+                        if( y2 < yaxis.min ) continue; // line segment is outside
+                        // compute new intersection point
+                        x1 = ( yaxis.min - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y1 = yaxis.min;
+                    }
+                    else if( y2 <= y1 && y2 < yaxis.min ) {
+                        if( y1 < yaxis.min ) continue;
+                        x2 = ( yaxis.min - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y2 = yaxis.min;
+                    }
+
+                    // clip with ymax
+                    if( y1 >= y2 && y1 > yaxis.max ) {
+                        if( y2 > yaxis.max ) continue;
+                        x1 = ( yaxis.max - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y1 = yaxis.max;
+                    }
+                    else if( y2 >= y1 && y2 > yaxis.max ) {
+                        if( y1 > yaxis.max ) continue;
+                        x2 = ( yaxis.max - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y2 = yaxis.max;
+                    }
+
+                    // clip with xmin
+                    if( x1 <= x2 && x1 < xaxis.min ) {
+                        if( x2 < xaxis.min ) continue;
+                        y1 = ( xaxis.min - x1 ) / ( x2 - x1 ) * ( y2 - y1 ) + y1;
+                        x1 = xaxis.min;
+                    }
+                    else if( x2 <= x1 && x2 < xaxis.min ) {
+                        if( x1 < xaxis.min ) continue;
+                        y2 = ( xaxis.min - x1 ) / ( x2 - x1 ) * ( y2 - y1 ) + y1;
+                        x2 = xaxis.min;
+                    }
+
+                    // clip with xmax
+                    if( x1 >= x2 && x1 > xaxis.max ) {
+                        if( x2 > xaxis.max ) continue;
+                        y1 = ( xaxis.max - x1 ) / ( x2 - x1 ) * ( y2 - y1 ) + y1;
+                        x1 = xaxis.max;
+                    }
+                    else if( x2 >= x1 && x2 > xaxis.max ) {
+                        if( x1 > xaxis.max ) continue;
+                        y2 = ( xaxis.max - x1 ) / ( x2 - x1 ) * ( y2 - y1 ) + y1;
+                        x2 = xaxis.max;
+                    }
+
+                    if( drawx != tHoz( x1 ) || drawy != tVert( y1 ) + offset ) {
+                        ctx.moveTo( tHoz( x1 ), tVert( y1 ) + offset );
+                    }
+
+                    drawx = tHoz( x2 );
+                    drawy = tVert( y2 ) + offset;
+                    ctx.lineTo( drawx, drawy );
+                }
+                ctx.stroke();
+            }
+
+            function plotLineArea( data ) {
+                var prev = cur = null;
+                var bottom = Math.min( Math.max( 0, yaxis.min ), yaxis.max );
+                var top, lastX = 0;
+                var areaOpen = false;
+
+                for( var i = 0; i < data.length; ++i ) {
+                    prev = cur;
+                    cur = data[i];
+
+                    if( areaOpen && prev && !cur ) {
+                        // close area
+                        ctx.lineTo( tHoz( lastX ), tVert( bottom ) );
+                        ctx.fill();
+                        areaOpen = false;
+                        continue;
+                    }
+
+                    if( !prev || !cur ) continue;
+                        
+                    var x1 = prev.x, y1 = prev.y,
+                        x2 = cur.x, y2 = cur.y;
+
+                    // clip with xmin
+                    if( x1 <= x2 && x1 < xaxis.min ) {
+                        if( x2 < xaxis.min ) continue;
+                        y1 = ( xaxis.min - x1 ) / ( x2 - x1 ) * ( y2 - y1 ) + y1;
+                        x1 = xaxis.min;
+                    }
+                    else if( x2 <= x1 && x2 < xaxis.min ) {
+                        if( x1 < xaxis.min ) continue;
+                        y2 = ( xaxis.min - x1 ) / (x2 - x1) * (y2 - y1) + y1;
+                        x2 = xaxis.min;
+                    }
+
+                    // clip with xmax
+                    if( x1 >= x2 && x1 > xaxis.max ) {
+                        if( x2 > xaxis.max ) continue;
+                        y1 = ( xaxis.max - x1 ) / ( x2 - x1 ) * ( y2 - y1 ) + y1;
+                        x1 = xaxis.max;
+                    }
+                    else if( x2 >= x1 && x2 > xaxis.max ) {
+                        if( x1 > xaxis.max ) continue;
+                        y2 = ( xaxis.max - x1 ) / ( x2 - x1 ) * ( y2 - y1 ) + y1;
+                        x2 = xaxis.max;
+                    }
+
+                    if( !areaOpen ) {
+                        // open area
+                        ctx.beginPath();
+                        ctx.moveTo( tHoz( x1 ), tVert( bottom ) );
+                        areaOpen = true;
+                    }
+
+                    // now first check the case where both is outside
+                    if( y1 >= yaxis.max && y2 >= yaxis.max ) {
+                        ctx.lineTo( tHoz( x1 ), tVert( yaxis.max ) );
+                        ctx.lineTo( tHoz( x2 ), tVert( yaxis.max ) );
+                        continue;
+                    }
+                    else if( y1 <= yaxis.min && y2 <= yaxis.min ) {
+                        ctx.lineTo( tHoz( x1 ), tVert( yaxis.min ) );
+                        ctx.lineTo( tHoz( x2 ), tVert( yaxis.min ) );
+                        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 < yaxis.min && y2 >= yaxis.min ) {
+                        x1 = ( yaxis.min - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y1 = yaxis.min;
+                    }
+                    else if( y2 <= y1 && y2 < yaxis.min && y1 >= yaxis.min ) {
+                        x2 = ( yaxis.min - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y2 = yaxis.min;
+                    }
+
+                    // clip with ymax
+                    if( y1 >= y2 && y1 > yaxis.max && y2 <= yaxis.max ) {
+                        x1 = ( yaxis.max - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y1 = yaxis.max;
+                    }
+                    else if( y2 >= y1 && y2 > yaxis.max && y1 <= yaxis.max ) {
+                        x2 = ( yaxis.max - y1 ) / ( y2 - y1 ) * ( x2 - x1 ) + x1;
+                        y2 = yaxis.max;
+                    }
+
+                    // if the x value was changed we got a rectangle to fill
+                    if( x1 != x1old ) {
+                        top = y1 <= yaxis.min ? yaxis.min : yaxis.max;
+                        ctx.lineTo( tHoz( x1old ), tVert( top ) );
+                        ctx.lineTo( tHoz( x1 ), tVert( top ) );
+                    }
+
+                    // fill the triangles
+                    ctx.lineTo( tHoz( x1 ), tVert( y1 ) );
+                    ctx.lineTo( tHoz( x2 ), tVert( y2 ) );
+
+                    // fill the other rectangle if it's there
+                    if( x2 != x2old ) {
+                        top = y2 <= yaxis.min ? yaxis.min : yaxis.max;
+                        ctx.lineTo( tHoz( x2old ), tVert( top ) );
+                        ctx.lineTo( tHoz( x2 ), tVert( top ) );
+                    }
+
+                    lastX = Math.max( x2, x2old );
+                }
+
+                if( areaOpen ) {
+                    ctx.lineTo( tHoz( lastX ), tVert( bottom ) );
+                    ctx.fill();
+                }
+            }
+
+            ctx.save();
+            ctx.translate( plotOffset.left, plotOffset.top );
+            ctx.lineJoin = 'round';
+
+            var lw = series.lines.lineWidth;
+            var sw = series.shadowSize;
+
+            // FIXME: consider another form of shadow when filling is turned on
+            if( sw > 0 ) {
+                // draw shadow in two steps
+                ctx.lineWidth = sw / 2;
+                ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+                plotLine( series.data, lw / 2 + sw / 2 + ctx.lineWidth / 2 );
+
+                ctx.lineWidth = sw / 2;
+                ctx.strokeStyle = 'rgba(0,0,0,0.2)';
+                plotLine( series.data, lw / 2 + ctx.lineWidth / 2 );
+            }
+
+            ctx.lineWidth = lw;
+            ctx.strokeStyle = series.color;
+            setFillStyle( series.lines, series.color );
+            if( series.lines.fill ) plotLineArea( series.data, 0 );
+            plotLine( series.data, 0 );
+            ctx.restore();
+        }
+
+        function drawSeriesPoints( series ) {
+            function plotPoints( data, radius, fill ) {
+                for( var i = 0; i < data.length; ++i ) {
+                    if( !data[i] ) continue;
+
+                    var x = data[i].x,
+                        y = data[i].y;
+
+                    if( x < xaxis.min || x > xaxis.max ||
+                        y < yaxis.min || y > yaxis.max ) { continue; }
+
+                    ctx.beginPath();
+                    ctx.arc( tHoz(x), tVert( y ), radius, 0, 2 * Math.PI, true );
+                    if( fill ) ctx.fill();
+                    ctx.stroke();
+                }
+            }
+
+            function plotPointShadows( data, offset, radius ) {
+                for( var i = 0; i < data.length; ++i ) {
+                    if( !data[i] ) continue;
+
+                    var x = data[i].x,
+                        y = data[i].y;
+                    if( x < xaxis.min || x > xaxis.max ||
+                        y < yaxis.min || y > yaxis.max ) { continue; }
+
+                    ctx.beginPath();
+                    ctx.arc( tHoz( x ), tVert( y ) + offset, radius, 0, Math.PI, false );
+                    ctx.stroke();
+                }
+            }
+
+            ctx.save();
+            ctx.translate( plotOffset.left, plotOffset.top );
+
+            var lw = series.lines.lineWidth;
+            var sw = series.shadowSize;
+            if( sw > 0 ) {
+                // draw shadow in two steps
+                ctx.lineWidth = sw / 2;
+                ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+                plotPointShadows( series.data, sw / 2 + ctx.lineWidth / 2, series.points.radius );
+
+                ctx.lineWidth = sw / 2;
+                ctx.strokeStyle = 'rgba(0,0,0,0.2)';
+                plotPointShadows( series.data, ctx.lineWidth / 2, series.points.radius );
+            }
+
+            ctx.lineWidth = series.points.lineWidth;
+            ctx.strokeStyle = series.color;
+            setFillStyle( series.points, series.color );
+            plotPoints( series.data, series.points.radius, series.points.fill );
+            ctx.restore();
+        }
+
+        function drawSeriesDeltas( series ) {
+            function plotPoints( data, radius, fill ) {
+                for( var i = 0; i < data.length; ++i ) {
+                    if( !data[i] ) continue;
+
+                    var x = data[i].x,
+                        y = data[i].y,
+                        d = data[i].delta;
+
+                    if( x < xaxis.min || x > xaxis.max ||
+                        y < yaxis.min || y > yaxis.max ||
+                        d < yaxis.min || d > yaxis.max ) { continue; }
+
+                    ctx.beginPath();
+                    ctx.arc( tHoz( x ), tVert( y ), radius, 0, 2 * Math.PI, true );
+                    if( fill ) ctx.fill();
+                    ctx.stroke();
+                }
+            }
+
+            function plotDeltas( data, settings ) {
+                for( var i = 0; i < data.length; ++i ) {
+                    if( !data[i] ) { continue; }
+
+                    var x = data[i].x,
+                        y = data[i].y,
+                        d = data[i].delta;
+
+                    if( x < xaxis.min || x > xaxis.max ||
+                        y < yaxis.min || y > yaxis.max ||
+                        d < yaxis.min || d > yaxis.max ) { continue; }
+
+                    if( y < d )       ctx.strokeStyle = settings.color.below;
+                    else if( y > d )  ctx.strokeStyle = settings.color.above;
+                    else              ctx.strokeStyle = settings.color.equal;
+
+                    ctx.beginPath();
+                    ctx.moveTo( tHoz( x ), tVert( y ) );
+                    ctx.lineTo( tHoz( x ), tVert( d ) );
+                    ctx.stroke();
+
+                    // draw the markers for the deltas (horizontal line)
+                    var markerLeft = tHoz( x ) - ( ctx.lineWidth * settings.markerWidth );
+                    var markerRight = tHoz( x ) + ( ctx.lineWidth * settings.markerWidth );
+
+                    ctx.beginPath();
+                    ctx.moveTo( markerLeft, tVert( d ) );
+                    ctx.lineTo( markerRight, tVert( d ) );
+                    ctx.stroke();
+                }
+            }
+
+            function plotPointShadows( data, offset, radius ) {
+                for( var i = 0; i < data.length; ++i ) {
+                    if( !data[i] ) continue;
+
+                    var x = data[i].x,
+                        y = data[i].y,
+                        d = data[i].delta;
+
+                    if( x < xaxis.min || x > xaxis.max ||
+                        y < yaxis.min || y > yaxis.max ||
+                        d < yaxis.min || d > yaxis.max ) { continue; }
+
+                    ctx.beginPath();
+                    ctx.arc( tHoz( x ), tVert( y ) + offset, radius, 0, Math.PI, false );
+                    ctx.stroke();
+                }
+            }
+
+            ctx.save();
+            ctx.translate( plotOffset.left, plotOffset.top );
+
+            var lw = series.lines.lineWidth;
+            var sw = series.shadowSize;
+            if( sw > 0 ) {
+                // draw shadow in two steps
+                ctx.lineWidth = sw / 2;
+                ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+                plotPointShadows( series.data, sw / 2 + ctx.lineWidth / 2, series.points.radius );
+
+                ctx.lineWidth = sw / 2;
+                ctx.strokeStyle = 'rgba(0,0,0,0.2)';
+                plotPointShadows( series.data, ctx.lineWidth / 2, series.points.radius );
+            }
+
+            ctx.lineWidth = series.points.lineWidth;
+
+            // draw the delta lines and markers
+            plotDeltas( series.data, series.deltas );
+
+            // draw the actual datapoints
+            ctx.strokeStyle = series.color;
+            setFillStyle( series.points, series.color );
+            plotPoints( series.data, series.points.radius, series.points.fill );
+
+            ctx.restore();
+        }
+
+        function drawSeriesBars( series ) {
+            function plotBars( data, barWidth, offset, fill ) {
+                for( var i = 0; i < data.length; i++ ) {
+                    if( !data[i] ) continue;
+
+                    var x = data[i].x,
+                        y = data[i].y,
+                        drawLeft = true,
+                        drawTop = true,
+                        drawRight = true;
+
+                    // determine the co-ordinates of the bar, account for negative bars having
+                    // flipped top/bottom and draw/don't draw accordingly
+                    var halfBar = barWidth / 2;
+                    var left = x - halfBar,
+                        right = x + halfBar,
+                        bottom = ( y < 0 ? y : 0 ),
+                        top = ( y < 0 ? 0 : y );
+
+                    if( right < xaxis.min || left > xaxis.max ||
+                        top < yaxis.min || bottom > yaxis.max ) { continue; }
+
+                    // clip
+                    if( left < xaxis.min ) {
+                        left = xaxis.min;
+                        drawLeft = false;
+                    }
+
+                    if ( right > xaxis.max ) {
+                        right = xaxis.max;
+                        drawRight = false;
+                    }
+
+                    if( bottom < yaxis.min ) {
+                        bottom = yaxis.min;
+                    }
+
+                    if (top > yaxis.max) {
+                        top = yaxis.max;
+                        drawTop = false;
+                    }
+
+                    // fill the bar
+                    if( fill ) {
+                        ctx.beginPath();
+                        ctx.moveTo( tHoz( left ), tVert( bottom) + offset );
+                        ctx.lineTo( tHoz( left ), tVert( top) + offset );
+                        ctx.lineTo( tHoz( right ), tVert( top) + offset );
+                        ctx.lineTo( tHoz( right ), tVert( bottom) + offset );
+                        ctx.fill();
+                    }
+
+                    // draw outline
+                    if( drawLeft || drawRight || drawTop ) {
+                        ctx.beginPath();
+                        ctx.moveTo( tHoz( left ), tVert( bottom ) + offset );
+                        if( drawLeft )  ctx.lineTo( tHoz( left ), tVert( top) + offset );
+                        else            ctx.moveTo( tHoz( left ), tVert( top) + offset );
+                        if( drawTop )   ctx.lineTo( tHoz( right ), tVert( top ) + offset );
+                        else            ctx.moveTo( tHoz( right ), tVert( top ) + offset );
+                        if( drawRight ) ctx.lineTo( tHoz( right ), tVert( bottom ) + offset );
+                        else            ctx.moveTo( tHoz( right ), tVert( bottom ) + offset );
+                        ctx.stroke();
+                    }
+                }
+            }
+
+            ctx.save();
+            ctx.translate( plotOffset.left, plotOffset.top );
+            ctx.lineJoin = 'round';
+
+            var bw = series.bars.barWidth;
+            var lw = Math.min( series.bars.lineWidth, bw );
+
+            ctx.lineWidth = lw;
+            ctx.strokeStyle = series.color;
+            setFillStyle( series.bars, series.color );
+            plotBars( series.data, bw, 0, series.bars.fill );
+            ctx.restore();
+        }
+
+        function setFillStyle( obj, seriesColor ) {
+            var opacity = obj.fillOpacity;
+            if( obj.fill ) {
+                if( obj.fillColor ) {
+                    ctx.fillStyle = obj.fillColor;
+                }
+                else {
+                    var c = parseColor( seriesColor );
+                    c.a = typeof fill == 'number' ? obj.fill : ( opacity ? opacity : 0.4 );
+                    c.normalize();
+                    ctx.fillStyle = c.toString();
+                }
+            }
+        }
+
+        function drawMarkers() {
+            if( !options.grid.markers.length ) return;
+
+            for( var i = 0; i < options.grid.markers.length; i++ ) {
+                marker = options.grid.markers[i];
+                if( marker.value < yaxis.max && marker.value > yaxis.min ) {
+                    ctx.lineWidth = marker.width;
+                    ctx.strokeStyle = marker.color;
+                    ctx.beginPath();
+
+                    if( marker.axis == 'x' ) {
+                        ctx.moveTo( tHoz( xaxis.min ) + plotOffset.left,
+                                    tVert( marker.value ) + plotOffset.top );
+                        ctx.lineTo( tHoz( xaxis.max ) + plotOffset.left,
+                                    tVert( marker.value ) + plotOffset.top );
+                    }
+                    else if( marker.axis == 'y' ) {
+                        ctx.moveTo( tHoz( marker.value ) + plotOffset.left,
+                                    tVert( yaxis.min ) + plotOffset.top );
+                        ctx.lineTo( tHoz( marker.value ) + plotOffset.left,
+                                    tVert( yaxis.max ) + plotOffset.top );
+                    }
+
+                    ctx.stroke();
+                }
+            }
+        }
+
+        function insertLegend() {
+            // remove legends from the appropriate container
+            if( options.legend.container ) {
+                options.legend.container.find('table.legend_table').remove();
+            }
+            else {
+                target.find('.legend').remove();
+            }
+
+            if( !options.legend.show ) { return; }
+            
+            var fragments = [];
+            var rowStarted = false;
+            for( i = 0; i < series.length; ++i ) {
+                if( !series[i].label ) continue;
+
+                if( i % options.legend.noColumns == 0 ) {
+                    if( rowStarted ) fragments.push( '</tr>' );
+                    fragments.push( '<tr>' );
+                    rowStarted = true;
+                }
+
+                var label = series[i].label;
+                if( options.legend.labelFormatter ) label = options.legend.labelFormatter( label );
+
+                fragments.push(
+                    '<td class="legendColorBox"><div style="border:1px solid ' +
+                    options.legend.labelBoxBorderColor +
+                    ';padding:1px"><div style="width:14px;height:10px;background-color:' +
+                    series[i].color + ';overflow:hidden"></div></div></td>' +
+                    '<td class="legendLabel">' + label + '</td>'
+                );
+            }
+
+            if( rowStarted ) fragments.push( '</tr>' );
+
+            if( fragments.length > 0 ) {
+                var table = '<table class="legend_table" style="font-size:smaller;color:' +
+                            options.grid.color + '">' + fragments.join('') + '</table>';
+
+                if( options.legend.container ) {
+                    options.legend.container.append( table );
+                }
+                else {
+                    var pos = '';
+                    var p = options.legend.position,
+                        m = options.legend.margin;
+
+                    if( p.charAt( 0 ) == 'n' ) {
+                        pos += 'top:' + ( m + plotOffset.top ) + 'px;';
+                    }
+                    else if( p.charAt( 0 ) == 's' ) {
+                        pos += 'bottom:' + ( m + plotOffset.bottom + BOTTOM_SIDE_BUFFER ) + 'px;';
+                    }
+                    if( p.charAt( 1 ) == 'e' ) {
+                        pos += 'right:' + ( m + plotOffset.right + RIGHT_SIDE_BUFFER ) + 'px;';
+                    }
+                    else if( p.charAt( 1 ) == 'w' ) {
+                        pos += 'left:' + ( m + 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 ) {
+                            tmp = options.grid.backgroundColor ?
+                                      options.grid.backgroundColor :
+                                      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 );
+                    }
+                }
+            }
+        }
+
+        var lastMousePos = { pageX: null, pageY: null },
+            selection = { first: { x: -1, y: -1 }, second: { x: -1, y: -1 } },
+            prevSelection = null,
+            selectionInterval = null,
+            ignoreClick = false;
+
+        // Returns the data item the mouse is over, or null if none is found
+        function findSelectedItem( mouseX, mouseY ) {
+            // How close do we need to be to an item in order to select it?
+            // The clickCatchingArea parameter is the radius of the circle, in pixels.
+            var lowestDistance = Math.pow( options.grid.mouseCatchingArea, 2 );
+            selectedItem = null;
+
+            for( var i = 0; i < series.length; ++i ) {
+                var data = series[i].data;
+
+                if( options.sortData && data.length > 1 ) {
+                    var half = tHoz( data[( data.length / 2 ).toFixed(0)].x ).toFixed( 0 );
+                    if( mouseX < half ) {
+                        start = 0;
+                        end = ( data.length / 2 ).toFixed( 0 ) + 5;
+                    }
+                    else {
+                        start = ( data.length / 2 ).toFixed( 0 ) - 5;
+                        end = data.length;
+                    }
+                }
+                else {
+                    // either we haven't sorted the data (and so we can't split it for
+                    // searching) or there's only 1 data point, so it doesn't matter
+                    start = 0;
+                    end = data.length;
+                }
+
+                for( var j = start; j < end; ++j ) {
+                    if( !data[j] ) continue;
+
+                    // We have to calculate distances in pixels, not in data units, because
+                    // the scale of the axes may be different
+                    var x = data[j].x,
+                        y = data[j].y;
+
+                    xDistance = Math.abs( tHoz( x ) - mouseX );
+                    yDistance = Math.abs(tVert(y)-mouseY);
+                    if( xDistance > options.grid.mouseCatchingArea ) continue;
+                    if( yDistance > options.grid.mouseCatchingArea ) continue;
+
+                    sqrDistance = Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 );
+                    if( sqrDistance < lowestDistance ) {
+                        selectedItem = data[j];
+                        selectedItem._data = series[i];
+                        lowestDistance = sqrDistance;
+                    }
+                }
+            }
+
+            return selectedItem;
+        }
+
+        function onMouseMove( ev ) {
+            // FIXME: temp. work-around until jQuery bug 1871 is fixed
+            var e = ev || window.event;
+            if( !e.pageX && e.clientX ) {
+                var de = document.documentElement,
+                    b = document.body;
+                lastMousePos.pageX = e.clientX + ( de && de.scrollLeft || b.scrollLeft || 0 );
+                lastMousePos.pageY = e.clientY + ( de && de.scrollTop || b.scrollTop || 0 );
+            }
+            else {
+                lastMousePos.pageX = e.pageX;
+                lastMousePos.pageY = e.pageY;
+            }
+
+            if( options.grid.hoverable ) {
+                var offset = eventHolder.offset();
+                result = { raw: { 
+                    x: lastMousePos.pageX - offset.left - plotOffset.left,
+                    y: lastMousePos.pageY - offset.top - plotOffset.top
+                } };
+                result.selected = findSelectedItem( result.raw.x, result.raw.y );
+
+                // display the tooltip/hint if requested
+                if( !$.browser.msie && result.selected && result.selected._data.hints.show ) {
+                    showHintDiv( result.selected );
+                }
+
+                if( !result.selected ) cleanup();
+                target.trigger( 'plotmousemove', [ result ] );
+            }
+        }
+
+        function onMouseDown( e ) {
+            if( e.which != 1 ) return; // left click
+
+            // cancel out any text selections
+            document.body.focus();
+
+            // prevent text selection and drag in old-school browsers
+            if( document.onselectstart !== undefined && !workarounds.onselectstart ) {
+                workarounds.onselectstart = document.onselectstart;
+                document.onselectstart = function() { return false; };
+            }
+            if( document.ondrag !== undefined && !workarounds.ondrag ) {
+                workarounds.ondrag = document.ondrag;
+                document.ondrag = function() { return false; };
+            }
+
+            setSelectionPos( selection.first, e );
+            clearInterval( selectionInterval );
+            lastMousePos.pageX = null;
+            selectionInterval = setInterval( updateSelectionOnMouseMove, 200 );
+            $(document).one( 'mouseup', onSelectionMouseUp );
+        }
+
+        function onClick( e ) {
+            if( ignoreClick ) {
+                ignoreClick = false;
+                return;
+            }
+
+            var offset = eventHolder.offset();
+            var canvasX = e.pageX - offset.left - plotOffset.left;
+            var canvasY = e.pageY - offset.top - plotOffset.top;
+
+            var result = { raw: {
+                x: xaxis.min + canvasX / hozScale,
+                y: yaxis.max - canvasY / vertScale
+            } };
+            result.selected = findSelectedItem( canvasX, canvasY );
+
+            target.trigger( 'plotclick', [ result ] );
+        }
+
+        function triggerSelectedEvent() {
+            var x1, x2, y1, y2;
+            if( selection.first.x <= selection.second.x ) {
+                x1 = selection.first.x;
+                x2 = selection.second.x;
+            }
+            else {
+                x1 = selection.second.x;
+                x2 = selection.first.x;
+            }
+
+            if( selection.first.y >= selection.second.y ) {
+                y1 = selection.first.y;
+                y2 = selection.second.y;
+            }
+            else {
+                y1 = selection.second.y;
+                y2 = selection.first.y;
+            }
+
+            x1 = xaxis.min + x1 / hozScale;
+            x2 = xaxis.min + x2 / hozScale;
+
+            y1 = yaxis.max - y1 / vertScale;
+            y2 = yaxis.max - y2 / vertScale;
+
+            target.trigger( 'plotselected', [ { x1: x1, y1: y1, x2: x2, y2: y2 } ] );
+        }
+
+        function onSelectionMouseUp( e ) {
+            if( document.onselectstart !== undefined ) document.onselectstart = workarounds.onselectstart;
+            if( document.ondrag !== undefined )        document.ondrag = workarounds.ondrag;
+
+            if( selectionInterval ) {
+                clearInterval( selectionInterval );
+                selectionInterval = null;
+            }
+
+            setSelectionPos( selection.second, e );
+            clearSelection();
+            if( !selectionIsSane() || e.which != 1 ) return false;
+
+            drawSelection();
+            triggerSelectedEvent();
+            ignoreClick = true;
+
+            return false;
+        }
+
+        function setSelectionPos( pos, e ) {
+            var offset = $(overlay).offset();
+            if( options.selection.mode == 'y' ) {
+                pos.x = ( pos == selection.first ) ? 0 : plotWidth;
+            }
+            else {
+                pos.x = e.pageX - offset.left - plotOffset.left;
+                pos.x = Math.min( Math.max( 0, pos.x ), plotWidth );
+
+                if( options.selection.snapToTicks ) {
+                    // find our current location in terms of the xaxis
+                    var x = xaxis.min + pos.x / hozScale;
+
+                    // determine if we're moving left or right on the xaxis
+                    if( selection.first.x - selection.second.x < 0 ||
+                        selection.first.x == -1 ) {
+                        // to the right
+                        idx = pos == selection.first ? -1 : 0
+                        for( var i = 0; i < xaxis.ticks.length; i++ ) {
+                            if( x <= xaxis.ticks[i].v ) {
+                                pos.x = Math.floor( ( xaxis.ticks[i+idx].v - xaxis.min ) *
+                                                    hozScale);
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        // to the left
+                        idx = pos == selection.first ? 1 : 0
+                        for( var i = xaxis.ticks.length - 1; i >= 0; i-- ) {
+                            if( x >= xaxis.ticks[i].v ) {
+                                pos.x = Math.floor( ( xaxis.ticks[i+idx].v - xaxis.min ) *
+                                                    hozScale);
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+
+            if( options.selection.mode == 'x' ) {
+                pos.y = ( pos == selection.first ) ? 0 : plotHeight;
+            }
+            else {
+                pos.y = e.pageY - offset.top - plotOffset.top;
+                pos.y = Math.min( Math.max( 0, pos.y ), plotHeight );
+            }
+        }
+
+        function updateSelectionOnMouseMove() {
+            if( !lastMousePos.pageX ) { return; }
+            setSelectionPos( selection.second, lastMousePos );
+            clearSelection();
+            if( selectionIsSane() ) { drawSelection(); }
+        }
+
+        function clearSelection() {
+            if( !prevSelection ) { return; }
+
+            var x = Math.min( prevSelection.first.x, prevSelection.second.x ),
+                y = Math.min( prevSelection.first.y, prevSelection.second.y ),
+                w = Math.abs( prevSelection.second.x - prevSelection.first.x ),
+                h = Math.abs( prevSelection.second.y - prevSelection.first.y );
+
+            octx.clearRect( x + plotOffset.left - octx.lineWidth,
+                            y + plotOffset.top - octx.lineWidth,
+                            w + octx.lineWidth * 2,
+                            h + octx.lineWidth * 2 );
+
+            prevSelection = null;
+        }
+
+        function setSelection( area ) {
+            clearSelection();
+
+            if( options.selection.mode == 'x' ) {
+                selection.first.y = 0;
+                selection.second.y = plotHeight;
+            }
+            else {
+                selection.first.y = ( yaxis.max - area.y1 ) * vertScale;
+                selection.second.y = ( yaxis.max - area.y2 ) * vertScale;
+            }
+
+            if( options.selection.mode == 'y' ) {
+                selection.first.x = 0;
+                selection.second.x = plotWidth;
+            }
+            else {
+                selection.first.x = ( area.x1 - xaxis.min ) * hozScale;
+                selection.second.x = ( area.x2 - xaxis.min ) * hozScale;
+            }
+
+            drawSelection();
+            triggerSelectedEvent();
+        }
+
+        function highlight( marker ) {
+            // prevent unnecessary work
+            if( marker == lastMarker ) { return; }
+            else { lastMarker = marker; }
+
+            // draw a marker on the graph over the point that the mouse is hovering over
+            if( marker ) {
+                var color = options.grid.hoverColor ? options.grid.hoverColor : marker._data.color;
+                var fill = options.grid.hoverFill ? options.grid.hoverFill : 'white';
+                var radius = options.grid.hoverRadius ? options.grid.hoverRadius : marker._data.points.radius;
+
+                var temp_series = {
+                    shadowSize: options.shadowSize,
+                    lines: { show: false },
+                    points: $.extend( true, options.points,
+                                            { fillColor: fill,
+                                              radius: radius } ),
+                    color: color,
+                    data: [ { x: marker.x, y: marker.y } ]
+                };
+                draw();
+                drawSeriesPoints( temp_series );
+            }
+            else {
+                draw();
+            }
+        }
+
+        function drawSelection() {
+            if( prevSelection &&
+                selection.first.x == prevSelection.first.x &&
+                selection.first.y == prevSelection.first.y && 
+                selection.second.x == prevSelection.second.x &&
+                selection.second.y == prevSelection.second.y ) { return; }
+
+            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();
+
+            prevSelection = { first:  { x: selection.first.x,
+                                        y: selection.first.y },
+                              second: { x: selection.second.x,
+                                        y: selection.second.y } };
+
+            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 + plotOffset.left, y + plotOffset.top, w, h );
+            octx.strokeRect( x + plotOffset.left, y + plotOffset.top, w, h );
+        }
+
+        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 showHintDiv(selected) {
+            var offset = $(overlay).offset();
+            if( $('.hint-wrapper').length > 0 &&
+                $('.hint-wrapper:first').attr( 'name' ) == selected.x + ":" + selected.y ) {
+                var hintDiv = $('div.plot-hint');
+                var hintBackground = $('div.hint-background');
+            }
+            else {
+                cleanup();
+                var fragments = [];
+                var hintWrapper = $('<div class="hint-wrapper" name="' +
+                                    selected.x + ':' + selected.y + '"></div>');
+                hintWrapper.appendTo( target );
+
+                fragments.push( '<tbody><tr>' );
+                if( selected._data.hints.showColorBox ) {
+                    fragments.push( '<td class="legendColorBox"><div style="border:1px solid ' +
+                                    options.legend.labelBoxBorderColor +
+                                    ';padding:1px"><div style="width:14px;height:10px;background-color:' +
+                                    selected._data.color + '"></div></div></td>' );
+                }
+
+                if( selected._data.hints.showSeriesLabel && selected._data.label ) {
+                    var label = selected._data.hints.labelFormatter( selected._data.label );
+                    fragments.push( '<td class="legendLabel" style="padding: 0px 4px">' +
+                                    label + '</td>');
+                }
+                fragments.push( '<td class="hintData" style="padding-left: 4px;"></td>' );
+                fragments.push( '</tr></tbody>' );
+
+                hintDiv = $('<div class="plot-hint" style="border: 1px solid ' + options.hints.borderColor +
+                            ';padding: 1px;z-index:5;position:absolute;top:1px;left:1px;display:none;"></div>')
+                                .appendTo(hintWrapper);
+
+                var table = $('<table style="font-size:smaller;white-space: nowrap;color:' +
+                              options.grid.color + '">' + fragments.join('') + '</table>');
+                hintDiv.append( table );
+
+                if( selected._data.hints.backgroundOpacity != 0.0 ) {
+                    var c = selected._data.hints.backgroundColor;
+                    if( !c ){
+                        tmp = options.grid.backgroundColor ? options.grid.backgroundColor : extractColor( hintDiv );
+                        c = parseColor( tmp ).adjust( null, null, null, 1 ).toString();
+                    }
+                    hintBackground = $('<div class="hint-background" style="padding: 2px;' +
+                                       'z-index:4;position:absolute;display:none;background-color:' +
+                                       c + ';"> </div>')
+                                           .appendTo( hintWrapper )
+                                           .css( 'opacity', selected._data.hints.backgroundOpacity );
+                }
+
+                var hintDataContainer = hintDiv.find('.hintData');
+                $(hintDataContainer).html( selected._data.hints.hintFormatter( selected ) );
+            }
+
+            leftEdge = lastMousePos.pageX - offset.left + 15;
+            if( hintDiv.width() + leftEdge > target.width() ) {
+                leftEdge = leftEdge - 30 - hintDiv.width();
+            }
+            hintDiv.css( { left: leftEdge,
+                           top: lastMousePos.pageY - offset.top + 15 } ).show();
+            hintBackground.css( { left: leftEdge,
+                                  top: lastMousePos.pageY - offset.top + 15,
+                                  width: hintDiv.width(),
+                                  height: hintDiv.height() } ).show();
+        }
+
+        function cleanup() {
+            $('.hint-wrapper').remove();
+            draw();
+        }
+
+        function defaultHintFormatter( datapoint ) {
+            hintStr = '';
+            for( var key in datapoint ) {
+                if( key[0] == '_' ) { continue; } // skip internal members
+                hintStr += "<strong>" + key + ":</strong> " + datapoint[key] + "<br/>";
+            }
+            return hintStr;
+        }
+
+        function defaultLabelFormatter( label ) {
+            return "<span style='font-size:1.2em;'>" + label + "</span>";
+        }
+    }
+
+    $.plot = function( target, data, options ) {
+        var plot = new Plot( target, data, options );
+        /*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;
+    };
+
+    // round to nearby lower multiple of base
+    function floorInBase( n, base ) {
+        return base * Math.floor( n / base );
+    }
+
+    // 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] ) 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] ) 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 = limit( parseInt( this.r ), 0, 255 );
+            this.g = limit( parseInt( this.g ), 0, 255 );
+            this.b = limit( parseInt( this.b ), 0, 255 );
+            this.a = limit( this.a, 0, 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;
+
+        // Try to lookup the color first before going mad with regexes
+        var name = $.trim( str ).toLowerCase();
+        if (name == 'transparent') {
+            return new Color( 255, 255, 255, 0 );
+        }
+        else if( !name.match( /^(rgb|#)/ ) ) {
+            result = lookupColors[name];
+            return new Color( result[0], result[1], result[2] );
+        }
+
+        // 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 ) );
+        }
+    }
+} )( jQuery );