Commits

Chris Leonello committed 75a3f3b

Example modifications, additions and deletions.

Comments (0)

Files changed (20)

examples/axisLabelTests.php

+<?php 
+    $title = "Line Charts and Options";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+<p>jqPlot support axis labels through the "label" option of each axis.  The default label renderer creates labels in div tags, which allows full css control over every label.  Labels are assigned css classes like "jqplot-axis_name-label" where "axis_name" will be xaxis, yaxis, etc.</p>
+
+<div id="chart1" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<p>By including the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisLabelRenderer.min.js" plugins, you can render label text directly onto canvas elements.  This allows text to be rotated and yaxes will have their labels rotated 90 degrees by default.   By default the labels will be rendered using the Hershey font metrics and not stroked as text.  Most recent browsers (include IE 9) support native text rendering in canvas elements.</p>
+
+<div id="chart2" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+      
+<p>If a visitors is using a browser suppporting native canvas fonts, the plot belowsupported browser, they will see the labels in the plot below rendered as 12 pt Georgia (or their system serif font if Georgia is unavailable).  If they are on an unsupported browser, they will see the default Hershey font.</p>
+
+<div id="chart3" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var cosPoints = []; 
+  for (var i=0; i<2*Math.PI; i+=0.1){ 
+     cosPoints.push([i, Math.cos(i)]); 
+  } 
+  var plot1 = $.jqplot('chart1', [cosPoints], {  
+      series:[{showMarker:false}],
+      axes:{
+        xaxis:{
+          label:'Angle (radians)'
+        },
+        yaxis:{
+          label:'Cosine'
+        }
+      }
+  });
+});
+</script>
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var cosPoints = []; 
+  for (var i=0; i<2*Math.PI; i+=0.1){ 
+     cosPoints.push([i, Math.cos(i)]); 
+  } 
+  var plot2 = $.jqplot('chart2', [cosPoints], {  
+      series:[{showMarker:false}],
+      axes:{
+        xaxis:{
+          label:'Angle (radians)',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
+        },
+        yaxis:{
+          label:'Cosine',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
+        }
+      }
+  });
+});
+</script>
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var cosPoints = []; 
+  for (var i=0; i<2*Math.PI; i+=0.1){ 
+     cosPoints.push([i, Math.cos(i)]); 
+  } 
+  var plot3 = $.jqplot('chart3', [cosPoints], {  
+      series:[{showMarker:false}],
+      axes:{
+        xaxis:{
+          label:'Angle (radians)',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+          labelOptions: {
+            fontFamily: 'Georgia, Serif',
+            fontSize: '12pt'
+          }
+        },
+        yaxis:{
+          label:'Cosine',
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+          labelOptions: {
+            fontFamily: 'Georgia, Serif',
+            fontSize: '12pt'
+          }
+        }
+      }
+  });
+});
+</script>
+
+
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

examples/axisLabelsRotatedText.php

 <?php 
-    $title = "Filled (Area) Charts";
+    $title = "Axis Labels and Rotated Text";
     $plotTargets = array('chart1', 'chart2', 'chart3', 'chart4');
 ?>
 <?php include "opener.php"; ?>

examples/axisScalingForceTickAt.php

 <?php 
-    $title = "Filled (Area) Charts";
+    $title = "Force Plot to Have Tick at 0 or 100";
     // $plotTargets = array('chart1', 'chart2', 'chart3', 'chart4');
 ?>
 <?php include "opener.php"; ?>

examples/bandedLine.php

 <?php 
-    $title = "Filled (Area) Charts";
+    $title = "Error Bands and Confidence Intervals";
     // $plotTargets = array('chart1', 'chart2', 'chart3', 'chart4');
 ?>
 <?php include "opener.php"; ?>

examples/barTest.php

 <?php 
-    $title = "Animated Charts";
+    $title = "Bar Charts";
     // $plotTargets = array(array('id'=>'chart1', 'height'=>300, 'width'=>700));
 ?>
 <?php include "opener.php"; ?>

examples/bezierCurve.php

 <?php 
-    $title = "Animated Charts";
+    $title = "Bezier Curve Plots";
     // $plotTargets = array('chart1', 'chart2', 'chart3');
 ?>
 <?php include "opener.php"; ?>

examples/customHighlighterCursorTrendline.php

 <?php 
-    $title = "Candlestick and Open Hi Low Close charts";
+    $title = "Highlighting, Dragging Points, Cursor and Trend Lines.";
     $plotTargets = array('chart1');
 ?>
 <?php include "opener.php"; ?>

examples/dateAxisRenderer.php

 <?php 
-    $title = "Candlestick and Open Hi Low Close charts";
+    $title = "Date Axes";
     // $plotTargets = array('chart1');
 ?>
 <?php include "opener.php"; ?>

examples/line-charts.php

+<?php 
+    $title = "Line Charts and Options";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+<p>The most basic jqPlot chart takes a series of data and plots a line.  No options need to be supplied.  Data is passed in as an array of series.  A series can be either an array of y values or an array of [x,y] data pairs.  If y values only, x values are assigned like 1, 2, 3, ...  Note, for this plot you don't need any plugins.</p>
+
+<div id="chart1" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<p>The following plot uses a number of options to set the title, add axis labels, and shows how to use the canvasAxisLabelRenderer plugin to provide rotated axis labels.</p>
+
+<div id="chart2" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<p>There are numerous line style options to control how the lines and markers are displayed.</p>
+
+<div id="chart3" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var plot1 = $.jqplot ('chart1', [[3,7,9,1,5,3,8,2,5]]);
+});
+</script>
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var plot2 = $.jqplot ('chart2', [[3,7,9,1,5,3,8,2,5]], {
+      // Give the plot a title.
+      title: 'Plot With Options',
+      // You can specify options for all axes on the plot at once with
+      // the axesDefaults object.  Here, we're using a canvas renderer
+      // to draw the axis label which allows rotated text.
+      axesDefaults: {
+        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
+      },
+      // Likewise, seriesDefaults specifies default options for all
+      // series in a plot.  Options specified in seriesDefaults or
+      // axesDefaults can be overridden by individual series or
+      // axes options.
+      // Here we turn on smoothing for the line.
+      seriesDefaults: {
+          rendererOptions: {
+              smooth: true
+          }
+      },
+      // An axes object holds options for all axes.
+      // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
+      // Up to 9 y axes are supported.
+      axes: {
+        // options for each axis are specified in seperate option objects.
+        xaxis: {
+          label: "X Axis",
+          // Turn off "padding".  This will allow data point to lie on the
+          // edges of the grid.  Default padding is 1.2 and will keep all
+          // points inside the bounds of the grid.
+          pad: 0
+        },
+        yaxis: {
+          label: "Y Axis"
+        }
+      }
+    });
+});
+</script>
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  // Some simple loops to build up data arrays.
+  var cosPoints = [];
+  for (var i=0; i<2*Math.PI; i+=1){ 
+    cosPoints.push([i, Math.cos(i)]); 
+  }
+   
+  var sinPoints = []; 
+  for (var i=0; i<2*Math.PI; i+=0.4){ 
+     sinPoints.push([i, 2*Math.sin(i-.8)]); 
+  }
+   
+  var powPoints1 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); 
+  }
+   
+  var powPoints2 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); 
+  } 
+
+  var plot3 = $.jqplot('chart3', [cosPoints, sinPoints, powPoints1, powPoints2], 
+    { 
+      title:'Line Style Options', 
+      // Set default options on all series, turn on smoothing.
+      seriesDefaults: {
+          rendererOptions: {
+              smooth: true
+          }
+      },
+      // Series options are specified as an array of objects, one object
+      // for each series.
+      series:[ 
+          {
+            // Change our line width and use a diamond shaped marker.
+            lineWidth:2, 
+            markerOptions: { style:'dimaond' }
+          }, 
+          {
+            // Don't show a line, just show markers.
+            // Make the markers 7 pixels with an 'x' style
+            showLine:false, 
+            markerOptions: { size: 7, style:"x" }
+          },
+          { 
+            // Use (open) circlular markers.
+            markerOptions: { style:"circle" }
+          }, 
+          {
+            // Use a thicker, 5 pixel line and 10 pixel
+            // filled square markers.
+            lineWidth:5, 
+            markerOptions: { style:"filledSquare", size:10 }
+          }
+      ]
+    }
+  );
+   
+});
+</script>
+
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

examples/pieTest.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Pie Chart Tests</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">
-  div.jqplot-target { margin-bottom: 45px; }
-  </style>
-  
-<script class="code" type="text/javascript">$(document).ready(function(){
-    plot1 = $.jqplot('pie1', [[['a',25],['b',14],['c',7]]], {
-        gridPadding: {top:0, bottom:38, left:0, right:0},
-      seriesDefaults:{renderer:$.jqplot.PieRenderer, trendline:{show:false}, rendererOptions: { padding: 8, showDataLabels: true}},
-                  legend:{
-                      show:true, 
-                      placement: 'outside', 
-                      rendererOptions: {
-                          numberRows: 1
-                      }, 
-                      location:'s',
-                      marginTop: '15px'
-                  }       
-    });
-});</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-    plot2 = $.jqplot('pie2', [[['a',25],['b',14],['c',7]]], {
-      seriesDefaults:{renderer:$.jqplot.PieRenderer, trendline:{show:true}},
-      legend:{show:true}    
-    });
-});</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){    
-    plot3 = $.jqplot('pie3', [[['a',1],['b',9],['c',1]]], {
-      seriesDefaults:{shadow: false, renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin: 4, startAngle: -90}, trendline:{show:true}},
-      legend:{show:true}      
-    });
-});</script>
- 
-<script class="code" type="text/javascript">$(document).ready(function(){   
-    plot4 = $.jqplot('pie4', [[["a",0],["b",1],["c",.01]]], {
-      seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin: 0},  trendline:{show:true}},
-      legend:{show:true}      
-    });
-});</script> 
-  
-<script class="code" type="text/javascript">$(document).ready(function(){  
-    plot5 = $.jqplot('pie5', [[["none",23],["error",0],["click",5],["impression",25]]], {
-      seriesDefaults:{renderer:$.jqplot.PieRenderer},
-      legend:{show:true}      
-    });   
-});</script>
-  
-<script class="code" type="text/javascript">$(document).ready(function(){  
-    plot6 = $.jqplot('pie6', [[["none",0],["error",0],["click",0],["impression",0]]], {
-      seriesDefaults:{renderer:$.jqplot.PieRenderer},
-      legend:{show:true}      
-    });   
-});</script>
-  
-<script class="code" type="text/javascript">$(document).ready(function(){  
-    plot7 = $.jqplot('pie7', [[["all", 10]]], {
-      seriesDefaults:{
-        renderer:$.jqplot.PieRenderer,
-        rendererOptions: {
-          showDataLabels: true
-        }
-      },
-      legend:{show:true}      
-    });   
-});</script>
-
-  
-<script type="text/javascript">    
-    $(document).ready(function(){
-        $('script.code').each(function(index) {
-            $('pre.code').eq(index).text($(this).html());
-        });
-        $(document).unload(function() {$('*').unbind(); });
-    });
-</script>
-
-  </head>
-  <body>
-    <?php include "topbanner.inc"; ?>
-    <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>
-    <div id="pie2" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
-<pre class="code"></pre>
-    <div id="pie3" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
-<pre class="code"></pre>
-    <div id="pie4" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
-<pre class="code"></pre>
-    <div id="pie5" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
-<pre class="code"></pre>
-    <div id="pie6" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
-<pre class="code"></pre>
-    <div id="pie7" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
-<pre class="code"></pre>
-  
-  </div>
-</body>
-</html>

examples/pieTest.php

+<?php 
+    $title = "Pie Charts and Options";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+
+    <div id="pie1" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
+
+    <div id="pie2" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
+
+    <div id="pie3" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
+
+    <div id="pie4" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
+
+    <div id="pie5" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
+
+    <div id="pie6" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
+
+    <div id="pie7" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
+
+    <div id="pie8" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
+
+
+  
+<script class="code" type="text/javascript">$(document).ready(function(){
+    var plot1 = $.jqplot('pie1', [[['a',25],['b',14],['c',7]]], {
+        gridPadding: {top:0, bottom:38, left:0, right:0},
+        seriesDefaults:{
+            renderer:$.jqplot.PieRenderer, 
+            trendline:{ show:false }, 
+            rendererOptions: { padding: 8, showDataLabels: true }
+        },
+        legend:{
+            show:true, 
+            placement: 'outside', 
+            rendererOptions: {
+                numberRows: 1
+            }, 
+            location:'s',
+            marginTop: '15px'
+        }       
+    });
+});</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+    var plot2 = $.jqplot('pie2', [[['a',25],['b',14],['c',7]]], {
+        seriesDefaults:{ renderer:$.jqplot.PieRenderer, trendline:{ show: true } },
+        legend:{ show: true }    
+    });
+});</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){    
+    var plot3 = $.jqplot('pie3', [[['a',1],['b',9],['c',1]]], {
+        seriesDefaults:{
+            shadow: false, 
+            renderer:$.jqplot.PieRenderer, 
+            rendererOptions:{
+                sliceMargin: 4, 
+                // rotate the starting position of the pie around to 12 o'clock.
+                startAngle: -90
+            }
+        },
+        legend:{ show: true }      
+    });
+});</script>
+ 
+<script class="code" type="text/javascript">$(document).ready(function(){   
+    var plot4 = $.jqplot('pie4', [[["a",0],["b",1],["c",.01]]], {
+        seriesDefaults:{
+            renderer:$.jqplot.PieRenderer, 
+            rendererOptions:{ sliceMargin: 0 }
+        },
+        legend:{ show: true }      
+    });
+});</script> 
+  
+<script class="code" type="text/javascript">$(document).ready(function(){  
+    var plot5 = $.jqplot('pie5', [[["none",23],["error",0],["click",5],["impression",25]]], {
+        seriesDefaults:{ renderer: $.jqplot.PieRenderer },
+        legend:{ show:true }      
+    });   
+});</script>
+  
+<script class="code" type="text/javascript">$(document).ready(function(){  
+    var plot6 = $.jqplot('pie6', [[["none",0],["error",0],["click",0],["impression",0]]], {
+        seriesDefaults:{ renderer: $.jqplot.PieRenderer },
+        legend:{ show:true }     
+    });   
+});</script>
+  
+<script class="code" type="text/javascript">$(document).ready(function(){  
+    var plot7 = $.jqplot('pie7', [[["all", 10]]], {
+        seriesDefaults:{
+            renderer:$.jqplot.PieRenderer,
+            rendererOptions: {
+                showDataLabels: true
+            }
+        },
+        legend:{show:true}      
+    });   
+});</script>
+  
+<script class="code" type="text/javascript">$(document).ready(function(){ 
+    var s1 = [['Sony',7], ['Samsumg',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]];
+        
+    var plot8 = $.jqplot('pie8', [s1], {
+        grid: {
+            drawBorder: false, 
+            drawGridlines: false,
+            background: '#ffffff',
+            shadow:false
+        },
+        axesDefaults: {
+            
+        },
+        seriesDefaults:{
+            renderer:$.jqplot.PieRenderer,
+            rendererOptions: {
+                showDataLabels: true
+            }
+        },
+        legend: {
+            show: true,
+            rendererOptions: {
+                numberRows: 1
+            },
+            location: 's'
+        }
+    }); 
+});</script>
+
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

examples/pieTest3.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Pie Chart Tests 3</title>
-  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
-  
-  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
-  <link rel="stylesheet" type="text/css" href="examples.css" />
-  
-  <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
-  <!-- END: load jquery -->  
-  
-  <!-- BEGIN: load jqplot -->
-  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
-  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
-  <!-- END: load jqplot -->
-
-  <style type="text/css">
-    #code {
-        font: 10pt "Andale Mono", Monaco, "Courier New", sans-serif ;
-        white-space: pre;
-    }
-    
-    pre {
-        background: #D8F4DC;
-        border: 1px solid rgb(200, 200, 200);
-        padding-top: 1em;
-        padding-left: 3em;
-        padding-bottom: 1em;
-        margin-top: 1em;
-        margin-bottom: 3em;
-        
-    }
-    
-    p {
-        margin: 2em 0;
-    }
-  </style>
-  
-<script id="example_1" type="text/javascript">$(document).ready(function(){
-    s1 = [['Sony',7], ['Samsumg',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]];
-        
-    plot1 = $.jqplot('chart1', [s1], {
-        grid: {
-            drawBorder: false, 
-            drawGridlines: false,
-            background: '#ffffff',
-            shadow:false
-        },
-        axesDefaults: {
-            
-        },
-        seriesDefaults:{
-            renderer:$.jqplot.PieRenderer,
-            rendererOptions: {
-                showDataLabels: true
-            }
-        },
-        legend: {
-            show: true,
-            rendererOptions: {
-                numberRows: 1
-            },
-            location: 's'
-        }
-    }); 
-});
-</script>
-
-<script type="text/javascript">
-    $(document).ready(function(){
-        
-        $('#code_1').html($('#example_1').html());
-        $(document).unload(function() {$('*').unbind(); });
-
-    });
-</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:300px; height:300px;"></div>
-    
-    <pre id="code_1"></pre>
- 
-    
- 
-  
-  </div>
-</body>
-</html>

examples/pieTest4.html

-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Pie Chart Tests 4</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">
-    #code {
-        font: 10pt "Andale Mono", Monaco, "Courier New", sans-serif ;
-        white-space: pre;
-    }
-    
-    pre {
-        background: #D8F4DC;
-        border: 1px solid rgb(200, 200, 200);
-        padding-top: 1em;
-        padding-left: 3em;
-        padding-bottom: 1em;
-        margin-top: 1em;
-        margin-bottom: 3em;
-        
-    }
-    
-    p {
-        margin: 2em 0;
-    }
-  </style>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-	jQuery.jqplot.config.enablePlugins = true;
-	plot1 = jQuery.jqplot('chart1', 
-		[[['Verwerkende FruedenStunde Companaziert Eine industrie', 9],['Retail', 8], ['Primaire producent', 7], 
-		['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
-		{
-			title: ' ', 
-			seriesDefaults: {
-        shadow: false, 
-        renderer: jQuery.jqplot.PieRenderer, 
-        rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: false } 
-      }, 
-			legend: { show:true, location: 'e' }
-		}
-	);
-});
-</script>
-
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  plot2 = jQuery.jqplot('chart2', 
-    [[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0], 
-    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 3], ['Bewerkende industrie', 2]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {
-        shadow: false, 
-        renderer: jQuery.jqplot.PieRenderer, 
-        rendererOptions: { 
-          startAngle: 180, 
-          sliceMargin: 4, 
-          showDataLabels: true } 
-      }, 
-      legend: { show:true, location: 'w' }
-    }
-  );
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  plot3 = jQuery.jqplot('chart3', 
-    [[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0], 
-    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 2]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {
-        shadow: false, 
-        renderer: jQuery.jqplot.PieRenderer, 
-        rendererOptions: { 
-          sliceMargin: 4, 
-          showDataLabels: true 
-        } 
-      }, 
-      legend: { show:true, location: 'e' }
-    }
-  );
-
-  
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  plot4 = jQuery.jqplot('chart4', 
-    [[['Verwerkende industrie', 30],['Retail', 0], ['Primaire producent', 0], 
-    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4, showDataLabels: true } }, 
-      legend: { show:true, location: 'e' }
-    }
-  );
-
-  
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  plot5 = jQuery.jqplot('chart5', 
-    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
-    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4, showDataLabels: true } }, 
-      legend: { show:true }
-    }
-  );
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  plot6 = jQuery.jqplot('chart6', 
-    [[['Verwerkende industrie', 100]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4, showDataLabels: true } }, 
-      legend: { show:true }
-    }
-  );
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  jQuery.jqplot.config.enablePlugins = true;
-  plot7 = jQuery.jqplot('chart7', 
-    [[['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7], 
-    ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, 
-      legend: { show:true }
-    }
-  );
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  plot8 = jQuery.jqplot('chart8', 
-    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
-    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, 
-      legend: { show:true }
-    }
-  );
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  jQuery.jqplot.config.enablePlugins = true;
-  plot9 = jQuery.jqplot('chart9', 
-    [[['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7], 
-    ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { fill: false, sliceMargin: 4, showDataLabels: true } }, 
-      legend: { show:true }
-    }
-  );
-});
-</script>
-
-<script class="code" type="text/javascript">$(document).ready(function(){
-  plot10 = jQuery.jqplot('chart10', 
-    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
-    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
-    {
-      title: ' ', 
-      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { fill: false, sliceMargin: 4, showDataLabels: true } }, 
-      legend: { show: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"; ?>
-
-
-               
-    <div id="chart1" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    
-    <pre class="code"></pre>
- 
-    <div id="chart2" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    
-    <pre class="code"></pre>
-
-    <div id="chart3" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-  
-    <div id="chart4" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-
-    <div id="chart5" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-
-    <div id="chart6" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-
-    <div id="chart7" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-
-    <div id="chart8" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-
-    <div id="chart9" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-
-    <div id="chart10" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
-    <pre class="code"></pre>
-  
-  </div>
-</body>
-</html>

examples/pieTest4.php

+<?php 
+    $title = "Pie Charts and Options";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+    <div id="chart1" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    
+    <pre class="code brush:js"></pre>
+ 
+    <div id="chart2" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    
+    <pre class="code brush:js"></pre>
+
+    <div id="chart3" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+  
+    <div id="chart4" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+
+    <div id="chart5" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+
+    <div id="chart6" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+
+    <div id="chart7" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+
+    <div id="chart8" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+
+    <div id="chart9" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+
+    <div id="chart10" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code brush:js"></pre>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+    jQuery.jqplot.config.enablePlugins = true;
+    plot1 = jQuery.jqplot('chart1', 
+        [[['Verwerkende FruedenStunde Companaziert Eine industrie', 9],['Retail', 8], ['Primaire producent', 7], 
+        ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
+        {
+            title: ' ', 
+            seriesDefaults: {
+        shadow: false, 
+        renderer: jQuery.jqplot.PieRenderer, 
+        rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: false } 
+      }, 
+            legend: { show:true, location: 'e' }
+        }
+    );
+});
+</script>
+
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot2 = jQuery.jqplot('chart2', 
+    [[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 3], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {
+        shadow: false, 
+        renderer: jQuery.jqplot.PieRenderer, 
+        rendererOptions: { 
+          startAngle: 180, 
+          sliceMargin: 4, 
+          showDataLabels: true } 
+      }, 
+      legend: { show:true, location: 'w' }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot3 = jQuery.jqplot('chart3', 
+    [[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {
+        shadow: false, 
+        renderer: jQuery.jqplot.PieRenderer, 
+        rendererOptions: { 
+          sliceMargin: 4, 
+          showDataLabels: true 
+        } 
+      }, 
+      legend: { show:true, location: 'e' }
+    }
+  );
+
+  
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot4 = jQuery.jqplot('chart4', 
+    [[['Verwerkende industrie', 30],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4, showDataLabels: true } }, 
+      legend: { show:true, location: 'e' }
+    }
+  );
+
+  
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot5 = jQuery.jqplot('chart5', 
+    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4, showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot6 = jQuery.jqplot('chart6', 
+    [[['Verwerkende industrie', 100]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4, showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  jQuery.jqplot.config.enablePlugins = true;
+  plot7 = jQuery.jqplot('chart7', 
+    [[['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7], 
+    ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot8 = jQuery.jqplot('chart8', 
+    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  jQuery.jqplot.config.enablePlugins = true;
+  plot9 = jQuery.jqplot('chart9', 
+    [[['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7], 
+    ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { 
+          fill: false, 
+          sliceMargin: 4, 
+          showDataLabels: true 
+          } 
+      }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot10 = jQuery.jqplot('chart10', 
+    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { 
+          fill: false, 
+          sliceMargin: 4, 
+          showDataLabels: true 
+        } 
+      }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

examples/resizablePlot.php

 <?php 
-    $title = "Charts with Fill Between Lines";
+    $title = "Resizable Plots";
     // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
 ?>
 <?php include "opener.php"; ?>
 <p>The event handler looks like:</p>
 <pre>
     $('#resizable1').bind('resize', function(event, ui) {
-        plot1.replot();
+        plot1.replot( { resetAxes: true } );
     });
 </pre>
 </td>
       }
     };
     
-    
     $("#resizable1").resizable({delay:20});
     $("#resizable2").resizable({delay:20, helper:'ui-resizable-helper'});
-    
 
     $('#resizable1').bind('resize', function(event, ui) {
-        plot1.replot();
+        // pass in resetAxes: true option to get rid of old ticks and axis properties
+        // which should be recomputed based on new plot size.
+        plot1.replot( { resetAxes: true } );
     });
     
     $('#resizable2').bind('resizestop', function(event, ui) {
         $('#chart2').height($('#resizable2').height()*0.96);
         $('#chart2').width($('#resizable2').width()*0.96);
-        plot2.replot({resetAxes:true});
+        // pass in resetAxes: true option to get rid of old ticks and axis properties
+        // which should be recomputed based on new plot size.
+        plot2.replot( { resetAxes:true } );
     });
     
     var plot1 = $.jqplot('chart1', [l1, l3],  options);

examples/rotated-tick-labels.php

+<?php 
+    $title = "Rotated Labels and Font Styling";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+<p>Rotated axis tick labels are possible through the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisTickRenderer.min.js" plugins. Native canvas font rendering capabilities are used in supported browsers.  This includes most recent browsers (including IE 9).  In browsers which don't support native canvas font text, text is rendered in the Hershey font.</p>
+
+<div id="chart1" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+
+<p>For comparison, here is the same graph with the "fontFamily" and "fontSize" set.  If you have a supported browser, you should see a difference in label fonts.</p>
+ 
+<div id="chart1b" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+ 
+<p>The default positioning applies to either primary or secondary axes and accounts for label rotation to ensure that the labels point to the appropriate bar or tick position.</p>
+
+<p>Also note here the use of the "autoscale" option on the y axes.  Turning this option on will force the y axes to line up tick marks for consistend grid lines across the grid.</p>
+
+<div id="chart2" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<p>You can override the default position by specifying a labelPosition of 'start', 'middle' or 'end'. The results probably are not as pleasing as the default 'auto' setting.</p>
+
+<div id="chart3" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
+  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
+  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
+
+  var plot1 = $.jqplot('chart1', [line1], {
+    title: 'Concern vs. Occurrance',
+    series:[{renderer:$.jqplot.BarRenderer}],
+    axesDefaults: {
+        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
+        tickOptions: {
+          angle: -30,
+          fontSize: '10pt'
+        }
+    },
+    axes: {
+      xaxis: {
+        renderer: $.jqplot.CategoryAxisRenderer
+      }
+    }
+  });
+});
+</script>
+
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
+  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
+  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
+  var plot1b = $.jqplot('chart1b', [line1], {
+    title: 'Concern vs. Occurrance',
+    series:[{renderer:$.jqplot.BarRenderer}],
+    axesDefaults: {
+        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
+        tickOptions: {
+          fontFamily: 'Georgia',
+          fontSize: '10pt',
+          angle: -30
+        }
+    },
+    axes: {
+      xaxis: {
+        renderer: $.jqplot.CategoryAxisRenderer
+      }
+    }
+  });
+});
+</script>
+
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
+  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
+  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
+  var line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], 
+  ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];
+
+  var plot2 = $.jqplot('chart2', [line1, line2], {
+    series:[{renderer:$.jqplot.BarRenderer}, {xaxis:'x2axis', yaxis:'y2axis'}],
+    axesDefaults: {
+        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
+        tickOptions: {
+          angle: 30
+        }
+    },
+    axes: {
+      xaxis: {
+        renderer: $.jqplot.CategoryAxisRenderer
+      },
+      x2axis: {
+        renderer: $.jqplot.CategoryAxisRenderer
+      },
+      yaxis: {
+        autoscale:true
+      },
+      y2axis: {
+        autoscale:true
+      }
+    }
+  });
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
+  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
+  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
+  var plot3 = $.jqplot('chart3', [line1], {
+    title: 'Concern vs. Occurrance',
+    series:[{renderer:$.jqplot.BarRenderer}],
+    axesDefaults: {
+        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+        tickOptions: {
+          angle: -30
+        }
+    },
+    axes: {
+      xaxis: {
+        renderer: $.jqplot.CategoryAxisRenderer,
+        tickOptions: {
+          labelPosition: 'middle'
+        }
+      },
+      yaxis: {
+        autoscale:true,
+        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+        tickOptions: {
+          labelPosition: 'start'
+        }
+      }
+    }
+  });
+});
+</script>
+
+
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+  <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
+  <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
+  <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
+  <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
+  <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

examples/rotatedTickLabelsZoom.html

-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=utf-8">
-        <title>jqPlot Test 2</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>
-        <!-- to render rotated axis ticks, include both the canvasText and canvasAxisTick renderers -->
-        <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.cursor.js"></script>
-        <!-- END: load jqplot -->
-
-<style type="text/css" media="screen">
-  .jqplot-axis-tick {
-
-  }
-</style>
-
-    <script type="text/javascript" class="code">
-      
-    $(document).ready(function(){
-        $.jqplot.config.enablePlugins = true;
-    
-        var line1=[['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9], 
-        ['2009-01-30', 8.2], ['2009-02-28', 7.6], ['2009-03-30', 11.4], ['2009-04-30', 16.2], 
-        ['2009-05-30', 21.8], ['2009-06-30', 19.3], ['2009-07-30', 29.7], ['2009-08-30', 36.7], 
-        ['2009-09-30', 38.7], ['2009-10-30', 33.7], ['2009-11-30', 49.7], ['2009-12-30', 62.7]];
-        
-        var plot1 = $.jqplot('chart', [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
-                    }
-                },
-                yaxis:{
-                    rendererOptions:{
-                        tickRenderer:$.jqplot.CanvasAxisTickRenderer},
-                        tickOptions:{fontSize:'10pt', fontFamily:'Tahoma', angle:30, fontWeight:'normal', fontStretch:1}
-                }
-            },
-            series:[{ lineWidth:4, markerOptions:{ style:'square' } }],
-            cursor:{
-                zoom:true,
-                looseZoom: 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="chart" style="margin-top:20px; margin-left:60px; width:600px; height:400px;"></div>
-
-    
-  </div>
-</body>
-</html>

examples/rotatedTickLabelsZoom.php

+<?php 
+    $title = "Date Axes, Rotated Labels and Zooming";
+    $plotTargets = array (array('id'=>'chart', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+<style type="text/css">
+    .jqplot-target: {
+        margin-left: 70px;
+    }
+</style>
+
+<script type="text/javascript" class="code">
+  
+$(document).ready(function(){
+    // Enable plugins like highlighter and cursor by default.
+    // Otherwise, must specify show: true option for those plugins.
+    $.jqplot.config.enablePlugins = true;
+
+    var line1=[['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9], 
+    ['2009-01-30', 8.2], ['2009-02-28', 7.6], ['2009-03-30', 11.4], ['2009-04-30', 16.2], 
+    ['2009-05-30', 21.8], ['2009-06-30', 19.3], ['2009-07-30', 29.7], ['2009-08-30', 36.7], 
+    ['2009-09-30', 38.7], ['2009-10-30', 33.7], ['2009-11-30', 49.7], ['2009-12-30', 62.7]];
+    
+    var plot1 = $.jqplot('chart', [line1], {
+        title:'Rotated Axis Text',
+        axes:{
+            xaxis:{
+                renderer:$.jqplot.DateAxisRenderer, 
+                rendererOptions:{
+                    tickRenderer:$.jqplot.CanvasAxisTickRenderer
+                },
+                tickOptions:{ 
+                    fontSize:'10pt', 
+                    fontFamily:'Tahoma', 
+                    angle:-40
+                }
+            },
+            yaxis:{
+                rendererOptions:{
+                    tickRenderer:$.jqplot.CanvasAxisTickRenderer},
+                    tickOptions:{
+                        fontSize:'10pt', 
+                        fontFamily:'Tahoma', 
+                        angle:30
+                    }
+            }
+        },
+        series:[{ lineWidth:4, markerOptions:{ style:'square' } }],
+        cursor:{
+            zoom:true,
+            looseZoom: true
+        }
+    });
+
+});
+</script>
+
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+    <!-- to render rotated axis ticks, include both the canvasText and canvasAxisTick renderers -->
+    <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.cursor.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

examples/zoom1.php

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

examples/zoomOptions.php

 <?php 
-    $title = "Charts with Fill Between Lines";
+    $title = "Zoom Options";
     // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
 ?>
 <?php include "opener.php"; ?>