Subversion Repositories Code-Repo

/**

 * Title: jqPlot Charts

 * 

 * Pure JavaScript plotting plugin for jQuery.

 * 

 * About: Version

 * 

 * 0.9.6 

 * 

 * About: Copyright & License

 * 

 * Copyright (c) 2009 Chris Leonello

 * jqPlot is currently available for use in all personal or commercial projects 

 * under both the MIT and GPL version 2.0 licenses. This means that you can 

 * choose the license that best suits your project and use it accordingly.

 * 

 * See <GPL Version 2> and <MIT License> contained within this distribution for further information. 

 *

 * The author would appreciate an email letting him know of any substantial

 * use of jqPlot.  You can reach the author at: chris dot leonello at gmail 

 * dot com or see http://www.jqplot.com/info.php.  This is, of course, not required.

 *

 * If you are feeling kind and generous, consider supporting the project by

 * making a donation at: http://www.jqplot.com/donate.php.

 *

 * 

 * About: Introduction

 * 

 * jqPlot requires jQuery (tested with 1.3.2 or better). jQuery 1.3.2 is included in the distribution.  

 * To use jqPlot include jQuery, the jqPlot jQuery plugin, the jqPlot css file and optionally 

 * the excanvas script for IE support in your web page:

 * 

 * > <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->

 * > <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>

 * > <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>

 * > <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

 * 

 * jqPlot can be customized by overriding the defaults of any of the objects which make

 * up the plot. The general usage of jqplot is:

 * 

 * > chart = $.jqplot('targetElemId', [dataArray,...], {optionsObject});

 * 

 * The options available to jqplot are detailed in <jqPlot Options> in the jqPlotOptions.txt file.

 * 

 * An actual call to $.jqplot() may look like the 

 * examples below:

 * 

 * > chart = $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

 * 

 * or

 * 

 * > dataArray = [34,12,43,55,77];

 * > chart = $.jqplot('targetElemId', [dataArray, ...], {title:'My Plot', axes:{yaxis:{min:20, max:100}}});

 * 

 * For more inforrmation, see <jqPlot Usage>.

 * 

 * About: Usage

 * 

 * See <jqPlot Usage>

 * 

 * About: Available Options 

 * 

 * See <jqPlot Options> for a list of options available thorugh the options object (not complete yet!)

 * 

 * About: Options Usage

 * 

 * See <Options Tutorial>

 * 

 * About: Changes

 * 

 * See <Change Log>

 * 

 */

(function($) {

    // make sure undefined is undefined

    var undefined;

    /**

     * Class: $.jqplot

     * jQuery function called by the user to create a plot.

     *  

     * Parameters:

     * target - ID of target element to render the plot into.

     * data - an array of data series.

     * options - user defined options object.  See the individual classes for available options.

     * 

     * Properties:

     * config - object to hold configuration information for jqPlot plot object.

     * 

     * attributes:

     * enablePlugins - False to disable plugins by default.  Plugins must then be explicitly 

     *   enabled in the individual plot options.  Default: true.

     *   This property sets the "show" property of certain plugins to true or false.

     *   Only plugins that can be immediately active upon loading are affected.  This includes

     *   non-renderer plugins like cursor, dragable, highlighter, and trendline.

     * defaultHeight - Default height for plots where no css height specification exists.  This

     *   is a jqplot wide default.

     * defaultWidth - Default height for plots where no css height specification exists.  This

     *   is a jqplot wide default.

     */

    $.jqplot = function(target, data, options) {

        var _data, _options;

        // check to see if only 2 arguments were specified, what is what.

        if (data == null) {

            throw "No data specified";

        }

        if (data.constructor == Array && data.length == 0 || data[0].constructor != Array) {

            throw "Improper Data Array";

        }

        if (options == null) {

            if (data instanceof Array) {

                _data = data;

                _options = null;   

            }

            else if (data.constructor == Object) {

                _data = null;

                _options = data;

            }

        }

        else {

            _data = data;

            _options = options;

        }

        var plot = new jqPlot();

        plot.init(target, _data, _options);

        plot.draw();

        return plot;

    };

    $.jqplot.debug = 1;

    $.jqplot.config = {

        debug:1,

        enablePlugins:true,

        defaultHeight:300,

        defaultWidth:400

    };

    $.jqplot.enablePlugins = $.jqplot.config.enablePlugins;

    /**

     * 

     * Hooks: jqPlot Pugin Hooks

     * 

     * $.jqplot.preInitHooks - called before initialization.

     * $.jqplot.postInitHooks - called after initialization.

     * $.jqplot.preParseOptionsHooks - called before user options are parsed.

     * $.jqplot.postParseOptionsHooks - called after user options are parsed.

     * $.jqplot.preDrawHooks - called before plot draw.

     * $.jqplot.postDrawHooks - called after plot draw.

     * $.jqplot.preDrawSeriesHooks - called before each series is drawn.

     * $.jqplot.postDrawSeriesHooks - called after each series is drawn.

     * $.jqplot.preDrawLegendHooks - called before the legend is drawn.

     * $.jqplot.addLegendRowHooks - called at the end of legend draw, so plugins

     *     can add rows to the legend table.

     * $.jqplot.preSeriesInitHooks - called before series is initialized.

     * $.jqplot.postSeriesInitHooks - called after series is initialized.

     * $.jqplot.preParseSeriesOptionsHooks - called before series related options

     *     are parsed.

     * $.jqplot.postParseSeriesOptionsHooks - called after series related options

     *     are parsed.

     * $.jqplot.eventListenerHooks - called at the end of plot drawing, binds

     *     listeners to the event canvas which lays on top of the grid area.

     * $.jqplot.preDrawSeriesShadowHooks - called before series shadows are drawn.

     * $.jqplot.postDrawSeriesShadowHooks - called after series shadows are drawn.

     * 

     */

    $.jqplot.preInitHooks = [];

    $.jqplot.postInitHooks = [];

    $.jqplot.preParseOptionsHooks = [];

    $.jqplot.postParseOptionsHooks = [];

    $.jqplot.preDrawHooks = [];

    $.jqplot.postDrawHooks = [];

    $.jqplot.preDrawSeriesHooks = [];

    $.jqplot.postDrawSeriesHooks = [];

    $.jqplot.preDrawLegendHooks = [];

    $.jqplot.addLegendRowHooks = [];

    $.jqplot.preSeriesInitHooks = [];

    $.jqplot.postSeriesInitHooks = [];

    $.jqplot.preParseSeriesOptionsHooks = [];

    $.jqplot.postParseSeriesOptionsHooks = [];

    $.jqplot.eventListenerHooks = [];

    $.jqplot.preDrawSeriesShadowHooks = [];

    $.jqplot.postDrawSeriesShadowHooks = [];

    // A superclass holding some common properties and methods.

    $.jqplot.ElemContainer = function() {

        this._elem;

        this._plotWidth;

        this._plotHeight;

        this._plotDimensions = {height:null, width:null};

    };

    $.jqplot.ElemContainer.prototype.getWidth = function() {

        if (this._elem) {

            return this._elem.outerWidth(true);

        }

        else {

            return null;

        }

    };

    $.jqplot.ElemContainer.prototype.getHeight = function() {

        if (this._elem) {

            return this._elem.outerHeight(true);

        }

        else {

            return null;

        }

    };

    $.jqplot.ElemContainer.prototype.getPosition = function() {

        if (this._elem) {

            return this._elem.position();

        }

        else {

            return {top:null, left:null, bottom:null, right:null};

        }

    };

    $.jqplot.ElemContainer.prototype.getTop = function() {

        return this.getPosition().top;

    };

    $.jqplot.ElemContainer.prototype.getLeft = function() {

        return this.getPosition().left;

    };

    $.jqplot.ElemContainer.prototype.getBottom = function() {

        return this._elem.css('bottom');

    };

    $.jqplot.ElemContainer.prototype.getRight = function() {

        return this._elem.css('right');

    };

    /**

     * Class: Axis

     * An individual axis object.  Cannot be instantiated directly, but created

     * by the Plot oject.  Axis properties can be set or overriden by the 

     * options passed in from the user.

     * 

     */

    function Axis(name) {

        $.jqplot.ElemContainer.call(this);

        // Group: Properties

        //

        // Axes options are specified within an axes object at the top level of the 

        // plot options like so:

        // > {

        // >    axes: {

        // >        xaxis: {min: 5},

        // >        yaxis: {min: 2, max: 8, numberTicks:4},

        // >        x2axis: {pad: 1.5},

        // >        y2axis: {ticks:[22, 44, 66, 88]}

        // >        }

        // > }

        // There are 4 axes, 'xaxis', 'yaxis', 'x2axis', 'y2axis'.  Any or all of 

        // which may be specified.

        this.name = name;

        this._series = [];

        // prop: show

        // Wether to display the axis on the graph.

        this.show = false;

        // prop: tickRenderer

        // A class of a rendering engine for creating the ticks labels displayed on the plot, 

        // See <$.jqplot.AxisTickRenderer>.

        this.tickRenderer = $.jqplot.AxisTickRenderer;

        // prop: tickOptions

        // Options that will be passed to the tickRenderer, see <$.jqplot.AxisTickRenderer> options.

        this.tickOptions = {};

        // prop: labelRenderer

        // A class of a rendering engine for creating an axis label.

        this.labelRenderer = $.jqplot.AxisLabelRenderer;

        // prop: labelOptions

        // Options passed to the label renderer.

        this.labelOptions = {};

        // prop: label

        // Label for the axis

        this.label = null;

        // prop: showLabel

        // true to show the axis label.

        this.showLabel = true;

        // prop: min

        // minimum value of the axis (in data units, not pixels).

        this.min=null;

        // prop: max

        // maximum value of the axis (in data units, not pixels).

        this.max=null;

        // prop: autoscale

        // Autoscale the axis min and max values to provide sensible tick spacing.

        // If axis min or max are set, autoscale will be turned off.

        // The numberTicks, tickInterval and pad options do work with 

        // autoscale, although tickInterval has not been tested yet.

        // padMin and padMax do nothing when autoscale is on.

        this.autoscale = false;

        // prop: pad

        // Padding to extend the range above and below the data bounds.

        // The data range is multiplied by this factor to determine minimum and maximum axis bounds.

        // A value of 0 will be interpreted to mean no padding, and pad will be set to 1.0.

        this.pad = 1.2;

        // prop: padMax

        // Padding to extend the range above data bounds.

        // The top of the data range is multiplied by this factor to determine maximum axis bounds.

        // A value of 0 will be interpreted to mean no padding, and padMax will be set to 1.0.

        this.padMax = null;

        // prop: padMin

        // Padding to extend the range below data bounds.

        // The bottom of the data range is multiplied by this factor to determine minimum axis bounds.

        // A value of 0 will be interpreted to mean no padding, and padMin will be set to 1.0.

        this.padMin = null;

        // prop: ticks

        // 1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.

        // If no label is specified, the value is formatted into an appropriate label.

        this.ticks = [];

        // prop: numberTicks

        // Desired number of ticks.  Default is to compute automatically.

        this.numberTicks;

        // prop: tickInterval

        // number of units between ticks.  Mutually exclusive with numberTicks.

        this.tickInterval;

        // prop: renderer

        // A class of a rendering engine that handles tick generation, 

        // scaling input data to pixel grid units and drawing the axis element.

        this.renderer = $.jqplot.LinearAxisRenderer;

        // prop: rendererOptions

        // renderer specific options.  See <$.jqplot.LinearAxisRenderer> for options.

        this.rendererOptions = {};

        // prop: showTicks

        // wether to show the ticks (both marks and labels) or not.

        this.showTicks = true;

        // prop: showTickMarks

        // wether to show the tick marks (line crossing grid) or not.

        this.showTickMarks = true;

        // prop: showMinorTicks

        // Wether or not to show minor ticks.  This is renderer dependent.

        // The default <$.jqplot.LinearAxisRenderer> does not have minor ticks.

        this.showMinorTicks = true;

        // prop: useSeriesColor

        // Use the color of the first series associated with this axis for the

        // tick marks and line bordering this axis.

        this.useSeriesColor = false;

        // prop: borderWidth

        // width of line stroked at the border of the axis.  Defaults

        // to the width of the grid boarder.

        this.borderWidth = null;

        // prop: borderColor

        // color of the border adjacent to the axis.  Defaults to grid border color.

        this.borderColor = null;

        // minimum and maximum values on the axis.

        this._dataBounds = {min:null, max:null};

        // pixel position from the top left of the min value and max value on the axis.

        this._offsets = {min:null, max:null};

        this._ticks=[];

        this._label = null;

        // prop: syncTicks

        // true to try and synchronize tick spacing across multiple axes so that ticks and

        // grid lines line up.  This has an impact on autoscaling algorithm, however.

        // In general, autoscaling an individual axis will work better if it does not

        // have to sync ticks.

        this.syncTicks = null;

        // prop: tickSpacing

        // Approximate pixel spacing between ticks on graph.  Used during autoscaling.

        // This number will be an upper bound, actual spacing will be less.

        this.tickSpacing = 75;

        // Properties to hold the original values for min, max, ticks, tickInterval and numberTicks

        // so they can be restored if altered by plugins.

        this._min = null;

        this._max = null;

        this._tickInterval = null;

        this._numberTicks = null;

        this.__ticks = null;

    }

    Axis.prototype = new $.jqplot.ElemContainer();

    Axis.prototype.constructor = Axis;

    Axis.prototype.init = function() {

        this.renderer = new this.renderer();

        // set the axis name

        this.tickOptions.axis = this.name;

        if (this.label == null || this.label == '') {

            this.showLabel = false;

        }

        else {

            this.labelOptions.label = this.label;

        }

        if (this.showLabel == false) {

            this.labelOptions.show = false;

        }

        // set the default padMax, padMin if not specified

        // special check, if no padding desired, padding

        // should be set to 1.0

        if (this.pad == 0) {

            this.pad = 1.0;

        }

        if (this.padMax == 0) {

            this.padMax = 1.0;

        }

        if (this.padMin == 0) {

            this.padMin = 1.0;

        }

        if (this.padMax == null) {

            this.padMax = (this.pad-1)/2 + 1;

        }

        if (this.padMin == null) {

            this.padMin = (this.pad-1)/2 + 1;

        }

        // now that padMin and padMax are correctly set, reset pad in case user has supplied 

        // padMin and/or padMax

        this.pad = this.padMax + this.padMin - 1;

        if (this.min != null || this.max != null) {

            this.autoscale = false;

        }

        // if not set, sync ticks for y axes but not x by default.

        if (this.syncTicks == null && this.name.indexOf('y') > -1) {

            this.syncTicks = true;

        }

        else if (this.syncTicks == null){

            this.syncTicks = false;

        }

        this.renderer.init.call(this, this.rendererOptions);

    };

    Axis.prototype.draw = function(ctx) {

        return this.renderer.draw.call(this, ctx);

    };

    Axis.prototype.set = function() {

        this.renderer.set.call(this);

    };

    Axis.prototype.pack = function(pos, offsets) {

        if (this.show) {

            this.renderer.pack.call(this, pos, offsets);

        }

        // these properties should all be available now.

        if (this._min == null) {

            this._min = this.min;

            this._max = this.max;

            this._tickInterval = this.tickInterval;

            this._numberTicks = this.numberTicks;

            this.__ticks = this._ticks;

        }

    };

    // reset the axis back to original values if it has been scaled, zoomed, etc.

    Axis.prototype.reset = function() {

        this.renderer.reset.call(this);

    };

    Axis.prototype.resetScale = function() {

        this.min = null;

        this.max = null;

        this.numberTicks = null;

        this.tickInterval = null;

    };

    /**

     * Class: Legend

     * Legend object.  Cannot be instantiated directly, but created

     * by the Plot oject.  Legend properties can be set or overriden by the 

     * options passed in from the user.

     */

    function Legend(options) {

        $.jqplot.ElemContainer.call(this);

        // Group: Properties

        // prop: show

        // Wether to display the legend on the graph.

        this.show = false;

        // prop: location

        // Placement of the legend.  one of the compass directions: nw, n, ne, e, se, s, sw, w

        this.location = 'ne';

        // prop: xoffset

        // offset from the inside edge of the plot in the x direction in pixels.

        this.xoffset = 12;

        // prop: yoffset

        // offset from the inside edge of the plot in the y direction in pixels.

        this.yoffset = 12;

        // prop: border

        // css spec for the border around the legend box.

        this.border;

        // prop: background

        // css spec for the background of the legend box.

        this.background;

        // prop: textColor

        // css color spec for the legend text.

        this.textColor;

        // prop: fontFamily

        // css font-family spec for the legend text.

        this.fontFamily; 

        // prop: fontSize

        // css font-size spec for the legend text.

        this.fontSize ;

        // prop: rowSpacing

        // css padding-top spec for the rows in the legend.

        this.rowSpacing = '0.5em';

        // renderer

        // A class that will create a DOM object for the legend,

        // see <$.jqplot.TableLegendRenderer>.

        this.renderer = $.jqplot.TableLegendRenderer;

        // prop: rendererOptions

        // renderer specific options passed to the renderer.

        this.rendererOptions = {};

        // prop: predraw

        // Wether to draw the legend before the series or not.

        this.preDraw = false;

        this.escapeHtml = false;

        this._series = [];

        $.extend(true, this, options);

    }

    Legend.prototype = new $.jqplot.ElemContainer();

    Legend.prototype.constructor = Legend;

    Legend.prototype.init = function() {

        this.renderer = new this.renderer();

        this.renderer.init.call(this, this.rendererOptions);

    };

    Legend.prototype.draw = function(offsets) {

        for (var i=0; i<$.jqplot.preDrawLegendHooks.length; i++){

            $.jqplot.preDrawLegendHooks[i].call(this, offsets);

        }

        return this.renderer.draw.call(this, offsets);

    };

    Legend.prototype.pack = function(offsets) {

        this.renderer.pack.call(this, offsets);

    };

    /**

     * Class: Title

     * Plot Title object.  Cannot be instantiated directly, but created

     * by the Plot oject.  Title properties can be set or overriden by the 

     * options passed in from the user.

     * 

     * Parameters:

     * text - text of the title.

     */

    function Title(text) {

        $.jqplot.ElemContainer.call(this);

        // Group: Properties

        // prop: text

        // text of the title;

        this.text = text;

        // prop: show

        // wether or not to show the title

        this.show = true;

        // prop: fontFamily

        // css font-family spec for the text.

        this.fontFamily;

        // prop: fontSize

        // css font-size spec for the text.

        this.fontSize ;

        // prop: textAlign

        // css text-align spec for the text.

        this.textAlign;

        // prop: textColor

        // css color spec for the text.

        this.textColor;

        // prop: renderer

        // A class for creating a DOM element for the title,

        // see <$.jqplot.DivTitleRenderer>.

        this.renderer = $.jqplot.DivTitleRenderer;

        // prop: rendererOptions

        // renderer specific options passed to the renderer.

        this.rendererOptions = {};   

    }

    Title.prototype = new $.jqplot.ElemContainer();

    Title.prototype.constructor = Title;

    Title.prototype.init = function() {

        this.renderer = new this.renderer();

        this.renderer.init.call(this, this.rendererOptions);

    };

    Title.prototype.draw = function(width) {

        return this.renderer.draw.call(this, width);

    };

    Title.prototype.pack = function() {

        this.renderer.pack.call(this);

    };

    /**

     * Class: Series

     * An individual data series object.  Cannot be instantiated directly, but created

     * by the Plot oject.  Series properties can be set or overriden by the 

     * options passed in from the user.

     */

    function Series() {

        $.jqplot.ElemContainer.call(this);

        // Group: Properties

        // Properties will be assigned from a series array at the top level of the

        // options.  If you had two series and wanted to change the color and line

        // width of the first and set the second to use the secondary y axis with

        // no shadow and supply custom labels for each:

        // > {

        // >    series:[

        // >        {color: '#ff4466', lineWidth: 5, label:'good line'},

        // >        {yaxis: 'y2axis', shadow: false, label:'bad line'}

        // >    ]

        // > }

        // prop: show

        // wether or not to draw the series.

        this.show = true;

        // prop: xaxis

        // which x axis to use with this series, either 'xaxis' or 'x2axis'.

        this.xaxis = 'xaxis';

        this._xaxis;

        // prop: yaxis

        // which y axis to use with this series, either 'yaxis' or 'y2axis'.

        this.yaxis = 'yaxis';

        this._yaxis;

        this.gridBorderWidth = 2.0;

        // prop: renderer

        // A class of a renderer which will draw the series, 

        // see <$.jqplot.LineRenderer>.

        this.renderer = $.jqplot.LineRenderer;

        // prop: rendererOptions

        // Options to pass on to the renderer.

        this.rendererOptions = {};

        this.data = [];

        this.gridData = [];

        // prop: label

        // Line label to use in the legend.

        this.label = '';

        // prop: showLabel

        // true to show label for this series in the legend.

        this.showLabel = true;

        // prop: color

        // css color spec for the series

        this.color;

        // prop: lineWidth

        // width of the line in pixels.  May have different meanings depending on renderer.

        this.lineWidth = 2.5;

        // prop: shadow

        // wether or not to draw a shadow on the line

        this.shadow = true;

        // prop: shadowAngle

        // Shadow angle in degrees

        this.shadowAngle = 45;

        // prop: shadowOffset

        // Shadow offset from line in pixels

        this.shadowOffset = 1.25;

        // prop: shadowDepth

        // Number of times shadow is stroked, each stroke offset shadowOffset from the last.

        this.shadowDepth = 3;

        // prop: shadowAlpha

        // Alpha channel transparency of shadow.  0 = transparent.

        this.shadowAlpha = '0.1';

        // prop: breakOnNull

        // Not implemented. wether line segments should be be broken at null value.

        // False will join point on either side of line.

        this.breakOnNull = false;

        // prop: markerRenderer

        // A class of a renderer which will draw marker (e.g. circle, square, ...) at the data points,

        // see <$.jqplot.MarkerRenderer>.

        this.markerRenderer = $.jqplot.MarkerRenderer;

        // prop: markerOptions

        // renderer specific options to pass to the markerRenderer,

        // see <$.jqplot.MarkerRenderer>.

        this.markerOptions = {};

        // prop: showLine

        // wether to actually draw the line or not.  Series will still be renderered, even if no line is drawn.

        this.showLine = true;

        // prop: showMarker

        // wether or not to show the markers at the data points.

        this.showMarker = true;

        // prop: index

        // 0 based index of this series in the plot series array.

        this.index;

        // prop: fill

        // true or false, wether to fill under lines or in bars.

        // May not be implemented in all renderers.

        this.fill = false;

        // prop: fillColor

        // CSS color spec to use for fill under line.  Defaults to line color.

        this.fillColor;

        // prop: fillAlpha

        // Alpha transparency to apply to the fill under the line.

        // Use this to adjust alpha separate from fill color.

        this.fillAlpha;

        // prop: fillAndStroke

        // If true will stroke the line (with color this.color) as well as fill under it.

        // Applies only when fill is true.

        this.fillAndStroke = false;

        // prop: disableStack

        // true to not stack this series with other series in the plot.

        // To render properly, non-stacked series must come after any stacked series

        // in the plot's data series array.  So, the plot's data series array would look like:

        // > [stackedSeries1, stackedSeries2, ..., nonStackedSeries1, nonStackedSeries2, ...]

        // disableStack will put a gap in the stacking order of series, and subsequent

        // stacked series will not fill down through the non-stacked series and will

        // most likely not stack properly on top of the non-stacked series.

        this.disableStack = false;

        // _stack is set by the Plot if the plot is a stacked chart.

        // will stack lines or bars on top of one another to build a "mountain" style chart.

        // May not be implemented in all renderers.

        this._stack = false;

        // prop: neighborThreshold

        // how close or far (in pixels) the cursor must be from a point marker to detect the point.

        this.neighborThreshold = 4;

        // prop: fillToZero

        // true will force bar and filled series to fill toward zero on the fill Axis.

        this.fillToZero = false;

        // prop: fillAxis

        // Either 'x' or 'y'.  Which axis to fill the line toward if fillToZero is true.

        // 'y' means fill up/down to 0 on the y axis for this series.

        this.fillAxis = 'y';

        this._stackData = [];

        // _plotData accounts for stacking.  If plots not stacked, _plotData and data are same.  If

        // stacked, _plotData is accumulation of stacking data.

        this._plotData = [];

        // _plotValues hold the individual x and y values that will be plotted for this series.

        this._plotValues = {x:[], y:[]};

        // statistics about the intervals between data points.  Used for auto scaling.

        this._intervals = {x:{}, y:{}};

        // data from the previous series, for stacked charts.

        this._prevPlotData = [];

        this._prevGridData = [];

        this._stackAxis = 'y';

        this._primaryAxis = '_xaxis';

        this.plugins = {};

    }

    Series.prototype = new $.jqplot.ElemContainer();

    Series.prototype.constructor = Series;

    Series.prototype.init = function(index, gridbw) {

        // weed out any null values in the data.

        this.index = index;

        this.gridBorderWidth = gridbw;

        var d = this.data;

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

            if (! this.breakOnNull) {

                if (d[i] == null || d[i][0] == null || d[i][1] == null) {

                    d.splice(i,1);

                    continue;

                }

            }

            else {

                if (d[i] == null || d[i][0] == null || d[i][1] == null) {

                    // TODO: figure out what to do with null values

                    var undefined;

                }

            }

        }

        if (!this.fillColor) {

            this.fillColor = this.color;

        }

        if (this.fillAlpha) {

            var comp = $.jqplot.normalize2rgb(this.fillColor);

            var comp = $.jqplot.getColorComponents(comp);

            this.fillColor = 'rgba('+comp[0]+','+comp[1]+','+comp[2]+','+this.fillAlpha+')';

        }

        this.renderer = new this.renderer();

        this.renderer.init.call(this, this.rendererOptions);

        this.markerRenderer = new this.markerRenderer();

        if (!this.markerOptions.color) {

            this.markerOptions.color = this.color;

        }

        if (this.markerOptions.show == null) {

            this.markerOptions.show = this.showMarker;

        }

        // the markerRenderer is called within it's own scaope, don't want to overwrite series options!!

        this.markerRenderer.init(this.markerOptions);

    };

    // data - optional data point array to draw using this series renderer

    // gridData - optional grid data point array to draw using this series renderer

    // stackData - array of cumulative data for stacked plots.

    Series.prototype.draw = function(sctx, opts) {

        var options = (opts == undefined) ? {} : opts;

        // hooks get called even if series not shown

        // we don't clear canvas here, it would wipe out all other series as well.

        for (var j=0; j<$.jqplot.preDrawSeriesHooks.length; j++) {

            $.jqplot.preDrawSeriesHooks[j].call(this, sctx, options);

        }

        if (this.show) {

            this.renderer.setGridData.call(this);

            if (!options.preventJqPlotSeriesDrawTrigger) {

                $(sctx.canvas).trigger('jqplotSeriesDraw', [this.data, this.gridData]);

            }

            var data = [];

            if (options.data) {

                data = options.data;

            }

            else if (!this._stack) {

                data = this.data;

            }

            else {

                data = this._plotData;

            }

            var gridData = options.gridData || this.renderer.makeGridData.call(this, data);

            this.renderer.draw.call(this, sctx, gridData, options);

        }

        for (var j=0; j<$.jqplot.postDrawSeriesHooks.length; j++) {

            $.jqplot.postDrawSeriesHooks[j].call(this, sctx, options);

        }

    };

    Series.prototype.drawShadow = function(sctx, opts) {

        var options = (opts == undefined) ? {} : opts;

        // hooks get called even if series not shown

        // we don't clear canvas here, it would wipe out all other series as well.

        for (var j=0; j<$.jqplot.preDrawSeriesShadowHooks.length; j++) {

            $.jqplot.preDrawSeriesShadowHooks[j].call(this, sctx, options);

        }

        if (this.shadow) {

            this.renderer.setGridData.call(this);

            var data = [];

            if (options.data) {

                data = options.data;

            }

            else if (!this._stack) {

                data = this.data;

            }

            else {

                data = this._plotData;

            }

            var gridData = options.gridData || this.renderer.makeGridData.call(this, data);

            this.renderer.drawShadow.call(this, sctx, gridData, options);

        }

        for (var j=0; j<$.jqplot.postDrawSeriesShadowHooks.length; j++) {

            $.jqplot.postDrawSeriesShadowHooks[j].call(this, sctx, options);

        }

    };

    /**

     * Class: Grid

     * 

     * Object representing the grid on which the plot is drawn.  The grid in this

     * context is the area bounded by the axes, the area which will contain the series.

     * Note, the series are drawn on their own canvas.

     * The Grid object cannot be instantiated directly, but is created by the Plot oject.  

     * Grid properties can be set or overriden by the options passed in from the user.

     */

    function Grid() {

        $.jqplot.ElemContainer.call(this);

        // Group: Properties

        // prop: drawGridlines

        // wether to draw the gridlines on the plot.

        this.drawGridlines = true;

        // prop: gridLineColor

        // color of the grid lines.

        this.gridLineColor = '#cccccc';

        // prop: gridLineWidth

        // width of the grid lines.

        this.gridLineWidth = 1.0;

        // prop: background

        // css spec for the background color.

        this.background = '#fffdf6';

        // prop: borderColor

        // css spec for the color of the grid border.

        this.borderColor = '#999999';

        // prop: borderWidth

        // width of the border in pixels.

        this.borderWidth = 2.0;

        // prop: shadow

        // wether to show a shadow behind the grid.

        this.shadow = true;

        // prop: shadowAngle

        // shadow angle in degrees

        this.shadowAngle = 45;

        // prop: shadowOffset

        // Offset of each shadow stroke from the border in pixels

        this.shadowOffset = 1.5;

        // prop: shadowWidth

        // width of the stoke for the shadow

        this.shadowWidth = 3;

        // prop: shadowDepth

        // Number of times shadow is stroked, each stroke offset shadowOffset from the last.

        this.shadowDepth = 3;

        // prop: shadowAlpha

        // Alpha channel transparency of shadow.  0 = transparent.

        this.shadowAlpha = '0.07';

        this._left;

        this._top;

        this._right;

        this._bottom;

        this._width;

        this._height;

        this._axes = [];

        // prop: renderer

        // Instance of a renderer which will actually render the grid,

        // see <$.jqplot.CanvasGridRenderer>.

        this.renderer = $.jqplot.CanvasGridRenderer;

        // prop: rendererOptions

        // Options to pass on to the renderer,

        // see <$.jqplot.CanvasGridRenderer>.

        this.rendererOptions = {};

        this._offsets = {top:null, bottom:null, left:null, right:null};

    }

    Grid.prototype = new $.jqplot.ElemContainer();

    Grid.prototype.constructor = Grid;

    Grid.prototype.init = function() {

        this.renderer = new this.renderer();

        this.renderer.init.call(this, this.rendererOptions);

    };

    Grid.prototype.createElement = function(offsets) {

        this._offsets = offsets;

        return this.renderer.createElement.call(this);

    };

    Grid.prototype.draw = function() {

        this.renderer.draw.call(this);

    };

    $.jqplot.GenericCanvas = function() {

        $.jqplot.ElemContainer.call(this);

        this._ctx;  

    };

    $.jqplot.GenericCanvas.prototype = new $.jqplot.ElemContainer();

    $.jqplot.GenericCanvas.prototype.constructor = $.jqplot.GenericCanvas;

    $.jqplot.GenericCanvas.prototype.createElement = function(offsets, clss, plotDimensions) {

        this._offsets = offsets;

        var klass = 'jqplot';

        if (clss != undefined) {

            klass = clss;

        }

        var elem = document.createElement('canvas');

        // if new plotDimensions supplied, use them.

        if (plotDimensions != undefined) {

            this._plotDimensions = plotDimensions;

        }

        elem.width = this._plotDimensions.width - this._offsets.left - this._offsets.right;

        elem.height = this._plotDimensions.height - this._offsets.top - this._offsets.bottom;

        this._elem = $(elem);

        this._elem.addClass(klass);

        this._elem.css({ position: 'absolute', left: this._offsets.left, top: this._offsets.top });

        // borrowed from flot by Ole Laursen

        if ($.browser.msie) {

            window.G_vmlCanvasManager.init_(document);

        }

        if ($.browser.msie) {

            elem = window.G_vmlCanvasManager.initElement(elem);

        }

        return this._elem;

    };

    $.jqplot.GenericCanvas.prototype.setContext = function() {

        this._ctx = this._elem.get(0).getContext("2d");

        return this._ctx;

    };

    /**

     * Class: jqPlot

     * Plot object returned by call to $.jqplot.  Handles parsing user options,

     * creating sub objects (Axes, legend, title, series) and rendering the plot.

     */

    function jqPlot() {

        // Group: Properties

        // These properties are specified at the top of the options object

        // like so:

        // > {

        // >     axesDefaults:{min:0},

        // >     series:[{color:'#6633dd'}],

        // >     title: 'A Plot'

        // > }

        //

        // prop: data

        // user's data.  Data should *NOT* be specified in the options object,

        // but be passed in as the second argument to the $.jqplot() function.

        // The data property is described here soley for reference. 

        // The data should be in the form of an array of 2D or 1D arrays like

        // > [ [[x1, y1], [x2, y2],...], [y1, y2, ...] ].

        this.data = [];

        // The id of the dom element to render the plot into

        this.targetId = null;