flotr 1.3.8

data/lib/excanvas.pack.js

@@ -0,0 +1 @@
+if(!window.CanvasRenderingContext2D){(function(){var m=Math;var mr=m.round;var ms=m.sin;var mc=m.cos;var Z=10;var Z2=Z/2;var G_vmlCanvasManager_={init:function(opt_doc){var doc=opt_doc||document;if(/MSIE/.test(navigator.userAgent)&&!window.opera){var self=this;doc.attachEvent("onreadystatechange",function(){self.init_(doc)})}},init_:function(doc){if(doc.readyState=="complete"){if(!doc.namespaces["g_vml_"]){doc.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml")}var ss=doc.createStyleSheet();ss.cssText="canvas{display:inline-block;overflow:hidden;"+"text-align:left;width:300px;height:150px}"+"g_vml_\\:*{behavior:url(#default#VML)}";var els=doc.getElementsByTagName("canvas");for(var i=0;i<els.length;i++){if(!els[i].getContext){this.initElement(els[i])}}}},fixElement_:function(el){var outerHTML=el.outerHTML;var newEl=el.ownerDocument.createElement(outerHTML);if(outerHTML.slice(-2)!="/>"){var tagName="/"+el.tagName;var ns;while((ns=el.nextSibling)&&ns.tagName!=tagName){ns.removeNode()}if(ns){ns.removeNode()}}el.parentNode.replaceChild(newEl,el);return newEl},initElement:function(el){el=this.fixElement_(el);el.getContext=function(){if(this.context_){return this.context_}return this.context_=new CanvasRenderingContext2D_(this)};el.attachEvent('onpropertychange',onPropertyChange);el.attachEvent('onresize',onResize);var attrs=el.attributes;if(attrs.width&&attrs.width.specified){el.style.width=attrs.width.nodeValue+"px"}else{el.width=el.clientWidth}if(attrs.height&&attrs.height.specified){el.style.height=attrs.height.nodeValue+"px"}else{el.height=el.clientHeight}return el}};function onPropertyChange(e){var el=e.srcElement;switch(e.propertyName){case'width':el.style.width=el.attributes.width.nodeValue+"px";el.getContext().clearRect();break;case'height':el.style.height=el.attributes.height.nodeValue+"px";el.getContext().clearRect();break}}function onResize(e){var el=e.srcElement;if(el.firstChild){el.firstChild.style.width=el.clientWidth+'px';el.firstChild.style.height=el.clientHeight+'px'}}G_vmlCanvasManager_.init();var dec2hex=[];for(var i=0;i<16;i++){for(var j=0;j<16;j++){dec2hex[i*16+j]=i.toString(16)+j.toString(16)}}function createMatrixIdentity(){return[[1,0,0],[0,1,0],[0,0,1]]}function matrixMultiply(m1,m2){var result=createMatrixIdentity();for(var x=0;x<3;x++){for(var y=0;y<3;y++){var sum=0;for(var z=0;z<3;z++){sum+=m1[x][z]*m2[z][y]}result[x][y]=sum}}return result}function copyState(o1,o2){o2.fillStyle=o1.fillStyle;o2.lineCap=o1.lineCap;o2.lineJoin=o1.lineJoin;o2.lineWidth=o1.lineWidth;o2.miterLimit=o1.miterLimit;o2.shadowBlur=o1.shadowBlur;o2.shadowColor=o1.shadowColor;o2.shadowOffsetX=o1.shadowOffsetX;o2.shadowOffsetY=o1.shadowOffsetY;o2.strokeStyle=o1.strokeStyle;o2.arcScaleX_=o1.arcScaleX_;o2.arcScaleY_=o1.arcScaleY_}function processStyle(styleString){var str,alpha=1;styleString=String(styleString);if(styleString.substring(0,3)=="rgb"){var start=styleString.indexOf("(",3);var end=styleString.indexOf(")",start+1);var guts=styleString.substring(start+1,end).split(",");str="#";for(var i=0;i<3;i++){str+=dec2hex[Number(guts[i])]}if((guts.length==4)&&(styleString.substr(3,1)=="a")){alpha=guts[3]}}else{str=styleString}return[str,alpha]}function processLineCap(lineCap){switch(lineCap){case"butt":return"flat";case"round":return"round";case"square":default:return"square"}}function CanvasRenderingContext2D_(surfaceElement){this.m_=createMatrixIdentity();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=Z*1;this.globalAlpha=1;this.canvas=surfaceElement;var el=surfaceElement.ownerDocument.createElement('div');el.style.width=surfaceElement.clientWidth+'px';el.style.height=surfaceElement.clientHeight+'px';el.style.overflow='hidden';el.style.position='absolute';surfaceElement.appendChild(el);this.element_=el;this.arcScaleX_=1;this.arcScaleY_=1}var contextPrototype=CanvasRenderingContext2D_.prototype;contextPrototype.clearRect=function(){this.element_.innerHTML="";this.currentPath_=[]};contextPrototype.beginPath=function(){this.currentPath_=[]};contextPrototype.moveTo=function(aX,aY){this.currentPath_.push({type:"moveTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.lineTo=function(aX,aY){this.currentPath_.push({type:"lineTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.bezierCurveTo=function(aCP1x,aCP1y,aCP2x,aCP2y,aX,aY){this.currentPath_.push({type:"bezierCurveTo",cp1x:aCP1x,cp1y:aCP1y,cp2x:aCP2x,cp2y:aCP2y,x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.quadraticCurveTo=function(aCPx,aCPy,aX,aY){var cp1x=this.currentX_+2.0/3.0*(aCPx-this.currentX_);var cp1y=this.currentY_+2.0/3.0*(aCPy-this.currentY_);var cp2x=cp1x+(aX-this.currentX_)/3.0;var cp2y=cp1y+(aY-this.currentY_)/3.0;this.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,aX,aY)};contextPrototype.arc=function(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise){aRadius*=Z;var arcType=aClockwise?"at":"wa";var xStart=aX+(mc(aStartAngle)*aRadius)-Z2;var yStart=aY+(ms(aStartAngle)*aRadius)-Z2;var xEnd=aX+(mc(aEndAngle)*aRadius)-Z2;var yEnd=aY+(ms(aEndAngle)*aRadius)-Z2;if(xStart==xEnd&&!aClockwise){xStart+=0.125}this.currentPath_.push({type:arcType,x:aX,y:aY,radius:aRadius,xStart:xStart,yStart:yStart,xEnd:xEnd,yEnd:yEnd})};contextPrototype.rect=function(aX,aY,aWidth,aHeight){this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath()};contextPrototype.strokeRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.stroke()};contextPrototype.fillRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.fill()};contextPrototype.createLinearGradient=function(aX0,aY0,aX1,aY1){var gradient=new CanvasGradient_("gradient");return gradient};contextPrototype.createRadialGradient=function(aX0,aY0,aR0,aX1,aY1,aR1){var gradient=new CanvasGradient_("gradientradial");gradient.radius1_=aR0;gradient.radius2_=aR1;gradient.focus_.x=aX0;gradient.focus_.y=aY0;return gradient};contextPrototype.drawImage=function(image,var_args){var dx,dy,dw,dh,sx,sy,sw,sh;var oldRuntimeWidth=image.runtimeStyle.width;var oldRuntimeHeight=image.runtimeStyle.height;image.runtimeStyle.width='auto';image.runtimeStyle.height='auto';var w=image.width;var h=image.height;image.runtimeStyle.width=oldRuntimeWidth;image.runtimeStyle.height=oldRuntimeHeight;if(arguments.length==3){dx=arguments[1];dy=arguments[2];sx=sy=0;sw=dw=w;sh=dh=h}else if(arguments.length==5){dx=arguments[1];dy=arguments[2];dw=arguments[3];dh=arguments[4];sx=sy=0;sw=w;sh=h}else if(arguments.length==9){sx=arguments[1];sy=arguments[2];sw=arguments[3];sh=arguments[4];dx=arguments[5];dy=arguments[6];dw=arguments[7];dh=arguments[8]}else{throw"Invalid number of arguments";}var d=this.getCoords_(dx,dy);var w2=sw/2;var h2=sh/2;var vmlStr=[];var W=10;var H=10;vmlStr.push(' <g_vml_:group',' coordsize="',Z*W,',',Z*H,'"',' coordorigin="0,0"',' style="width:',W,';height:',H,';position:absolute;');if(this.m_[0][0]!=1||this.m_[0][1]){var filter=[];filter.push("M11='",this.m_[0][0],"',","M12='",this.m_[1][0],"',","M21='",this.m_[0][1],"',","M22='",this.m_[1][1],"',","Dx='",mr(d.x/Z),"',","Dy='",mr(d.y/Z),"'");var max=d;var c2=this.getCoords_(dx+dw,dy);var c3=this.getCoords_(dx,dy+dh);var c4=this.getCoords_(dx+dw,dy+dh);max.x=Math.max(max.x,c2.x,c3.x,c4.x);max.y=Math.max(max.y,c2.y,c3.y,c4.y);vmlStr.push("padding:0 ",mr(max.x/Z),"px ",mr(max.y/Z),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",filter.join(""),", sizingmethod='clip');")}else{vmlStr.push("top:",mr(d.y/Z),"px;left:",mr(d.x/Z),"px;")}vmlStr.push(' ">','<g_vml_:image src="',image.src,'"',' style="width:',Z*dw,';',' height:',Z*dh,';"',' cropleft="',sx/w,'"',' croptop="',sy/h,'"',' cropright="',(w-sx-sw)/w,'"',' cropbottom="',(h-sy-sh)/h,'"',' />','</g_vml_:group>');this.element_.insertAdjacentHTML("BeforeEnd",vmlStr.join(""))};contextPrototype.stroke=function(aFill){var lineStr=[];var lineOpen=false;var a=processStyle(aFill?this.fillStyle:this.strokeStyle);var color=a[0];var opacity=a[1]*this.globalAlpha;var W=10;var H=10;lineStr.push('<g_vml_:shape',' fillcolor="',color,'"',' filled="',Boolean(aFill),'"',' style="position:absolute;width:',W,';height:',H,';"',' coordorigin="0 0" coordsize="',Z*W,' ',Z*H,'"',' stroked="',!aFill,'"',' strokeweight="',this.lineWidth,'"',' strokecolor="',color,'"',' path="');var newSeq=false;var min={x:null,y:null};var max={x:null,y:null};for(var i=0;i<this.currentPath_.length;i++){var p=this.currentPath_[i];if(p.type=="moveTo"){lineStr.push(" m ");var c=this.getCoords_(p.x,p.y);lineStr.push(mr(c.x),",",mr(c.y))}else if(p.type=="lineTo"){lineStr.push(" l ");var c=this.getCoords_(p.x,p.y);lineStr.push(mr(c.x),",",mr(c.y))}else if(p.type=="close"){lineStr.push(" x ")}else if(p.type=="bezierCurveTo"){lineStr.push(" c ");var c=this.getCoords_(p.x,p.y);var c1=this.getCoords_(p.cp1x,p.cp1y);var c2=this.getCoords_(p.cp2x,p.cp2y);lineStr.push(mr(c1.x),",",mr(c1.y),",",mr(c2.x),",",mr(c2.y),",",mr(c.x),",",mr(c.y))}else if(p.type=="at"||p.type=="wa"){lineStr.push(" ",p.type," ");var c=this.getCoords_(p.x,p.y);var cStart=this.getCoords_(p.xStart,p.yStart);var cEnd=this.getCoords_(p.xEnd,p.yEnd);lineStr.push(mr(c.x-this.arcScaleX_*p.radius),",",mr(c.y-this.arcScaleY_*p.radius)," ",mr(c.x+this.arcScaleX_*p.radius),",",mr(c.y+this.arcScaleY_*p.radius)," ",mr(cStart.x),",",mr(cStart.y)," ",mr(cEnd.x),",",mr(cEnd.y))}if(c){if(min.x==null||c.x<min.x){min.x=c.x}if(max.x==null||c.x>max.x){max.x=c.x}if(min.y==null||c.y<min.y){min.y=c.y}if(max.y==null||c.y>max.y){max.y=c.y}}}lineStr.push(' ">');if(typeof this.fillStyle=="object"){var focus={x:"50%",y:"50%"};var width=(max.x-min.x);var height=(max.y-min.y);var dimension=(width>height)?width:height;focus.x=mr((this.fillStyle.focus_.x/width)*100+50)+"%";focus.y=mr((this.fillStyle.focus_.y/height)*100+50)+"%";var colors=[];if(this.fillStyle.type_=="gradientradial"){var inside=(this.fillStyle.radius1_/dimension*100);var expansion=(this.fillStyle.radius2_/dimension*100)-inside}else{var inside=0;var expansion=100}var insidecolor={offset:null,color:null};var outsidecolor={offset:null,color:null};this.fillStyle.colors_.sort(function(cs1,cs2){return cs1.offset-cs2.offset});for(var i=0;i<this.fillStyle.colors_.length;i++){var fs=this.fillStyle.colors_[i];colors.push((fs.offset*expansion)+inside,"% ",fs.color,",");if(fs.offset>insidecolor.offset||insidecolor.offset==null){insidecolor.offset=fs.offset;insidecolor.color=fs.color}if(fs.offset<outsidecolor.offset||outsidecolor.offset==null){outsidecolor.offset=fs.offset;outsidecolor.color=fs.color}}colors.pop();lineStr.push('<g_vml_:fill',' color="',outsidecolor.color,'"',' color2="',insidecolor.color,'"',' type="',this.fillStyle.type_,'"',' focusposition="',focus.x,', ',focus.y,'"',' colors="',colors.join(""),'"',' opacity="',opacity,'" />')}else if(aFill){lineStr.push('<g_vml_:fill color="',color,'" opacity="',opacity,'" />')}else{lineStr.push('<g_vml_:stroke',' opacity="',opacity,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',processLineCap(this.lineCap),'"',' weight="',this.lineWidth,'px"',' color="',color,'" />')}lineStr.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",lineStr.join(""))};contextPrototype.fill=function(){this.stroke(true)};contextPrototype.closePath=function(){this.currentPath_.push({type:"close"})};contextPrototype.getCoords_=function(aX,aY){return{x:Z*(aX*this.m_[0][0]+aY*this.m_[1][0]+this.m_[2][0])-Z2,y:Z*(aX*this.m_[0][1]+aY*this.m_[1][1]+this.m_[2][1])-Z2}};contextPrototype.save=function(){var o={};copyState(this,o);this.aStack_.push(o);this.mStack_.push(this.m_);this.m_=matrixMultiply(createMatrixIdentity(),this.m_)};contextPrototype.restore=function(){copyState(this.aStack_.pop(),this);this.m_=this.mStack_.pop()};contextPrototype.translate=function(aX,aY){var m1=[[1,0,0],[0,1,0],[aX,aY,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.rotate=function(aRot){var c=mc(aRot);var s=ms(aRot);var m1=[[c,s,0],[-s,c,0],[0,0,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.scale=function(aX,aY){this.arcScaleX_*=aX;this.arcScaleY_*=aY;var m1=[[aX,0,0],[0,aY,0],[0,0,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.clip=function(){};contextPrototype.arcTo=function(){};contextPrototype.createPattern=function(){return new CanvasPattern_};function CanvasGradient_(aType){this.type_=aType;this.radius1_=0;this.radius2_=0;this.colors_=[];this.focus_={x:0,y:0}}CanvasGradient_.prototype.addColorStop=function(aOffset,aColor){aColor=processStyle(aColor);this.colors_.push({offset:1-aOffset,color:aColor})};function CanvasPattern_(){}G_vmlCanvasManager=G_vmlCanvasManager_;CanvasRenderingContext2D=CanvasRenderingContext2D_;CanvasGradient=CanvasGradient_;CanvasPattern=CanvasPattern_})()}

data/lib/flotr.rb

@@ -0,0 +1,170 @@
+#!/usr/bin/env ruby
+#
+# Created by Paolo Bosetti on 2009-04-27.
+# Copyright (c) 2009 University of Trento. All rights 
+# reserved.
+require "rubygems"
+require "erubis"
+require "cgi"
+
+class String
+  def escapeHTML
+    CGI.escapeHTML self
+  end
+end
+
+=begin rdoc
+  Flotr namespace.
+=end
+module Flotr
+  BASENAME = File.dirname(__FILE__)
+  OUTPUT_FILE = "flotr.html"
+  STD_TEMPLATE = "zooming.rhtml"
+  
+  
+=begin rdoc
+  Series to be plotted are instance of the Flotr::Data class. Initialize a new
+  Data object with a set of OPTIONS, then add points with the << method.
+=end
+  class Data
+    OPTIONS = [:color, :label, :lines, :bars, :points, :hints, :shadowSize]
+    attr_accessor *OPTIONS
+    attr_accessor :data
+    
+=begin rdoc
+  Creates a new serie of points. opts is a Hash with a subset of the keys
+  given in OPTIONS.
+=end
+    def initialize(opts={})
+      @data = []
+      opts.each do |k,v|
+        if OPTIONS.include? k
+          self.send(k.to_s+'=', v)
+        else
+          warn "Warning: data option '#{k}' does not exist, ignored"
+        end
+      end
+    end
+    
+=begin rdoc
+  Provides a JavaScript-formatted description of the data array.
+=end
+    def inspect
+      options = ""
+      OPTIONS.each do |o|
+        if self.send o then
+          options += "#{o}: \"#{self.send o}\", "
+        end
+      end
+      "{ #{options}data: #{@data.inspect}}"
+    end
+    
+=begin rdoc
+  Adds other to the data array. other must be a two element array like [0,0].
+=end
+    def <<(other)
+      other = other.to_a
+      raise ArgumentError unless other[0].kind_of? Numeric
+      raise ArgumentError unless other[1].kind_of? Numeric
+      @data << other
+    end
+    
+  end
+  
+=begin rdoc
+  The Plot object. Serves as a container for the data series (Data objects)
+  and for the plot options. Call the plot/show methods to generate the 
+  plot file Flotr::OUTPUT_FILE.
+=end  
+  class Plot
+    attr_accessor :series, :title, :comment, :template, :options
+    attr_accessor :width, :height
+    attr_accessor :label, :xlim, :ylim
+    
+=begin rdoc
+  Creates a new plot. You only have to provide a title for the plot, that
+  will (probably) be used as a page title by the active template.
+=end
+    def initialize(title = "Flotr Plot")
+      @title = title
+      @template = "#{BASENAME}/#{STD_TEMPLATE}"
+      @series = []
+      @options = {}
+      @width, @height = 600, 300
+      @label = @xlim = @ylim = {}
+    end
+    
+=begin rdoc
+  Lists the available standard templates. These are .rhtml files located in
+  the lib floder inside the gem. The extension .rhtml is dropped.
+=end
+    def std_templates
+      Dir.glob("#{BASENAME}/*.rhtml").map {|f| File.basename(f, ".rhtml")}
+    end
+    
+=begin rdoc
+  Selects the active template. It has to be one of those included in the
+  result of the std_templates method.
+=end
+    def std_template=(template)
+      raise "Template #{template} does not exist!" unless self.std_templates.include?(template) 
+      @template = "#{BASENAME}/#{template}.rhtml"
+    end
+
+=begin rdoc
+  Returns the currently selected standard template, or nil if the active
+  template is a custom one. Use Plot#template=(full/path/to/template.rhtml)
+  to set a custom template.
+=end
+    def std_template
+      if File.dirname(@template) == BASENAME
+        File.basename(@template, ".rhtml")
+      else
+        nil
+      end
+    end
+    
+=begin rdoc
+  Generates the html file containing the plot and fires up a preferred
+  browser window with the plot loaded.
+=end
+    def plot
+      eruby = Erubis::Eruby.new(File.read(@template))
+      File.open(OUTPUT_FILE, 'w') do |f|
+        f.print eruby.result(binding())
+      end
+      case RUBY_PLATFORM
+      when /darwin/
+        system "open \"#{OUTPUT_FILE}\""
+      when /mswin/
+        system "start #{OUTPUT_FILE}"
+      else
+        puts "open #{OUTPUT_FILE} in your preferred browser"
+      end
+    end
+    
+    alias show plot
+    
+=begin rdoc
+  Adds a Data serie to the Plot. It also returns self, so multiple calls
+  can be concatenated as in plot << series1 << series2 << series3.
+=end
+    def <<(serie)
+      if serie.instance_of? Data
+        @series << serie
+      else
+        raise ArgumentError
+      end
+    end
+    
+=begin rdoc
+  Provides a JavaScript-formatted description of the all the series.
+=end
+    def inspect
+      data = @series.map {|s| s.inspect}
+      "[ #{data*', '} ]"
+    end
+  end
+  
+end
+

data/lib/interacting.rhtml

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+                      "http://www.w3.org/TR/html4/loose.dtd">
+
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title><%= title %></title>
+    <link href="<%= BASENAME%>/layout.css" rel="stylesheet" type="text/css">
+    <!--[if IE]><script type="text/javascript" src="<%= BASENAME%>/excanvas.pack.js"></script><![endif]-->
+    <script type="text/javascript" src="<%= BASENAME%>/jquery.min.js"></script>
+    <script type="text/javascript" src="<%= BASENAME%>/jquery.flot.js"></script>
+    <script type="text/javascript">
+      $(document).ready( function() {
+        // create some datasets
+        var data = <%= self.inspect%>;
+
+        // plot the graph into '#placeholder'
+        plot = $.plot(
+          $("#placeholder"),
+          data,
+          { xaxis: {
+              label: <%= "\"#{@label[:X]}\"" or 'null'%>,
+              min:   <%= @xlim[:min] or 'null'%>,
+              max:   <%= @xlim[:max] or 'null'%>
+            },
+            yaxis: {
+              label: <%= "\"#{@label[:Y]}\"" or 'null'%>,
+              min:   <%= @ylim[:min] or 'null'%>,
+              max:   <%= @ylim[:max] or 'null'%>
+            },
+            hints: {
+              show: true,
+              hintFormatter: function( datapoint ) {
+                hintStr = "";
+                for( var key in datapoint ) {
+                  if( key[0] == '_' ) { continue; } // skip internal members
+                  hintStr += "<strong>" + key + ":</strong> " +
+                             datapoint[key].toFixed(2) + "<br/>";
+                }
+                return hintStr;
+              } },
+            points: { show: <%= @options[:points] or 'true'%> }, 
+            lines:  { show: <%= @options[:lines] or 'true'%> },
+            legend: { position: '<%= @options[:legend_position] or 'sw'%>' },
+            grid: {
+              clickable: true,
+              hoverable: true,
+              hoverFill: '#444',
+              hoverRadius: 5
+            }
+          } );
+        
+        // setup event handlers
+        $("#placeholder").bind( 'plotclick', function( e, pos ) {
+          if( !pos.selected ) { return; }
+          plot.highlight( pos.selected );
+          x = pos.selected.x.toFixed( 2 );
+          y = pos.selected.y.toFixed( 2 );
+          $("#result").text( 'You clicked on (' + x +  ', ' + y + ')' );
+        } );
+
+        $("#placeholder").bind( 'plotmousemove', function( e, pos ) {
+          if( !pos.selected ) { return; }
+          plot.highlight( pos.selected );
+        } );
+      });
+    </script>
+  </head>
+  <body>
+    <h1><%= title %></h1>
+
+    <div id="placeholder" style="width: <%= @width %>px; height: <%= @height %>px;"></div>
+
+    <p><%= comment %></p>
+    <p><span id="result"></span></p>
+  </body>
+</html>

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