YUI Flot

--------

Flot

----

Kallithea incorporates some parts of a Javascript system called

[Flot](http://www.flotcharts.org/), which is:

Copyright (c) 2007-2014 IOLA and Ole Laursen

Permission is hereby granted, free of charge, to any person

obtaining a copy of this software and associated documentation

files (the "Software"), to deal in the Software without

restriction, including without limitation the rights to use,

copy, modify, merge, publish, distribute, sublicense, and/or sell

copies of the Software, and to permit persons to whom the

Software is furnished to do so, subject to the following

conditions:

The above copyright notice and this permission notice shall be

included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES

OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND

NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT

HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR

OTHER DEALINGS IN THE SOFTWARE.

/* Javascript plotting library for jQuery, version 0.8.3.

Copyright (c) 2007-2014 IOLA and Ole Laursen.

Licensed under the MIT license.

*/

// first an inline dependency, jquery.colorhelpers.js, we inline it here

// for convenience

/* Plugin for jQuery for working with colors.

 *

 * Version 1.1.

 *

 * Inspiration from jQuery color animation plugin by John Resig.

 *

 * Released under the MIT license by Ole Laursen, October 2009.

 *

 * Examples:

 *

 *   $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()

 *   var c = $.color.extract($("#mydiv"), 'background-color');

 *   console.log(c.r, c.g, c.b, c.a);

 *   $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"

 *

 * Note that .scale() and .add() return the same modified object

 * instead of making a new one.

 *

 * V. 1.1: Fix error handling so e.g. parsing an empty string does

 * produce a color rather than just crashing.

 */

(function($){$.color={};$.color.make=function(r,g,b,a){var o={};o.r=r||0;o.g=g||0;o.b=b||0;o.a=a!=null?a:1;o.add=function(c,d){for(var i=0;i<c.length;++i)o[c.charAt(i)]+=d;return o.normalize()};o.scale=function(c,f){for(var i=0;i<c.length;++i)o[c.charAt(i)]*=f;return o.normalize()};o.toString=function(){if(o.a>=1){return"rgb("+[o.r,o.g,o.b].join(",")+")"}else{return"rgba("+[o.r,o.g,o.b,o.a].join(",")+")"}};o.normalize=function(){function clamp(min,value,max){return value<min?min:value>max?max:value}o.r=clamp(0,parseInt(o.r),255);o.g=clamp(0,parseInt(o.g),255);o.b=clamp(0,parseInt(o.b),255);o.a=clamp(0,o.a,1);return o};o.clone=function(){return $.color.make(o.r,o.b,o.g,o.a)};return o.normalize()};$.color.extract=function(elem,css){var c;do{c=elem.css(css).toLowerCase();if(c!=""&&c!="transparent")break;elem=elem.parent()}while(elem.length&&!$.nodeName(elem.get(0),"body"));if(c=="rgba(0, 0, 0, 0)")c="transparent";return $.color.parse(c)};$.color.parse=function(str){var res,m=$.color.make;if(res=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))return m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10));if(res=/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 m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10),parseFloat(res[4]));if(res=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))return m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55);if(res=/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 m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55,parseFloat(res[4]));if(res=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))return m(parseInt(res[1],16),parseInt(res[2],16),parseInt(res[3],16));if(res=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))return m(parseInt(res[1]+res[1],16),parseInt(res[2]+res[2],16),parseInt(res[3]+res[3],16));var name=$.trim(str).toLowerCase();if(name=="transparent")return m(255,255,255,0);else{res=lookupColors[name]||[0,0,0];return m(res[0],res[1],res[2])}};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]}})(jQuery);

// the actual Flot code

(function($) {

	// Cache the prototype hasOwnProperty for faster access

	var hasOwnProperty = Object.prototype.hasOwnProperty;

    // A shim to provide 'detach' to jQuery versions prior to 1.4.  Using a DOM

    // operation produces the same effect as detach, i.e. removing the element

    // without touching its jQuery data.

    // Do not merge this into Flot 0.9, since it requires jQuery 1.4.4+.

    if (!$.fn.detach) {

        $.fn.detach = function() {

            return this.each(function() {

                if (this.parentNode) {

                    this.parentNode.removeChild( this );

                }

            });

        };

    }

	///////////////////////////////////////////////////////////////////////////

	// The Canvas object is a wrapper around an HTML5 <canvas> tag.

	//

	// @constructor

	// @param {string} cls List of classes to apply to the canvas.

	// @param {element} container Element onto which to append the canvas.

	//

	// Requiring a container is a little iffy, but unfortunately canvas

	// operations don't work unless the canvas is attached to the DOM.

	function Canvas(cls, container) {

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

		if (element == null) {

			element = document.createElement("canvas");

			element.className = cls;

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

				.appendTo(container);

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

			if (!element.getContext) {

				if (window.G_vmlCanvasManager) {

					element = window.G_vmlCanvasManager.initElement(element);

				} else {

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

				}

			}

		}

		this.element = element;

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

		// Determine the screen's ratio of physical to device-independent

		// pixels.  This is the ratio between the canvas width that the browser

		// advertises and the number of pixels actually present in that space.

		// The iPhone 4, for example, has a device-independent width of 320px,

		// but its screen is actually 640px wide.  It therefore has a pixel

		// ratio of 2, while most normal devices have a ratio of 1.

		var devicePixelRatio = window.devicePixelRatio || 1,

			backingStoreRatio =

				context.webkitBackingStorePixelRatio ||

				context.mozBackingStorePixelRatio ||

				context.msBackingStorePixelRatio ||

				context.oBackingStorePixelRatio ||

				context.backingStorePixelRatio || 1;

		this.pixelRatio = devicePixelRatio / backingStoreRatio;

		// Size the canvas to match the internal dimensions of its container

		this.resize(container.width(), container.height());

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

		this.textContainer = null;

		this.text = {};

		// Cache of text fragments and metrics, so we can avoid expensively

		// re-calculating them when the plot is re-rendered in a loop.

		this._textCache = {};

	}

	// Resizes the canvas to the given dimensions.

	//

	// @param {number} width New width of the canvas, in pixels.

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

	Canvas.prototype.resize = function(width, height) {

		if (width <= 0 || height <= 0) {

			throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);

		}

		var element = this.element,

			context = this.context,

			pixelRatio = this.pixelRatio;

		// Resize the canvas, increasing its density based on the display's

		// pixel ratio; basically giving it more pixels without increasing the

		// size of its element, to take advantage of the fact that retina

		// displays have that many more pixels in the same advertised space.

		// Resizing should reset the state (excanvas seems to be buggy though)

		if (this.width != width) {

			element.width = width * pixelRatio;

			element.style.width = width + "px";

			this.width = width;

		}

		if (this.height != height) {

			element.height = height * pixelRatio;

			element.style.height = height + "px";

			this.height = height;

		}

		// Save the context, so we can reset in case we get replotted.  The

		// restore ensure that we're really back at the initial state, and

		// should be safe even if we haven't saved the initial state yet.

		context.restore();

		context.save();

		// Scale the coordinate space to match the display density; so even though we

		// may have twice as many pixels, we still want lines and other drawing to

		// appear at the same size; the extra pixels will just make them crisper.

		context.scale(pixelRatio, pixelRatio);

	};

	// Clears the entire canvas area, not including any overlaid HTML text

	Canvas.prototype.clear = function() {

		this.context.clearRect(0, 0, this.width, this.height);

	};

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

	Canvas.prototype.render = function() {

		var cache = this._textCache;

		// For each text layer, add elements marked as active that haven't

		// already been rendered, and remove those that are no longer active.

		for (var layerKey in cache) {

			if (hasOwnProperty.call(cache, layerKey)) {

				var layer = this.getTextLayer(layerKey),

					layerCache = cache[layerKey];

				layer.hide();

				for (var styleKey in layerCache) {

					if (hasOwnProperty.call(layerCache, styleKey)) {

						var styleCache = layerCache[styleKey];

						for (var key in styleCache) {

							if (hasOwnProperty.call(styleCache, key)) {

								var positions = styleCache[key].positions;

								for (var i = 0, position; position = positions[i]; i++) {

									if (position.active) {

										if (!position.rendered) {

											layer.append(position.element);

											position.rendered = true;

										}

									} else {

										positions.splice(i--, 1);

										if (position.rendered) {

											position.element.detach();

										}

									}

								}

								if (positions.length == 0) {

									delete styleCache[key];

								}

							}

						}

					}

				}

				layer.show();

			}

		}

	};

	// Creates (if necessary) and returns the text overlay container.

	//

	// @param {string} classes String of space-separated CSS classes used to

	//     uniquely identify the text layer.

	// @return {object} The jQuery-wrapped text-layer div.

	Canvas.prototype.getTextLayer = function(classes) {

		var layer = this.text[classes];

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

		if (layer == null) {

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

			if (this.textContainer == null) {

				this.textContainer = $("<div class='flot-text'></div>")

					.css({

						position: "absolute",

						top: 0,

						left: 0,

						bottom: 0,

						right: 0,

						'font-size': "smaller",

						color: "#545454"

					})

					.insertAfter(this.element);

			}

			layer = this.text[classes] = $("<div></div>")

				.addClass(classes)

				.css({

					position: "absolute",

					top: 0,

					left: 0,

					bottom: 0,

					right: 0

				})

				.appendTo(this.textContainer);

		}

		return layer;

	};

	// Creates (if necessary) and returns a text info object.

	//

	// The object looks like this:

	//

	// {

	//     width: Width of the text's wrapper div.

	//     height: Height of the text's wrapper div.

	//     element: The jQuery-wrapped HTML div containing the text.

	//     positions: Array of positions at which this text is drawn.

	// }

	//

	// The positions array contains objects that look like this:

	//

	// {

	//     active: Flag indicating whether the text should be visible.

	//     rendered: Flag indicating whether the text is currently visible.

	//     element: The jQuery-wrapped HTML div containing the text.

	//     x: X coordinate at which to draw the text.

	//     y: Y coordinate at which to draw the text.

	// }

	//

	// Each position after the first receives a clone of the original element.

	//

	// The idea is that that the width, height, and general 'identity' of the

	// text is constant no matter where it is placed; the placements are a

	// secondary property.

	//

	// Canvas maintains a cache of recently-used text info objects; getTextInfo

	// either returns the cached element or creates a new entry.

	//

	// @param {string} layer A string of space-separated CSS classes uniquely

	//     identifying the layer containing this text.

	// @param {string} text Text string to retrieve info for.

	// @param {(string|object)=} font Either a string of space-separated CSS

	//     classes or a font-spec object, defining the text's font and style.

	// @param {number=} angle Angle at which to rotate the text, in degrees.

	//     Angle is currently unused, it will be implemented in the future.

	// @param {number=} width Maximum width of the text before it wraps.

	// @return {object} a text info object.

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

		var textStyle, layerCache, styleCache, info;

		// Cast the value to a string, in case we were given a number or such

		text = "" + text;

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

		if (typeof font === "object") {

			textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;

		} else {

			textStyle = font;

		}

		// Retrieve (or create) the cache for the text's layer and styles

		layerCache = this._textCache[layer];

		if (layerCache == null) {

			layerCache = this._textCache[layer] = {};

		}

		styleCache = layerCache[textStyle];

		if (styleCache == null) {

			styleCache = layerCache[textStyle] = {};

		}

		info = styleCache[text];

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

		if (info == null) {

			var element = $("<div></div>").html(text)

				.css({

					position: "absolute",

					'max-width': width,

					top: -9999

				})

				.appendTo(this.getTextLayer(layer));

			if (typeof font === "object") {

				element.css({

					font: textStyle,

					color: font.color

				});

			} else if (typeof font === "string") {

				element.addClass(font);

			}

			info = styleCache[text] = {

				width: element.outerWidth(true),

				height: element.outerHeight(true),

				element: element,

				positions: []

			};

			element.detach();

		}

		return info;

	};

	// Adds a text string to the canvas text overlay.

	//

	// The text isn't drawn immediately; it is marked as rendering, which will

	// result in its addition to the canvas on the next render pass.

	//

	// @param {string} layer A string of space-separated CSS classes uniquely

	//     identifying the layer containing this text.

	// @param {number} x X coordinate at which to draw the text.

	// @param {number} y Y coordinate at which to draw the text.

	// @param {string} text Text string to draw.

	// @param {(string|object)=} font Either a string of space-separated CSS

	//     classes or a font-spec object, defining the text's font and style.

	// @param {number=} angle Angle at which to rotate the text, in degrees.

	//     Angle is currently unused, it will be implemented in the future.

	// @param {number=} width Maximum width of the text before it wraps.

	// @param {string=} halign Horizontal alignment of the text; either "left",

	//     "center" or "right".

	// @param {string=} valign Vertical alignment of the text; either "top",

	//     "middle" or "bottom".

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

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

			positions = info.positions;

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

		if (halign == "center") {

			x -= info.width / 2;

		} else if (halign == "right") {

			x -= info.width;

		}

		if (valign == "middle") {

			y -= info.height / 2;

		} else if (valign == "bottom") {

			y -= info.height;

		}

		// Determine whether this text already exists at this position.

		// If so, mark it for inclusion in the next render pass.

		for (var i = 0, position; position = positions[i]; i++) {

			if (position.x == x && position.y == y) {

				position.active = true;

				return;

			}

		}

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

		// For the very first position we'll re-use the original element,

		// while for subsequent ones we'll clone it.

		position = {

			active: true,

			rendered: false,

			element: positions.length ? info.element.clone() : info.element,

			x: x,

			y: y

		};

		positions.push(position);

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

		position.element.css({

			top: Math.round(y),

			left: Math.round(x),

			'text-align': halign	// In case the text wraps

		});

	};

	// Removes one or more text strings from the canvas text overlay.

	//

	// If no parameters are given, all text within the layer is removed.

	//

	// Note that the text is not immediately removed; it is simply marked as

	// inactive, which will result in its removal on the next render pass.

	// This avoids the performance penalty for 'clear and redraw' behavior,

	// where we potentially get rid of all text on a layer, but will likely

	// add back most or all of it later, as when redrawing axes, for example.

	//

	// @param {string} layer A string of space-separated CSS classes uniquely

	//     identifying the layer containing this text.

	// @param {number=} x X coordinate of the text.

	// @param {number=} y Y coordinate of the text.

	// @param {string=} text Text string to remove.

	// @param {(string|object)=} font Either a string of space-separated CSS

	//     classes or a font-spec object, defining the text's font and style.

	// @param {number=} angle Angle at which the text is rotated, in degrees.

	//     Angle is currently unused, it will be implemented in the future.

	Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {

		if (text == null) {

			var layerCache = this._textCache[layer];

			if (layerCache != null) {

				for (var styleKey in layerCache) {

					if (hasOwnProperty.call(layerCache, styleKey)) {

						var styleCache = layerCache[styleKey];

						for (var key in styleCache) {

							if (hasOwnProperty.call(styleCache, key)) {

								var positions = styleCache[key].positions;

								for (var i = 0, position; position = positions[i]; i++) {

									position.active = false;

								}

							}

						}

					}

				}

			}

		} else {

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

			for (var i = 0, position; position = positions[i]; i++) {

				if (position.x == x && position.y == y) {

					position.active = false;

				}

			}

		}

	};

	///////////////////////////////////////////////////////////////////////////

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

    function Plot(placeholder, data_, options_, plugins) {

        // data is on the form:

        //   [ series1, series2 ... ]

        // where series is either just the data as [ [x1, y1], [x2, y2], ... ]

        // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }

        var series = [],

            options = {

                // the color theme used for graphs

                colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],

                legend: {

                    show: true,

                    noColumns: 1, // number of colums in legend table

                    labelFormatter: null, // fn: string -> string

                    labelBoxBorderColor: "#ccc", // border color for the little label boxes

                    container: null, // container (as jQuery object) to put legend in, null means default on top of graph

                    position: "ne", // position of default legend container within plot

                    margin: 5, // distance from grid edge to default legend container within plot

                    backgroundColor: null, // null means auto-detect

                    backgroundOpacity: 0.85, // set to 0 to avoid background

                    sorted: null    // default to no legend sorting

                },

                xaxis: {

                    show: null, // null = auto-detect, true = always, false = never

                    position: "bottom", // or "top"

                    mode: null, // null or "time"

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

                    color: null, // base color, labels, ticks

                    tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"

                    transform: null, // null or f: number -> number to transform axis

                    inverseTransform: null, // if transform is set, this should be the inverse function

                    min: null, // min. value to show, null means set automatically

                    max: null, // max. value to show, null means set automatically

                    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,

                    reserveSpace: null, // whether to reserve space even if axis isn't shown

                    tickLength: null, // size in pixels of ticks, or "full" for whole line

                    alignTicksWithAxis: null, // axis number or null for no sync

                    tickDecimals: null, // no. of decimals, null means auto

                    tickSize: null, // number or [number, "unit"]

                    minTickSize: null // number or [number, "unit"]

                },

                yaxis: {

                    autoscaleMargin: 0.02,

                    position: "left" // or "right"

                },

                xaxes: [],

                yaxes: [],

                series: {

                    points: {

                        show: false,

                        radius: 3,

                        lineWidth: 2, // in pixels

                        fill: true,

                        fillColor: "#ffffff",

                        symbol: "circle" // or callback

                    },

                    lines: {

                        // we don't put in show: false so we can see

                        // whether lines were actively disabled

                        lineWidth: 2, // in pixels

                        fill: false,

                        fillColor: null,

                        steps: false

                        // Omit 'zero', so we can later default its value to

                        // match that of the 'fill' option.

                    },

                    bars: {

                        show: false,

                        lineWidth: 2, // in pixels

                        barWidth: 1, // in units of the x axis

                        fill: true,

                        fillColor: null,

                        align: "left", // "left", "right", or "center"

                        horizontal: false,

                        zero: true

                    },

                    shadowSize: 3,

                    highlightColor: null

                },

                grid: {

                    show: true,

                    aboveData: false,

                    color: "#545454", // primary color used for outline and labels

                    backgroundColor: null, // null for transparent, else color

                    borderColor: null, // set if different from the grid color

                    tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)"

                    margin: 0, // distance from the canvas edge to the grid

                    labelMargin: 5, // in pixels

                    axisMargin: 8, // in pixels

                    borderWidth: 2, // in pixels

                    minBorderMargin: null, // in pixels, null means taken from points radius

                    markings: null, // array of ranges or fn: axes -> array of ranges

                    markingsColor: "#f4f4f4",

                    markingsLineWidth: 2,

                    // interactive stuff

                    clickable: false,

                    hoverable: false,

                    autoHighlight: true, // highlight in case mouse is near

                    mouseActiveRadius: 10 // how far the mouse can be away to activate an item

                },

                interaction: {

                    redrawOverlayInterval: 1000/60 // time between updates, -1 means in same flow

                },

                hooks: {}

            },

        surface = null,     // the canvas for the plot itself

        overlay = null,     // canvas for interactive stuff on top of plot

        eventHolder = null, // jQuery object that events should be bound to

        ctx = null, octx = null,

        xaxes = [], yaxes = [],

        plotOffset = { left: 0, right: 0, top: 0, bottom: 0},

        plotWidth = 0, plotHeight = 0,

        hooks = {

            processOptions: [],

            processRawData: [],

            processDatapoints: [],

            processOffset: [],

            drawBackground: [],

            drawSeries: [],

            draw: [],

            bindEvents: [],

            drawOverlay: [],

            shutdown: []

        },

        plot = this;

        // public functions

        plot.setData = setData;

        plot.setupGrid = setupGrid;

        plot.draw = draw;

        plot.getPlaceholder = function() { return placeholder; };