Commits

Anonymous committed d5dfeb1 Merge

sync to jqplot trunk

  • Participants
  • Parent commits 5a1e6fb, d096ea5

Comments (0)

Files changed (166)

 411585f33f868d421e1c6251924a080303c3ed24 0.9.6
 34d07d02e52dd79c7fefee8244b2a35cb416ce20 0.9.7
 34da98192ef9ac2c310a17c21a6ef032db905555 1.0.0a
+78ba2408d9a3cee7e181ec020a743ce9d9caed0e 1.0.0b1
+71df38b4d45a3403d22283cc146e98ceb6910261 1.0.0b2
 
    Group: Core Renderers  {
 
-      File: AxisTickRenderer  (no auto-title, jqplot.axisTickRenderer.js)
-      File: CanvasGridRenderer  (no auto-title, jqplot.canvasGridRenderer.js)
-      File: DivTitleRenderer  (no auto-title, jqplot.divTitleRenderer.js)
-      File: LinearAxisRenderer  (no auto-title, jqplot.linearAxisRenderer.js)
-      File: MarkerRenderer  (no auto-title, jqplot.markerRenderer.js)
-      File: ShapeRenderer  (no auto-title, jqplot.shapeRenderer.js)
-      File: ShadowRenderer  (no auto-title, jqplot.shadowRenderer.js)
+      File: Axis Tick Renderer  (no auto-title, jqplot.axisTickRenderer.js)
+      File: Canvas Grid Renderer  (no auto-title, jqplot.canvasGridRenderer.js)
+      File: Div Title Renderer  (no auto-title, jqplot.divTitleRenderer.js)
+      File: Linear Axis Renderer  (no auto-title, jqplot.linearAxisRenderer.js)
+      File: Marker Renderer  (no auto-title, jqplot.markerRenderer.js)
+      File: Shape Renderer  (no auto-title, jqplot.shapeRenderer.js)
+      File: Shadow Renderer  (no auto-title, jqplot.shadowRenderer.js)
       File: Line Renderer  (no auto-title, jqplot.lineRenderer.js)
-      File: AxisLabelRenderer  (jqplot.axisLabelRenderer.js)
-      File: ThemeEngine  (jqplot.themeEngine.js)
+      File: Axis Label Renderer  (no auto-title, jqplot.axisLabelRenderer.js)
+      File: Theme Engine  (no auto-title, jqplot.themeEngine.js)
+      File: fn  (jqplot.toImage.js)
+      File: jqplot.lineAxisRenderer.js  (jqplot.lineAxisRenderer.js)
       }  # Group: Core Renderers
 
    Group: Plugins  {
 
-      File: BarRenderer  (no auto-title, plugins/jqplot.barRenderer.js)
-      File: BezierCurveRenderer  (no auto-title, plugins/jqplot.BezierCurveRenderer.js)
-      File: BlockRenderer  (no auto-title, plugins/jqplot.blockRenderer.js)
-      File: BubbleRenderer  (no auto-title, plugins/jqplot.bubbleRenderer.js)
-      File: CanvasAxisLabelRenderer  (no auto-title, plugins/jqplot.canvasAxisLabelRenderer.js)
-      File: CanvasAxisTickRenderer  (no auto-title, plugins/jqplot.canvasAxisTickRenderer.js)
-      File: CanvasOverlay  (plugins/jqplot.canvasOverlay.js)
-      File: CategoryAxisRenderer  (no auto-title, plugins/jqplot.categoryAxisRenderer.js)
+      File: Bar Renderer  (no auto-title, plugins/jqplot.barRenderer.js)
+      File: Bezier Curve Renderer  (no auto-title, plugins/jqplot.BezierCurveRenderer.js)
+      File: Block Renderer  (no auto-title, plugins/jqplot.blockRenderer.js)
+      File: Bubble Renderer  (no auto-title, plugins/jqplot.bubbleRenderer.js)
+      File: Canvas Axis Label Renderer  (no auto-title, plugins/jqplot.canvasAxisLabelRenderer.js)
+      File: Canvas Axis TickRenderer  (no auto-title, plugins/jqplot.canvasAxisTickRenderer.js)
+      File: Canvas Overlay  (no auto-title, plugins/jqplot.canvasOverlay.js)
+      File: Category Axis Renderer  (no auto-title, plugins/jqplot.categoryAxisRenderer.js)
       File: ciParser  (no auto-title, plugins/jqplot.ciParser.js)
       File: Cursor  (no auto-title, plugins/jqplot.cursor.js)
-      File: DateAxisRenderer  (no auto-title, plugins/jqplot.dateAxisRenderer.js)
-      File: DonutRenderer  (no auto-title, plugins/jqplot.donutRenderer.js)
+      File: Date Axis Renderer  (no auto-title, plugins/jqplot.dateAxisRenderer.js)
+      File: Donut Renderer  (no auto-title, plugins/jqplot.donutRenderer.js)
       File: Dragable  (no auto-title, plugins/jqplot.dragable.js)
-      File: EnhancedLegendRenderer  (no auto-title, plugins/jqplot.enhancedLegendRenderer.js)
-      File: FunnelRenderer  (no auto-title, plugins/jqplot.funnelRenderer.js)
+      File: Enhanced Legend Renderer  (no auto-title, plugins/jqplot.enhancedLegendRenderer.js)
+      File: Funnel Renderer  (no auto-title, plugins/jqplot.funnelRenderer.js)
       File: Highlighter  (no auto-title, plugins/jqplot.highlighter.js)
-      File: LogAxisRenderer  (no auto-title, plugins/jqplot.logAxisRenderer.js)
-      File: MekkoAxisRenderer  (no auto-title, plugins/jqplot.mekkoAxisRenderer.js)
-      File: MekkoRenderer  (no auto-title, plugins/jqplot.mekkoRenderer.js)
-      File: MeterGaugeRenderer  (no auto-title, plugins/jqplot.meterGaugeRenderer.js)
-      File: OHLCRenderer  (no auto-title, plugins/jqplot.ohlcRenderer.js)
-      File: PieRenderer  (no auto-title, plugins/jqplot.pieRenderer.js)
-      File: PointLabels  (no auto-title, plugins/jqplot.pointLabels.js)
+      File: Pyramid Renderer  (no auto-title, plugins/jqplot.pyramidRenderer.js)
+      File: Log Axis Renderer  (no auto-title, plugins/jqplot.logAxisRenderer.js)
+      File: Mekko Axis Renderer  (no auto-title, plugins/jqplot.mekkoAxisRenderer.js)
+      File: Mekko Renderer  (no auto-title, plugins/jqplot.mekkoRenderer.js)
+      File: Meter Gauge Renderer  (no auto-title, plugins/jqplot.meterGaugeRenderer.js)
+      File: OHLC Renderer  (no auto-title, plugins/jqplot.ohlcRenderer.js)
+      File: Pie Renderer  (no auto-title, plugins/jqplot.pieRenderer.js)
+      File: Point Labels  (no auto-title, plugins/jqplot.pointLabels.js)
       File: Trendline  (no auto-title, plugins/jqplot.trendline.js)
+      File: CanvasGridRenderer  (plugins/jqplot.pyramidGridRenderer.js)
+      File: jqplot.pyramidAxisRenderer.js  (plugins/jqplot.pyramidAxisRenderer.js)
       }  # Group: Plugins
 
    }  # Group: API Documentation
 
 Pure JavaScript plotting plugin for jQuery.
 
-To learn how to use jqPlot, start with the Basic Unsage Instructions below.  Then read the
+To learn how to use jqPlot, start with the Basic Usage Instructions below.  Then read the
 usage.txt and jqPlotOptions.txt files included with the distribution.
 
 The jqPlot home page is at <http://www.jqplot.com/>.
           <fileset dir="${SRC_DIR}/plugins" includes="*" />
         </copy>
         
-        <replaceregexp match="@VERSION" replace="${version}r${HG_ID}">
+        <replaceregexp match="@VERSION" flags="g" replace="${version}r${HG_ID}">
 			<fileset dir="${BUILD_DIR}" includes="jqplot.*.js"/>
 		</replaceregexp>
         
-        <replaceregexp match="@VERSION" replace="${version}r${HG_ID}">
+        <replaceregexp match="@VERSION" flags="g" replace="${version}r${HG_ID}">
 			<fileset dir="${BUILD_DIR}/plugins" includes="jqplot.*.js"/>
 		</replaceregexp>
                 
           <fileset dir="" includes="README.txt" />
           <fileset dir="" includes="copyright.txt" />
           <fileset dir="${SRC_DIR}" includes="*.txt" />
-          <fileset dir="${SRC_DIR}" includes="jquery-*.js" />
+          <fileset dir="${SRC_DIR}" includes="jquery.js" />
+          <fileset dir="${SRC_DIR}" includes="jquery.min.js" />
         </copy>
         
         <copy todir="${DIST_DIR}/examples">
         <echo message="Building minified sources with YUI Compressor" />
         <mkdir dir="${DIST_DIR}/temp" />
         <mkdir dir="${DIST_DIR}/plugins/temp" />
+        <echo message="minifing file: jquery.jqplot.js" />
         <apply executable="java" parallel="false" verbose="true" dest="${DIST_DIR}">
           <fileset dir="${DIST_DIR}">
             <include name="jquery.jqplot.js" />
           <mapper type="glob" from="jquery.jqplot.js" to="temp/jquery.jqplot.min.js" />
         </apply>
         <!-- Ipanema patch : patched excanvas minified -->
+        <echo message="minifying file: excanvas.js" />
         <apply executable="java" parallel="false" verbose="true" dest="${DIST_DIR}">
           <fileset dir="${DIST_DIR}">
             <include name="excanvas.js" />
           <targetfile />
           <mapper type="glob" from="excanvas.js" to="temp/excanvas.min.js" />
         </apply>
+        <echo message="minifing file: jquery.jqplot.css" />
         <apply executable="java" parallel="false" verbose="true" dest="${DIST_DIR}">
           <fileset dir="${DIST_DIR}">
             <include name="jquery.jqplot.css" />
           <targetfile />
           <mapper type="glob" from="jquery.jqplot.css" to="jquery.jqplot.min.css" />
         </apply>
+        <echo message="minifing plugin files" />
         <apply executable="java" parallel="false" verbose="true" dest="${DIST_DIR}/plugins">
           <fileset dir="${DIST_DIR}/plugins">
             <include name="jqplot.*.js" />
           </filterchain>
         </copy>
         
-        <replaceregexp match="@VERSION" replace="${version}r${HG_ID}">
+        <replaceregexp match="@VERSION" flags="g" replace="${version}r${HG_ID}">
 			<fileset dir="${DIST_DIR}">
 				<include name="jquery.jqplot.js"/>
 				<include name="jquery.jqplot.min.js"/>
 			</fileset>
 		</replaceregexp>
         
-        <replaceregexp match="@VERSION" replace="${version}r${HG_ID}">
+        <replaceregexp match="@VERSION" flags="g" replace="${version}r${HG_ID}">
 			<fileset dir="${DIST_DIR}/plugins">
 				<include name="jqplot.*.js"/>
 				<include name="jqplot.*.min.js" />
         <mkdir dir="${WEB_DIR}" />
         <copy todir="${WEB_DIR}">
           <fileset dir="${DIST_DIR}">
-            <include name="jquery*.js" />
+            <include name="jquery.js" />
+            <include name="jquery.min.js" />
             <include name="jquery.jqplot*.css" />
             <include name="excanvas*.js" />
             <include name="*.php" />
   <target name="compress" depends="dist, min, docs" description="Create the zip, gzip, and bzip compressed archives for downloading">
       <zip destfile="${DIST_DIR}/jquery.jqplot.${version}r${HG_ID}.zip"
        basedir=""
-       includes="${DIST_DIR}/excanvas*.js ${DIST_DIR}/jquery-*.js ${DIST_DIR}/jquery*.min.js ${DIST_DIR}/jquery.jqplot.* ${DIST_DIR}/*.txt ${DIST_DIR}/plugins/* ${DIST_DIR}/examples/* ${DIST_DIR}/examples/jquery-ui/css/ui-lightness/* ${DIST_DIR}/examples/jquery-ui/css/ui-lightness/images/* ${DIST_DIR}/examples/jquery-ui/js/* ${DIST_DIR}/docs/* ${DIST_DIR}/docs/files/* ${DIST_DIR}/docs/files/examples/* ${DIST_DIR}/docs/files/images/* ${DIST_DIR}/docs/files/plugins/* ${DIST_DIR}/docs/index/* ${DIST_DIR}/docs/javascript/* ${DIST_DIR}/docs/search/* ${DIST_DIR}/docs/styles/*"
+       includes="${DIST_DIR}/excanvas*.js ${DIST_DIR}/jquery.js ${DIST_DIR}/jquery.min.js ${DIST_DIR}/jquery.jqplot.* ${DIST_DIR}/*.txt ${DIST_DIR}/plugins/* ${DIST_DIR}/examples/* ${DIST_DIR}/examples/jquery-ui/css/ui-lightness/* ${DIST_DIR}/examples/jquery-ui/css/ui-lightness/images/* ${DIST_DIR}/examples/jquery-ui/js/* ${DIST_DIR}/docs/* ${DIST_DIR}/docs/files/* ${DIST_DIR}/docs/files/examples/* ${DIST_DIR}/docs/files/images/* ${DIST_DIR}/docs/files/plugins/* ${DIST_DIR}/docs/index/* ${DIST_DIR}/docs/javascript/* ${DIST_DIR}/docs/search/* ${DIST_DIR}/docs/styles/*"
       />
       <tar destfile="${DIST_DIR}/jquery.jqplot.${version}r${HG_ID}.tar.gz" compression="gzip">
           <zipfileset src="${DIST_DIR}/jquery.jqplot.${version}r${HG_ID}.zip"/>
       </tar>
   </target>
 
-  <target name="docs" depends="dist, min" description="Create documentation for distribution.">
+  <target name="docs" depends="dist" description="Create documentation for distribution.">
     <echo message="Creating documentation" />
       <!-- don't want to process jquery itself -->
-        <move file="${BUILD_DIR}/jquery-1.5.1.js" tofile="${BUILD_DIR}/jquery-1.5.1.js.bak" />
+        <move file="${BUILD_DIR}/jquery.js" tofile="${BUILD_DIR}/jquery.js.bak" />
         <mkdir dir="${DIST_DIR}/docs" />
         <!-- rename files we don't used for docs -->
         <move file="${BUILD_DIR}/jquery.jqplot.js" tofile="${BUILD_DIR}/jquery.jqplot.js.bak"/>
           <fileset dir="${SRC_DIR}/images" includes="*.png" />
         </copy>
         <!-- put jquery back the way it was -->
-        <move file="${BUILD_DIR}/jquery-1.5.1.js.bak" tofile="${BUILD_DIR}/jquery-1.5.1.js" />
+        <move file="${BUILD_DIR}/jquery.js.bak" tofile="${BUILD_DIR}/jquery.js" />
         <echo message="Documentation Finished" />
   </target>
 
  *     http://hexmen.com/js/sprintf.js
  *     The author (Ash Searle) has placed this code in the public domain:
  *     "This code is unrestricted: you are free to use it however you like."
+ *
+ * included jsDate library by Chris Leonello:
+ *
+ * Copyright (c) 2010-2011 Chris Leonello
+ *
+ * jsDate is currently available for use in all personal or commercial projects 
+ * under both the MIT and GPL version 2.0 licenses. This means that you can 
+ * choose the license that best suits your project and use it accordingly.
+ *
+ * jsDate borrows many concepts and ideas from the Date Instance 
+ * Methods by Ken Snyder along with some parts of Ken's actual code.
+ * 
+ * Ken's origianl Date Instance Methods and copyright notice:
+ * 
+ * Ken Snyder (ken d snyder at gmail dot com)
+ * 2008-09-10
+ * version 2.0.2 (http://kendsnyder.com/sandbox/date/)     
+ * Creative Commons Attribution License 3.0 (http://creativecommons.org/licenses/by/3.0/)
+ *
+ * jqplotToImage function based on Larry Siden's export-jqplot-to-png.js.
+ * Larry has generously given permission to adapt his code for inclusion
+ * into jqPlot.
+ *
+ * Larry's original code can be found here:
+ *
+ * https://github.com/lsiden/export-jqplot-to-png
+ * 
  * 
  */

examples/OHLC.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/OHLC2.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/area.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
   <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.donutRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.funnelRenderer.js"></script>
+<!--  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.funnelRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
+-->
   <!-- END: load jqplot -->
 
 <style type="text/css">
 }
 </style>
 
-<script language="javascript" type="text/javascript">
+<script class="code" language="javascript" type="text/javascript">
 $(document).ready(function(){
 
     l2 = [11, 9, 5, 12, 14];
        }
     });
     
+    $('#chart1b').bind('jqplotDataHighlight', 
+        function (ev, seriesIndex, pointIndex, data) {
+            $('#info1b').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
+        }
+    );
+    
+    $('#chart1b').bind('jqplotDataUnhighlight', 
+        function (ev) {
+            $('#info1b').html('Nothing');
+        }
+    );
+});
+</script>
+ 
+ 
+<script class="code" language="javascript" type="text/javascript">
+$(document).ready(function(){   
     plot1c = $.jqplot('chart1c',[l5],{
        stackSeries: true,
        showMarker: false,
             $('#info1c').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
         }
     );
-    
-    $('#chart1b').bind('jqplotDataHighlight', 
-        function (ev, seriesIndex, pointIndex, data) {
-            $('#info1b').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
-        }
-    );
-    
-    $('#chart1b').bind('jqplotDataUnhighlight', 
-        function (ev) {
-            $('#info1b').html('Nothing');
-        }
-    );
 });
+</script>
 
-
-</script>
+<script type="text/javascript" src="example.js"></script>
   </head>
   <body>
 <?php include "nav.inc"; ?>

examples/axisLabel.html

   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
 
   <!-- END: load jquery -->
   
 	</style>
 	
 
-    <script type="text/javascript" language="javascript"><!--
+    <script class="code" type="text/javascript" language="javascript">
         $(document).ready(function(){
       $.jqplot.config.enablePlugins = true;
             l1 = [[2011,1200], [2039,1200]];
             r = r+'px';
             $('.jqplot-y2axis-label').css({top:'10px', right:r});
         });
-    -->
     </script>
 
+<script type="text/javascript" src="example.js"></script>
+
 </head>
 <body>
 <?php include "nav.inc"; ?>

examples/axisLabelsRotatedText.html

 <head>
   <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
   <link rel="stylesheet" type="text/css" href="examples.css" />
-  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.min.js"></script><![endif]-->
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
 
   <!-- END: load jquery -->
   
 	      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 	      tickOptions: {
           angle: -30,
-          fontFamily: 'Times',
-          fontSize: '12pt'
+          fontFamily: 'Courier New',
+          fontSize: '9pt'
 	      }
 	      
 	    },

examples/axisLabelsRotatedText2.html

   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
 
   <!-- END: load jquery -->
   
         // labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
         tickRenderer: $.jqplot.CanvasAxisTickRenderer,
         tickOptions: {
-          enableFontSupport: true,
+          // enableFontSupport: true,
             angle: -30
         }
         
         // labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
         tickRenderer: $.jqplot.CanvasAxisTickRenderer,
         tickOptions: {
-          enableFontSupport: true,
+          // enableFontSupport: true,
             angle: -30
         }
       }

examples/axisScalingForceTicAt.html

+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Random Test</title>
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
+  
+  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
+  <link rel="stylesheet" type="text/css" href="examples.css" />
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasOverlay.js"></script>
+
+  <!-- END: load jqplot -->
+<script language="javascript" type="text/javascript">
+
+  function makeContinuousData(npoints, ybase, yvariation) {
+      var data = [];
+      if (yvariation == null) {
+          yvariation = ybase;
+          ybase = (Math.random() - 0.5) * 2 * yvariation;
+      }
+      for (j=0; j<npoints; j++) {
+          data.push([j, ybase]);
+          ybase += (Math.random() - 0.5) * 2 * yvariation;
+      }
+      return data;
+  }
+
+  function makeRandomData(npoints, yvariation) {
+      var data = [];
+      for (j=0; j<npoints; j++) {
+          var y = (Math.random() - 0.5) * 2 * yvariation;
+          data.push([j, y]);
+      }
+      return data;
+  }
+  function makeDualContinuousData(npoints, xbase, xvariation, ybase, yvariation) {
+      var data = [];
+      if (ybase == null && yvariation == null) {
+          xvariation = xbase;
+          yvariation = xvariation;
+          xbase = (Math.random() - 0.5) * 2 * xvariation;
+          ybase = (Math.random() - 0.5) * 2 * yvariation;
+      }
+      for (j=0; j<npoints; j++) {
+          data.push([xbase, ybase]);
+          xbase += (Math.random()) * xvariation;
+          ybase += (Math.random() - 0.5) * 2 * yvariation;
+      }
+      return data;
+  }
+
+  var plotOptions = {
+      axes: {
+          yaxis: {
+              rendererOptions: { forceTickAt0:  true, forceTickAt100: true }
+          }
+      }
+  };
+
+</script>
+
+<script class="code" type="text/javascript"> 
+$(document).ready(function(){
+  plot1 = $.jqplot('chart1',[makeContinuousData(100, 55)], {});
+});
+</script>
+
+<script class="code" type="text/javascript"> 
+$(document).ready(function(){
+  plot2 = $.jqplot('chart2',[makeContinuousData(100, 1, 0.001)], {});
+});
+</script>
+
+<script class="code" type="text/javascript"> 
+$(document).ready(function(){
+  plot3 = $.jqplot('chart3',[makeContinuousData(20, 40, 5)], {
+    axes: {
+      yaxis: {
+        rendererOptions: { forceTickAt0: true, forceTickAt100: true }
+      }
+    }
+  });
+});
+</script>
+
+<script class="code" type="text/javascript"> 
+$(document).ready(function(){
+  plot4 = $.jqplot('chart4',[makeContinuousData(20, 40, 5)], {
+    axesDefaults: {
+      pad: 0
+    },
+    axes: {
+      yaxis: {
+        rendererOptions: { forceTickAt0: true, forceTickAt100: true }
+      }
+    }
+  });
+});
+</script>
+
+<script class="code" type="text/javascript"> 
+$(document).ready(function(){
+  plot5 = $.jqplot('chart5',[makeContinuousData(20, 40, 5)], {
+    axes: {
+      xaxis: {
+        padMin: 0,
+        padMax: 1.2
+      },
+      yaxis: {
+        padMax: 0,
+        rendererOptions: { forceTickAt0: true, forceTickAt100: true }
+      }
+    }
+  });
+});
+</script>
+
+<script class="code" type="text/javascript"> 
+$(document).ready(function(){
+  plot6 = $.jqplot('chart6',[makeContinuousData(20, 40, 8)], {
+    axes: {
+      yaxis: {
+        rendererOptions: { forceTickAt0: true, forceTickAt100: true }
+      }
+    },
+    canvasOverlay: {
+      show: true,
+      objects: [
+        {horizontalLine: {
+          name: 'pebbles',
+          y: 0,
+          lineWidth: 3,
+          color: 'rgb(100, 55, 124)',
+          shadow: true,
+          lineCap: 'butt',
+          xOffset: 0
+        }},
+        {dashedHorizontalLine: {
+          name: 'bam-bam',
+          y: 100,
+          lineWidth: 4,
+          dashPattern: [8, 16],
+          lineCap: 'round',
+          xOffset: '25',
+          color: 'rgb(66, 98, 144)',
+          shadow: false
+        }}
+      ]
+    }
+  });
+});
+
+function lineup(plot, name) {
+    var co = plot.plugins.canvasOverlay;
+    var line = co.get(name);
+    line.options.y += 5;
+    co.draw(plot);
+}
+
+function linedown(plot, name) {
+    var co = plot.plugins.canvasOverlay;
+    var line = co.get(name);
+    line.options.y -= 5;
+    co.draw(plot);
+}
+
+</script>
+
+
+<script type="text/javascript" src="example.js"></script>
+
+  </head>
+  <body>
+<?php include "nav.inc"; ?>
+<div id="chart1" style="height:300px; width:600px;margin: 30px;"></div>
+<pre class="code"></pre>
+<div id="chart2" style="height:300px; width:600px;margin: 30px;"></div>
+<pre class="code"></pre>
+<div id="chart3" style="height:300px; width:600px;margin: 30px;"></div>
+<pre class="code"></pre>
+<div id="chart4" style="height:300px; width:600px;margin: 30px;"></div>
+<pre class="code"></pre>
+<div id="chart5" style="height:300px; width:600px;margin: 30px;"></div>
+<pre class="code"></pre>
+<div id="chart6" style="height:300px; width:600px;margin: 30px;"></div>
+
+
+<div>
+<button onclick="lineup(plot6, 'pebbles')">&nbsp;Pebbles Up&nbsp;&nbsp;</button>
+<button onclick="linedown(plot6, 'pebbles')">&nbsp;Pebbles Down&nbsp;</button>
+</div>
+<div>
+<button onclick="lineup(plot6, 'bam-bam')">Bam-Bam Up</button>
+<button onclick="linedown(plot6, 'bam-bam')">Bam-Bam Down</button>
+</div>
+
+<pre class="code"></pre>
+
+  </body>
+</html>

examples/bandedLine.html

+<!DOCTYPE html>
+<html>
+ <head>
+     
+  <link rel="stylesheet" type="text/css" href="examples.css" />
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
+    <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
+    <script src="../src/jquery.js" type="text/javascript"></script>
+    <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
+
+    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
+    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
+    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pointLabels.js"></script>
+    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
+
+ <style type="text/css">
+    .jqplot-target {
+        margin-bottom: 50px;
+    }
+    
+    pre.code {
+        background: #D8F4DC;
+        border: 1px solid rgb(200, 200, 200);
+        padding-top: 1em;
+        padding-left: 3em;
+        padding-bottom: 1em;
+        margin-top: 1em;
+        margin-bottom: 70px;
+        
+    }
+    
+    p {
+        margin: 2em 0;
+    }
+    
+    .note {
+        font-size: 0.8em;
+    }
+
+    .jqplot-breakTick {
+        
+    }
+  </style>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    // Band data in arrays of [x,y] values.
+    bdat = [[['7/1/2011', 8], ['7/2/2011', 9], ['7/3/2011', 8], ['7/4/2011', 13], ['7/5/2011', 11], ['7/6/2011', 13]], 
+    [['7/1/2011', 12], ['7/2/2011', 13], ['7/3/2011', 12], ['7/4/2011', 17], ['7/5/2011', 15], ['7/6/2011', 17]]];
+    
+    dat = [['7/1/2011', 10], ['7/2/2011', 11], ['7/3/2011', 10], ['7/4/2011', 15], ['7/5/2011', 13], ['7/6/2011', 15]];
+
+    plot01 = $.jqplot('chart01', [dat], $.extend(true, {}, myTheme, {
+        series: [{
+            rendererOptions: {
+                bandData: bdat
+            }
+        }],
+        axes: {
+            xaxis: {
+                renderer: $.jqplot.DateAxisRenderer,
+                min: '7/1/2011',
+                max: '7/6/2011',
+                tickInterval: '1 day'
+            }
+        }
+    }));
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    // Band data in arrays of [x,y] values.
+    // Here the low band line (1st array) has 5 points and the hi band line has 4 points.
+    bdat = [[['7/1/2011', 9], ['7/3/2011', 7], ['7/4/2011', 13], ['7/5/2011', 11], ['7/6/2011', 13]], 
+    [['7/1/2011', 12], ['7/3/2011', 14], ['7/4/2011', 18], ['7/6/2011', 16]]];
+    
+    dat = [['7/1/2011', 10], ['7/2/2011', 11], ['7/3/2011', 10], ['7/4/2011', 15], ['7/5/2011', 13], ['7/6/2011', 15]];
+
+    plot02 = $.jqplot('chart02', [dat], $.extend(true, {}, myTheme, {
+        series: [{
+            rendererOptions: {
+                bandData: bdat,
+
+                // turn on smoothing
+                smooth: true
+            }
+        }],
+        axes: {
+            xaxis: {
+                renderer: $.jqplot.DateAxisRenderer,
+                min: '7/1/2011',
+                max: '7/6/2011',
+                tickInterval: '1 day'
+            }
+        }
+    }));
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    // data points for line.
+    dat = [[0, 10], [1, 11], [2, 10], [3, 15], [4, 13], [5, 15]];
+
+    // band data in [[low_y_1, hi_y_1], [low_y_2, hi_y_2],...] format
+    bdat = [[7, 13], [8, 14], [7, 13], [12, 18], [10, 16], [12, 18]];
+
+    plot1 = $.jqplot('chart1', [dat], $.extend(true, {}, myTheme, {
+        series: [{
+            rendererOptions: {
+                // Set the band data on the series.
+                // Bands will be turned on automatically if
+                // valid band data is present.
+                bandData: bdat,
+                smooth: true
+            }
+        }]
+    }));
+});
+
+</script>
+
+
+<script class="code" type="text/javascript">
+
+$(document).ready(function(){
+    // here band data specified as an array of [low y values] and [hi y values]
+    bdat = [[7, 8, 7, 12, 10, 12], [13, 14, 13, 18, 16, 18]];
+
+    // Same plot as before with different band data specification and smoothed lines.
+    plot2 = $.jqplot('chart2', [dat], $.extend(true, {}, myTheme, {
+        series: [
+        {
+            rendererOptions: {
+                bandData: bdat,
+                smooth: true
+            }
+        }]
+    }));
+});
+
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    plot3 = $.jqplot('chart3', [dat], $.extend(true, {}, myTheme, {
+        series: [{
+            rendererOptions: {
+                bands: {
+                    // draw bands at 1.7 "units" above and below line.
+                    interval: 1.7
+                },
+                smooth: true
+            }
+        }]
+    }));
+});
+
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    plot4 = $.jqplot('chart4', [dat], $.extend(true, {}, myTheme, {
+        series: [{
+            rendererOptions: {
+                bands: {
+                    // draw interval at 10% above and below line.
+                    interval: '10%'
+                },
+                smooth: true
+            }
+        }]
+    }));
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    plot5 = $.jqplot('chart5', [dat], $.extend(true, {}, myTheme, {
+        series: [{
+            rendererOptions: {
+                bands: {
+                    // draw interval at 3 units above and 10% below line.
+                    interval: [3, '-10%']
+                },
+                smooth: true
+            }
+        }]
+    }));
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    plot6 = $.jqplot('chart6', [dat], $.extend(true, {}, myTheme, {
+        series: [{
+            rendererOptions: {
+                bands: {
+                    // draw interval at 3 units above and 10% below line.
+                    interval: 4,
+                    fillColor: 'rgba(198, 88, 88, 0.6)',
+                    showLines: true
+                },
+
+                // highlight the band on mouse down, not on mouse over.
+                highlightMouseDown: true,
+                smooth: true
+            }
+        }]
+    }));
+});
+</script>
+
+
+
+<script type="text/javascript" src="example.js"></script>
+
+<script class="code" type="text/javascript">
+///////
+// A default set of reusable plot options.  Note that line
+// smoothing is turned on.  Bands will be drawn with the same 
+// smoothing as the line.
+//////
+myTheme = {
+  grid: {
+      drawBorder: false,
+      shadow: false,
+      background: 'rgba(255, 255, 255, 0.0)'
+  },
+  seriesDefaults: {
+    shadow: false,
+    showMarker: false
+  },
+  axes: {
+      xaxis: {
+          pad: 1.0,
+          tickOptions: {
+              showGridline: false
+          }
+      },
+      yaxis: {
+          pad: 1.05
+      }
+  }
+};
+</script>
+
+ </head>
+ <body>
+<?php include "nav.inc"; ?>
+
+<p>Bands (like confidence intervals or error bands) can be added to line charts through the "bands" option of the line renderer.  The band data can be automatically computed or manually assigned.  If assigned manually, the simpliest approach is to set the "rendererOptions: { bandData: [] }" array on the series.  Note that band data is taken into account when axes scale themselves so bands will not get clipped.</p>
+
+
+<p>Band data can be supplied as arrays of [x,y] values.  One array for the upper band line and one for the lower band line.</p>
+
+ <div id="chart01" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+
+
+<p>The number of points in the band data arrays does not have to correspond to the number of points in the data series.  Also, band data will be drawn as smoothed lines if the data series is smoothed.</p>
+
+ <div id="chart02" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+
+<p>In this example, band data is supplied as an array of arrays of y values for the low and hi bands.  X values for the bands are taken from the x values of the series.  The band data is of the form:  [ [y low 1, y hi 1], [y low 2, y hi 2], ... ] and there must be a corresponding array of low/hi y values for each x value in the data series.</p>
+
+ <div id="chart1" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+
+<p>The band data can also be supplied as an array of [low y values], [hi y values].  In this case there must also be an equal number of low y values and hi y values as there are data points in the series.  X values for the low and hi bands will be taken from the series data.  Additionally, the order of low/hi values does not matter as long as they are consistent.  jqPlot will figure out which is the low values and which are the high values.</p>
+
+ <div id="chart2" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+
+<p>Band data does not have to be provided.  By default, jqPlot will compute +/- 3% band intervals if the "rendererOptions: { bands: { show: true } }" option is set.  The band intervals can be customized as well through the "rendererOptions: { bands: { interval: [number|string|arry] } }" option.  Valid intervals are:</p>
+
+<ul>
+<li> '1.7' - will add bands at y +/- 1.7 above and below the line.</li>
+<li> '10%' - will compute +/- 10% interval bands.</li>
+<li> [3, '-10%'] - will add bands at y + 3 and y - 10% above and below the line.</li>
+</ul>
+
+<p>Examples of such interval specifications are shown below:</p>
+
+ <div id="chart3" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+ <div id="chart4" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+
+ <div id="chart5" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+    
+<p>You can also customize the fill color of the bands and turn on/off band lines.  By default, bands respond to the mouse over event, but they can be set to respond to mouse down as well.</p>
+ <div id="chart6" style="height:300px; width:600px;"></div>
+    <pre class="code"></pre>
+
+<p>Note, the plots on this page all extend the following pre-defined theme:</p>
+
+    <pre class="code"></pre>
+
+ </body>
+ </html>

examples/barLinePieStack.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/barMissingValues.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
       font-size: 0.85em;
     }
   </style>
-  <script type="text/javascript" language="javascript">
-  
+  <script class="code" type="text/javascript" language="javascript">
   $(document).ready(function(){
       $.jqplot.config.enablePlugins = true;
 
     legend: {show:true, location: 'nw'},
     axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer, rendererOptions:{sortMergedLabels:true}}, yaxis:{min:0, max:20, numberTicks:6}}
     });
+  });
+  </script>
 
-
+  <script class="code" type="text/javascript" language="javascript">
+  $(document).ready(function(){
 s1 = [4, 3, 9, 16, 12, 8];
 s2 = [null, null, null, 3, 7, 6];
 
 
   });
   </script>
+
+<script type="text/javascript" src="example.js"></script>
+
   </head>
   <body>
 <?php include "nav.inc"; ?>

examples/barTest.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
 
   
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pointLabels.js"></script>
   <!-- END: load jqplot -->
 
   </style>
   
   <script class="code" type="text/javascript">$(document).ready(function(){
+        $.jqplot.config.enablePlugins = true;
         var s1 = [2, 6, 7, 10];
         var ticks = ['a', 'b', 'c', 'd'];
         
 					pointLabels: { show: true }
 			},
 			axes: {
+                // yaxis: { autoscale: true },
 				xaxis: {
 					renderer: $.jqplot.CategoryAxisRenderer,
 					ticks: ticks
 		});
 	});</script> 
 
-  
-    <script type="text/javascript">    
-        $(document).ready(function(){
-            $('script.code').each(function(index) {
-                $('pre.code').eq(index).text($(this).html());
-            });
-            $('script.common').each(function(index) {
-                $('pre.common').eq(index).html($(this).html());
-            });
-            $(document).unload(function() {$('*').unbind(); });
-        });
-    </script> 
+<script type="text/javascript" src="example.js"></script>
     
   </head>
   <body>

examples/barTest2.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
   <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
   <!-- END: load jqplot -->
 
   <style type="text/css">
   });
   </script>
   
-    <script type="text/javascript">    
-        $(document).ready(function(){
-            $('script.code').each(function(index) {
-                $('pre.code').eq(index).text($(this).html());
-            });
-            $('script.common').each(function(index) {
-                $('pre.common').eq(index).html($(this).html());
-            });
-            $(document).unload(function() {$('*').unbind(); });
-        });
-    </script> 
+  <script class="code" type="text/javascript">
+  $(document).ready(function(){
+    var s1 = [[2006, 850], [2007, 960], [2008, 700], [2009, 600], [2010, 700], [2011, 900]];
+
+    plot2 = $.jqplot('chart2', [s1], {
+      cursor: {
+        show: true,
+        zoom: true
+      },
+      seriesDefaults:{
+        renderer:$.jqplot.BarRenderer,
+        rendererOptions: {fillToZero: true}
+      },
+      series:[
+        {label:'Hotel'},
+        {label:'Event Regristration'},
+        {label:'Airfare'}
+      ],
+      legend: {
+        show: true,
+        placement: 'outsideGrid'
+      },
+      axes: {
+        xaxis: {
+          renderer: $.jqplot.CategoryAxisRenderer
+        },
+        yaxis: {
+          autoscale: true,
+          tickOptions: {formatString: '$%d'}
+        }
+      }
+    });
+  });
+  </script>
+
+<script type="text/javascript" src="example.js"></script> 
     
   </head>
   <body>
 <?php include "nav.inc"; ?>
         
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
-    <pre class="code"></pre>
+    <div id="chart2" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
 
   </body>
 </html>

examples/bezierCurve.html

   
   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
 
   <!-- END: load jquery -->
   

examples/blockPlot.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/breakOnNull.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/bubbleChart2.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
     [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];
     
     plot2 = $.jqplot('chart2',[arr],{
-        title: 'Bubble Gradient Fills<sup>*</sup>',
+        title: 'Bubble Gradient Fills*',
         seriesDefaults:{
             renderer: $.jqplot.BubbleRenderer,
             rendererOptions: {
 });</script>
 
 
-<script type="text/javascript">
-    $(document).ready(function(){
-        
-        $('script.code').each(function(index) {
-            $('pre.code').eq(index).text($(this).html());
-        })
-        $(document).unload(function() {$('*').unbind(); });
-    });
-</script> 
+<script type="text/javascript" src="example.js"></script>
 
   </head>
   <body>

examples/bubblechart.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/candlestickCanvasOverlay.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/canvasOverlay.html

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <!-- Use Compatibility mode in IE -->
   <title>Bar Charts</title>
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
   
   <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
   <link rel="stylesheet" type="text/css" href="../examples/examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
         font-size: 0.8em;
     }
 
-	.jqplot-breakTick {
-		
-	}
+    .jqplot-breakTick {
+        
+    }
   </style>
   
   <script class="code" type="text/javascript">
-    $(document).ready(function(){
-        var s1 = [[2009, 3.5], [2010, 4.4], [2011, 6.0], [2012, 9.1], [2013, 12.0], [2014, 14.4]];
-		
-		var grid = {
-			gridLineWidth: 1.5,
-			gridLineColor: 'rgb(235,235,235)',
-			drawGridlines: true
-		};
-        
-        plot1 = $.jqplot('chart1', [s1], {
-            series:[{
-                renderer:$.jqplot.BarRenderer,
-				rendererOptions: {
-					barWidth: 30
-				}
-            }],
-            axes: {
-                xaxis: {
-                    renderer: $.jqplot.CategoryAxisRenderer
-                },
-				yaxis: {
-					min: 0, 
-					max: 16,
-					tickInterval: 4
-				}
-            },
-			grid: grid,
-			canvasOverlay: {
-				show: true,
-				objects: [
-					{horizontalLine: {
-						name: 'barney',
-						y: 14,
-						lineWidth: 6,
-						color: 'rgb(100, 55, 124)',
-						shadow: false
-					}},
-					{horizontalLine: {
-						name: 'fred',
-						y: 10,
-						lineWidth: 12,
-						xminOffset: '8px',
-						xmaxOffset: '29px',
-						color: 'rgb(50, 55, 30)',
-						shadow: false
-					}},
-					{horizontalLine: {
-						name: 'wilma',
-						y: 7,
-						lineWidth: 2,
-						xOffset: '54',
-						color: 'rgb(133, 120, 24)',
-						shadow: false
-					}},
-					{horizontalLine: {
-						name: 'pebbles',
-						y: 1,
-						lineWidth: 3,
-						color: 'rgb(89, 198, 154)',
-						shadow: false
-					}},
-					{horizontalLine: {
-						name: 'bam-bam',
-						y: 3,
-						lineWidth: 1,
-						color: 'rgb(66, 98, 144)',
-						shadow: false
-					}}
-				]
-			}
-        });
-		
+$(document).ready(function(){
+    var s1 = [[2009, 3.5], [2010, 4.4], [2011, 6.0], [2012, 9.1], [2013, 12.0], [2014, 14.4]];
+    
+    var grid = {
+        gridLineWidth: 1.5,
+        gridLineColor: 'rgb(235,235,235)',
+        drawGridlines: true
+    };
+    
+    plot1 = $.jqplot('chart1', [s1], {
+        series:[{
+            renderer:$.jqplot.BarRenderer,
+            rendererOptions: {
+                barWidth: 30
+            }
+        }],
+        axes: {
+            xaxis: {
+                renderer: $.jqplot.CategoryAxisRenderer
+            }
+        },
+        grid: grid,
+        canvasOverlay: {
+            show: true,
+            objects: [
+                {horizontalLine: {
+                    name: 'barney',
+                    y: 4,
+                    lineWidth: 6,
+                    color: 'rgb(100, 55, 124)',
+                    shadow: false
+                }},
+                {horizontalLine: {
+                    name: 'fred',
+                    y: 6,
+                    lineWidth: 12,
+                    xminOffset: '8px',
+                    xmaxOffset: '29px',
+                    color: 'rgb(50, 55, 30)',
+                    shadow: false
+                }},
+                {dashedHorizontalLine: {
+                    name: 'wilma',
+                    y: 8,
+                    lineWidth: 2,
+                    xOffset: '54',
+                    color: 'rgb(133, 120, 24)',
+                    shadow: false
+                }},
+                {horizontalLine: {
+                    name: 'pebbles',
+                    y: 10,
+                    lineWidth: 3,
+                    xOffset: 0,
+                    color: 'rgb(89, 198, 154)',
+                    shadow: false
+                }},
+                {dashedHorizontalLine: {
+                    name: 'bam-bam',
+                    y: 14,
+                    lineWidth: 5,
+                    dashPattern: [16, 12],
+                    lineCap: 'round',
+                    xOffset: '20',
+                    color: 'rgb(66, 98, 144)',
+                    shadow: false
+                }}
+            ]
+        }
     });
-	
-	function lineup() {
-		var co = plot1.plugins.canvasOverlay;
-		var line = co.get('barney');
-		line.options.y += 0.5;
-		if (line.options.y >= plot1.axes.yaxis.max) {
-			var newmax = plot1.axes.yaxis.max + 4;
-			plot1.replot({resetAxes:['yaxis'], axes:{yaxis:{max:newmax}}});
-		}
-		else {
-			co.draw(plot1);
-		}
-	}
-	
-	function linedown() {
-		var co = plot1.plugins.canvasOverlay;
-		var line = co.get('barney');
-		line.options.y -= 0.5;
-		co.draw(plot1);
-	}
-	
-	
-  </script>
+});
+
+function lineup() {
+    var co = plot1.plugins.canvasOverlay;
+    var line = co.get('fred');
+    line.options.y += 1;
+    co.draw(plot1);
+}
+
+function linedown() {
+    var co = plot1.plugins.canvasOverlay;
+    var line = co.get('fred');
+    line.options.y -= 1;
+    co.draw(plot1);
+}
+
+    </script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    var s2 = [[9, 3.5], [15, 4.4], [22, 6.0], [38, 9.1], [51, 12.0], [62, 14.4]];
+    
+    var grid = {
+        gridLineWidth: 1.5,
+        gridLineColor: 'rgb(235,235,235)',
+        drawGridlines: true
+    };
+    
+    plot2 = $.jqplot('chart2', [s2], {
+        grid: grid,
+        canvasOverlay: {
+            show: true,
+            objects: [
+                {verticalLine: {
+                    name: 'barney',
+                    x: 10,
+                    lineWidth: 6,
+                    color: 'rgb(100, 55, 124)',
+                    shadow: false
+                }},
+                {verticalLine: {
+                    name: 'fred',
+                    x: 15,
+                    lineWidth: 12,
+                    yminOffset: '8px',
+                    ymaxOffset: '29px',
+                    color: 'rgb(50, 55, 30)',
+                    shadow: false
+                }},
+                {dashedVerticalLine: {
+                    name: 'wilma',
+                    x: 20,
+                    lineWidth: 2,
+                    yOffset: '14',
+                    color: 'rgb(133, 120, 24)',
+                    shadow: false
+                }},
+                {verticalLine: {
+                    name: 'pebbles',
+                    x: 35,
+                    lineWidth: 3,
+                    yOffset: 0,
+                    lineCap: 'butt',
+                    color: 'rgb(89, 198, 154)',
+                    shadow: false
+                }},
+                {dashedVerticalLine: {
+                    name: 'bam-bam',
+                    x: 45,
+                    lineWidth: 5,
+                    dashPattern: [16, 12],
+                    lineCap: 'round',
+                    yOffset: '20px',
+                    color: 'rgb(66, 98, 144)',
+                    shadow: false
+                }}
+            ]
+        }
+    });
+    
+});
+
+
+</script>
+
+<script type="text/javascript" src="example.js"></script>
     
   </head>
   <body>
 <?php include "nav.inc"; ?>
         
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
-	<button onclick="lineup()">Up</button>
-	<button onclick="linedown()">Down</button>
+    <button onclick="lineup()">Up</button>
+    <button onclick="linedown()">Down</button>
+
+    <pre class="code"></pre>
+
+    <div id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
+    <pre class="code"></pre>
 
 
   </body>

examples/catchError.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/categoryHorizontalBar.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
 		
 		<!-- BEGIN: load jquery -->
-		<script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+		<script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
 		<!-- END: load jquery -->
 		
 		<!-- BEGIN: load jqplot -->

examples/categoryVsLinearAxes.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/chartInTable.html

 <!DOCTYPE html>
 <html>
 <head>
-  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.min.js"></script><![endif]-->
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
     <script language="javascript" type="text/javascript" src="../src/excanvas.js"></script>
-    <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+    <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
     <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
     <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
   <link rel="stylesheet" type="text/css" href="examples.css" />

examples/ciParser.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
               max: '2010/09/09'
           }
       },
-      series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
+      series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
     });
 });</script>
 
               max: '2010/09/09'
           }
       },
-      series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
+      series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
     });
 });</script>
   

examples/customHighlighterCursorTrendline.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.trendline.js"></script>
   <!-- END: load jqplot -->
 
+
+  
+  <script class="code" type="text/javascript">
+
+    $(document).ready(function () {
+
+      $.jqplot.config.enablePlugins = true;
+
+      s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08', 6]];
+
+      plot1 = $.jqplot('test',[s1],{
+         title: 'Highlighting, Dragging, Cursor and Trend Line',
+         axes: {
+             xaxis: {
+                 renderer: $.jqplot.DateAxisRenderer,
+                 tickOptions: {
+                     formatString: '%#m/%#d/%y'
+                 },
+                 numberTicks: 4
+             },
+             yaxis: {
+                 tickOptions: {
+                     formatString: '$%.2f'
+                 }
+             }
+         },
+         highlighter: {
+             sizeAdjust: 10,
+             tooltipLocation: 'n',
+             tooltipAxes: 'y',
+             tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
+             useAxesFormatters: false
+         },
+         cursor: {
+             show: true
+         }
+      });
+    });
+</script>
+
+<script type="text/javascript" src="example.js"></script>
+
   </head>
   <body>
 <?php include "nav.inc"; ?>
 <div id="test" class="plot" style="width:500px;height:300px;"></div>
-<script language="javascript" type="text/javascript"><!--
-
-    $.jqplot.config.enablePlugins = true;
-    
-   s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08',
-6]];
-
-
-   plot1 = $.jqplot('test',[s1],{
-       title: 'Highlighting, Dragging, Cursor and Trend Line',
-       axes: {
-           xaxis: {
-               renderer: $.jqplot.DateAxisRenderer,
-               tickOptions: {
-                   formatString: '%b %#d, %Y'
-               },
-               numberTicks: 4
-           },
-           yaxis: {
-               tickOptions: {
-                   formatString: '$%.2f'
-               }
-           }
-       },
-       highlighter: {
-           sizeAdjust: 10,
-           tooltipLocation: 'n',
-           tooltipAxes: 'y',
-           tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
-           useAxesFormatters: false
-       },
-       cursor: {
-           show: true
-       }
-   });
---></script>
 
   </body>
 </html>

examples/customPieTests.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->

examples/dashedLines.html

+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <!-- Use Compatibility mode in IE -->
+  <title>Bar Charts</title>
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
+  
+  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
+  <link rel="stylesheet" type="text/css" href="../examples/examples.css" />
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
+  <!-- END: load jqplot -->
+
+  <style type="text/css">
+    .jqplot-target {
+        margin-bottom: 2em;
+    }
+    
+    pre {
+        background: #D8F4DC;
+        border: 1px solid rgb(200, 200, 200);
+        padding-top: 1em;
+        padding-left: 3em;
+        padding-bottom: 1em;
+        margin-top: 1em;
+        margin-bottom: 4em;
+        
+    }
+    
+    p {
+        margin: 2em 0;
+    }
+    
+    .note {
+        font-size: 0.8em;
+    }
+
+    .jqplot-breakTick {
+        
+    }
+  </style>
+  
+  <script class="code" type="text/javascript">
+
+    $(document).ready(function () {
+      s1 = [[0, 2], [1, 6], [2, 7], [3, 10]];
+
+      // Lines can be drawn as solid, dashed or dotted with the "linePattern" option.
+      // The default is "solid".  Other basic options are "dashed" and "dotted".
+
+      plot1 = $.jqplot("chart1", [s1], {
+        seriesDefaults:{
+            linePattern: 'dashed',
+            showMarker: false,
+            shadow: false
+        }
+      });
+    });
+</script>
+  
+  <script class="code" type="text/javascript">
+
+    $(document).ready(function () {
+
+      s1 = [[0, 2], [1, 6], [2, 7], [3, 10]];
+
+      // Size of the dashes is proportional to the width of the line.
+
+      plot1b = $.jqplot("chart1b", [s1], {
+        seriesDefaults:{
+            linePattern: 'dashed',
+            lineWidth: 7,
+            showMarker: false,
+            shadow: false
+        }
+      });
+    });