Commits

Chris Leonello committed f45f74f

In process of cleaning up examples

Comments (0)

Files changed (101)

examples/OHLC.html

 <script class="common" type="text/javascript">
     $.jqplot.config.enablePlugins = true;
     
-    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]
+    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/09', 138.7, 139.68, 135.18, 135.4, 'j'],
-    ['06/29/09', 143.46, 144.66, 139.79, 140.02, 'q'],
-    ['06/22/09', 140.67, 143.56, 132.88, 142.44, 'p'],
-    ['06/15/09', 136.01, 139.5, 134.53, 139.48, 'l'],
-    ['06/08/09', 143.82, 144.56, 136.04, 136.97, 'o'],
-    ['06/01/09', 136.47, 146.4, 136, 144.67, 't'],
-    ['05/26/09', 124.76, 135.9, 124.55, 135.81, '_'],
-    ['05/18/09', 123.73, 129.31, 121.57, 122.5, 'c'],
-    ['05/11/09', 127.37, 130.96, 119.38, 122.42, 'h'],
-    ['05/04/09', 128.24, 133.5, 126.26, 129.19, 'a'],
-    ['04/27/09', 122.9, 127.95, 122.66, 127.24, 'r'],
-    ['04/20/09', 121.73, 127.2, 118.6, 123.9, 't'],
-    ['04/13/09', 120.01, 124.25, 115.76, 123.42, 's']
+    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/09', 139.68, 135.18, 135.4],
-    ['06/29/09', 144.66, 139.79, 140.02],
-    ['06/22/09', 143.56, 132.88, 142.44],
-    ['06/15/09', 139.5, 134.53, 139.48],
-    ['06/08/09', 144.56, 136.04, 136.97],
-    ['06/01/09', 146.4, 136, 144.67],
-    ['05/26/09', 135.9, 124.55, 135.81],
-    ['05/18/09', 129.31, 121.57, 122.5],
-    ['05/11/09', 130.96, 119.38, 122.42],
-    ['05/04/09', 133.5, 126.26, 129.19],
-    ['04/27/09', 127.95, 122.66, 127.24],
-    ['04/20/09', 127.2, 118.6, 123.9],
-    ['04/13/09', 124.25, 115.76, 123.42],
-    ['04/06/09', 120, 113.28, 119.57],
-    ['03/30/09', 116.13, 102.61, 115.99],
-    ['03/23/09',  109.98, 101.75, 106.85],
-    ['03/16/09', 103.48, 94.18, 101.59],
-    ['03/09/09', 97.2, 82.57, 95.93],
-    ['03/02/09', 92.77, 82.33, 85.3],
-    ['02/23/09', 92.92, 86.51, 89.31],
-    ['02/17/09', 97.04, 89, 91.2],
-    ['02/09/09', 103, 95.77, 99.16],
-    ['02/02/09', 100, 88.9, 99.72],
-    ['01/26/09', 95, 88.3, 90.13],
-    ['01/20/09', 90, 78.2, 88.36],
-    ['01/12/09', 90.99, 80.05, 82.33],
-    ['01/05/09', 97.17, 90.04, 90.58],
-    ['12/29/08', 91.04, 84.72, 90.75],
-    ['12/22/08', 90.03, 84.55, 85.81],
-    ['12/15/08', 96.48, 88.02, 90],
-    ['12/08/08', 103.6, 92.53, 98.27],
-    ['12/01/08', 96.23, 86.5, 94],
-    ['11/24/08', 95.25, 84.84, 92.67],
-    ['11/17/08', 91.58, 79.14, 82.58],  
-    ['11/10/08', 100.4, 86.02, 90.24],
-    ['11/03/08', 111.79, 95.72, 98.24],
-    ['10/27/08', 112.19, 91.86, 107.59],
-    ['10/20/08', 101.25, 90.11, 96.38],
-    ['10/13/08', 116.4, 85.89, 97.4],
-    ['10/06/08', 101.5, 85, 96.8],
-    ['09/29/08', 119.68, 94.65, 97.07],
-    ['09/22/08', 140.25, 123, 128.24],
-    ['09/15/08', 147.69, 120.68, 140.91],
-    ['09/08/08', 164.89, 146, 148.94]
+    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>
 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?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>
 <p>The examples below use the folowing code:</p>
 <pre class="common"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/OHLC2.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],
-    ['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 hlc = [['07/06/09', 139.68, 135.18, 135.4],
-    ['06/29/09', 144.66, 139.79, 140.02],
-    ['06/22/09', 143.56, 132.88, 142.44],
-    ['06/15/09', 139.5, 134.53, 139.48],
-    ['06/08/09', 144.56, 136.04, 136.97],
-    ['06/01/09', 146.4, 136, 144.67],
-    ['05/26/09', 135.9, 124.55, 135.81],
-    ['05/18/09', 129.31, 121.57, 122.5],
-    ['05/11/09', 130.96, 119.38, 122.42],
-    ['05/04/09', 133.5, 126.26, 129.19],
-    ['04/27/09', 127.95, 122.66, 127.24],
-    ['04/20/09', 127.2, 118.6, 123.9],
-    ['04/13/09', 124.25, 115.76, 123.42],
-    ['04/06/09', 120, 113.28, 119.57],
-    ['03/30/09', 116.13, 102.61, 115.99],
-    ['03/23/09',  109.98, 101.75, 106.85],
-    ['03/16/09', 103.48, 94.18, 101.59],
-    ['03/09/09', 97.2, 82.57, 95.93],
-    ['03/02/09', 92.77, 82.33, 85.3],
-    ['02/23/09', 92.92, 86.51, 89.31],
-    ['02/17/09', 97.04, 89, 91.2],
-    ['02/09/09', 103, 95.77, 99.16],
-    ['02/02/09', 100, 88.9, 99.72],
-    ['01/26/09', 95, 88.3, 90.13],
-    ['01/20/09', 90, 78.2, 88.36],
-    ['01/12/09', 90.99, 80.05, 82.33],
-    ['01/05/09', 97.17, 90.04, 90.58],
-    ['12/29/08', 91.04, 84.72, 90.75],
-    ['12/22/08', 90.03, 84.55, 85.81],
-    ['12/15/08', 96.48, 88.02, 90],
-    ['12/08/08', 103.6, 92.53, 98.27],
-    ['12/01/08', 96.23, 86.5, 94],
-    ['11/24/08', 95.25, 84.84, 92.67],
-    ['11/17/08', 91.58, 79.14, 82.58],  
-    ['11/10/08', 100.4, 86.02, 90.24],
-    ['11/03/08', 111.79, 95.72, 98.24],
-    ['10/27/08', 112.19, 91.86, 107.59],
-    ['10/20/08', 101.25, 90.11, 96.38],
-    ['10/13/08', 116.4, 85.89, 97.4],
-    ['10/06/08', 101.5, 85, 96.8],
-    ['09/29/08', 119.68, 94.65, 97.07],
-    ['09/22/08', 140.25, 123, 128.24],
-    ['09/15/08', 147.69, 120.68, 140.91],
-    ['09/08/08', 164.89, 146, 148.94]
-    ];
-       
-
-    var ticks = ['08/01/08', '12/01/08', '04/01/09', '08/01/09'];
-
-	$.jsDate.config.defaultCentury = 2000;
-    
-    plot1 = $.jqplot('chart1',[ohlc],{
-      title: 'Chart',
-      axesDefaults:{},
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickOptions:{formatString:'%Y.%m.%d'}, 
-              min: "08-01-1908",
-              tickInterval: "60 days",
-              ticks: ticks
-          },
-          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>'
-      }
-    });
-        
-    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, fillUpBody:true, upBodyColor:'#aa3333', downBodyColor:'#3333aa'}}],
-      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>
-
-  </head>
-  <body>
-<?php include "nav.inc"; ?>
-<div id="chart1" style="margin:20px;height:240px; width:640px;"></div>
-<div id="chart2" style="margin:20px;height:240px; width:640px;"></div>
-  </body>
-</html>

examples/area.html

 <script type="text/javascript" src="example.js"></script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 <p>Area charts support highlighting and mouse events by default.  The options and handlers and callbacks are essentially the same as with bar, pie, donut and funnel charts.  One notable exception for area charts is that no data point index will be provided to the callback and the entire data set for the highlighted area will be returned.  This is because the area is not associated with one particular data point, but with the entire data set of the series.</p>
 
 <div><span>You Clicked: </span><span id="info1c">Nothing yet</span></div>
 
 <div id="chart1c" class="plot" style="width:400px;height:260px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/axisLabel.html

 
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?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>
 
 

examples/axisLabelsRotatedText.html

 		
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?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>
 </body>
 
 

examples/axisLabelsRotatedText2.html

 		
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?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>
 
 

examples/axisScalingForceTicAt.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?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>
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/bandedLine.html

 
  </head>
  <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?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>
 
 
     <pre class="code"></pre>
 
- </body>
+ 
+  </div>
+</body>
  </html>

examples/barLinePieStack.html

 <script type="text/javascript" src="example.js"></script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart1" style="margin-top:20px; margin-left:50px; width:360px; height:300px;"></div>
     <div id="chart2" style="margin-top:20px; margin-left:50px; width:360px; height:300px;"></div>
     <div id="chart3" style="margin-top:20px; margin-left:50px; width:360px; height:300px;"></div>
     <div id="chart4" style="margin-top:20px; margin-left:50px; width:360px; height:300px;"></div>
     <div id="chart5" style="margin-top:20px; margin-left:50px; width:360px; height:300px;"></div>
     <div id="chart6" style="margin-top:20px; margin-left:50px; width:360px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/barMissingValues.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
     <div id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/barTest.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <p>To create bar plots, you have to include the "jqplot.barRenderer.js" file in your source.</p>
 
     <p>Below is a default bar plot.  Bars will highlight on mouseover.  Events are triggered when you mouseover a bar and also when you click on a bar.  Here We capture the 'jqplotDataClick' event and display the clicked series index, point index and data values. When series data is assigned as a 1-dimensional array as in this example, jqPlot automatically converts it into a 2-dimensional array for plotting.  So a series defined as [2, 6, 7, 10] will become [[1,2], [2,6], [3,7], [4,10]].<p>
 <pre class="code"></pre>
 
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/barTest2.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
         
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
     <div id="chart2" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/bezierCurve.html

 </script>
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>The Bezier curve renderer can distinguish between two different input data formats.  This first example has the data passed in as 2 data points, the second one defining the Bezier curve to the end point.  With this format, non-default axes renderers will require specifying the minimum and maximum on the axes.</p>
 <pre>
     [[xstart, ystart], [cp1x, cp1y, cp2x, cp2y, xend, yend]];
     plot3.series[2].data[1][0] = 1265900400000
     plot3.drawSeries(2)
 </pre>
+
+  </div>
 </body>
 
 

examples/blockPlot.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>Below is an example block plot.  This plot also uses the Enhanced Legend Renderer plugin.  Clicking on an item in the legend will toggle display of the appropriate series.</p>
     <div id="chart1" class="plot" style="width:500px;height:300px;margin-bottom:30px;"></div>
 <p>Blocks can be moved by selecting the series, the point, and an optional duration parameter.  If specified, duration will animate the movement.  Duration is either a number in milliseconds, or the keywords 'fast' or 'slow'.  Higher numbers will cause a slower animation.</p>
     
     <div id="chart2" class="plot" style="width:500px;height:300px;margin-bottom:30px;"></div>
     
-  </body>
+  
+  </div>
+</body>
 </html>

examples/breakOnNull.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" style="margin:20px;height:300px; width:600px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/bubbleChart2.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>Bubble charts represent 3 dimensional data.  Data is passed in to a bubble chart as a series of [x, y, radius, &lt;label or object&gt;].  The optional fourth element of the data point can either be either a label string or an object having 'label' and/or 'color' properties to assign to the bubble.</p>
 
 <p>By default, all bubbles are scaled according to the size of the plot area.  The radius value in the data point will be adjusted to fit the bubbles in the chart.  If the "autoscaleBubbles" option is set to false, the radius value in the data will be taken as a literal pixel value for the radius of the points.</p>
 
 <div id="chart3" class="plot" style="width:600px;height:400px;"></div>
 <pre class="code"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/bubblechart.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" class="plot" style="width:600px;height:400px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/candlestickCanvasOverlay.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?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>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/canvasOverlay.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
         
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
     <button onclick="lineup()">Up</button>
     <pre class="code"></pre>
 
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/catchError.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" class="plot" style="width:500px;height:300px;"></div>
 <div id="chart2" class="plot" style="width:500px;height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/categoryHorizontalBar.html

 
 	</head>
 	<body>
-<?php include "nav.inc"; ?>
+    <?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>
 
-	</body>
+	
+  </div>
+</body>
 </html>

examples/categoryVsLinearAxes.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?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>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/chartInTable.html

 </script>
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <table>
         <tr>
             <td>
             </td>
         </tr>
     </table>
+
+  </div>
 </body>
 </html>

examples/ciParser.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>JSON data formatted according the the City Index API spec can be read in directly by jqPlot thorugh the use of the dataRenderer option and a custom ciParser data renderer.  The ciParser data renderer will translate either a JSON encoded string or JSON object.</p>
 
 <p>To use the the ciParser, include the <code>jqplot.json2.js</code> and <code>jqplot.ciParser.js</code> files.  Specify the <code>$.jqplot.ciParser</code> as the renderer in the plot's "dataRenderer" option.  The City Index JSON data can then be passed into the jqplot function as shown in the examples below:</p>
 <p>This example uses the same City Index data format, but passes in a JSON object instead of a string.</p>
 <div id="chart4" style="height:200px; width:400px;"></div>
 <pre class="code"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/customHighlighterCursorTrendline.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="test" class="plot" style="width:500px;height:300px;"></div>
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/customPieTests.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
     <div id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
     <div id="chart3" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
     <div id="chart4" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/dashedLines.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
         
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
 
     <pre class="code"></pre>
 
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/dataLabels.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
     <p>Data labels can be automatically added to pie chart and donut chart slices as well as funnel chart areas.  what labels are displayed is controlled by the series "dataLabel" option.  There are 4 types of data labels to display:<p>
     <ul>
     <pre id="code_4"></pre>
     
  
-  </body>
+  
+  </div>
+</body>
 </html>

examples/dataRenderer.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>The "dataRenderer" plot options allows you to specify a data preprocessor for your plot.  This enables jqPlot to accept data in any arbitrary format (e.g. AJAX data soruces, JSON strings, etc.).  Below are some examples illustrating how to use dataRenderers.</p>
 
 <p>In this simple example, we create a dataRenderer which takes an array of x values and returns an array of [x, sin(x)] value pairs. Data renderers are passes the plot data and a reference to the plot as arguments.</p>
 <pre class="code"></pre>
 
 <p>There is a third argument passed to the data renderer, dataRendererOptions.  It was not used in these examples, but can be set as a separate option on the plot to pass additional arguments into the renderer if needed.</p>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/dataTracking.html

 		
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div class="jqPlot" id="chart1" style="height:320px; width:600px;"></div>
  
+
+  </div>
 </body>
 
 

examples/donutTest.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="code"></div>
     <p>To create donut plots, you have to include the "jqplot.donutRenderer.js" file in your source.  You can view the javascript that generated these plots by clicking the "View Code" button below.</p>
     <button id="seecode" onclick="$('#code').dialog('open');">View Code</button>
         
 <p>A simple line chart is added to test for imcompatabilities.</p>
         <div id="chart6" style="margin-top:20px; margin-left:20px; width:100px; height:100px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/donutTest2.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <p></p>
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
 <pre class="code"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/dynamicplot.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" style="margin:20px;height:400px; width:800px;"></div>
 <div id="pricePointer" style="display:none;"></div>
 <button onclick="startit(data)">Start</button>
 <button onclick="stopit()">Stop</button>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/examples.css

 body {
-    margin:20px;
+    margin:0px;
+    padding: 0px;
     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 }
 
+div.logo {
+  position: relative;
+  height: 94px;
+  padding: 0px;
+  margin-bottom: 30px;
+  top: 0px;
+  background-image: url('../images/logo.jpg');
+  background-repeat: no-repeat;
+  background-color: #292929;
+}
+
 div.nav {
+    position:relative;
+    top: 70px;
+    text-align: right;
+}
+
+a.nav span {
+    font-size: 11px;
+    position: relative;
+    bottom: 2px;
+}
+
+a.nav:visited {
+    text-decoration: none;
+    border: 0px;
+    color: #aaaaaa;
+}
+
+a.nav, a.nav:link {
+    border: 0px;
+    text-decoration: none;
+  font-family: Tahoma, "Helvetica Neue", "Trebuchet MS", Verdana, Arial, sans-serif;
+  font-size: 16px;
+  color: #aaaaaa; 
+  margin-right: 11px;
+}
+
+a.nav:hover {
+    text-decoration: none;
+    border: 0px;
+    color: #E0771C;
+}
+
+a.nav:active {
+    text-decoration: none;
+    border: 0px;
+  color: #E0771C;
+}
+
+div.example-content {
+    margin: 20px;
+}
+
+div.example-nav {
     margin-bottom:10px;
 }
 

examples/exportImage.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?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> -->
         
 });
 </script>
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/fillToZero.html

 		
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div class="jqPlot" id="chart1" style="height:320px; width:420px;"></div>
 <div class="jqPlot" id="chart1b" style="height:320px; width:420px;"></div>
 <div class="jqPlot" id="chart2" style="height:320px; width:420px;"></div>
 <div class="jqPlot" id="chart3" style="height:320px; width:420px;"></div>
  
+
+  </div>
 </body>
 
 

examples/filledLine.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart" style="margin-top:20px; margin-left:20px; width:360px; height:300px;"></div>
     <div id="chart2" style="margin-top:20px; margin-left:20px; width:360px; height:300px;"></div>
     <div id="chart3" style="margin-top:20px; margin-left:20px; width:360px; height:300px;"></div>
     <div id="chart4" style="margin-top:20px; margin-left:20px; width:360px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/filledLineCategoryAxis.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?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:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/funnelTest.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="code"></div>
     <p>To create donut plots, you have to include the "jqplot.funnelRenderer.js" file in your source.  You can view the javascript that generated these plots by clicking the "View Code" button below.</p>
     <button id="seecode" onclick="$('#code').dialog('open');">View Code</button>
 <p>A small chart to test for plugin compatabiity.</p>
     <div id="chart4" style="margin-top:20px; margin-left:20px; width:200px; height:100px;"></div>
  
-  </body>
+  
+  </div>
+</body>
 </html>

examples/gridCustomization.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart" style="margin-top:20px; margin-left:20px; width:360px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/gridDimensions.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
         
     <div id="chart1" style="margin:30px; width:400px; height:200px;"></div>
     <div id="chart2" style="margin:30px; width:400px; height:200px;"></div>
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/gridPadding.html

 </style>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>Setting custom gridPadding on charts.  The red border indicates the plot target container.  By default, the grid will size itself to fit axes, titles, etc. within the plot target.  This values will be overridden if a "gridPadding" option is specified.</p>
 <p>The default computed gridPadding:</p>
     <div id="chart1a"></div>
 <p>Just specify padding on the sides we need, defaults used for others:</p>
     <div id="chart3"></div>
     <pre class="code"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/hiddenPlot.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <table><tr><td>
       <p>This page demonstrates using plots within containers that are initially hidden.  Examples are shown for jQuery UI tabs and Accordions</p>
   <div id="tabs">
 	
 </div>
 </td></tr></table>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/highlighter.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" class="plot" style="width:500px;height:300px;"></div>
 <div id="chart2" class="plot" style="width:500px;height:300px;"></div>
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/highlighter2.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?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>
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/highlighter3.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" class="plot" style="width:500px;height:300px;"></div>
 <div id="chart2" class="plot" style="width:500px;height:300px;"></div>
 <div id="chart3" class="plot" style="width:500px;height:300px;"></div>
 
 
 
-  </body>
+  
+  </div>
+</body>
 </html>

examples/horizontalLine.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/intticks.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>Tests of enhancements to axis tick generation algorithm.  Axis now checks to see if the tick interval (delta between ticks) is less than the precision of the tick format string.  If it is, it will try to increase the tick interval, number of ticks or change the axis minimum or maximum so that it is at least as great as the tick label precision.</p>
 
 <p>Note, if the user has specified the axis tickInterval, numberTicks, min or max options, the algorithm may not be able to produce the desired ticks.</p>
 <div id="chart6" class="plot" style="width:400px;height:300px;"></div>
 <div id="chart7" class="plot" style="width:400px;height:300px;"></div>
 <div id="chart8" class="plot" style="width:400px;height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/legendLabels.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>The following charts demonstrate some options of the EnhancedLegendRendrer. Some of the enhancements are:</p>
 <ul>
     <li>Control of number of rows and/or columns.</li>
 <p>The fourth chart is a pie plot.  Pie plots use their own legend renderer, since a pie plot is only 1 series.  The pie legend renderer has also been updated to handle custom rows/columns, although it is not clickable.</p>
 <div id="chart4" class="plot" style="width:500px;height:300px;"></div>
     
-  </body>
+  
+  </div>
+</body>
 </html>

examples/legendLabels2.html

 <script type="text/javascript" src="example.js"></script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 <p>This example demonstrates how to use the legend "location: 'outsideGrid'" option.  This option will place the legend outside of the grid but inside of the plot target.  It will shrink the grid to accommodate the plot target.  Borders have been added to the plot target container elements to clarify how the legend is drawn in each case.</p>
 
 
 <div id="chart6" class="plot" style="width:500px;height:300px;"></div>
     
-  </body>
+  
+  </div>
+</body>
 </html>

examples/linepiebar.html

 
  </head>
  <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
  <div id="chart1" style="height:300px; width:600px;"></div>
  <div id="chart2" style="height:340px; width:500px;"></div>
  <div id="chart3" style="height:340px; width:500px;"></div>
 
- </body>
+ 
+  </div>
+</body>
  </html>

examples/markerStyles.html

 		
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 <div class="jqPlot" id="chart1" style="height:380px; width:480px;"></div>
 
+
+  </div>
 </body>
 
 

examples/mekkoChart.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
       
       <p>Mekko charts make a number of customizations to the series, axes and legend.  You can create a Mekko chart by including the renderers:</p>
 <pre>
 </pre>
 
     <div id="chart3" style="width:500px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/meterGauge.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 <p>A meter gauge plot shows a data value in a speedometer style gauge.  The "series" in consists of a single data value that positions the needle on the gauge.  The span of the gauge will be automatically determined, or can be set with the "min" and "max" values in the "rendererOptions" of the series.  The plot below also specifies a chart title and a "label" for the gauge.</p>
 
 <p>The inner and outer radii of the interval band can also be specified with the "intervalInnerRadius" and "intervalOuterRadius" options.  In the plot below, the "labelPosition" option was set to "bottom" to put the gauge label below the plot.  The "labelHeightAdjust" option was set to -5 to raise the label slightly (5 pixels) to place it closer to the gauge.</p>
 <p>The gauge automatically resizes to best fit the container.  The font size of the tick labels and gauge labels do not size to the container, however.  The font size of the tick labels can be controlled by styling the css ".jqplot-meterGauge-ticks" class and the gauge label by the "jqplot-meterGauge-label" class.</p>
 <div id="chart4" class="plot" style="width:500px;height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/meterGauge2.html

 </script> 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 <!-- <div id="chart0" class="plot" style="width:250px;height:170px;"></div>
 
 <div id="chart5" class="plot" style="width:372px;height:225px;"></div>
 
     <pre id="code_5" class="code-block"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/minMaxLines.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart" style="height:300; width:500;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/missingValues.html

     </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
 <pre class="code"></pre>
     <div id="chart1b" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
 <pre class="code"></pre>
     <div id="chart2b" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
 <pre class="code"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/multiAxesRotatedText.html

 </script>
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 <div class="jqPlot" id="chart2" style="height:320px; width:480px;"></div>
 
 
+
+  </div>
 </body>
 </html>

examples/multipleBarColors.html

 		
 </head>
 <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <p>Individual bars can now have different colors.  This is achieved by setting the "varyBarColor" option to true in the series rendererOptions.  The default is to assign each bar a different color from the default "seriesColors" array.  You can customize the seriesColors array to assign whatever colors you like to the bars.</p>
 		<div id="chart1" style="width:500px;height:250px;margin:20px;"></div>
 		<div id="chart2" style="width:500px;height:250px;margin:20px;"></div>
     
 		<div id="chart4" style="width:700px;height:250px;margin:20px;"></div>
  
+
+  </div>
 </body>
 
 

examples/multipleLines.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/multipleYAxes.html

   </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <div id="chart" style="margin-top:20px; margin-left:20px; width:700px; height:300px;"></div>
     <div id="chart2" style="margin-top:20px; margin-left:20px; width:700px; height:300px;"></div>
     <div id="chart3" style="margin-top:20px; margin-left:20px; width:700px; height:300px;"></div>
     <div id="chart4" style="margin-top:20px; margin-left:20px; width:700px; height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>
-<div class="nav">
+<div class="examplenav">
   <?php
     $dh  = opendir('./');
     while (false !== ($filename = readdir($dh))) {

examples/noDataOptions.html

   <!--[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>
 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart" style="height:200px; width:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/pieTest.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <p>This page tests for 3 conditions.  Plotting pies with a slice that begins at 0 and ends at and near 2*pi (360 degrees), disabling the trendline plugin on pies, and plotting a pie that has a 0 value (or a very small value relative to other values) in the data set.</p>
     <div id="pie1" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
 <pre class="code"></pre>
 <pre class="code"></pre>
     <div id="pie7" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
 <pre class="code"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/pieTest2.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="code"></div>
     <p>To create pie plots, you have to include the "jqplot.pieRenderer.js" file in your source.</p>
 
         
 <p>A simple line chart is added to test for imcompatabilities.</p>
         <div id="chart6" style="margin-top:20px; margin-left:20px; width:160px; height:100px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/pieTest3.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 
                
  
     
  
-  </body>
+  
+  </div>
+</body>
 </html>

examples/pieTest4.html

     
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
 
                
 
     <div id="chart10" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
     <pre class="code"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/pointLabels.html

 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
     <p>Click and drag to zoom.  Double click on plot or click "Reset Zoom" button to reset zoom.</p>
 <div id="chart" style="height:300px; width:600px;"></div>
 <div style="padding-top:20px">
 
 <div id="chart2" style="height:300px; width:600px;"></div>
 </div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/pointLabels2.html

 </script>
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" class="plot" style="width:500px;height:300px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/prefix.html

 </script> 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <p>Example of the "prefix" axis tick option.  This option adds a prefix to the tick label if and only if no formatString option is specified.</p>
     <div id="chartdiv" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
     <pre id="code_1" class="code-block"></pre>
     <p>A new configuration option, $.jqplot.config.defaultTickFormatString, has been added as well.  When no user formatString is specified, linear axes previously used a hard coded '%.1f' default format string.  The config option controls this default format string.  This allows an alternative way to format tick labels, with or without a prefix, if no formatString option is specified.</p>
     <div id="chartdiv2" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
     <pre id="code_2" class="code-block"></pre>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/replotting.html

 
  </head>
  <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 
  <div id="GraphContainer" style="height:500px; width:900px;"></div>
  <label for="interval">Update Inverval (ms):</label><input type="text" name="interval" id="interval" value="500" /><br />
  graph" />
  <input type="button" onclick="StopGraphLoop();" value="Stop" />
 
- </body>
+ 
+  </div>
+</body>
  </html>

examples/resetAxisTicks.html

   <!--[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>
 
   </head>
   <body>
-<?php include "nav.inc"; ?>
+    <?php include "topbanner.php"; ?>
+    <div class="example-content">
+    <?php include "nav.inc"; ?>
 <div id="chart1" style="height:200px; width:400px;"></div>
 <div id="chart2" style="height:200px; width:400px;"></div>
-  </body>
+  
+  </div>
+</body>
 </html>

examples/resizablePlot.html