Commits

Chris Leonello committed e80c44a

Examples. Finishing up massive reorg of examples. removing some duplicates and not so pertinent samples. Allowing for easier roll out to jqplot.com.

  • Participants
  • Parent commits ff0d15d

Comments (0)

Files changed (76)

 tests
 examples/bug*
 examples/_*
+examples/~*
 
 # switch to regexp syntax.
 syntax: regexp

File examples/barLinePieStack.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Multiple Chart types on same page</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.canvasTextRenderer.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.barRenderer.js"></script>
-		<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
-		<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
-
-  <!-- END: load jqplot -->
-  <style type="text/css" media="screen">
-    .jqplot-axis {
-      font-size: 0.85em;
-    }
-    .jqplot-title {
-      font-size: 1.1em;
-    }
-  </style>
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-    l1 = [2, 3, 1, 4, 3];
-    l2 = [1, 4, 3, 2, 5];
-    
-    
-    plot1 = $.jqplot('chart1', [l1, l2], {
-      title:'Stacked Filled Line Plot with Transparency (transparency not supported in IE6)',
-        stackSeries: true,
-        grid:{background:'#fefbf3', borderWidth:2.5},
-        seriesDefaults: {fill: true, showMarker: false, shadow: false},
-        axes:{xaxis:{pad:1.0, numberTicks:5, autoscale:false}},
-        series:[{color:'rgba(68, 124, 147, 0.7)'}, {color:'rgba(150, 35, 90, 0.7)'}]
-    });
-  });
-  </script>
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-    
-    
-    
-    line1=[['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9], ['2009-01-30', 8.2]];
-     
-    plot2 = $.jqplot('chart2', [line1], {
-        title:'Rotated Axis Text',
-        axes:{
-            xaxis:{
-                renderer:$.jqplot.DateAxisRenderer, 
-                min:'August 30, 2008', 
-                tickInterval:'1 month',
-                rendererOptions:{
-                    tickRenderer:$.jqplot.CanvasAxisTickRenderer},
-                    tickOptions:{formatString:'%b %#d, %Y', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal', fontStretch:1}
-            }
-        },
-        series:[{lineWidth:4, markerOptions:{style:'square'}}]
-    });
-  });
-  </script>
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-    
-     line1 = [[4, 1], [4, 2], [3, 3], [16, 4]];
-     line2 = [[3, 1], [7, 2], [4, 3], [3.125, 4]];
-     plot3 = $.jqplot('chart3', [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']
-             },
-         }
-     });
-  });
-  </script>
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-     
-     line1 = [4, 2, 9, 16];
-     line2 = [3, 7, 6.25, 3.125];
-     plot3b = $.jqplot('chart3b', [line1, line2], {
-         stackSeries: true,
-         legend: {
-             show: true,
-             location: 'nw'
-         },
-         title: 'Unit Sales: Acme Decoy Division',
-         seriesDefaults: {
-             renderer: $.jqplot.BarRenderer,
-             rendererOptions: {
-                 barPadding: 6,
-                 barMargin: 40
-             }
-         },
-         series: [{
-             label: '1st Qtr'
-         },
-         {
-             label: '2nd Qtr'
-         }],
-         axes: {
-             xaxis: {
-                 renderer: $.jqplot.CategoryAxisRenderer,
-                 ticks: ['Q1', 'Q2', 'Q3', 'Q4']
-             },
-         }
-     }); 
-  });
-  </script> 
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-     
-     line1 = [4, 2, 9, 16];
-     line2 = [3, 7, 6.25, 3.125];
-     plot3c = $.jqplot('chart3c', [line1, line2], {
-         legend: {
-             show: true,
-             location: 'nw'
-         },
-         title: 'Unit Sales: Acme Decoy Division',
-         seriesDefaults: {
-             renderer: $.jqplot.BarRenderer,
-             rendererOptions: {
-                 barPadding: 6,
-                 barMargin: 20
-             }
-         },
-         series: [{
-             label: '1st Qtr'
-         },
-         {
-             label: '2nd Qtr'
-         }],
-         axes: {
-             xaxis: {
-                 renderer: $.jqplot.CategoryAxisRenderer,
-                 ticks: ['Q1', 'Q2', 'Q3', 'Q4']
-             },
-         }
-     }); 
-  });
-  </script>  
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-   
-   line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]];
-   line2 = [3, 7, 2.5, 6, 5, 4];
-   
-   plot4 = $.jqplot('chart4', [line1], {
-     title: 'Pie Chart with Legend and sliceMargin',
-     seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:8}}, 
-     legend:{show:true}
-   });
-  });
-  </script>
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-   
-     l1 = [2.2, 3, .6, 4.8, 3];
-     l2 = [1, 4, 3, 2, 5.7];
-  
-  
-    plot5 = $.jqplot('chart5', [l1, l2]);
-
-  });
-  </script>
-  <script class="code" type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-  
-    plot6 = $.jqplot('chart6', [[3,7,3,2,9,11,8]], {
-    });
-
-  });
-  </script>
-<script type="text/javascript" src="example.js"></script>
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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="chart3b" style="margin-top:20px; margin-left:50px; width:360px; height:300px;"></div>
-    <div id="chart3c" 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>
-  
-  </div>
-</body>
-</html>

File examples/barMissingValues.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.barRenderer.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;
-    }
-  </style>
-  <script class="code" type="text/javascript" language="javascript">
-  $(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-line1 = [[2006, 4],            [2008, 9], [2009, 16]];
-line2 = [[2006, 3], [2007, 7], [2008, 6]];
-line3 = [[2006, 5], [2007, 1], [2008, 3], [2009, 7]];
-line4 = [[2006, 2], [2007, 5], [2008, 4], [2009, 9]];
-
-plot1 = $.jqplot('chart1', [line1, line2, line3, line4], {
-    seriesDefaults:{renderer:$.jqplot.BarRenderer, rendererOptions:{barPadding:10, barMargin:10}},
-    legend: {show:true, location: 'nw'},
-    axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer, rendererOptions:{sortMergedLabels:true}}, yaxis:{min:0, max:20, numberTicks:6}}
-    });
-  });
-  </script>
-
-  <script class="code" type="text/javascript" language="javascript">
-  $(document).ready(function(){
-s1 = [4, 3, 9, 16, 12, 8];
-s2 = [null, null, null, 3, 7, 6];
-
-ticks = [2006, 2007, 2008, 2009, 2010, 2011];
-
-plot2 = $.jqplot('chart2', [s1, s2], {
-    seriesDefaults:{},
-    legend: {show:true, location: 'nw'},
-    axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer, ticks:ticks}, yaxis:{min:0, max:20, numberTicks:6}}
-    });
-
-  });
-  </script>
-
-<script type="text/javascript" src="example.js"></script>
-
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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>
-</body>
-</html>

File examples/breakOnNull.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Break On Null 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" type="text/javascript">
-  
-$(document).ready(function(){
-
-   s1 = [null, 13, 43, null, 18, 25, 26, 41, 42, null, null, null, 37, 29, 27, 19]; 
-
-   plot1 = $.jqplot('chart1',[s1],{ 
-       title: 'breakOnNull true', 
-        series:[ 
-            {breakOnNull: true} 
-        ],
-        axes: {
-            xaxis: {
-                min: 0,
-                max:18,
-                tickInterval: 2
-            }
-        }
-   });
-       
-});
-
-
-</script>
-
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-<div id="chart1" style="margin:20px;height:300px; width:600px;"></div>
-  
-  </div>
-</body>
-</html>

File examples/bubbleChart2.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Bubble Chart Examples</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.bubbleRenderer.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;
-        clear: both;
-        
-    }
-    
-    p {
-        margin: 2em 0;
-    }
-    
-    .note {
-        font-size: 0.8em;
-    }
-    
-    #tooltip1b {
-        font-size: 12px;
-        color: rgb(15%, 15%, 15%);
-        padding:2px;
-        background-color: rgba(95%, 95%, 95%, 0.8);
-    }
-    
-    #legend1b {
-        font-size: 12px;
-        border: 1px solid #cdcdcd;
-        border-collapse: collapse;
-    }
-    #legend1b td, #legend1b th {
-        border: 1px solid #cdcdcd;
-        padding: 1px 4px;
-    }
-  </style>
-
-<script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
-    
-    var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
-    [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
-    [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];
-    
-    plot1 = $.jqplot('chart1',[arr],{
-        title: 'Transparent Bubbles',
-        seriesDefaults:{
-            renderer: $.jqplot.BubbleRenderer,
-            rendererOptions: {
-                bubbleAlpha: 0.6,
-                highlightAlpha: 0.8
-            },
-            shadow: true,
-            shadowAlpha: 0.05
-        }
-    });    
-});</script>
-
-<script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
-    
-    var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
-    [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
-    [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];
-    
-    plot1b = $.jqplot('chart1b',[arr],{
-        title: 'Tooltip and Custom Legend Highlighting',
-        seriesDefaults:{
-            renderer: $.jqplot.BubbleRenderer,
-            rendererOptions: {
-                bubbleAlpha: 0.6,
-                highlightAlpha: 0.8,
-                showLabels: false
-            },
-            shadow: true,
-            shadowAlpha: 0.05
-        }
-    });
-    
-    // Legend is a simple table in the html.
-    // Now populate it with the labels from each data value.
-    $.each(arr, function(index, val) {
-        $('#legend1b').append('<tr><td>'+val[3]+'</td><td>'+val[2]+'</td></tr>');
-    });
-    
-    // Now bind function to the highlight event to show the tooltip
-    // and highlight the row in the legend. 
-    $('#chart1b').bind('jqplotDataHighlight', 
-        function (ev, seriesIndex, pointIndex, data, radius) {    
-            var chart_left = $('#chart1b').offset().left,
-                chart_top = $('#chart1b').offset().top,
-                x = plot1b.axes.xaxis.u2p(data[0]),  // convert x axis unita to pixels on grid
-                y = plot1b.axes.yaxis.u2p(data[1]);  // convert y axis units to pixels on grid
-            var color = 'rgb(50%,50%,100%)';
-            $('#tooltip1b').css({left:chart_left+x+radius+5, top:chart_top+y});
-            $('#tooltip1b').html('<span style="font-size:14px;font-weight:bold;color:'+color+';">'+data[3]+'</span><br />'+'x: '+data[0]+'<br />'+'y: '+data[1]+'<br />'+'r: '+data[2]);
-            $('#tooltip1b').show();
-            $('#legend1b tr').css('background-color', '#ffffff');
-            $('#legend1b tr').eq(pointIndex+1).css('background-color', color);
-        });
-    
-    // Bind a function to the unhighlight event to clean up after highlighting.
-    $('#chart1b').bind('jqplotDataUnhighlight', 
-        function (ev, seriesIndex, pointIndex, data) {
-            $('#tooltip1b').empty();
-            $('#tooltip1b').hide();
-            $('#legend1b tr').css('background-color', '#ffffff');
-        });
-});</script>
-
-<script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
-    
-    var arr = [[11, 123, 1236, {label:"Acura", color:'sandybrown'}], 
-    [45, 92, 1067, {label:"Alfa Romeo", color:'skyblue'}], 
-    [24, 104, 1176, {label:"AM General", color:"salmon"}], [50, 23, 610, {color:"papayawhip"}], 
-    [18, 17, 539, "Audi"], [7, 89, 864], [2, 13, 1026, "Bugatti"]];
-    
-    plot1c = $.jqplot('chart1c',[arr],{
-        title: 'Bubble Data Customizations',
-        seriesDefaults:{
-            renderer: $.jqplot.BubbleRenderer
-        }
-    });
-    
-});</script>
-
-<script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
-
-    var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
-    [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
-    [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];
-    
-    plot2 = $.jqplot('chart2',[arr],{
-        title: 'Bubble Gradient Fills*',
-        seriesDefaults:{
-            renderer: $.jqplot.BubbleRenderer,
-            rendererOptions: {
-                bubbleGradients: true
-            },
-            shadow: true
-        }
-    });
-    
-});</script>
-
-<script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
-    
-    var arr = [[44, 66, 897, "Acura"], [25, 40, 1119, "Alfa Romeo"], [2, 33, 1197, "AM General"], 
-    [4, 132, 896, "Aston Martin Lagonda"], [2, 129, 314, "Audi"], [14, 47, 612, "BMW"], 
-    [45, 112, 719, "Bugatti"], [11, 38, 785, "Buick"], [15, 39, 367, "Cadillac"], 
-    [6, 133, 726, "Chevrolet"], [48, 84, 1082, "Citroen"], [40, 18, 1047, "DaimlerChrysler Corporation"], 
-    [24, 107, 1065, "Daewoo Motor Co."], [27, 92, 792, "Delorean Motor Company"], [1, 78, 803, "Dodge"], 
-    [5, 149, 320, "Ferrari"], [11, 127, 497, "Fiat"], [14, 18, 805, "Ford Motor Company"], 
-    [9, 101, 394, "General Motors"], [16, 57, 338, "GMC"], [19, 89, 977, "Holden"], 
-    [35, 78, 464, "Honda"], [18, 130, 364, "Hummer"], [37, 20, 699, "Hyundai"], 
-    [33, 140, 457, "Infiniti"], [12, 122, 533, "Isuzu"], [25, 67, 767, "Jaguar Cars"], 
-    [0, 7, 481, "Jeep"], [38, 36, 611, "Jensen Motors"], [43, 91, 943, "Kia"], [45, 21, 569, "Laforza"]];
-    
-    plot3 = $.jqplot('chart3',[arr],{
-        title: 'Bubble Auto Scaling Options',
-        seriesDefaults:{
-            renderer: $.jqplot.BubbleRenderer,
-            rendererOptions: {
-                autoscalePointsFactor: -0.15,
-                autoscaleMultiplier: 0.85,
-                highlightMouseDown: true,
-                bubbleAlpha: 0.7
-            },
-            shadow: true,
-            shadowAlpha: 0.05
-        }
-    });
-    
-});</script>
-
-
-<script type="text/javascript" src="example.js"></script>
-
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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>
-
-<p>The below chart show basic customization of bubble appearance with the "bubbleAlpha" and "highlightAlpha" options.</p>
-
-<div id="chart1" class="plot" style="width:460px;height:340px;"></div>
-<pre class="code"></pre>
-
-<div style="position:absolute;z-index:99;display:none;" id="tooltip1b"></div>
-
-<table><tr>
-    <td><div id="chart1b" class="plot" style="width:460px;height:340px;"></div></td>
-    <td><div style="height:340px;"><table id="legend1b"><tr><th>Company</th><th>R Value</th></tr></table></div></td>
-</tr></table>
-<pre class="code"></pre>
-
-<p>Below is a basic bubble chart showing usage of the optional label and color properties passed in with the data.</p>
-
-<div id="chart1c" class="plot" style="width:460px;height:340px;"></div>
-<pre class="code"></pre>
-
-<p>The next chart uses the "bubbleGradients: true" option to specify gradient fills on the bubbles.  Radial gradients are not supported in IE<sup>*</sup> and will be automatically disabled.</p>  
-
-<div id="chart2" class="plot" style="width:460px;height:340px;"></div>
-
-<p class="note"><sup>*</sup>Radial gradients are not supported in IE because they are not supported in the excanvas emulation layer used by jqPlot to render charts in IE.  jqPlot renders charts using the HTML canvas element which is supported by nearly every browser except IE.  Excanvas translates the canvas rendering to VML rendering for IE, but unfortunately does not properly handle radial gradients.</p>
-
-<pre class="code"></pre>
-
-<p>The following bubble chart shows the "autoscalePointsFactor" and "autoscaleMultiplier" options which can be used to control bubble scaling.  The "autoscalePointsFactor" options controls bubble scaling with the number of points on the plot.  A negative value will decrease bubble size and number of bubbles increases.  The "autoscaleMultiplier" will makes all bubbles larger or smaller for values greater  or less than 1.0.</p>
-
-<p>This chart also demonstrates some of the highlighting options.  Bubble highlighting is controlled with the "highlightMouseOver" and "highlightMouseDown" boolean options.  Here the "highlightMouseDown: true" option is set which causes the plot to highlight on mousedown (click).  This automatically sets the "highlightMouseOver" option to false.</p>
-
-<p>Events are also trigger with plot interaction.  Specifically, "jqplotDataHighlight", "jqplotDataUnhighlight", "jqplotDataClick" and "jqplotDataRightClick" events are triggered.  Handlers are passed an event object, the series index, the point index, and the bubble data.</p>
-
-<div id="chart3" class="plot" style="width:600px;height:400px;"></div>
-<pre class="code"></pre>
-  
-  </div>
-</body>
-</html>

File examples/canvasOverlay.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <!-- Use Compatibility mode in IE -->
-  <title>Draw Lines on Plots - Canvas Overlay</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.categoryAxisRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasOverlay.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 = [[2009, 3.5], [2010, 4.4], [2011, 6.0], [2012, 9.1], [2013, 12.0], [2014, 14.4]];
-    
-    var grid = {
-        gridLineWidth: 1.5,
-        gridLineColor: 'rgb(235,235,235)',
-        drawGridlines: true
-    };
-    
-    plot1 = $.jqplot('chart1', [s1], {
-        series:[{
-            renderer:$.jqplot.BarRenderer,
-            rendererOptions: {
-                barWidth: 30
-            }
-        }],
-        axes: {
-            xaxis: {
-                renderer: $.jqplot.CategoryAxisRenderer
-            }
-        },
-        grid: grid,
-        canvasOverlay: {
-            show: true,
-            objects: [
-                {horizontalLine: {
-                    name: 'barney',
-                    y: 4,
-                    lineWidth: 6,
-                    color: 'rgb(100, 55, 124)',
-                    shadow: false
-                }},
-                {horizontalLine: {
-                    name: 'fred',
-                    y: 6,
-                    lineWidth: 12,
-                    xminOffset: '8px',
-                    xmaxOffset: '29px',
-                    color: 'rgb(50, 55, 30)',
-                    shadow: false
-                }},
-                {dashedHorizontalLine: {
-                    name: 'wilma',
-                    y: 8,
-                    lineWidth: 2,
-                    xOffset: '54',
-                    color: 'rgb(133, 120, 24)',
-                    shadow: false
-                }},
-                {horizontalLine: {
-                    name: 'pebbles',
-                    y: 10,
-                    lineWidth: 3,
-                    xOffset: 0,
-                    color: 'rgb(89, 198, 154)',
-                    shadow: false
-                }},
-                {dashedHorizontalLine: {
-                    name: 'bam-bam',
-                    y: 14,
-                    lineWidth: 5,
-                    dashPattern: [16, 12],
-                    lineCap: 'round',
-                    xOffset: '20',
-                    color: 'rgb(66, 98, 144)',
-                    shadow: false
-                }}
-            ]
-        }
-    });
-});
-
-function lineup() {
-    var co = plot1.plugins.canvasOverlay;
-    var line = co.get('fred');
-    line.options.y += 1;
-    co.draw(plot1);
-}
-
-function linedown() {
-    var co = plot1.plugins.canvasOverlay;
-    var line = co.get('fred');
-    line.options.y -= 1;
-    co.draw(plot1);
-}
-
-    </script>
-
-<script class="code" type="text/javascript">
-$(document).ready(function(){
-    var s2 = [[9, 3.5], [15, 4.4], [22, 6.0], [38, 9.1], [51, 12.0], [62, 14.4]];
-    
-    var grid = {
-        gridLineWidth: 1.5,
-        gridLineColor: 'rgb(235,235,235)',
-        drawGridlines: true
-    };
-    
-    plot2 = $.jqplot('chart2', [s2], {
-        grid: grid,
-        canvasOverlay: {
-            show: true,
-            objects: [
-                {verticalLine: {
-                    name: 'barney',
-                    x: 10,
-                    lineWidth: 6,
-                    color: 'rgb(100, 55, 124)',
-                    shadow: false
-                }},
-                {verticalLine: {
-                    name: 'fred',
-                    x: 15,
-                    lineWidth: 12,
-                    yminOffset: '8px',
-                    ymaxOffset: '29px',
-                    color: 'rgb(50, 55, 30)',
-                    shadow: false
-                }},
-                {dashedVerticalLine: {
-                    name: 'wilma',
-                    x: 20,
-                    lineWidth: 2,
-                    yOffset: '14',
-                    color: 'rgb(133, 120, 24)',
-                    shadow: false
-                }},
-                {verticalLine: {
-                    name: 'pebbles',
-                    x: 35,
-                    lineWidth: 3,
-                    yOffset: 0,
-                    lineCap: 'butt',
-                    color: 'rgb(89, 198, 154)',
-                    shadow: false
-                }},
-                {dashedVerticalLine: {
-                    name: 'bam-bam',
-                    x: 45,
-                    lineWidth: 5,
-                    dashPattern: [16, 12],
-                    lineCap: 'round',
-                    yOffset: '20px',
-                    color: 'rgb(66, 98, 144)',
-                    shadow: false
-                }}
-            ]
-        }
-    });
-    
-});
-
-
-</script>
-
-<script type="text/javascript" src="example.js"></script>
-    
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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>
-    <button onclick="linedown()">Down</button>
-
-    <pre class="code"></pre>
-
-    <div id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
-    <pre class="code"></pre>
-
-
-  
-  </div>
-</body>
-</html>

File examples/catchError.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.barRenderer.js"></script>
-  <!-- END: load jqplot -->
-
-
-<script language="javascript" type="text/javascript">
-$(document).ready(function(){
-
-    // First, turn on error handling
-    $.jqplot.config.catchErrors = true;
-
-   plot1 = $.jqplot('chart1',[[]],{});
-   
-   // Second plot will use these customizations to the plot target for error display.
-   $.jqplot.config.errorMessage = 'A Plot Error has Occurred';
-   $.jqplot.config.errorBackground = '#fbeddf';
-   $.jqplot.config.errorBorder = '2px solid #aaaaaa';
-   $.jqplot.config.errorFontFamily = 'Courier New';
-   $.jqplot.config.errorFontSize = '16pt';
-   
-   plot2 = $.jqplot('chart2',[],{
-       axes: {
-           xaxis: {
-               renderer: $.jqplot.BarRenderer.js
-           }
-       }
-   });
-   
- });
-</script>
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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>
-</body>
-</html>

File examples/ciParser.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Data Renderers, AJAX and JSON Data</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.ohlcRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.json2.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.ciParser.js"></script>
-  
-  <style type="text/css">
-    div.jqplot-target {
-        margin: 20px;
-    }
-  </style>
-
-  <!-- END: load jqplot -->
-
-<script class="code" type="text/javascript">$(document).ready(function(){  
-    
-    var jsonstr = '{"PriceTicks": [{"Price":5.5,"TickDate":"\/Date(1283745600000)\/"}, \
-            {"Price":6.8,"TickDate":"\/Date(1283832000000)\/"}, \
-            {"Price":7.1,"TickDate":"\/Date(1283918400000)\/"}], \
-        "PriceBars": [{"BarDate":"\/Date(1283745600000)\/","Close":10.0,"High":15.0,"Low":8.0,"Open":9.0}, \
-            {"BarDate":"\/Date(1283832000000)\/","Close":10.6,"High":14.3,"Low":9.1,"Open":12.5}, \
-            {"BarDate":"\/Date(1283918400000)\/","Close":12.0,"High":13.0,"Low":9.0,"Open":9.8}]}';
-
-    plot3 = $.jqplot('chart3', jsonstr, {
-      title:'Custom JSON Format, JSON Encoded String',
-      dataRenderer: $.jqplot.ciParser,
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickInterval: '1 day',
-              tickOptions:{formatString:'%y/%m/%d'},
-              min: '2010/09/05',
-              max: '2010/09/09'
-          }
-      },
-      series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
-    });
-});</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){ 
-    
-    var jsonobj = {"PriceTicks":[
-            {"Price":5.5,"TickDate":"\/Date(1283745600000)\/"},
-            {"Price":6.8,"TickDate":"\/Date(1283832000000)\/"},
-            {"Price":7.1,"TickDate":"\/Date(1283918400000)\/"}],
-        "PriceBars":[
-            {"BarDate":"\/Date(1283745600000)\/","Close":10.0,"High":15.0,"Low":8.0,"Open":9.0},
-            {"BarDate":"\/Date(1283832000000)\/","Close":10.6,"High":14.3,"Low":9.1,"Open":12.5},
-            {"BarDate":"\/Date(1283918400000)\/","Close":12.0,"High":13.0,"Low":9.0,"Open":9.8}]
-    };
-  
-    plot4 = $.jqplot('chart4', jsonobj, {
-      title:'Custom JSON Format, JSON Object',
-      dataRenderer: $.jqplot.ciParser,
-      axes: {
-          xaxis: {
-              renderer:$.jqplot.DateAxisRenderer,
-              tickInterval: '1 day',
-              tickOptions:{formatString:'%y/%m/%d'},
-              min: '2010/09/05',
-              max: '2010/09/09'
-          }
-      },
-      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.inc"; ?>
-    <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>Here, a stringified JSON data objects is passed into the jqplot function.</p>
-<div id="chart3" style="height:200px; width:400px;"></div>
-<pre class="code"></pre>
-<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>
-  
-  </div>
-</body>
-</html>

File examples/customHighlighterCursorTrendline.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Custom Tooltip Formatting, Dragable Points and Trendline</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.barRenderer.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
-   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.dragable.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.trendline.js"></script>
-  <!-- END: load jqplot -->
-
-
-  
-  <script class="code" type="text/javascript">
-
-    $(document).ready(function () {
-
-      $.jqplot.config.enablePlugins = true;
-
-      s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08', 6]];
-
-      plot1 = $.jqplot('test',[s1],{
-         title: 'Highlighting, Dragging, Cursor and Trend Line',
-         axes: {
-             xaxis: {
-                 renderer: $.jqplot.DateAxisRenderer,
-                 tickOptions: {
-                     formatString: '%#m/%#d/%y'
-                 },
-                 numberTicks: 4
-             },
-             yaxis: {
-                 tickOptions: {
-                     formatString: '$%.2f'
-                 }
-             }
-         },
-         highlighter: {
-             sizeAdjust: 10,
-             tooltipLocation: 'n',
-             tooltipAxes: 'y',
-             tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
-             useAxesFormatters: false
-         },
-         cursor: {
-             show: true
-         }
-      });
-    });
-</script>
-
-<script type="text/javascript" src="example.js"></script>
-
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <div class="example-content">
-    <?php include "nav.inc"; ?>
-<div id="test" class="plot" style="width:500px;height:300px;"></div>
-
-  
-  </div>
-</body>
-</html>

File examples/customHighlighterTooltip.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Event Binding and Custom Tooltip</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.inc"; ?>
-    <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>

File examples/customPieTests.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Pie Charts with Customization</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.pieRenderer.js"></script>
-  <!-- END: load jqplot -->
-  <style type="text/css" media="screen">
-    .jqplot-axis {
-      font-size: 0.85em;
-    }
-    .jqplot-legend {
-      font-size: 1em;
-    }
-  </style>
-  <script type="text/javascript" language="javascript">
-  
-  $(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-
-
-line1 = [['<frogs> & lizards', 3], ['buzzards & gizzards', 7], ['deer & beef', 2.5], ['turkeys & vulures', 6], ['moles & voles', 5], ['ground hogs & beets', 4]];
-line2 = [3, 7, 2.5, 6, 5, 4];
-
-plot1 = $.jqplot('chart1', [line1], {
-  seriesColors:['#dd3333', '#d465f1', '#aa2211', '#3377aa', '#6699bb', '#9933aa'],
-  title: 'Default Pie Chart with Custom Colors',
-  seriesDefaults:{renderer:$.jqplot.PieRenderer}
-});
-
-plot2 = $.jqplot('chart2', [line1], {
-  title: 'Pie Chart with Legend and sliceMargin',
-  seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:8}}, 
-  legend:{show:true, escapeHtml:true}
-});
-
-plot3 = $.jqplot('chart3', [line1], {
-  title: 'Pie Chart without the Filling',
-  series:[{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:8, fill:false, shadow:false, lineWidth:5}}], 
-  legend:{show:true, location: 'w'}
-});
- 
-plot3 = $.jqplot('chart4', [line2], {
-  title: 'Not a Pie Chart that should render O.K. alongside a Pie Chart', 
-  seriesColors:['#dd3333', '#33dd33'],
-  legend:{show:true, location: 'n'}
-});
-
-
-  });
-  </script>
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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>
-  
-  </div>
-</body>
-</html>

File examples/dashboardWidget.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <!-- Use Compatibility mode in IE -->
-    <title>Animated Dashboard Sample - Filled Line with Log Axis.</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" />
-    <link rel="stylesheet" type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui.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.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.canvasAxisTickRenderer.js"></script>
-    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
-    <!-- END: load jqplot -->
-
-    <style type="text/css">
-        .jqplot-target {
-            margin: 20px;
-            height: 340px;
-            width: 600px;
-            color: #dddddd;
-        }
-
-        .ui-widget-content {
-            background: rgb(57,57,57);
-        }
-
-        table.jqplot-table-legend {
-            border: 0px;
-            background-color: rgba(100,100,100, 0.0);
-        }
-
-        .jqplot-highlighter-tooltip {
-            background-color: rgba(57,57,57, 0.9);
-            padding: 7px;
-            color: #dddddd;
-        }
-
-
-
-    </style>
-
-    <script class="code" type="text/javascript">
-        $.jqplot._noToImageButton = true;
-        $.jqplot._noCodeBlock = true;
-
-        $(document).ready(function () {
-            var prevYear = [["2011-08-01",398], ["2011-08-02",255.25], ["2011-08-03",263.9], ["2011-08-04",154.24], 
-            ["2011-08-05",210.18], ["2011-08-06",109.73], ["2011-08-07",166.91], ["2011-08-08",330.27], ["2011-08-09",546.6], 
-            ["2011-08-10",260.5], ["2011-08-11",330.34], ["2011-08-12",464.32], ["2011-08-13",432.13], ["2011-08-14",197.78], 
-            ["2011-08-15",311.93], ["2011-08-16",650.02], ["2011-08-17",486.13], ["2011-08-18",330.99], ["2011-08-19",504.33], 
-            ["2011-08-20",773.12], ["2011-08-21",296.5], ["2011-08-22",280.13], ["2011-08-23",428.9], ["2011-08-24",469.75], 
-            ["2011-08-25",628.07], ["2011-08-26",516.5], ["2011-08-27",405.81], ["2011-08-28",367.5], ["2011-08-29",492.68], 
-            ["2011-08-30",700.79], ["2011-08-31",588.5], ["2011-09-01",511.83], ["2011-09-02",721.15], ["2011-09-03",649.62], 
-            ["2011-09-04",653.14], ["2011-09-06",900.31], ["2011-09-07",803.59], ["2011-09-08",851.19], ["2011-09-09",2059.24], 
-            ["2011-09-10",994.05], ["2011-09-11",742.95], ["2011-09-12",1340.98], ["2011-09-13",839.78], ["2011-09-14",1769.21], 
-            ["2011-09-15",1559.01], ["2011-09-16",2099.49], ["2011-09-17",1510.22], ["2011-09-18",1691.72], 
-            ["2011-09-19",1074.45], ["2011-09-20",1529.41], ["2011-09-21",1876.44], ["2011-09-22",1986.02], 
-            ["2011-09-23",1461.91], ["2011-09-24",1460.3], ["2011-09-25",1392.96], ["2011-09-26",2164.85], 
-            ["2011-09-27",1746.86], ["2011-09-28",2220.28], ["2011-09-29",2617.91], ["2011-09-30",3236.63]];
-
-            var currYear = [["2011-08-01",796.01], ["2011-08-02",510.5], ["2011-08-03",527.8], ["2011-08-04",308.48], 
-            ["2011-08-05",420.36], ["2011-08-06",219.47], ["2011-08-07",333.82], ["2011-08-08",660.55], ["2011-08-09",1093.19], 
-            ["2011-08-10",521], ["2011-08-11",660.68], ["2011-08-12",928.65], ["2011-08-13",864.26], ["2011-08-14",395.55], 
-            ["2011-08-15",623.86], ["2011-08-16",1300.05], ["2011-08-17",972.25], ["2011-08-18",661.98], ["2011-08-19",1008.67], 
-            ["2011-08-20",1546.23], ["2011-08-21",593], ["2011-08-22",560.25], ["2011-08-23",857.8], ["2011-08-24",939.5], 
-            ["2011-08-25",1256.14], ["2011-08-26",1033.01], ["2011-08-27",811.63], ["2011-08-28",735.01], ["2011-08-29",985.35], 
-            ["2011-08-30",1401.58], ["2011-08-31",1177], ["2011-09-01",1023.66], ["2011-09-02",1442.31], ["2011-09-03",1299.24], 
-            ["2011-09-04",1306.29], ["2011-09-06",1800.62], ["2011-09-07",1607.18], ["2011-09-08",1702.38], 
-            ["2011-09-09",4118.48], ["2011-09-10",1988.11], ["2011-09-11",1485.89], ["2011-09-12",2681.97], 
-            ["2011-09-13",1679.56], ["2011-09-14",3538.43], ["2011-09-15",3118.01], ["2011-09-16",4198.97], 
-            ["2011-09-17",3020.44], ["2011-09-18",3383.45], ["2011-09-19",2148.91], ["2011-09-20",3058.82], 
-            ["2011-09-21",3752.88], ["2011-09-22",3972.03], ["2011-09-23",2923.82], ["2011-09-24",2920.59], 
-            ["2011-09-25",2785.93], ["2011-09-26",4329.7], ["2011-09-27",3493.72], ["2011-09-28",4440.55], 
-            ["2011-09-29",5235.81], ["2011-09-30",6473.25]];
-
-            plot1 = $.jqplot("chart1", [prevYear, currYear], {
-                seriesColors: ["rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)"],
-                title: 'Monthly TurnKey Revenue',
-                highlighter: {
-                    show: true,
-                    sizeAdjust: 1,
-                    tooltipOffset: 9
-                },
-                grid: {
-                    background: 'rgba(57,57,57,0.0)',
-                    drawBorder: false,
-                    shadow: false,
-                    gridLineColor: '#666666',
-                    gridLineWidth: 2
-                },
-                legend: {
-                    show: true,
-                    placement: 'outside'
-                },
-                seriesDefaults: {
-                    rendererOptions: {
-                        smooth: true,
-                        animation: {
-                            show: true
-                        }
-                    },
-                    showMarker: false
-                },
-                series: [
-                    {
-                        fill: true,
-                        label: '2010'
-                    },
-                    {
-                        label: '2011'
-                    }
-                ],
-                axesDefaults: {
-                    rendererOptions: {
-                        baselineWidth: 1.5,
-                        baselineColor: '#444444',
-                        drawBaseline: false
-                    }
-                },
-                axes: {
-                    xaxis: {
-                        renderer: $.jqplot.DateAxisRenderer,
-                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
-                        tickOptions: {
-                            formatString: "%b %e",
-                            angle: -30,
-                            textColor: '#dddddd'
-                        },
-                        min: "2011-08-01",
-                        max: "2011-09-30",
-                        tickInterval: "7 days",
-                        drawMajorGridlines: false
-                    },
-                    yaxis: {
-                        renderer: $.jqplot.LogAxisRenderer,
-                        pad: 0,
-                        rendererOptions: {
-                            minorTicks: 1
-                        },
-                        tickOptions: {
-                            formatString: "$%'d",
-                            showMark: false
-                        }
-                    }
-                }
-            });
-
-              // 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.jqplotEffect('blind', {mode: 'show', direction: 'left'}, 3000);
-              // plot1.series[1].canvas._elem.jqplotEffect('blind', {mode: 'show', direction: 'left'}, 3000);
-
-              $('.jqplot-highlighter-tooltip').addClass('ui-corner-all')
-        });
-
-
-    </script>
-
-    <script type="text/javascript" src="example.js"></script> 
-
-</head>
-<body>
-    <?php include "topbanner.inc"; ?>
-    <div class="example-content">
-
-        <?php include "nav.inc"; ?>
-
-        <div class="ui-widget ui-corner-all">
-            <div class="ui-widget-header ui-corner-top">Hi Powered Data</div>
-            <div class="ui-widget-content ui-corner-bottom" >
-                <div id="chart1"></div>
-            </div>
-        </div>
-    
-    </div>
-</body>
-</html>

File examples/dashboardWidget.php

+<?php 
+    $title = "Animated Dashboard Sample - Filled Line with Log Axis";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+    <link rel="stylesheet" type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui.css" />
+
+    <style type="text/css">
+        .jqplot-target {
+            margin: 20px;
+            height: 340px;
+            width: 600px;
+            color: #dddddd;
+        }
+
+        .ui-widget-content {
+            background: rgb(57,57,57);
+        }
+
+        table.jqplot-table-legend {
+            border: 0px;
+            background-color: rgba(100,100,100, 0.0);
+        }
+
+        .jqplot-highlighter-tooltip {
+            background-color: rgba(57,57,57, 0.9);
+            padding: 7px;
+            color: #dddddd;
+        }
+
+
+
+    </style>
+
+    <div class="ui-widget ui-corner-all">
+        <div class="ui-widget-header ui-corner-top">Hi Powered Data</div>
+        <div class="ui-widget-content ui-corner-bottom" >
+            <div id="chart1"></div>
+        </div>
+    </div>
+
+    <script class="code" type="text/javascript">
+
+        $(document).ready(function () {
+            $.jqplot._noToImageButton = true;
+            $.jqplot._noCodeBlock = true;
+            var prevYear = [["2011-08-01",398], ["2011-08-02",255.25], ["2011-08-03",263.9], ["2011-08-04",154.24], 
+            ["2011-08-05",210.18], ["2011-08-06",109.73], ["2011-08-07",166.91], ["2011-08-08",330.27], ["2011-08-09",546.6], 
+            ["2011-08-10",260.5], ["2011-08-11",330.34], ["2011-08-12",464.32], ["2011-08-13",432.13], ["2011-08-14",197.78], 
+            ["2011-08-15",311.93], ["2011-08-16",650.02], ["2011-08-17",486.13], ["2011-08-18",330.99], ["2011-08-19",504.33], 
+            ["2011-08-20",773.12], ["2011-08-21",296.5], ["2011-08-22",280.13], ["2011-08-23",428.9], ["2011-08-24",469.75], 
+            ["2011-08-25",628.07], ["2011-08-26",516.5], ["2011-08-27",405.81], ["2011-08-28",367.5], ["2011-08-29",492.68], 
+            ["2011-08-30",700.79], ["2011-08-31",588.5], ["2011-09-01",511.83], ["2011-09-02",721.15], ["2011-09-03",649.62], 
+            ["2011-09-04",653.14], ["2011-09-06",900.31], ["2011-09-07",803.59], ["2011-09-08",851.19], ["2011-09-09",2059.24], 
+            ["2011-09-10",994.05], ["2011-09-11",742.95], ["2011-09-12",1340.98], ["2011-09-13",839.78], ["2011-09-14",1769.21], 
+            ["2011-09-15",1559.01], ["2011-09-16",2099.49], ["2011-09-17",1510.22], ["2011-09-18",1691.72], 
+            ["2011-09-19",1074.45], ["2011-09-20",1529.41], ["2011-09-21",1876.44], ["2011-09-22",1986.02], 
+            ["2011-09-23",1461.91], ["2011-09-24",1460.3], ["2011-09-25",1392.96], ["2011-09-26",2164.85], 
+            ["2011-09-27",1746.86], ["2011-09-28",2220.28], ["2011-09-29",2617.91], ["2011-09-30",3236.63]];
+
+            var currYear = [["2011-08-01",796.01], ["2011-08-02",510.5], ["2011-08-03",527.8], ["2011-08-04",308.48], 
+            ["2011-08-05",420.36], ["2011-08-06",219.47], ["2011-08-07",333.82], ["2011-08-08",660.55], ["2011-08-09",1093.19], 
+            ["2011-08-10",521], ["2011-08-11",660.68], ["2011-08-12",928.65], ["2011-08-13",864.26], ["2011-08-14",395.55], 
+            ["2011-08-15",623.86], ["2011-08-16",1300.05], ["2011-08-17",972.25], ["2011-08-18",661.98], ["2011-08-19",1008.67], 
+            ["2011-08-20",1546.23], ["2011-08-21",593], ["2011-08-22",560.25], ["2011-08-23",857.8], ["2011-08-24",939.5], 
+            ["2011-08-25",1256.14], ["2011-08-26",1033.01], ["2011-08-27",811.63], ["2011-08-28",735.01], ["2011-08-29",985.35], 
+            ["2011-08-30",1401.58], ["2011-08-31",1177], ["2011-09-01",1023.66], ["2011-09-02",1442.31], ["2011-09-03",1299.24], 
+            ["2011-09-04",1306.29], ["2011-09-06",1800.62], ["2011-09-07",1607.18], ["2011-09-08",1702.38], 
+            ["2011-09-09",4118.48], ["2011-09-10",1988.11], ["2011-09-11",1485.89], ["2011-09-12",2681.97], 
+            ["2011-09-13",1679.56], ["2011-09-14",3538.43], ["2011-09-15",3118.01], ["2011-09-16",4198.97], 
+            ["2011-09-17",3020.44], ["2011-09-18",3383.45], ["2011-09-19",2148.91], ["2011-09-20",3058.82], 
+            ["2011-09-21",3752.88], ["2011-09-22",3972.03], ["2011-09-23",2923.82], ["2011-09-24",2920.59], 
+            ["2011-09-25",2785.93], ["2011-09-26",4329.7], ["2011-09-27",3493.72], ["2011-09-28",4440.55], 
+            ["2011-09-29",5235.81], ["2011-09-30",6473.25]];
+
+            plot1 = $.jqplot("chart1", [prevYear, currYear], {
+                seriesColors: ["rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)"],
+                title: 'Monthly TurnKey Revenue',
+                highlighter: {
+                    show: true,
+                    sizeAdjust: 1,
+                    tooltipOffset: 9
+                },
+                grid: {
+                    background: 'rgba(57,57,57,0.0)',
+                    drawBorder: false,
+                    shadow: false,
+                    gridLineColor: '#666666',
+                    gridLineWidth: 2
+                },
+                legend: {
+                    show: true,
+                    placement: 'outside'
+                },
+                seriesDefaults: {
+                    rendererOptions: {
+                        smooth: true,
+                        animation: {
+                            show: true
+                        }
+                    },
+                    showMarker: false
+                },
+                series: [
+                    {
+                        fill: true,
+                        label: '2010'
+                    },
+                    {
+                        label: '2011'
+                    }
+                ],
+                axesDefaults: {
+                    rendererOptions: {
+                        baselineWidth: 1.5,
+                        baselineColor: '#444444',
+                        drawBaseline: false
+                    }
+                },
+                axes: {
+                    xaxis: {
+                        renderer: $.jqplot.DateAxisRenderer,
+                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+                        tickOptions: {
+                            formatString: "%b %e",
+                            angle: -30,
+                            textColor: '#dddddd'
+                        },
+                        min: "2011-08-01",
+                        max: "2011-09-30",
+                        tickInterval: "7 days",
+                        drawMajorGridlines: false
+                    },
+                    yaxis: {
+                        renderer: $.jqplot.LogAxisRenderer,
+                        pad: 0,
+                        rendererOptions: {
+                            minorTicks: 1
+                        },
+                        tickOptions: {
+                            formatString: "$%'d",
+                            showMark: false
+                        }
+                    }
+                }
+            });
+
+              // 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.jqplotEffect('blind', {mode: 'show', direction: 'left'}, 3000);
+              // plot1.series[1].canvas._elem.jqplotEffect('blind', {mode: 'show', direction: 'left'}, 3000);
+
+              $('.jqplot-highlighter-tooltip').addClass('ui-corner-all')
+        });
+
+
+    </script>
+
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.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.canvasAxisTickRenderer.js"></script>
+    <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/dashedLines.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <!-- Use Compatibility mode in IE -->
-  <title>Dashed Lines with Smoothing</title>
-  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
-  
-  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
-  <link rel="stylesheet" type="text/css" href="../examples/examples.css" />
-  
-  <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
-  <!-- END: load jquery -->
-  
-  <!-- BEGIN: load jqplot -->
-  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
-  <!-- END: load jqplot -->
-
-  <style type="text/css">
-    .jqplot-target {
-        margin-bottom: 2em;
-    }
-    
-    pre {
-        background: #D8F4DC;
-        border: 1px solid rgb(200, 200, 200);
-        padding-top: 1em;
-        padding-left: 3em;
-        padding-bottom: 1em;
-        margin-top: 1em;
-        margin-bottom: 4em;
-        
-    }
-    
-    p {
-        margin: 2em 0;
-    }
-    
-    .note {
-        font-size: 0.8em;
-    }
-
-    .jqplot-breakTick {
-        
-    }
-  </style>
-  
-  <script class="code" type="text/javascript">
-
-    $(document).ready(function () {
-      s1 = [[0, 2], [1, 6], [2, 7], [3, 10]];
-
-      // Lines can be drawn as solid, dashed or dotted with the "linePattern" option.
-      // The default is "solid".  Other basic options are "dashed" and "dotted".
-
-      plot1 = $.jqplot("chart1", [s1], {
-        seriesDefaults:{
-            linePattern: 'dashed',
-            showMarker: false,
-            shadow: false
-        }
-      });
-    });
-</script>
-  
-  <script class="code" type="text/javascript">
-
-    $(document).ready(function () {
-
-      s1 = [[0, 2], [1, 6], [2, 7], [3, 10]];
-
-      // Size of the dashes is proportional to the width of the line.
-
-      plot1b = $.jqplot("chart1b", [s1], {
-        seriesDefaults:{
-            linePattern: 'dashed',
-            lineWidth: 7,
-            showMarker: false,
-            shadow: false
-        }
-      });
-    });
-</script>
-
-  
-  <script class="code" type="text/javascript">
-    $(document).ready(function () {
-      s2 = [[0, 6.29], [0.1, 8.21], [0.2, 8.92], [0.3, 7.33], [0.4, 7.91], [0.5, 3.6], [0.6, 6.88], 
-      [0.7, 1.5], [0.8, 0.08], [0.9, 6.36], [1, 0.5], [1.1, 9.14], [1.2, 6.23], [1.3, 2.66], 
-      [1.4, 9.9], [1.5, 7.44], [1.6, 7.82], [1.7, 8.57], [1.8, 3.99], [1.9, 3.83], [2, 6.78], 
-      [2.1, 7.63], [2.2, 6.94], [2.3, 1.24], [2.4, 2.25], [2.5, 0.67], [2.6, 6.73], [2.7, 2.25], 
-      [2.8, 7.72], [2.9, 9.36], [3, 8.49]];
-
-      // Here is the default dotted line.
-
-      plot2 = $.jqplot("chart2", [s2], {
-        seriesDefaults:{
-            linePattern: 'dotted',
-            showMarker: false,
-            shadow: false
-        }
-      });
-    });
-</script>
-
-  
-  <script class="code" type="text/javascript">
-    $(document).ready(function () {
-
-      // Dashes and dots work with smoothed lines as well.
-
-      plot3 = $.jqplot("chart3", [s2], {
-        seriesDefaults:{
-            linePattern: 'dashed',
-            showMarker: false,
-            shadow: false,
-            rendererOptions: {
-              smooth: true
-            }
-        }
-      });
-    });
-</script>
-
-  
-  <script class="code" type="text/javascript">
-    $(document).ready(function () {
-
-      // A user defined linePattern can be specified as well.  The format
-      // of a linePattern definition is an array like [dash length, gap length, ...].
-      // The line looks best when the line pattern array has an even number
-      // of elements, so it begins with a dash and ends with a gap.
-      // The dash and gap lengths are scaled to the line thickness.
-
-      plot4 = $.jqplot("chart4", [s2], {
-        seriesDefaults:{
-            linePattern: [4, 3, 1, 3, 1, 3],
-            showMarker: false,
-            shadow: false,
-            rendererOptions: {
-              smooth: true
-            }
-        }
-      });
-    });
-</script>
-
-  
-<script class="code" type="text/javascript">
-    $(document).ready(function () {
-
-      // The linePattern option also accepts a shorthand string 
-      // notation of dash (-) and dot (.) characters to create
-      // a customized pattern.
-
-      plot4b = $.jqplot("chart4b", [s2], {
-        seriesDefaults:{
-            linePattern: '-.',
-            showMarker: false,
-            shadow: false,
-            rendererOptions: {
-              smooth: true
-            }
-        }
-      });
-    });
-</script>
-  
-  <script class="code" type="text/javascript">
-    $(document).ready(function () {
-
-      // The default dash length and gap length can be controlled 
-      // with the dashLength and gapLength config parameters.
-
-      $.jqplot.config.dashLength = 5;
-      $.jqplot.config.gapLength = 2;
-
-      plot5 = $.jqplot("chart5", [s2], {
-        seriesDefaults:{
-            linePattern: 'dashed',
-            showMarker: false,
-            shadow: false,
-            rendererOptions: {
-              smooth: true
-            }
-        }
-      });
-    });
-</script>
-
-<script type="text/javascript" src="example.js"></script>
-    
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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>
-        
-    <div id="chart1b" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
-
-    <pre class="code"></pre>
-
-    <div id="chart2" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
-
-    <pre class="code"></pre>
-
-    <div id="chart3" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
-
-    <pre class="code"></pre>
-
-    <div id="chart4" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
-
-    <pre class="code"></pre>
-
-    <div id="chart4b" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
-
-    <pre class="code"></pre>
-
-    <div id="chart5" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
-
-    <pre class="code"></pre>
-
-
-  
-  </div>
-</body>
-</html>

File examples/dashedLines.php

+<?php 
+    $title = "Dashed Lines with Smoothing";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
<