Chris Leonello avatar Chris Leonello committed e362adf

Massive reorg of examples. No code changes.
Slimmed down number of examples and renamed some of them.
Attempt to not track examples that are hacks, tests and experiments
but keep a wide variety of useful examples to demonstrate
functionality.

Comments (0)

Files changed (89)

examples/KCPsample4.csv

+Product or service,v01,v02,v03,v04,v05,v06,v07,v08,v09,v10,v11,v12,v13,v14,v15,v16,v17,v18,v19,v20
+Rice,15.8442,13.0993,11.2898,10.7892,10.252,9.0165,8.5287,7.7442,6.9867,6.5213,5.9473,5.4766,4.9214,4.6398,3.8935,3.5228,3.0128,2.4847,2.0357,1.0672
+Bread and other cereals,1.7703,2.2535,2.2753,2.7927,2.2509,2.4341,2.5518,2.5547,2.4204,2.4186,2.4261,2.2927,2.4386,2.2295,2.2203,1.915,1.8791,1.7941,1.6567,0.9296
+Meat,8.3728,8.1221,8.3989,7.9758,8.8246,8.2377,8.432,7.8466,7.5343,7.1171,6.9801,6.9349,5.8307,5.7089,4.927,4.2237,3.6872,3.1429,2.581,1.3766
+Fish and seafood,9.1249,8.7326,7.6122,7.8577,7.1625,6.8527,6.5158,6.1715,6.1298,5.8702,5.3456,4.9906,4.4424,4.3022,3.5298,3.405,2.9977,2.4159,2.0832,1.1499
+Fruits and vegetables,8.0508,7.7875,7.6534,7.4448,7.3702,7.4188,7.3882,7.1647,6.9617,6.6576,6.6077,6.4823,5.9117,5.8149,5.505,5.5355,5.0907,4.569,4.3049,2.6325
+Other food products,10.4408,9.8278,9.9293,9.5176,9.6658,9.2359,9.2842,8.6497,8.7656,8.2962,8.155,7.7294,7.3674,6.9888,6.2995,5.7314,5.2703,4.6947,3.9614,2.2509
+Catering services,4.1883,4.7514,5.3198,5.8819,5.1732,5.5764,6.1713,6.7915,6.8511,7.2681,7.1461,8.109,9.2649,9.5322,11.2138,12.8299,12.9621,13.8936,13.7828,10.0525
+Non-alcoholic beverages,0.6641,0.8454,0.9018,1.0461,1.0113,1.235,1.279,1.3049,1.5024,1.4471,1.5358,1.5796,1.6471,1.6443,1.6562,1.6763,1.6097,1.5039,1.3752,0.864
+Alcoholic beverages,0.5221,0.6997,0.8513,0.8849,0.9168,0.9099,0.8339,0.9921,1.1169,1.1764,1.1936,1.1415,1.1181,1.2889,1.1378,1.023,1.1283,1.0417,0.9839,0.587
+Tobacco and narcotics,1.0969,1.188,1.0713,1.2803,1.1787,1.148,1.3229,1.1726,1.3764,1.3887,1.4011,1.3034,1.4368,1.5017,1.4899,1.4123,1.3168,1.1407,0.8458,0.38
+Clothing and footwear,2.275,2.5511,3.1025,2.9834,3.2857,3.7625,3.1928,3.7071,4.0364,3.629,3.9258,3.2208,3.7113,3.3166,3.4775,3.429,3.6121,3.4569,3.8416,4.1323
+Rentals (actual or imputed) and maintenance and repair of the dwelling,16.0654,15.719,16.3773,16.0175,15.8853,16.132,16.1309,16.3491,15.8512,16.4743,16.2862,15.7327,16.2793,16.6329,17.4903,17.4425,17.3413,18.3527,18.5029,15.2763
+Water supply and miscellaneous services related to the dwelling,1.1145,1.176,1.1183,1.0411,1.0058,1.0796,1.0321,1.0714,1.1117,1.0278,1.136,1.1397,1.1556,1.2206,1.2871,1.2361,1.2111,1.2312,1.1545,0.7881
+Electricity gas and other fuels,4.5928,4.7558,4.8855,4.4684,4.6677,4.6038,4.7789,4.6098,4.4171,4.5078,4.4137,4.4645,4.2693,4.2836,4.1709,4.159,3.8423,3.9957,3.6816,2.5785
+Furnishing household equipment and routine household maintenance,2.1027,2.1576,2.0721,2.0623,2.3498,2.2573,2.2866,2.3766,2.2488,2.3665,2.3445,2.2474,2.3345,2.2479,2.158,2.355,2.0744,2.2269,3.0474,3.8925
+Health,1.2709,1.6007,1.3996,1.612,1.4649,1.5875,1.7056,1.7315,1.7378,2.0401,2.3265,2.1096,2.0513,2.1548,2.0634,2.2206,1.8427,2.4817,2.3066,2.1685
+Transport,4.6414,5.6167,5.9571,6.5372,7.0242,7.6332,7.9823,8.3906,9.112,9.6872,10.2014,11.0074,11.375,11.6753,12.0489,12.0692,13.2962,13.2183,14.6559,32.0912
+Communication,0.2334,0.3642,0.5267,0.5911,0.8888,1.1633,1.0997,1.76,1.9811,2.1708,2.931,3.2634,3.6254,4.107,4.6944,5.0941,5.9984,6.2419,6.6059,5.8353
+Recreation and culture,2.2553,2.8903,2.9564,3.2839,3.4822,3.255,3.1666,3.4245,3.4066,3.8536,3.6333,4.0331,4.4847,4.3552,4.2768,4.1439,4.7196,4.6585,4.4286,3.921
+Education,0.3437,0.3282,0.4805,0.3881,0.4796,0.9766,0.6589,0.6443,1.0423,0.7941,1.064,1.5504,1.3977,1.5226,1.8344,1.9186,2.3022,2.8188,2.8424,2.7792
+Personal care,3.4466,3.5641,3.5711,3.4219,3.2835,3.3569,3.3416,3.4544,3.3675,3.2806,3.118,3.1881,3.2252,3.0588,3.0051,2.9868,3.0361,2.8972,2.9611,2.2867
+Other miscellaneous goods and services,1.5831,1.9691,2.2498,2.122,2.3766,2.1273,2.3165,2.0884,2.0421,2.0067,1.8809,2.0027,1.7115,1.7734,1.6204,1.6702,1.769,1.7391,2.3607,2.9604
+Food and non-alcoholic beverages,58.4561,55.4196,53.3806,53.3059,51.7105,50.007,50.1509,48.2276,47.1521,45.5962,44.1436,43.5952,41.8242,40.8606,39.2451,38.8396,36.5095,34.4988,31.7809,20.3231
+Non food,41.5439,44.5804,46.6194,46.6941,48.2895,49.993,49.8491,51.7724,52.8479,54.4038,55.8564,56.4048,58.1758,59.1394,60.7549,61.1604,63.4905,65.5012,68.2191,79.6769

examples/OHLC.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>OHLC 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.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.dateAxisRenderer.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.ohlcRenderer.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>
-
-
-  <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;
-    }
-  </style>
-
-  <!-- END: load jqplot -->
-    
-<script class="common" type="text/javascript">
-    $.jqplot.config.enablePlugins = true;
-    
-    ohlc = [['07/06/2009', 138.7, 139.68, 135.18, 135.4],
-    ['06/29/2009', 143.46, 144.66, 139.79, 140.02],
-    ['06/22/2009', 140.67, 143.56, 132.88, 142.44],
-    ['06/15/2009', 136.01, 139.5, 134.53, 139.48],
-    ['06/08/2009', 143.82, 144.56, 136.04, 136.97],
-    ['06/01/2009', 136.47, 146.4, 136, 144.67],
-    ['05/26/2009', 124.76, 135.9, 124.55, 135.81],
-    ['05/18/2009', 123.73, 129.31, 121.57, 122.5],
-    ['05/11/2009', 127.37, 130.96, 119.38, 122.42],
-    ['05/04/2009', 128.24, 133.5, 126.26, 129.19],
-    ['04/27/2009', 122.9, 127.95, 122.66, 127.24],
-    ['04/20/2009', 121.73, 127.2, 118.6, 123.9],
-    ['04/13/2009', 120.01, 124.25, 115.76, 123.42],
-    ['04/06/2009', 114.94, 120, 113.28, 119.57],
-    ['03/30/2009', 104.51, 116.13, 102.61, 115.99],
-    ['03/23/2009', 102.71, 109.98, 101.75, 106.85],
-    ['03/16/2009', 96.53, 103.48, 94.18, 101.59],
-    ['03/09/2009', 84.18, 97.2, 82.57, 95.93],
-    ['03/02/2009', 88.12, 92.77, 82.33, 85.3],
-    ['02/23/2009', 91.65, 92.92, 86.51, 89.31],
-    ['02/17/2009', 96.87, 97.04, 89, 91.2],
-    ['02/09/2009', 100, 103, 95.77, 99.16],
-    ['02/02/2009', 89.1, 100, 88.9, 99.72],
-    ['01/26/2009', 88.86, 95, 88.3, 90.13],
-    ['01/20/2009', 81.93, 90, 78.2, 88.36],
-    ['01/12/2009', 90.46, 90.99, 80.05, 82.33],
-    ['01/05/2009', 93.17, 97.17, 90.04, 90.58],
-    ['12/29/2008', 86.52, 91.04, 84.72, 90.75],
-    ['12/22/2008', 90.02, 90.03, 84.55, 85.81],
-    ['12/15/2008', 95.99, 96.48, 88.02, 90],
-    ['12/08/2008', 97.28, 103.6, 92.53, 98.27],
-    ['12/01/2008', 91.3, 96.23, 86.5, 94],
-    ['11/24/2008', 85.21, 95.25, 84.84, 92.67],
-    ['11/17/2008', 88.48, 91.58, 79.14, 82.58],    
-    ['11/10/2008', 100.17, 100.4, 86.02, 90.24],
-    ['11/03/2008', 105.93, 111.79, 95.72, 98.24],
-    ['10/27/2008', 95.07, 112.19, 91.86, 107.59],
-    ['10/20/2008', 99.78, 101.25, 90.11, 96.38],
-    ['10/13/2008', 104.55, 116.4, 85.89, 97.4],
-    ['10/06/2008', 91.96, 101.5, 85, 96.8],
-    ['09/29/2008', 119.62, 119.68, 94.65, 97.07],
-    ['09/22/2008', 139.94, 140.25, 123, 128.24],
-    ['09/15/2008', 142.03, 147.69, 120.68, 140.91],
-    ['09/08/2008', 164.57, 164.89, 146, 148.94]
-    ];
-    
-    ohlc_b = [['07/06/2009', 138.7, 139.68, 135.18, 135.4, 'j'],
-    ['06/29/2009', 143.46, 144.66, 139.79, 140.02, 'q'],
-    ['06/22/2009', 140.67, 143.56, 132.88, 142.44, 'p'],
-    ['06/15/2009', 136.01, 139.5, 134.53, 139.48, 'l'],
-    ['06/08/2009', 143.82, 144.56, 136.04, 136.97, 'o'],
-    ['06/01/2009', 136.47, 146.4, 136, 144.67, 't'],
-    ['05/26/2009', 124.76, 135.9, 124.55, 135.81, '_'],
-    ['05/18/2009', 123.73, 129.31, 121.57, 122.5, 'c'],
-    ['05/11/2009', 127.37, 130.96, 119.38, 122.42, 'h'],
-    ['05/04/2009', 128.24, 133.5, 126.26, 129.19, 'a'],
-    ['04/27/2009', 122.9, 127.95, 122.66, 127.24, 'r'],
-    ['04/20/2009', 121.73, 127.2, 118.6, 123.9, 't'],
-    ['04/13/2009', 120.01, 124.25, 115.76, 123.42, 's']
-    ];     
-    
-    hlc = [['07/06/2009', 139.68, 135.18, 135.4],
-    ['06/29/2009', 144.66, 139.79, 140.02],
-    ['06/22/2009', 143.56, 132.88, 142.44],
-    ['06/15/2009', 139.5, 134.53, 139.48],
-    ['06/08/2009', 144.56, 136.04, 136.97],
-    ['06/01/2009', 146.4, 136, 144.67],
-    ['05/26/2009', 135.9, 124.55, 135.81],
-    ['05/18/2009', 129.31, 121.57, 122.5],
-    ['05/11/2009', 130.96, 119.38, 122.42],
-    ['05/04/2009', 133.5, 126.26, 129.19],
-    ['04/27/2009', 127.95, 122.66, 127.24],
-    ['04/20/2009', 127.2, 118.6, 123.9],
-    ['04/13/2009', 124.25, 115.76, 123.42],
-    ['04/06/2009', 120, 113.28, 119.57],
-    ['03/30/2009', 116.13, 102.61, 115.99],
-    ['03/23/2009',  109.98, 101.75, 106.85],
-    ['03/16/2009', 103.48, 94.18, 101.59],
-    ['03/09/2009', 97.2, 82.57, 95.93],
-    ['03/02/2009', 92.77, 82.33, 85.3],
-    ['02/23/2009', 92.92, 86.51, 89.31],
-    ['02/17/2009', 97.04, 89, 91.2],
-    ['02/09/2009', 103, 95.77, 99.16],
-    ['02/02/2009', 100, 88.9, 99.72],
-    ['01/26/2009', 95, 88.3, 90.13],
-    ['01/20/2009', 90, 78.2, 88.36],
-    ['01/12/2009', 90.99, 80.05, 82.33],
-    ['01/05/2009', 97.17, 90.04, 90.58],
-    ['12/29/2008', 91.04, 84.72, 90.75],
-    ['12/22/2008', 90.03, 84.55, 85.81],
-    ['12/15/2008', 96.48, 88.02, 90],
-    ['12/08/2008', 103.6, 92.53, 98.27],
-    ['12/01/2008', 96.23, 86.5, 94],
-    ['11/24/2008', 95.25, 84.84, 92.67],
-    ['11/17/2008', 91.58, 79.14, 82.58],  
-    ['11/10/2008', 100.4, 86.02, 90.24],
-    ['11/03/2008', 111.79, 95.72, 98.24],
-    ['10/27/2008', 112.19, 91.86, 107.59],
-    ['10/20/2008', 101.25, 90.11, 96.38],
-    ['10/13/2008', 116.4, 85.89, 97.4],
-    ['10/06/2008', 101.5, 85, 96.8],
-    ['09/29/2008', 119.68, 94.65, 97.07],
-    ['09/22/2008', 140.25, 123, 128.24],
-    ['09/15/2008', 147.69, 120.68, 140.91],
-    ['09/08/2008', 164.89, 146, 148.94]
-    ];
-    
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){       
-    plot1 = $.jqplot('chart1',[ohlc],{
-      title: 'Chart',
-      axesDefaults:{},
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickOptions:{formatString:'%y.%m'}
-          },
-          yaxis: {
-              tickOptions:{formatString:'%.2f'}
-          }
-      },
-      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{}}],
-      cursor:{
-          zoom:true,
-          tooltipOffset: 10,
-          tooltipLocation: 'nw'
-      }
-    });
-});</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){  
-    plot2 = $.jqplot('chart2',[ohlc],{
-      title: 'Chart',
-      axesDefaults:{},
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickOptions:{formatString:'%y.%m'}
-          },
-          yaxis: {
-              tickOptions:{formatString:'%.2f'}
-          }
-      },
-      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
-      cursor:{
-          zoom:true,
-          tooltipOffset: 10,
-          tooltipLocation: 'nw'
-      },
-      highlighter: {
-          showMarker:false,
-          tooltipAxes: 'xy',
-          yvalues: 4,
-          formatString:'<table class="jqplot-highlighter"> \
-          <tr><td>date:</td><td>%s</td></tr> \
-          <tr><td>open:</td><td>%s</td></tr> \
-          <tr><td>hi:</td><td>%s</td></tr> \
-          <tr><td>low:</td><td>%s</td></tr> \
-          <tr><td>close:</td><td>%s</td></tr></table>'
-      }
-    });
-});</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){  
-    plot2b = $.jqplot('chart2b',[ohlc_b],{
-      title: 'Chart',
-      axesDefaults:{},
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickOptions:{formatString:'%y.%m'}
-          },
-          yaxis: {
-              tickOptions:{formatString:'%.2f'}
-          }
-      },
-      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
-      cursor:{
-          zoom:true,
-          tooltipOffset: 10,
-          tooltipLocation: 'nw'
-      },
-      highlighter: {
-          showMarker:false,
-          tooltipAxes: 'xy',
-          yvalues: 5,
-          formatString:'<table class="jqplot-highlighter"> \
-          <tr><td>date:</td><td>%s</td></tr> \
-          <tr><td>open:</td><td>%s</td></tr> \
-          <tr><td>hi:</td><td>%s</td></tr> \
-          <tr><td>low:</td><td>%s</td></tr> \
-          <tr><td>close:</td><td>%s</td></tr> \
-          <tr><td>letter:</td><td>%s</td></tr></table>'
-      }
-    });
-});</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){ 
-    plot3 = $.jqplot('chart3',[hlc],{
-      title: 'Chart',
-      axesDefaults:{},
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickOptions:{formatString:'%Y.%m'}
-          },
-          yaxis: {
-              tickOptions:{formatString:'%.2f'}
-          }
-      },
-      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{}}],
-      cursor:{
-          zoom:true,
-          tooltipOffset: 10,
-          tooltipLocation: 'nw'
-      }
-    });
-});</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){ 
-    var catOHLC = [[1, 138.7, 139.68, 135.18, 135.4],
-    [2, 143.46, 144.66, 139.79, 140.02],
-    [3, 140.67, 143.56, 132.88, 142.44],
-    [4, 136.01, 139.5, 134.53, 139.48],
-    [5, 143.82, 144.56, 136.04, 136.97],
-    [6, 136.47, 146.4, 136, 144.67],
-    [7, 124.76, 135.9, 124.55, 135.81],
-    [8, 123.73, 129.31, 121.57, 122.5]];
-    
-    var ticks = ['Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'];
-        
-    plot4 = $.jqplot('chart4',[catOHLC],{
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.CategoryAxisRenderer,
-              ticks:ticks
-          },
-          yaxis: {
-              tickOptions:{formatString:'$%.2f'}
-          }
-      },
-      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
-    });
-});</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> 
-
-  </head>
-  <body>
-    <?php include "topbanner.php"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-<div id="chart1" class="code" style="margin:20px;height:240px; width:640px;"></div>
-<pre class="code"></pre>
-<div id="chart2" class="code" style="margin:20px;height:240px; width:640px;"></div>
-<pre class="code"></pre>
-<div id="chart2b" class="code" style="margin:20px;height:240px; width:640px;"></div>
-<pre class="code"></pre>
-<div id="chart3" class="code" style="margin:20px;height:240px; width:640px;"></div>
-<pre class="code"></pre>
-<div id="chart4" class="code" style="margin:20px;height:320px; width:500px;"></div>
-<pre class="code"></pre>
-<p>The examples below use the folowing code:</p>
-<pre class="common"></pre>
-  
-  </div>
-</body>
-</html>

examples/axisLabel.html

-<!DOCTYPE html>
-<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.js"></script><![endif]-->
-  
-  <!-- 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.canvasTextRenderer.js"></script>
-	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.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.enhancedLegendRenderer.js"></script>
-	
-	<style type="text/css">
-    .jqplot-y2axis { margin-left: 4px; }
-    .jqplot { margin: 70px;}
-    table.jqplot-table-legend { border: 0px;}
-
-	</style>
-	
-
-    <script class="code" type="text/javascript" language="javascript">
-        $(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-            l1 = [[2011,1200], [2039,1200]];
-            l2 = [[2011,0], [2039,800]];
-            l3 = [[2011,0], [2039,400]];
-
-            plot1 = $.jqplot('chart1', [l1,l2,l3], {
-                grid: { 
-                    background:'#ffffff',
-                    // turn off the border.  Note, should set
-                    // borderColor as well due to way axes shares color
-                    // defaults with the grid.
-                    borderWidth:0,
-                    borderColor:'#ffffff',
-                    shadow:true,
-                    // give a wide shadow
-                    shadowWidth: 10,
-                    shadowOffset: 3,
-                    shadowDepth: 8,
-                    // use new shadowColor option to give a custom lighter color 
-                    // because the high shadowDepth will make it look too dark.
-                    shadowColor: 'rgba(230, 230, 230, 0.07)'
-                },
-                legend: {
-                    renderer: $.jqplot.EnhancedLegendRenderer,
-                    show:true,
-                    location: 's',
-                    placement:'outside',
-                    yoffset: 30,
-                    rendererOptions:{
-                        numberRows: 2
-                    }
-                },
-                stackSeries:true,
-                // use the new fillToValue option to make filled series "hover" above the x axis.
-                seriesDefaults:{fill:true, fillToZero:true, fillToValue: 100, yaxis:'y2axis'},
-                series:[{label:'oil'}, {label:'renewables'}, {label:'wind and water'}],
-                axesDefaults: {
-                    showTickMarks:false, 
-                    tickOptions: {
-                        formatString: '%d'
-                    }
-                },
-                axes:{ 
-                    xaxis: {
-                        borderWidth:2,
-                        borderColor:'#999999',
-                        ticks:[2010, 2040],
-                        tickOptions:{
-                            showGridline: false
-                        }
-                    },
-                    y2axis:{
-                        borderWidth:0,
-                        borderColor:'#ffffff',
-                        autoscale: true,
-                        min:0,
-                        max: 3000,
-                        numberTicks:4,
-                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-                        label:'energy use'
-                    },
-                    x2axis: {
-                        borderWidth:0,
-                        borderColor:'#ffffff'
-                    },
-                    yaxis: {
-                        borderWidth:2,
-                        borderColor: '#999999'
-                    }
-                }
-            });
-            
-            // Going to post process the css position of the y2axis label so it appears on the left side of the grid.
-            // Can't specify this in a css rule because jqPlot figures out the correct position of the label and then
-            // sets the style attributes on the label itself.  This will override those element style attributes.
-            // Note, this fails in IE for some reason, probably due to VML emulated canvas elements.
-            var r = plot1._width - plot1._gridPadding.left - 5;
-            r = r+'px';
-            $('.jqplot-y2axis-label').css({top:'10px', right:r});
-        });
-    </script>
-
-<script type="text/javascript" src="example.js"></script>
-
-</head>
-<body>
-    <?php include "topbanner.php"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-		<div class="jqplot" id="chart1" style="height:300px;width:400px;"></div>
- 
-
-  </div>
-</body>
-
-
-</html>

examples/axisLabelsRotatedText.html

   
   <!-- 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.logAxisRenderer.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.canvasAxisLabelRenderer.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.dateAxisRenderer.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.barRenderer.js"></script>
-	
-	<style type="text/css">
-	  .jqplot-point-label {white-space: nowrap;}
+    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.logAxisRenderer.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.canvasAxisLabelRenderer.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.dateAxisRenderer.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.barRenderer.js"></script>
+    
+    <style type="text/css">
+      .jqplot-point-label {white-space: nowrap;}
 /*    .jqplot-yaxis-label {font-size: 14pt;}*/
 /*    .jqplot-yaxis-tick {font-size: 7pt;}*/
     .jqplot { margin: 70px;}
-	</style>
-	
-	
-		<script class="code" type="text/javascript" language="javascript">
+
+    div.jqplot {
+        height: 400px;
+        width: 750px;
+    }
+    </style>
+    
+    
+        <script class="code" type="text/javascript" language="javascript">
 $(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-	line1 = [6.5, 9.2, 14, 19.65, 26.4, 35, 51];
+    var line1 = [6.5, 9.2, 14, 19.65, 26.4, 35, 51];
 
-	plot1 = $.jqplot('chart1', [line1], {
-	    legend: {show:false},
-	    axes:{
-	      xaxis:{
-          tickOptions:{
-            // formatString:'%.4f', 
+    var plot1 = $.jqplot('chart1', [line1], {
+        legend: {show:false},
+        axes:{
+          xaxis:{
+          tickOptions:{ 
             angle: -30
           },
-          // tickRenderer:$.jqplot.CanvasAxisTickRenderer,
-	        label:'Core Motor Amperage', 
+          tickRenderer:$.jqplot.CanvasAxisTickRenderer,
+            label:'Core Motor Amperage', 
           labelOptions:{
-            // fontFamily:'Helvetica',
-            fontSize: '13pt'
+            fontFamily:'Helvetica',
+            fontSize: '14pt'
           },
           labelRenderer: $.jqplot.CanvasAxisLabelRenderer
-	      }, 
-	      yaxis:{
-          renderer:$.jqplot.LogAxisRenderer,
-          tickOptions:{
-            formatString:'%.2f', 
-            labelPosition: 'middle', 
-            angle:-30
-          },
-          tickRenderer:$.jqplot.CanvasAxisTickRenderer,
-          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-          labelOptions:{
-            // fontFamily:'Helvetica',
-            fontSize: '13pt'
-          },
-	        label:'Core Motor Voltage'
-	      }
-	    }
-	});
-
-});
-</script>
-<script class="code" type="text/javascript" language="javascript">
-$(document).ready(function(){	
-      $.jqplot.config.enablePlugins = true;
-    line2 = [['1/1/2008', 42], ['2/14/2008', 56], ['3/7/2008', 39], ['4/22/2008', 81]];
-	plot2 = $.jqplot('chart2', [line2], {
-	  axes: {
-	    xaxis: {
-	      renderer: $.jqplot.DateAxisRenderer,
-	      label: 'Incliment Occurrance',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-	      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-	      tickOptions: {
-          // labelPosition: 'middle',
-          angle: 15
-	      }
-	      
-	    },
-	    yaxis: {
-	      label: 'Incliment Factor',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
-	    }
-	  }
-	});
+          }, 
+          yaxis:{
+            renderer:$.jqplot.LogAxisRenderer,
+            tickOptions:{
+                formatString:'%.2f', 
+                labelPosition: 'middle', 
+                angle:-30
+            },
+            tickRenderer:$.jqplot.CanvasAxisTickRenderer,
+            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+            labelOptions:{
+                fontFamily:'Helvetica',
+                fontSize: '14pt'
+            },
+            label:'Core Motor Voltage'
+          }
+        }
+    });
 
 });
 </script>
 <script class="code" type="text/javascript" language="javascript">
 $(document).ready(function(){   
-      $.jqplot.config.enablePlugins = true;
-line3 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp Marketing Gimmick', 9], ['HDTV Receiver', 15], ['8 Track Control Module', 12], ['SSPFM (Sealed Sludge Pump Fourier Modulator)', 3], ['Transcender/Spice Rack', 6], ['Hair Spray Rear View Mirror Danger Indicator', 18]];
+    var line2 = [['1/1/2008', 42], ['2/14/2008', 56], ['3/7/2008', 39], ['4/22/2008', 81]];
 
-	plot3 = $.jqplot('chart3', [line3], {
-	  series:[{renderer:$.jqplot.BarRenderer}],
-	  axes: {
-	    xaxis: {
-	      renderer: $.jqplot.CategoryAxisRenderer,
-	      label: 'Warranty Concern',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-	      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-	      tickOptions: {
-          angle: -30,
-          fontFamily: 'Courier New',
-          fontSize: '9pt'
-	      }
-	      
-	    },
-	    yaxis: {
-	      label: 'Occurance',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
-	    }
-	  }
-	});
-	
-	
+    var plot2 = $.jqplot('chart2', [line2], {
+      axes: {
+        xaxis: {
+          renderer: $.jqplot.DateAxisRenderer,
+          label: 'Incliment Occurrance',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+          tickOptions: {
+              // labelPosition: 'middle',
+              angle: 15
+          }
+          
+        },
+        yaxis: {
+          label: 'Incliment Factor',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
+        }
+      }
+    });
+
 });
-		</script>
+</script>
+<script class="code" type="text/javascript" language="javascript">
+$(document).ready(function(){   
+    var line3 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp Marketing Gimmick', 9], 
+    ['HDTV Receiver', 15], ['8 Track Control Module', 12], 
+    ['SSPFM (Sealed Sludge Pump Fourier Modulator)', 3], 
+    ['Transcender/Spice Rack', 6], ['Hair Spray Rear View Mirror Danger Indicator', 18]];
+
+    var plot3 = $.jqplot('chart3', [line3], {
+      series:[{renderer:$.jqplot.BarRenderer}],
+      axes: {
+        xaxis: {
+          renderer: $.jqplot.CategoryAxisRenderer,
+          label: 'Warranty Concern',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+          tickOptions: {
+              angle: -30,
+              fontFamily: 'Courier New',
+              fontSize: '9pt'
+          }
+          
+        },
+        yaxis: {
+          label: 'Occurance',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
+        }
+      }
+    });
+    
+    
+});
+</script>
+  
+    <script class="code" type="text/javascript" language="javascript">
+$(document).ready(function(){
+
+    var line = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
+    ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
+    ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
+
+    var line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], 
+    ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];
+
+    var plot4 = $.jqplot('chart4', [line, line2], {
+        title: 'Concern vs. Occurrance',
+        series:[{renderer:$.jqplot.BarRenderer}, {xaxis:'x2axis', yaxis:'y2axis'}],
+        axes: {
+            xaxis: {
+                renderer: $.jqplot.CategoryAxisRenderer,
+                label: 'Warranty Concern',
+                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+                tickOptions: {
+                    angle: 30
+                }
+            },
+            x2axis: {
+                renderer: $.jqplot.CategoryAxisRenderer,
+                label: 'Metal',
+                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+                tickOptions: {
+                    angle: 30
+                }
+            },
+            yaxis: {
+                autoscale:true,
+                label: 'Occurance',
+                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+                tickOptions: {
+                    angle: 30
+                }
+            },
+            y2axis: {
+                autoscale:true,
+                label: 'Number',
+                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+                tickOptions: {
+                    angle: 30
+                }
+            }
+        }
+    });
+});
+    </script>
     
 <script type="text/javascript" src="example.js"></script>
-		
+        
 </head>
 <body>
     <?php include "topbanner.php"; ?>
     <div class="example-content">
     <?php include "nav.inc"; ?>
-		<div class="jqplot code" id="chart1"></div>
-		<div class="jqplot code" id="chart2"></div>
-		<div class="jqplot code" id="chart3"></div>
+        <div class="jqplot code" id="chart1" style="height: 270px"></div>
+        <div class="jqplot code" id="chart2" style="height: 270px"></div>
+        <div class="jqplot code" id="chart3"></div>
+        <div class="jqplot code" id="chart4"></div>
 
 
   </div>

examples/axisLabelsRotatedText2.html

-<!DOCTYPE html>
-<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.js"></script><![endif]-->
-  
-  <!-- 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.logAxisRenderer.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.canvasAxisLabelRenderer.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.dateAxisRenderer.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.barRenderer.js"></script>
-	
-	<style type="text/css">
-	  .jqplot-point-label {white-space: nowrap;}
-/*    .jqplot-yaxis-label {font-size: 14pt;}*/
-/*    .jqplot-yaxis-tick {font-size: 7pt;}*/
-    .jqplot { margin: 30px 30px 60px 50px;}
-/*    .jqplot-xaxis { margin-top: 10px;}
-    .jqplot-xaxis-tick {padding-top: 0px;}
-    .jqplot-yaxis {margin-right: 10px;}
-    .jqplot-yaxis-tick {padding-right: 0px;}*/
-	</style>
-	
-	
-		<script class="code" type="text/javascript" language="javascript">
-$(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-line = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
-line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];
-
-  plot1 = $.jqplot('chart1', [line], {
-    title: 'Concern vs. Occurrance',
-    series:[{renderer:$.jqplot.BarRenderer}],
-    axes: {
-      xaxis: {
-        renderer: $.jqplot.CategoryAxisRenderer,
-          label: 'Warranty Concern',
-        // labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-        tickOptions: {
-          // enableFontSupport: true,
-            angle: -30
-        }
-        
-      },
-      yaxis: {
-        autoscale:true,
-          label: 'Occurance',
-        // labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-        tickOptions: {
-          // enableFontSupport: true,
-            angle: -30
-        }
-      }
-    }
-  });
-});
-    </script>
-  
-    <script class="code" type="text/javascript" language="javascript">
-$(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-line = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
-line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];
-
-	plot2 = $.jqplot('chart2', [line, line2], {
-    // title: 'Concern vs. Occurrance',
-	  series:[{renderer:$.jqplot.BarRenderer}, {xaxis:'x2axis', yaxis:'y2axis'}],
-	  axes: {
-	    xaxis: {
-	      renderer: $.jqplot.CategoryAxisRenderer,
-        label: 'Warranty Concern',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-	      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-	      tickOptions: {
-          angle: 30
-	      }
-	    },
-	    x2axis: {
-	      renderer: $.jqplot.CategoryAxisRenderer,
-        label: 'Metal',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-	      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-	      tickOptions: {
-          angle: 30
-	      }
-	    },
-	    yaxis: {
-	      autoscale:true,
-        label: 'Occurance',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-	      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-	      tickOptions: {
-          angle: 30
-	      }
-	    },
-	    y2axis: {
-	      autoscale:true,
-        label: 'Number',
-	      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-	      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-	      tickOptions: {
-          angle: 30
-	      }
-	    }
-	  }
-	});
-});
-    </script>
-  
-    <script class="code" type="text/javascript" language="javascript">
-$(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-line = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
-line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];
-
-  plot3 = $.jqplot('chart3', [line], {
-    title: 'Concern vs. Occurrance',
-    series:[{renderer:$.jqplot.BarRenderer}],
-    axes: {
-      xaxis: {
-        renderer: $.jqplot.CategoryAxisRenderer,
-          label: 'Warranty Concern',
-        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-        tickOptions: {
-          labelPosition:'middle',
-            angle: -30
-        }
-        
-      },
-      yaxis: {
-        autoscale:true,
-          label: 'Occurance',
-        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-        tickOptions: {
-          labelPosition:'middle',
-            angle: -30
-        }
-      }
-    }
-  });
-	
-	
-});
-		</script>
-<script type="text/javascript" src="example.js"></script>
-		
-</head>
-<body>
-    <?php include "topbanner.php"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-		<div class="jqplot" id="chart1" class="graph"></div>
-		<div class="jqplot" id="chart2" class="graph"></div>
-		<div class="jqplot" id="chart3" class="graph"></div>
- 
-
-  </div>
-</body>
-
-
-</html>

examples/barLineAnimated.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>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.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 type="text/javascript" src="./jquery-ui/js/jquery.effects.core.min.js"></script>
+  <script type="text/javascript" src="./jquery-ui/js/jquery.effects.blind.min.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 () {
+      var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000], 
+      [2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
+      var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400], 
+      [2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100]];
+
+      plot1 = $.jqplot("chart1", [s2, s1], {
+        cursor: {
+            show: true,
+            zoom: true,
+            looseZoom: true,
+            showTooltip: false
+        },
+        series:[
+          {
+            renderer: $.jqplot.BarRenderer,
+            showHighlight: false,
+            yaxis: 'y2axis',
+            rendererOptions: {
+              barWidth: 15,
+              barPadding: -15,
+              barMargin: 0,
+              highlightMouseOver: false
+            }
+          }, {}],
+          axesDefaults: {
+            pad: 0
+          },
+          axes: {
+            // These options will set up the x axis like a category axis.
+            xaxis: {
+              tickInterval: 1,
+              drawMajorGridlines: false,
+              drawMinorGridlines: true,
+              drawMajorTickMarks: false,
+              rendererOptions: {
+                tickInset: 0.5,
+                minorTicks: 1
+              }
+            },
+            yaxis: {
+              rendererOptions: {
+                forceTickAt0: true
+              }
+            },
+            y2axis: {
+              rendererOptions: {
+                // align the ticks on the y2 axis with the y axis.
+                alignTicks: true,
+                forceTickAt0: true
+              }
+            }
+          },
+          highlighter: {
+            show: true, 
+            showLabel: true, 
+            tooltipAxes: 'y',
+            sizeAdjust: 7.5 , tooltipLocation : 'ne' , formatString:"$%'i"}
+      });
+
+      // Add animation to the bars and line.
+      // use jquery-ui to initially hide the canvases for the series.
+      // Then use the 'blind' effect to show the canvases.
+
+      plot1.series[0].canvas._elem.hide();
+      plot1.series[1].canvas._elem.hide();
+      plot1.series[0].canvas._elem.show('blind', {direction: 'down'}, 2000);
+      plot1.series[1].canvas._elem.show('blind', {direction: 'left'}, 2000);
+    });
+
+
+</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> 
+    
+  </head>
+  <body>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
+        
+    <div id="chart1" style="margin-top:20px; margin-left:20px; width:800px; height:300px;"></div>
+
+    <pre class="code"></pre>
+
+    </div>
+  
+  </div>
+</body>
+</html>

examples/candlestick.html

+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>OHLC 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.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.dateAxisRenderer.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.ohlcRenderer.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>
+
+
+  <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;
+    }
+  </style>
+
+  <!-- END: load jqplot -->
+    
+<script class="common" type="text/javascript">
+    $.jqplot.config.enablePlugins = true;
+    
+    ohlc = [['07/06/2009', 138.7, 139.68, 135.18, 135.4],
+    ['06/29/2009', 143.46, 144.66, 139.79, 140.02],
+    ['06/22/2009', 140.67, 143.56, 132.88, 142.44],
+    ['06/15/2009', 136.01, 139.5, 134.53, 139.48],
+    ['06/08/2009', 143.82, 144.56, 136.04, 136.97],
+    ['06/01/2009', 136.47, 146.4, 136, 144.67],
+    ['05/26/2009', 124.76, 135.9, 124.55, 135.81],
+    ['05/18/2009', 123.73, 129.31, 121.57, 122.5],
+    ['05/11/2009', 127.37, 130.96, 119.38, 122.42],
+    ['05/04/2009', 128.24, 133.5, 126.26, 129.19],
+    ['04/27/2009', 122.9, 127.95, 122.66, 127.24],
+    ['04/20/2009', 121.73, 127.2, 118.6, 123.9],
+    ['04/13/2009', 120.01, 124.25, 115.76, 123.42],
+    ['04/06/2009', 114.94, 120, 113.28, 119.57],
+    ['03/30/2009', 104.51, 116.13, 102.61, 115.99],
+    ['03/23/2009', 102.71, 109.98, 101.75, 106.85],
+    ['03/16/2009', 96.53, 103.48, 94.18, 101.59],
+    ['03/09/2009', 84.18, 97.2, 82.57, 95.93],
+    ['03/02/2009', 88.12, 92.77, 82.33, 85.3],
+    ['02/23/2009', 91.65, 92.92, 86.51, 89.31],
+    ['02/17/2009', 96.87, 97.04, 89, 91.2],
+    ['02/09/2009', 100, 103, 95.77, 99.16],
+    ['02/02/2009', 89.1, 100, 88.9, 99.72],
+    ['01/26/2009', 88.86, 95, 88.3, 90.13],
+    ['01/20/2009', 81.93, 90, 78.2, 88.36],
+    ['01/12/2009', 90.46, 90.99, 80.05, 82.33],
+    ['01/05/2009', 93.17, 97.17, 90.04, 90.58],
+    ['12/29/2008', 86.52, 91.04, 84.72, 90.75],
+    ['12/22/2008', 90.02, 90.03, 84.55, 85.81],
+    ['12/15/2008', 95.99, 96.48, 88.02, 90],
+    ['12/08/2008', 97.28, 103.6, 92.53, 98.27],
+    ['12/01/2008', 91.3, 96.23, 86.5, 94],
+    ['11/24/2008', 85.21, 95.25, 84.84, 92.67],
+    ['11/17/2008', 88.48, 91.58, 79.14, 82.58],    
+    ['11/10/2008', 100.17, 100.4, 86.02, 90.24],
+    ['11/03/2008', 105.93, 111.79, 95.72, 98.24],
+    ['10/27/2008', 95.07, 112.19, 91.86, 107.59],
+    ['10/20/2008', 99.78, 101.25, 90.11, 96.38],
+    ['10/13/2008', 104.55, 116.4, 85.89, 97.4],
+    ['10/06/2008', 91.96, 101.5, 85, 96.8],
+    ['09/29/2008', 119.62, 119.68, 94.65, 97.07],
+    ['09/22/2008', 139.94, 140.25, 123, 128.24],
+    ['09/15/2008', 142.03, 147.69, 120.68, 140.91],
+    ['09/08/2008', 164.57, 164.89, 146, 148.94]
+    ];
+    
+    ohlc_b = [['07/06/2009', 138.7, 139.68, 135.18, 135.4, 'j'],
+    ['06/29/2009', 143.46, 144.66, 139.79, 140.02, 'q'],
+    ['06/22/2009', 140.67, 143.56, 132.88, 142.44, 'p'],
+    ['06/15/2009', 136.01, 139.5, 134.53, 139.48, 'l'],
+    ['06/08/2009', 143.82, 144.56, 136.04, 136.97, 'o'],
+    ['06/01/2009', 136.47, 146.4, 136, 144.67, 't'],
+    ['05/26/2009', 124.76, 135.9, 124.55, 135.81, '_'],
+    ['05/18/2009', 123.73, 129.31, 121.57, 122.5, 'c'],
+    ['05/11/2009', 127.37, 130.96, 119.38, 122.42, 'h'],
+    ['05/04/2009', 128.24, 133.5, 126.26, 129.19, 'a'],
+    ['04/27/2009', 122.9, 127.95, 122.66, 127.24, 'r'],
+    ['04/20/2009', 121.73, 127.2, 118.6, 123.9, 't'],
+    ['04/13/2009', 120.01, 124.25, 115.76, 123.42, 's']
+    ];     
+    
+    hlc = [['07/06/2009', 139.68, 135.18, 135.4],
+    ['06/29/2009', 144.66, 139.79, 140.02],
+    ['06/22/2009', 143.56, 132.88, 142.44],
+    ['06/15/2009', 139.5, 134.53, 139.48],
+    ['06/08/2009', 144.56, 136.04, 136.97],
+    ['06/01/2009', 146.4, 136, 144.67],
+    ['05/26/2009', 135.9, 124.55, 135.81],
+    ['05/18/2009', 129.31, 121.57, 122.5],
+    ['05/11/2009', 130.96, 119.38, 122.42],
+    ['05/04/2009', 133.5, 126.26, 129.19],
+    ['04/27/2009', 127.95, 122.66, 127.24],
+    ['04/20/2009', 127.2, 118.6, 123.9],
+    ['04/13/2009', 124.25, 115.76, 123.42],
+    ['04/06/2009', 120, 113.28, 119.57],
+    ['03/30/2009', 116.13, 102.61, 115.99],
+    ['03/23/2009',  109.98, 101.75, 106.85],
+    ['03/16/2009', 103.48, 94.18, 101.59],
+    ['03/09/2009', 97.2, 82.57, 95.93],
+    ['03/02/2009', 92.77, 82.33, 85.3],
+    ['02/23/2009', 92.92, 86.51, 89.31],
+    ['02/17/2009', 97.04, 89, 91.2],
+    ['02/09/2009', 103, 95.77, 99.16],
+    ['02/02/2009', 100, 88.9, 99.72],
+    ['01/26/2009', 95, 88.3, 90.13],
+    ['01/20/2009', 90, 78.2, 88.36],
+    ['01/12/2009', 90.99, 80.05, 82.33],
+    ['01/05/2009', 97.17, 90.04, 90.58],
+    ['12/29/2008', 91.04, 84.72, 90.75],
+    ['12/22/2008', 90.03, 84.55, 85.81],
+    ['12/15/2008', 96.48, 88.02, 90],
+    ['12/08/2008', 103.6, 92.53, 98.27],
+    ['12/01/2008', 96.23, 86.5, 94],
+    ['11/24/2008', 95.25, 84.84, 92.67],
+    ['11/17/2008', 91.58, 79.14, 82.58],  
+    ['11/10/2008', 100.4, 86.02, 90.24],
+    ['11/03/2008', 111.79, 95.72, 98.24],
+    ['10/27/2008', 112.19, 91.86, 107.59],
+    ['10/20/2008', 101.25, 90.11, 96.38],
+    ['10/13/2008', 116.4, 85.89, 97.4],
+    ['10/06/2008', 101.5, 85, 96.8],
+    ['09/29/2008', 119.68, 94.65, 97.07],
+    ['09/22/2008', 140.25, 123, 128.24],
+    ['09/15/2008', 147.69, 120.68, 140.91],
+    ['09/08/2008', 164.89, 146, 148.94]
+    ];
+    
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){       
+    plot1 = $.jqplot('chart1',[ohlc],{
+      title: 'Chart',
+      axesDefaults:{},
+      axes: {
+          xaxis: {
+              renderer:$.jqplot.DateAxisRenderer,
+              tickOptions:{formatString:'%y.%m'}
+          },
+          yaxis: {
+              tickOptions:{formatString:'%.2f'}
+          }
+      },
+      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{}}],
+      cursor:{
+          zoom:true,
+          tooltipOffset: 10,
+          tooltipLocation: 'nw'
+      }
+    });
+});</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){  
+    plot2 = $.jqplot('chart2',[ohlc],{
+      title: 'Chart',
+      axesDefaults:{},
+      axes: {
+          xaxis: {
+              renderer:$.jqplot.DateAxisRenderer,
+              tickOptions:{formatString:'%y.%m'}
+          },
+          yaxis: {
+              tickOptions:{formatString:'%.2f'}
+          }
+      },
+      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
+      cursor:{
+          zoom:true,
+          tooltipOffset: 10,
+          tooltipLocation: 'nw'
+      },
+      highlighter: {
+          showMarker:false,
+          tooltipAxes: 'xy',
+          yvalues: 4,
+          formatString:'<table class="jqplot-highlighter"> \
+          <tr><td>date:</td><td>%s</td></tr> \
+          <tr><td>open:</td><td>%s</td></tr> \
+          <tr><td>hi:</td><td>%s</td></tr> \
+          <tr><td>low:</td><td>%s</td></tr> \
+          <tr><td>close:</td><td>%s</td></tr></table>'
+      }
+    });
+});</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){  
+    plot2b = $.jqplot('chart2b',[ohlc_b],{
+      title: 'Chart',
+      axesDefaults:{},
+      axes: {
+          xaxis: {
+              renderer:$.jqplot.DateAxisRenderer,
+              tickOptions:{formatString:'%y.%m'}
+          },
+          yaxis: {
+              tickOptions:{formatString:'%.2f'}
+          }
+      },
+      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
+      cursor:{
+          zoom:true,
+          tooltipOffset: 10,
+          tooltipLocation: 'nw'
+      },
+      highlighter: {
+          showMarker:false,
+          tooltipAxes: 'xy',
+          yvalues: 5,
+          formatString:'<table class="jqplot-highlighter"> \
+          <tr><td>date:</td><td>%s</td></tr> \
+          <tr><td>open:</td><td>%s</td></tr> \
+          <tr><td>hi:</td><td>%s</td></tr> \
+          <tr><td>low:</td><td>%s</td></tr> \
+          <tr><td>close:</td><td>%s</td></tr> \
+          <tr><td>letter:</td><td>%s</td></tr></table>'
+      }
+    });
+});</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){ 
+    plot3 = $.jqplot('chart3',[hlc],{
+      title: 'Chart',
+      axesDefaults:{},
+      axes: {
+          xaxis: {
+              renderer:$.jqplot.DateAxisRenderer,
+              tickOptions:{formatString:'%Y.%m'}
+          },
+          yaxis: {
+              tickOptions:{formatString:'%.2f'}
+          }
+      },
+      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{}}],
+      cursor:{
+          zoom:true,
+          tooltipOffset: 10,
+          tooltipLocation: 'nw'
+      }
+    });
+});</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){ 
+    var catOHLC = [[1, 138.7, 139.68, 135.18, 135.4],
+    [2, 143.46, 144.66, 139.79, 140.02],
+    [3, 140.67, 143.56, 132.88, 142.44],
+    [4, 136.01, 139.5, 134.53, 139.48],
+    [5, 143.82, 144.56, 136.04, 136.97],
+    [6, 136.47, 146.4, 136, 144.67],
+    [7, 124.76, 135.9, 124.55, 135.81],
+    [8, 123.73, 129.31, 121.57, 122.5]];
+    
+    var ticks = ['Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'];
+        
+    plot4 = $.jqplot('chart4',[catOHLC],{
+      axes: {
+          xaxis: {
+              renderer:$.jqplot.CategoryAxisRenderer,
+              ticks:ticks
+          },
+          yaxis: {
+              tickOptions:{formatString:'$%.2f'}
+          }
+      },
+      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
+    });
+});</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> 
+
+  </head>
+  <body>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
+<div id="chart1" class="code" style="margin:20px;height:240px; width:640px;"></div>
+<pre class="code"></pre>
+<div id="chart2" class="code" style="margin:20px;height:240px; width:640px;"></div>
+<pre class="code"></pre>
+<div id="chart2b" class="code" style="margin:20px;height:240px; width:640px;"></div>
+<pre class="code"></pre>
+<div id="chart3" class="code" style="margin:20px;height:240px; width:640px;"></div>
+<pre class="code"></pre>
+<div id="chart4" class="code" style="margin:20px;height:320px; width:500px;"></div>
+<pre class="code"></pre>
+<p>The examples below use the folowing code:</p>
+<pre class="common"></pre>
+  
+  </div>
+</body>
+</html>

examples/candlestickCanvasOverlay.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title></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.dateAxisRenderer.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.ohlcRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasOverlay.js"></script>
-  
-  <!-- END: load jqplot -->
-<script language="javascript" type="text/javascript">
-  
-$(document).ready(function(){
-
-	var j = new $.jsDate();
-	
-    
-    var ohlc = [['07/06/09', 138.7, 139.68, 135.18, 135.4],
-    ['06/29/09', 143.46, 144.66, 139.79, 140.02],
-    ['06/22/09', 140.67, 143.56, 132.88, 142.44],
-    ['06/15/09', 136.01, 139.5, 134.53, 139.48],
-    ['06/08/09', 143.82, 144.56, 136.04, 136.97],
-    ['06/01/09', 136.47, 146.4, 136, 144.67],
-    ['05/26/09', 124.76, 135.9, 124.55, 135.81],
-    ['05/18/09', 123.73, 129.31, 121.57, 122.5],
-    ['05/11/09', 127.37, 130.96, 119.38, 122.42],
-    ['05/04/09', 128.24, 133.5, 126.26, 129.19],
-    ['04/27/09', 122.9, 127.95, 122.66, 127.24],
-    ['04/20/09', 121.73, 127.2, 118.6, 123.9],
-    ['04/13/09', 120.01, 124.25, 115.76, 123.42],
-    ['04/06/09', 114.94, 120, 113.28, 119.57],
-    ['03/30/09', 104.51, 116.13, 102.61, 115.99],
-    ['03/23/09', 102.71, 109.98, 101.75, 106.85],
-    ['03/16/09', 96.53, 103.48, 94.18, 101.59],
-    ['03/09/09', 84.18, 97.2, 82.57, 95.93],
-    ['03/02/09', 88.12, 92.77, 82.33, 85.3],
-    ['02/23/09', 91.65, 92.92, 86.51, 89.31],
-    ['02/17/09', 96.87, 97.04, 89, 91.2],
-    ['02/09/09', 100, 103, 95.77, 99.16],
-    ['02/02/09', 89.1, 100, 88.9, 99.72],
-    ['01/26/09', 88.86, 95, 88.3, 90.13],
-    ['01/20/09', 81.93, 90, 78.2, 88.36],
-    ['01/12/09', 90.46, 90.99, 80.05, 82.33],
-    ['01/05/09', 93.17, 97.17, 90.04, 90.58],
-    ['12/29/08', 86.52, 91.04, 84.72, 90.75],
-    ['12/22/08', 90.02, 90.03, 84.55, 85.81],
-    ['12/15/08', 95.99, 96.48, 88.02, 90],
-    ['12/08/08', 97.28, 103.6, 92.53, 98.27],
-    ['12/01/08', 91.3, 96.23, 86.5, 94],
-    ['11/24/08', 85.21, 95.25, 84.84, 92.67],
-    ['11/17/08', 88.48, 91.58, 79.14, 82.58],    
-    ['11/10/08', 100.17, 100.4, 86.02, 90.24],
-    ['11/03/08', 105.93, 111.79, 95.72, 98.24],
-    ['10/27/08', 95.07, 112.19, 91.86, 107.59],
-    ['10/20/08', 99.78, 101.25, 90.11, 96.38],
-    ['10/13/08', 104.55, 116.4, 85.89, 97.4],
-    ['10/06/08', 91.96, 101.5, 85, 96.8],
-    ['09/29/08', 119.62, 119.68, 94.65, 97.07],
-    ['09/22/08', 139.94, 140.25, 123, 128.24],
-    ['09/15/08', 142.03, 147.69, 120.68, 140.91],
-    ['09/08/08', 164.57, 164.89, 146, 148.94]
-    ];
-	
-	var ohlc = [['1/24/2011', 607.57, 612.49, 601.23, 611.08],
-['1/21/2011', 639.58, 641.73, 611.36,   611.83],
-['1/20/2011', 632.21, 634.08, 623.29,   626.77],
-['1/19/2011', 642.12, 642.96, 629.66,   631.75],
-['1/18/2011', 626.06, 641.99, 625.27,   639.63],
-['1/14/2011', 617.4, 624.27, 617.08,   624.18],
-['1/13/2011', 616.97, 619.67, 614.16,   616.69],
-['1/12/2011', 619.35, 619.35, 614.77,   616.87],
-['1/11/2011', 617.71, 618.8, 614.5,  616.01],
-['1/10/2011', 614.8, 615.39, 608.56,   614.21],
-['1/7/2011', 615.91, 618.25, 610.13,   616.44],
-['1/6/2011', 610.68, 618.43, 610.05,  613.5],
-['1/5/2011', 600.07, 610.33, 600.05,   609.07],
-['1/4/2011', 605.62, 606.18, 600.12,   602.12],
-['1/3/2011', 596.48, 605.59, 596.48,   604.35],
-['12/31/2010', 596.74, 598.42, 592.03,   593.97],
-['12/30/2010', 598, 601.33, 597.39,   598.86],
-['12/29/2010', 602, 602.41, 598.92,   601],
-['12/28/2010', 602.05, 603.87, 598.01,   598.92],
-['12/27/2010', 602.74, 603.78, 599.5,   602.38],
-['12/23/2010', 605.34, 606, 602.03,   604.23],
-['12/22/2010', 604, 607, 603.28,   605.49],
-['12/21/2010', 598.57, 604.72, 597.61,   603.07],
-['12/20/2010', 594.65, 597.88, 588.66,   595.06],
-['12/17/2010', 591, 592.56, 587.67,  590.8],
-['12/16/2010', 592.85, 593.77, 588.07,   591.71],
-['12/15/2010', 594.2, 596.45, 589.15,  590.3],
-['12/14/2010', 597.09, 598.29, 592.48,   594.91],
-['12/13/2010', 597.12, 603, 594.09,   594.62],
-['12/10/2010', 593.14, 593.99, 590.29,  592.21],
-['12/9/2010', 593.88, 595.58, 589,   591.5],
-['12/8/2010', 591.97, 592.52, 583.69,   590.54],
-['12/7/2010', 591.27, 593, 586,   587.14],
-['12/6/2010', 580.57, 582, 576.61,   578.36],
-['12/3/2010', 569.45, 576.48, 568,   573],
-['12/2/2010', 568.66, 573.33, 565.35,   571.82],
-['12/1/2010', 563, 571.57, 562.4,  564.35],
-['11/30/2010', 574.32, 574.32, 553.31,   555.71],
-['11/29/2010', 589.17, 589.8, 579.95,  582.11],
-['11/26/2010', 590.46, 592.98, 587,   590],
-['11/24/2010', 587.31, 596.6, 587.05,   594.97],
-['11/23/2010', 587.01, 589.01, 578.2,   583.01],
-['11/22/2010', 587.47, 593.44, 582.75,   591.22],
-['11/19/2010', 597, 597.89, 590.34,   590.83],
-['11/18/2010', 589, 599.98, 588.56,   596.56],
-['11/17/2010', 585, 589.5, 581.37,  583.55],
-['11/16/2010', 592.76, 597.89, 583.45,   583.72],
-['11/15/2010', 603.08, 604, 594.05,  595.47],
-['11/12/2010', 613.99, 616.9, 601.21,   603.29],
-['11/11/2010', 619.7, 619.85, 614.21,   617.19],
-['11/10/2010', 622.08, 623, 617.51, 622.88],
-['11/9/2010', 630, 630.85, 620.51,   624.82],
-['11/8/2010', 624.02, 629.49, 623.13,   626.77],
-['11/5/2010', 623.18, 625.49, 621.11,   625.08],
-['11/4/2010', 624.64, 629.92, 622.1,   624.27],
-['11/3/2010', 617.5, 621.83, 613.5,   620.18],
-['11/2/2010', 618.67, 620, 614.58,  615.6],
-['11/1/2010', 615.73, 620.66, 611.21,   615],
-['10/29/2010', 617.07, 619, 612.99,   613.7],
-['10/28/2010', 620.05, 621, 613.3,  618.58]];
-	
-	for (var i=0; i<ohlc.length; i++) {
-		//ohlc[i][0] = j.strftime('%Y-%m-%d');
-		j.add(-1, 'day');
-	}
-       
-    
-    plot1 = $.jqplot('chart1',[ohlc],{
-      title: 'Chart',
-      axesDefaults:{},
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickOptions:{formatString:'%b %e'}, 
-          },
-          yaxis: {
-		      min: 560,
-			  max: 650,
-              tickOptions:{formatString:'%.2f'}
-          }
-      },
-      series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
-    });
-    
-});
-
-function startit() {
-	counter = 0;
-	Interval = setInterval(runUpdate, 250);
-}
-
-function runUpdate() {
-	if (counter < 1000) {
-		var val = Math.random()*5 * (Math.random() - 0.5),
-			d = plot1.series[0].data,
-			dl = d.length,
-			curhi = d[dl - 1][2],
-			curlo = d[dl - 1][3],
-			curclose = d[dl - 1][4];
-			newval = curclose + val;
-			
-			
-		if (newval > curhi) { curhi = newval }
-		else if (newval < curlo) { curlo = newval }
-		
-		d[dl - 1][2] = curhi;
-		d[dl - 1][3] = curlo;
-		d[dl - 1][4] = newval;
-		
-		if (curhi > plot1.axes.yaxis.max) {
-		
-		}
-		else if (curlo < plot1.axes.yaxis.min) {
-		
-		}
-		
-		else {
-			plot1.drawSeries({}, 0);
-			counter++;
-		}
-		
-		val = d = dl = curhi = curlo = curclose = newval = null;
-	}
-	else {
-		val = d = dl = curhi = curlo = curclose = newval = null;
-		clearInterval(Interval);
-	}
-}
-
-function stopit() {
-	clearInterval(Interval);
-}
-	
-
-
-</script>
-
-  </head>
-  <body>
-    <?php include "topbanner.php"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-<div id="chart1" style="margin:20px;height:400px; width:800px;"></div>
-<button onclick="startit()">Start</button>
-<button onclick="stopit()">Stop</button>
-  
-  </div>
-</body>
-</html>

examples/categoryHorizontalBar.html

-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8">
-		<title>Test 3</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.categoryAxisRenderer.js"></script>
-		<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
-		<!-- END: load jqplot -->
-
-	<script type="text/javascript" language="javascript">
-	  
-	$(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-    line1 = [[2,4], [1,6], [3,2], [4,9], [5,16]];
-    plot1 = $.jqplot('chart', [line1], {    
-        series: [{label: '1st Qtr'}],
-        axes: {
-            xaxis: {
-                ticks:['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday'],
-                renderer: $.jqplot.CategoryAxisRenderer
-            }
-        }
-    });
-
-    line1 = [[4, 1], [2, 2], [9, 3], [16, 4]];
-    line2 = [[3, 1], [7, 2], [6.25, 3], [3.125, 4]];
-    plot2 = $.jqplot('chart2', [line1, line2], {
-        stackSeries: true,
-        legend: {
-            show: true,
-            location: 'se'
-        },
-        title: 'Unit Sales: Acme Decoy Division',
-        seriesDefaults: {
-            renderer: $.jqplot.BarRenderer,
-            rendererOptions: {
-                barDirection: 'horizontal',
-                barPadding: 6,
-                barMargin: 40
-            }
-        },
-        series: [{
-            label: '1st Qtr'
-        },
-        {
-            label: '2nd Qtr'
-        }],
-        axes: {
-            yaxis: {
-                renderer: $.jqplot.CategoryAxisRenderer,
-                ticks: ['Q1', 'Q2', 'Q3', 'Q4']
-            },
-            xaxis: {min: 0, max: 20, numberTicks:5}
-        }
-    });
-
-});
-
-	</script>
-
-	</head>
-	<body>
-    <?php include "topbanner.php"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-    <div id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
-    <div id="chart2" style="margin-top:20px; margin-left:20px; width:320px; height:270px;"></div>
-
-	
-  </div>
-</body>
-</html>

examples/categoryVsLinearAxes.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Simple 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.dateAxisRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
-  <!-- END: load jqplot -->
-  <style type="text/css" media="screen">
-    .jqplot-axis {
-      font-size: 0.85em;
-    }
-    .jqplot-legend {
-      font-size: 0.75em;
-    }
-  </style>
-  <script type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-
-line1 = [['1/1/2006', 5], ['2/1/2006', 1], ['3/1/2006', 3], ['4/1/2006', 7]];
-line2 = [['1/1/2006', 2], ['2/1/2006', 6], ['3/1/2006', 4], ['4/1/2006', 3]];
-
-plot1 = $.jqplot('chart1', [line1, line2], {
-  legend: {show:true, location: 'nw', yoffset: 6},
-  axes:{
-    xaxis:{
-      renderer:$.jqplot.DateAxisRenderer, 
-      tickOptions:{
-        formatString:'%m.%y'}, 
-      ticks:['12/1/2005', '1/1/2006', '2/1/2006', '3/1/2006', '4/1/2006', '5/1/2006']
-    }
-  }
-});
-
-
-line1 = [5, 1, 3, 7];
-line2 = [2, 6, 4, 3];
-
-plot2 = $.jqplot('chart2', [line1, line2], {
-  legend: {show:true, location: 'nw', yoffset: 6},
-  axes:{
-    xaxis:{
-      renderer:$.jqplot.CategoryAxisRenderer, 
-      ticks:['01.06', '02.06', '03.06', '04.06']
-    }
-  }
-});
-
-
-  });
-  </script>
-  </head>
-  <body>
-    <?php include "topbanner.php"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-    <div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:200px;"></div>
-    <div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:200px;"></div>
-  
-  </div>
-</body>
-</html>

examples/chartInTable.html

-<!DOCTYPE html>
-<html>
-<head>
-  <!--[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.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" />
-
-<script language="javascript" type="text/javascript">
-$(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-  $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
-  { title:'Chart within Table Cell',
-    axes:{yaxis:{min:-10, max:240}},
-    series:[{color:'#5FAB78'}]
-  });
-});
-</script>
-</head>
-<body>
-    <?php include "topbanner.php"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-    <table>
-        <tr>
-            <td>
-                <div id="chartdiv" style="height: 400px; width: 300px;">
-                </div>
-
-            </td>
-        </tr>
-    </table>
-
-  </div>
-</body>
-</html>

examples/customHighlighterTooltip.html

+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Highlighter 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>
+  <!-- END: load jqplot -->
+
+
+<script language="javascript" class="code" type="text/javascript">
+
+$(document).ready(function(){
+    $.jqplot.config.enablePlugins = true;
+
+    //////
+    // Function that is run when the mouse moves inside of the plot.
+    //
+    // A more efficient way to do this would be to bind to the
+    // 'jqplotDataHighlight' and 'jqplotDataUnhighlight' event.
+    // This is shown as a more general example.
+    //////
+    function myMove (ev, gridpos, datapos, neighbor, plot) {
+        if (neighbor == null) {
+            $('#myToolTip').fadeOut().empty();
+            isShowing = false;
+        }
+        if (neighbor != null) {
+            if ($('#myToolTip').is(':hidden')) {
+                var d = new Date();
+                var myText = d.getSeconds();   // could be any function pulling data from anywhere.  
+                $('#myToolTip').html(myText).css({left:gridpos.x, top:gridpos.y}).fadeIn();
+            }
+        }
+    }
+    
+    //////
+    // Here is how you attach the custom callback to the mouse move event on the plot.
+    //
+    // A more efficient way to do this would be to bind to the
+    // 'jqplotDataHighlight' and 'jqplotDataUnhighlight' event.
+    // This is shown as a more general example.
+    //////
+    $.jqplot.eventListenerHooks.push(['jqplotMouseMove', myMove]);
+
+    s1 = [3, 7, 4, 9, 11, 12];
+
+    plot1 = $.jqplot('chart1',[s1],{
+        title: 'Custom Highlighting Tooltip'
+    });
+
+    $('#chart1').append('<div id="myToolTip" style="position:absolute;display:none;background:#E5DACA;padding:4px;"></div>');
+   
+});
+
+</script>
+
+<script type="text/javascript" src="example.js"></script>
+  </head>
+  <body>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
+<p>This page demonstrates creating your own custom highlighter by attaching a callback to the 'jqplotMouseMove' event.</p>
+<div id="chart1" class="plot" style="width:500px;height:300px;"></div>
+
+  
+  </div>
+</body>
+</html>

examples/dateAxisRenderer.html

+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Open Hi Low Close and Canclestick 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.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.dateAxisRenderer.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.ohlcRenderer.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>
+-->
+
+  <!-- END: load jqplot -->
+<script language="javascript" type="text/javascript">
+  
+$(document).ready(function(){
+      $.jqplot.config.enablePlugins = true;
+    
+    var ohlc = [['07/06/09', 138.7, 139.68, 135.18, 135.4],
+    ['06/29/09', 143.46, 144.66, 139.79, 140.02],
+    ['06/22/09', 140.67, 143.56, 132.88, 142.44],
+    ['06/15/09', 136.01, 139.5, 134.53, 139.48],
+    ['06/08/09', 143.82, 144.56, 136.04, 136.97],
+    ['06/01/09', 136.47, 146.4, 136, 144.67],
+    ['05/26/09', 124.76, 135.9, 124.55, 135.81],
+    ['05/18/09', 123.73, 129.31, 121.57, 122.5],
+    ['05/11/09', 127.37, 130.96, 119.38, 122.42],
+    ['05/04/09', 128.24, 133.5, 126.26, 129.19],
+    ['04/27/09', 122.9, 127.95, 122.66, 127.24],
+    ['04/20/09', 121.73, 127.2, 118.6, 123.9],
+    ['04/13/09', 120.01, 124.25, 115.76, 123.42],
+    ['04/06/09', 114.94, 120, 113.28, 119.57],
+    ['03/30/09', 104.51, 116.13, 102.61, 115.99],
+    ['03/23/09', 102.71, 109.98, 101.75, 106.85],
+    ['03/16/09', 96.53, 103.48, 94.18, 101.59],
+    ['03/09/09', 84.18, 97.2, 82.57, 95.93],
+    ['03/02/09', 88.12, 92.77, 82.33, 85.3],
+    ['02/23/09', 91.65, 92.92, 86.51, 89.31],
+    ['02/17/09', 96.87, 97.04, 89, 91.2],
+    ['02/09/09', 100, 103, 95.77, 99.16],
+    ['02/02/09', 89.1, 100, 88.9, 99.72],
+    ['01/26/09', 88.86, 95, 88.3, 90.13],