Commits

Chris Leonello committed 37b64f6

Examples. Added more.

  • Participants
  • Parent commits 03691e7

Comments (0)

Files changed (11)

File examples/bar-charts.php

+<?php 
+    $title = "Vertical and Horizontal Bar Charts";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+
+  <style type="text/css">
+    
+    .note {
+        font-size: 0.8em;
+    }
+    .jqplot-yaxis-tick {
+      white-space: nowrap;
+    }
+  </style>
+        
+    <div id="chart1" style="width:600px; height:250px;"></div>
+
+    <pre class="code brush: js"></pre>
+
+    <div id="chart2" style="width:400px; height:300px;"></div>
+
+    <pre class="code brush: js"></pre>
+
+    <p class="text">Click on a bar in the plot below to update the text box.</p>
+    <p class="text">You Clicked: 
+    <span id="info3">Nothing yet.</span>
+    </p>
+    <div id="chart3" style="width:400px; height:300px;"></div>
+
+    <pre class="code brush: js"></pre>
+
+  <script class="code" type="text/javascript">
+$(document).ready(function(){
+    var s1 = [200, 600, 700, 1000];
+    var s2 = [460, -210, 690, 820];
+    var s3 = [-260, -440, 320, 200];
+    // Can specify a custom tick Array.
+    // Ticks should match up one for each y value (category) in the series.
+    var ticks = ['May', 'June', 'July', 'August'];
+    
+    var plot1 = $.jqplot('chart1', [s1, s2, s3], {
+        // The "seriesDefaults" option is an options object that will
+        // be applied to all series in the chart.
+        seriesDefaults:{
+            renderer:$.jqplot.BarRenderer,
+            rendererOptions: {fillToZero: true}
+        },
+        // Custom labels for the series are specified with the "label"
+        // option on the series option.  Here a series option object
+        // is specified for each series.
+        series:[
+            {label:'Hotel'},
+            {label:'Event Regristration'},
+            {label:'Airfare'}
+        ],
+        // Show the legend and put it outside the grid, but inside the
+        // plot container, shrinking the grid to accomodate the legend.
+        // A value of "outside" would not shrink the grid and allow
+        // the legend to overflow the container.
+        legend: {
+            show: true,
+            placement: 'outsideGrid'
+        },
+        axes: {
+            // Use a category axis on the x axis and use our custom ticks.
+            xaxis: {
+                renderer: $.jqplot.CategoryAxisRenderer,
+                ticks: ticks
+            },
+            // Pad the y axis just a little so bars can get close to, but
+            // not touch, the grid boundaries.  1.2 is the default padding.
+            yaxis: {
+                pad: 1.05,
+                tickOptions: {formatString: '$%d'}
+            }
+        }
+    });
+});
+  </script>
+  
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    // For horizontal bar charts, x an y values must will be "flipped"
+    // from their vertical bar counterpart.
+    var plot2 = $.jqplot('chart2', [
+        [[2,1], [4,2], [6,3], [3,4]], 
+        [[5,1], [1,2], [3,3], [4,4]], 
+        [[4,1], [7,2], [1,3], [2,4]]], {
+        seriesDefaults: {
+            renderer:$.jqplot.BarRenderer,
+            // Show point labels to the right ('e'ast) of each bar.
+            // edgeTolerance of -15 allows labels flow outside the grid
+            // up to 15 pixels.  If they flow out more than that, they 
+            // will be hidden.
+            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
+            // Rotate the bar shadow as if bar is lit from top right.
+            shadowAngle: 135,
+            // Here's where we tell the chart it is oriented horizontally.
+            rendererOptions: {
+                barDirection: 'horizontal'
+            }
+        },
+        axes: {
+            yaxis: {
+                renderer: $.jqplot.CategoryAxisRenderer
+            }
+        }
+    });
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var s1 = [2, 6, 7, 10];
+  var s2 = [7, 5, 3, 4];
+  var s3 = [14, 9, 3, 8];
+  plot3 = $.jqplot('chart3', [s1, s2, s3], {
+    // Tell the plot to stack the bars.
+    stackSeries: true,
+    captureRightClick: true,
+    seriesDefaults:{
+      renderer:$.jqplot.BarRenderer,
+      rendererOptions: {
+          // Put a 30 pixel margin between bars.
+          barMargin: 30,
+          // Highlight bars when mouse button pressed.
+          // Disables default highlighting on mouse over.
+          highlightMouseDown: true    
+      },
+      pointLabels: {show: true}
+    },
+    axes: {
+      xaxis: {
+          renderer: $.jqplot.CategoryAxisRenderer
+      },
+      yaxis: {
+        // Don't pad out the bottom of the data range.  By default,
+        // axes scaled as if data extended 10% above and below the
+        // actual range to prevent data points right on grid boundaries.
+        // Don't want to do that here.
+        padMin: 0
+      }
+    },
+    legend: {
+      show: true,
+      location: 'e',
+      placement: 'outside'
+    }      
+  });
+  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
+  // the text of the info3 element to show what series and ponit were
+  // clicked along with the data for that point.
+  $('#chart3').bind('jqplotDataClick', 
+    function (ev, seriesIndex, pointIndex, data) {
+      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
+    }
+  ); 
+});
+</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.barRenderer.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.pointLabels.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/bodyOpener.php

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

File examples/bubble-plots.php

+<?php 
+    $title = "Bubble Plots";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+  <style type="text/css">
+    
+    .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>
+
+<p>Bubble charts represent 3 dimensional data.  First, a basic bubble chart with the "bubbleGradients: true" option to specify gradient fills.  Radial gradients are not supported in IE version before IE 9 and will be automatically disabled.</p>  
+
+<div id="chart1" style="height:340px; width:460px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<p>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>Next are some basic customizations of bubble appearance with the "bubbleAlpha" and "highlightAlpha" options.</p>
+
+<div id="chart2" style="height:340px; width:460px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<p>In the following example, display of a custom toolip and highlighting of a custom table legend is performed by binding to the "jqplotDataHighlight" and "jqplotDataUnhighlight" events.  The custom legend table here is dynamically created with a few lines of jQuery (O.K., it could be done in one line) based on the data array of the plot.</p>
+
+<div style="position:absolute;z-index:99;display:none;" id="tooltip1b"></div>
+
+<table style="margin-left:auto; margin-right:auto;"><tr>
+    <td><div id="chart1b" 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 prettyprint brush: js"></pre>
+
+
+<script class="code" 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"]];
+    
+    var plot1 = $.jqplot('chart1',[arr],{
+        title: 'Bubble Chart with Gradient Fills',
+        seriesDefaults:{
+            renderer: $.jqplot.BubbleRenderer,
+            rendererOptions: {
+                bubbleGradients: true
+            },
+            shadow: true
+        }
+    });
+});
+</script>
+  
+<script class="code" 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"]];
+    
+    var plot2 = $.jqplot('chart2',[arr],{
+        title: 'Transparent Bubbles',
+        seriesDefaults:{
+            renderer: $.jqplot.BubbleRenderer,
+            rendererOptions: {
+                bubbleAlpha: 0.6,
+                highlightAlpha: 0.8
+            },
+            shadow: true,
+            shadowAlpha: 0.05
+        }
+    });    
+});
+</script>
+
+<script class="code" 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"]];
+  
+  var 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.
+  // Dynamically 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
+        y = plot1b.axes.yaxis.u2p(data[1]);  // convert y axis units to pixels
+      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>
+
+<!-- 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.bubbleRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/candlestick-charts.php

+<?php 
+    $title = "Open Hi Low Close and Candlestick Charts";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+<p>OHLC, HLC and Candlestick charts are all created using the $.jqplot.OHLCRenderer plugin.  The plots on this page make use of the highlighter plugin which shows a customized tooltip as the mouse moves over a data point.</p>
+<div id="chart1" style="height:250px; width:600px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<div id="chart2" style="height:250px; width:600px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<p>The previous plots use the following data set.  jqPlot will parse most human readable date formats.  It is always safest, however, to pass a date in as a JavaScript timestamp rather than have jqPlot parse an arbitrary date string.</p>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<script class="code" language="javascript" type="text/javascript">
+$(document).ready(function(){ 
+  // Note, the ohlc data is specified below     
+  var plot1 = $.jqplot('chart1',[ohlc],{
+    // use the y2 axis on the right of the plot 
+    //rather than the y axis on the left.
+    seriesDefaults:{yaxis:'y2axis'},
+    axes: {
+      xaxis: {
+        renderer:$.jqplot.DateAxisRenderer,
+        tickOptions:{formatString:'%b %e'}, 
+        // For date axes, we can specify ticks options as human 
+        // readable dates.  You should be as specific as possible, 
+        // however, and include a date and time since some 
+        // browser treat dates without a time as UTC and some 
+        // treat dates without time as local time.
+        // Generally, if  a time is specified without a time zone,
+        // the browser assumes the time zone of the client.
+        min: "09-01-2008 16:00",
+        max: "06-22-2009 16:00",
+        tickInterval: "6 weeks",
+      },
+      y2axis: {
+        tickOptions:{formatString:'$%d'}
+      }
+    },
+    series: [{renderer:$.jqplot.OHLCRenderer}],
+    highlighter: {
+      show: true,
+      showMarker:false,
+      tooltipAxes: 'xy',
+      yvalues: 4,
+      // You can customize the tooltip format string of the highlighter
+      // to include any arbitrary text or html and use format string
+      // placeholders (%s here) to represent x and y values.
+      formatString:'<table class="jqplot-highlighter"> \
+      <tr><td>date:</td><td>%s</td></tr> \
+      <tr><td>open:</td><td>%s</td></tr> \
+      <tr><td>hi:</td><td>%s</td></tr> \
+      <tr><td>low:</td><td>%s</td></tr> \
+      <tr><td>close:</td><td>%s</td></tr></table>'
+    }
+  });
+    
+});
+</script>
+
+<script class="code" language="javascript" type="text/javascript">
+$(document).ready(function(){            
+  var plot2 = $.jqplot('chart2',[ohlc],{
+    seriesDefaults:{yaxis:'y2axis'},
+    axes: {
+      xaxis: {
+        renderer:$.jqplot.DateAxisRenderer,
+        tickOptions:{formatString:'%b %e'}, 
+        min: "09-01-2008",
+        max: "06-22-2009",
+        tickInterval: "6 weeks",
+      },
+      y2axis: {
+        tickOptions:{formatString:'$%d'}
+      }
+    },
+    // To make a candle stick chart, set the "candleStick" option to true.
+    series: [
+      {
+        renderer:$.jqplot.OHLCRenderer, 
+        rendererOptions:{ candleStick:true }
+      }
+    ],
+    highlighter: {
+      show: true,
+      showMarker:false,
+      tooltipAxes: 'xy',
+      yvalues: 4,
+      formatString:'<table class="jqplot-highlighter"> \
+      <tr><td>date:</td><td>%s</td></tr> \
+      <tr><td>open:</td><td>%s</td></tr> \
+      <tr><td>hi:</td><td>%s</td></tr> \
+      <tr><td>low:</td><td>%s</td></tr> \
+      <tr><td>close:</td><td>%s</td></tr></table>'
+    }
+  });
+    
+});
+</script>
+
+
+<script class="code" language="javascript" type="text/javascript">
+ohlc = [
+  ['06/15/2009 16:00:00', 136.01, 139.5, 134.53, 139.48],
+  ['06/08/2009 16:00:00', 143.82, 144.56, 136.04, 136.97],
+  ['06/01/2009 16:00:00', 136.47, 146.4, 136, 144.67],
+  ['05/26/2009 16:00:00', 124.76, 135.9, 124.55, 135.81],
+  ['05/18/2009 16:00:00', 123.73, 129.31, 121.57, 122.5],
+  ['05/11/2009 16:00:00', 127.37, 130.96, 119.38, 122.42],
+  ['05/04/2009 16:00:00', 128.24, 133.5, 126.26, 129.19],
+  ['04/27/2009 16:00:00', 122.9, 127.95, 122.66, 127.24],
+  ['04/20/2009 16:00:00', 121.73, 127.2, 118.6, 123.9],
+  ['04/13/2009 16:00:00', 120.01, 124.25, 115.76, 123.42],
+  ['04/06/2009 16:00:00', 114.94, 120, 113.28, 119.57],
+  ['03/30/2009 16:00:00', 104.51, 116.13, 102.61, 115.99],
+  ['03/23/2009 16:00:00', 102.71, 109.98, 101.75, 106.85],
+  ['03/16/2009 16:00:00', 96.53, 103.48, 94.18, 101.59],
+  ['03/09/2009 16:00:00', 84.18, 97.2, 82.57, 95.93],
+  ['03/02/2009 16:00:00', 88.12, 92.77, 82.33, 85.3],
+  ['02/23/2009 16:00:00', 91.65, 92.92, 86.51, 89.31],
+  ['02/17/2009 16:00:00', 96.87, 97.04, 89, 91.2],
+  ['02/09/2009 16:00:00', 100, 103, 95.77, 99.16],
+  ['02/02/2009 16:00:00', 89.1, 100, 88.9, 99.72],
+  ['01/26/2009 16:00:00', 88.86, 95, 88.3, 90.13],
+  ['01/20/2009 16:00:00', 81.93, 90, 78.2, 88.36],
+  ['01/12/2009 16:00:00', 90.46, 90.99, 80.05, 82.33],
+  ['01/05/2009 16:00:00', 93.17, 97.17, 90.04, 90.58],
+  ['12/29/2008 16:00:00', 86.52, 91.04, 84.72, 90.75],
+  ['12/22/2008 16:00:00', 90.02, 90.03, 84.55, 85.81],
+  ['12/15/2008 16:00:00', 95.99, 96.48, 88.02, 90],
+  ['12/08/2008 16:00:00', 97.28, 103.6, 92.53, 98.27],
+  ['12/01/2008 16:00:00', 91.3, 96.23, 86.5, 94],
+  ['11/24/2008 16:00:00', 85.21, 95.25, 84.84, 92.67],
+  ['11/17/2008 16:00:00', 88.48, 91.58, 79.14, 82.58],    
+  ['11/10/2008 16:00:00', 100.17, 100.4, 86.02, 90.24],
+  ['11/03/2008 16:00:00', 105.93, 111.79, 95.72, 98.24],
+  ['10/27/2008 16:00:00', 95.07, 112.19, 91.86, 107.59],
+  ['10/20/2008 16:00:00', 99.78, 101.25, 90.11, 96.38],
+  ['10/13/2008 16:00:00', 104.55, 116.4, 85.89, 97.4],
+  ['10/06/2008 16:00:00', 91.96, 101.5, 85, 96.8],
+  ['09/29/2008 16:00:00', 119.62, 119.68, 94.65, 97.07],
+  ['09/22/2008 16:00:00', 139.94, 140.25, 123, 128.24],
+  ['09/15/2008 16:00:00', 142.03, 147.69, 120.68, 140.91]
+];
+</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.ohlcRenderer.js"></script>
+    <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/cursor-highlighter.php

+<?php 
+    $title = "Data Point Highlighting, Tooltips and Cursor Tracking";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+<p>The Highlighter plugin will highlight data points near the mouse and display an optional tooltip with the data point value.  By default, the tooltip values will be formatted with the same formatter as used to display the axes tick values.  The text format can be customized with an optional sprintf style format string.</p>
+
+<div id="chart1" style="height:300px; width:600px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<p>The Cursor plugin changes the mouse cursor when it enters the graph area and displays an optional tooltip with the mouse position.  The tooltip can be in a fixed location, or it can follow the mouse.  The pointer style, set to "crosshair" by default, can also be customized.  Tooltip values are formatted similar to the Highlighter plugin.  By default they use the axes formatters, but can be customized with a sprintf format string.</p>
+
+<div id="chart2" style="height:300px; width:600px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
+      ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
+      ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
+  var plot1 = $.jqplot('chart1', [line1], {
+      title:'Data Point Highlighting',
+      axes:{
+        xaxis:{
+          renderer:$.jqplot.DateAxisRenderer,
+          tickOptions:{
+            formatString:'%b&nbsp;%#d'
+          } 
+        },
+        yaxis:{
+          tickOptions:{
+            formatString:'$%.2f'
+            }
+        }
+      },
+      highlighter: {
+        show: true,
+        sizeAdjust: 7.5
+      },
+      cursor: {
+        show: false
+      }
+  });
+});
+</script>
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
+      ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
+      ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
+  var plot2 = $.jqplot('chart2', [line1], {
+    title:'Mouse Cursor Tracking',
+    axes:{
+      xaxis:{
+        renderer:$.jqplot.DateAxisRenderer,
+          tickOptions:{
+            formatString:'%b&nbsp;%#d'
+          }
+      },
+      yaxis:{
+        tickOptions:{
+          formatString:'$%.2f'
+        }
+      }
+    },
+    highlighter: {
+      show: false
+    },
+    cursor: {
+      show: true,
+      tooltipLocation:'sw'
+    }
+  });
+});
+</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.highlighter.js"></script>
+    <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
+    <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/date-axes.php

+<?php 
+    $title = "Date Axes";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+<p>Date axes support is provided through the dateAxisRenderer plugin.  Date axes expand javascripts native date handling capabilities.  This allow dates to be input in almost any unambiguous form, not just in milliseconds!</p>
+
+<p><em>Note, although jqPlot will parse most any human readable date, it is safest to use javascript time stamps when possible.  Also, it is best to specify a date and time and not just a date alone.  This is due to inconsistent browser handling of local time vs. UTC with bare dates.</em></p>
+
+<div id="chart1" style="height:300px; width:650px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<p>Date Axes also provide powerful formatting features.  This allows custom formatter strings to be used to format axis tick labels precisely the way you want.</p>
+
+<div id="chart2" style="height:300px; width:650px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1=[['2008-08-12 4:00PM',4], ['2008-09-12 4:00PM',6.5], ['2008-10-12 4:00PM',5.7], ['2008-11-12 4:00PM',9], ['2008-12-12 4:00PM',8.2]];
+  var plot1 = $.jqplot('chart1', [line1], {
+    title:'Default Date Axis',
+    axes:{
+        xaxis:{
+            renderer:$.jqplot.DateAxisRenderer
+        }
+    },
+    series:[{lineWidth:4, markerOptions:{style:'square'}}]
+  });
+});
+</script>
+
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
+  var plot2 = $.jqplot('chart2', [line1], {
+      title:'Customized Date Axis', 
+      axes:{
+        xaxis:{
+          renderer:$.jqplot.DateAxisRenderer, 
+          tickOptions:{formatString:'%b %#d, %#I %p'},
+          min:'June 16, 2008 8:00AM', 
+          tickInterval:'2 weeks'
+        }
+      },
+      series:[{lineWidth:4, markerOptions:{style:'square'}}]
+  });
+});
+</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>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/pie-donut-charts.php

+<?php 
+    $title = "Pie and Donut Charts";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+  <style type="text/css">
+
+    .jqplot-data-label {
+      /*color: #444;*/
+/*      font-size: 1.1em;*/
+    }
+  </style>
+
+<p>jqPlot bakes up the best pie and donut charts you've ever tasted!  Like bar and filled line plots, pie and donut slices highlight when you mouse over.</p>
+
+<div id="chart1" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<p>Too many calories in that pie?  Get all the taste without the filling!  Highlighting and data labels are still supported.  You can even cut out the slices!</p>
+
+<div id="chart2" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<p>Coming straight from the same bakery, donut plots have nearly identical options as pie charts.</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 data = [
+    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
+    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
+  ];
+  var plot1 = jQuery.jqplot ('chart1', [data], 
+    { 
+      seriesDefaults: {
+        // Make this a pie chart.
+        renderer: jQuery.jqplot.PieRenderer, 
+        rendererOptions: {
+          // Put data labels on the pie slices.
+          // By default, labels show the percentage of the slice.
+          showDataLabels: true
+        }
+      }, 
+      legend: { show:true, location: 'e' }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var data = [
+    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
+    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
+  ];
+  var plot2 = jQuery.jqplot ('chart2', [data], 
+    {
+      seriesDefaults: {
+        renderer: jQuery.jqplot.PieRenderer, 
+        rendererOptions: {
+          // Turn off filling of slices.
+          fill: false,
+          showDataLabels: true, 
+          // Add a margin to seperate the slices.
+          sliceMargin: 4, 
+          // stroke the slices with a little thicker line.
+          lineWidth: 5
+        }
+      }, 
+      legend: { show:true, location: 'e' }
+    }
+  );
+});
+</script>
+
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
+  var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
+  
+  var plot3 = $.jqplot('chart3', [s1, s2], {
+    seriesDefaults: {
+      // make this a donut chart.
+      renderer:$.jqplot.DonutRenderer,
+      rendererOptions:{
+        // Donut's can be cut into slices like pies.
+        sliceMargin: 3,
+        // Pies and donuts can start at any arbitrary angle.
+        startAngle: -90,
+        showDataLabels: true,
+        // By default, data labels show the percentage of the donut/pie.
+        // You can show the data 'value' or data 'label' instead.
+        dataLabels: 'value'
+      }
+    }
+  });
+});
+</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.pieRenderer.js"></script>
+    <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.donutRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/point-labels.php

+<?php 
+    $title = "Data Point labels";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<style type="text/css">
+#chart3 .jqplot-point-label {
+  border: 1.5px solid #aaaaaa;
+  padding: 1px 3px;
+  background-color: #eeccdd;
+}
+</style>
+
+<!-- Example scripts go here -->
+<P>The pointLabels plugin places labels on the plot at the data point locations.  Labeles can use the series data array or a separate labels array.  If using the series data, the last value in the data point array is used as the label by default.</p>
+
+<div id="chart1" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<P>Additional data can be added to the series and it will be used for labels. If additional data is provided, each data point must have a value for the label, even if it is "null".</p>
+
+<div id="chart2" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+ 
+<P>Labels work with Bar charts as well.  Here, the Labels have been supplied through the "labels" array on the "pointLabels" option to the series.  Also, additional css styling has been provided to the labels.</p>
+
+<div id="chart3" style="height:300px; width:500px;"></div>
+
+<pre class="prettyprint brush: html">
+<style type="text/css">
+#chart3 .jqplot-point-label {
+  border: 1.5px solid #aaaaaa;
+  padding: 1px 3px;
+  background-color: #eeccdd;
+}
+</style>
+</pre>
+<pre class="code prettyprint brush: js"></pre>
+
+<P>Point labels can be used on stacked bar charts.  If no labels array is specified, they will use data from the chart.  Values can be displayed individually for each series (stackedValue option is false, the default), or cumulative values for all series can be displayed (stackedValue option is true).</p>
+
+<div id="chart4" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<P>Data point labels have an "edgeTolerance" option.  This options controls how close the data point label can be to an axis edge and still be drawn.  The default of 0 allows labels to touch the axis.  Positive values will increase the required distance between the axis and label, negative values will allow labels to overlap axes.</p>
+
+<div id="chart5" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [14, 32, 41, 44, 40, 47, 53, 67];
+  var plot1 = $.jqplot('chart1', [line1], {
+      title: 'Chart with Point Labels', 
+      seriesDefaults: { 
+        showMarker:false,
+        pointLabels: { show:true } 
+      }
+  });
+});
+</script>
+
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [[-12, 7, null], [-3, 14, null], [2, -1, '(low)'], 
+      [7, -1, '(low)'], [11, 11, null], [13, -1, '(low)']];
+  var plot2 = $.jqplot('chart2', [line1], {
+    title: 'Point Labels From Extra Series Data', 
+    seriesDefaults: {
+      showMarker:false, 
+      pointLabels:{ show:true, location:'s', ypadding:3 }
+    },
+    axes:{ yaxis:{ pad: 1.3 } }
+  });
+});
+</script>
+
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [14, 32, 41, 44, 40];
+  var plot3 = $.jqplot('chart3', [line1], {
+    title: 'Bar Chart with Point Labels', 
+    seriesDefaults: {renderer: $.jqplot.BarRenderer},
+    series:[
+     {pointLabels:{
+        show: true,
+        labels:['fourteen', 'thirty two', 'fourty one', 'fourty four', 'fourty']
+      }}],
+    axes: {
+      xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
+      yaxis:{padMax:1.3}}
+  });
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [14, 32, 41, 44, 40, 37, 29];
+  var line2 = [7, 12, 15, 17, 20, 27, 39];
+  var plot4 = $.jqplot('chart4', [line1, line2], {
+      title: 'Stacked Bar Chart with Cumulative Point Labels', 
+      stackSeries: true, 
+      seriesDefaults: {
+          renderer: $.jqplot.BarRenderer,
+          rendererOptions:{barMargin: 25}, 
+          pointLabels:{show:true, stackedValue: true}
+      },
+      axes: {
+          xaxis:{renderer:$.jqplot.CategoryAxisRenderer}
+      }
+  });
+});
+</script>
+
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var line1 = [14, 32, 41, 44, 40, 47, 53, 67];
+  var plot5 = $.jqplot('chart5', [line1], {
+      title: 'Chart with Point Labels', 
+      seriesDefaults: {
+        showMarker:false,
+        pointLabels: {
+          show: true,
+          edgeTolerance: 5
+        }},
+      axes:{
+        xaxis:{min:3}
+      }
+  });
+});
+</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.barRenderer.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.pointLabels.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/zooming.php

+<?php 
+    $title = "Plot Zooming and Cursor Control";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+  <style type="text/css">
+    .button-reset {
+      margin: 30px;
+      margin-left: 90px;
+    }
+
+
+  </style>
+
+<p>The cursor plugin also enables plot zooming functionality.  Click and drag on the plot to zoom.  Double click to reset.</p>
+
+<p>You can disable the double click zoom reset.  The cursor plugin also extends the plot object with a resetZoom() method which can be called from user code or other html element (a button for example) to reset the plot zoom.</p>
+
+<div id="chart1" style="height:300px; width:500px;"></div>
+<button class="button-reset">Reset Zoom</button>
+
+<pre class="code prettyprint brush: js"></pre>
+
+
+<p>Plot zooming also works will multiple axes.  The following plot uses 3 large datasets.</p>
+<div id="chart2" style="height:300px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<script language="javascript" type="text/javascript">
+var goog = [["6/22/2009 16:00:00",425.32],
+["6/8/2009 16:00:00",424.84],
+["5/26/2009 16:00:00",417.23],
+["5/11/2009 16:00:00",390],
+["4/27/2009 16:00:00",393.69],
+["4/13/2009 16:00:00",392.24],
+["3/30/2009 16:00:00",369.78],
+["3/16/2009 16:00:00",330.16],
+["3/2/2009 16:00:00",308.57],
+["2/17/2009 16:00:00",346.45],
+["2/2/2009 16:00:00",371.28],
+["1/20/2009 16:00:00",324.7],
+["1/5/2009 16:00:00",315.07],
+["12/22/2008 16:00:00",300.36],
+["12/8/2008 16:00:00",315.76],
+["11/24/2008 16:00:00",292.96],
+["11/10/2008 16:00:00",310.02],
+["10/27/2008 16:00:00",359.36],
+["10/13/2008 16:00:00",372.54],
+["9/29/2008 16:00:00",386.91],
+["9/15/2008 16:00:00",449.15],
+["9/2/2008 16:00:00",444.25],
+["8/25/2008 16:00:00",463.29],
+["8/11/2008 16:00:00",510.15],
+["7/28/2008 16:00:00",467.86],
+["7/14/2008 16:00:00",481.32],
+["6/30/2008 16:00:00",537],
+["6/16/2008 16:00:00",546.43],
+["6/2/2008 16:00:00",567],
+["5/19/2008 16:00:00",544.62],
+["5/5/2008 16:00:00",573.2],
+["4/21/2008 16:00:00",544.06],
+["4/7/2008 16:00:00",457.45],
+["3/24/2008 16:00:00",438.08],
+["3/10/2008 16:00:00",437.92],
+["2/25/2008 16:00:00",471.18],
+["2/11/2008 16:00:00",529.64],
+["1/28/2008 16:00:00",515.9],
+["1/14/2008 16:00:00",600.25],
+["12/31/2007 16:00:00",657],
+["12/17/2007 16:00:00",696.69],
+["12/3/2007 16:00:00",714.87],
+["11/19/2007 16:00:00",676.7],
+["11/5/2007 16:00:00",663.97],
+["10/22/2007 16:00:00",674.6],
+["10/8/2007 16:00:00",637.39],
+["9/24/2007 16:00:00",567.27],
+["9/10/2007 16:00:00",528.75],
+["8/27/2007 16:00:00",515.25]];
+var InPr = [[0.0,85.0],[10.0,87.4],[20.0,90.0],[30.0,91.3],[40.0,93.5],[50.0,94.1],[60.0,95.4],[70.0,95.8],[80.0,96.1],[90.0,97.6],[100.0,97.4],[110.0,97.7],[120.0,97.9],[130.0,98.3],[140.0,97.9],[150.0,98.4],[160.0,99.8],[170.0,100.5],[180.0,100.4],[190.0,100.3],[200.0,102.9],[210.0,104.1],[220.0,104.4],[230.0,103.9],[240.0,104.4],[250.0,104.0],[260.0,103.9],[270.0,103.5],[280.0,105.4],[290.0,105.7],[300.0,105.7],[310.0,105.3],[320.0,105.0],[330.0,105.1],[340.0,105.0],[350.0,105.1],[360.0,104.7],[370.0,104.4],[380.0,104.3],[390.0,105.7],[400.0,106.4],[410.0,105.7],[420.0,105.4],[430.0,105.7],[440.0,105.7],[450.0,105.9],[460.0,105.3],[470.0,105.7],[480.0,105.8],[490.0,105.4],[500.0,105.4],[510.0,105.4],[520.0,105.6],[530.0,104.9],[540.0,104.8],[550.0,105.2],[560.0,105.2],[570.0,105.1],[580.0,104.8],[590.0,104.6],[600.0,104.3],[610.0,104.2],[620.0,104.1],[630.0,104.7],[640.0,104.6],[650.0,104.7],[660.0,104.6],[670.0,104.4],[680.0,106.8],[690.0,106.6],
+[700.0,106.3],[710.0,107.1],[720.0,106.2],[730.0,106.1],[740.0,106.7],[750.0,106.5],[760.0,106.8],[770.0,106.7],[780.0,106.6],[790.0,106.7],[800.0,106.8],[810.0,106.4],[820.0,106.7],[830.0,106.5],[840.0,106.9],[850.0,106.7],[860.0,106.7],[870.0,106.8],[880.0,107.1],[890.0,106.6],[900.0,106.8],[910.0,106.9],[920.0,106.8],[930.0,107.3],[940.0,106.9],[950.0,106.5],[960.0,107.2],[970.0,107.0],[980.0,106.9],[990.0,107.2],[1000.0,107.7],[1010.0,107.6],[1020.0,107.1],[1030.0,107.6],[1040.0,107.2],[1050.0,107.2],[1060.0,107.5],[1070.0,107.7],[1080.0,107.3],[1090.0,107.0],[1100.0,107.7],[1110.0,107.0],[1120.0,107.8],[1130.0,107.8],[1140.0,107.7],[1150.0,107.4],[1160.0,107.8],[1170.0,107.8],[1180.0,107.6],[1190.0,107.7],[1200.0,107.4],[1210.0,108.0],[1220.0,372.6],[1230.0,90.4],[1240.0,125.0],[1250.0,110.4],[1260.0,108.5],[1270.0,109.7],[1280.0,108.9],[1290.0,109.6],[1300.0,110.2],[1310.0,110.0],[1320.0,110.7],[1330.0,110.3],[1340.0,110.6],[1350.0,110.5],
+[1360.0,110.8],[1370.0,110.6],[1380.0,111.0],[1390.0,113.0],[1400.0,112.1],[1410.0,112.3],[1420.0,112.3],[1430.0,137.6],[1440.0,179.0],[1450.0,216.9],[1460.0,399.2],[1470.0,433.6],[1480.0,203.5],[1490.0,223.3],[1500.0,229.8],[1510.0,416.9],[1520.0,198.8],[1530.0,208.7],[1540.0,172.0],[1550.0,145.7],[1560.0,119.2],[1570.0,104.8],[1580.0,100.1],[1590.0,97.7],[1600.0,97.2],[1610.0,98.8],[1620.0,98.1],[1630.0,98.1],[1640.0,98.8],[1650.0,98.7],[1660.0,98.5],[1670.0,98.8],[1680.0,98.2],[1690.0,98.2],[1700.0,97.7],[1710.0,98.1],[1720.0,97.1],[1730.0,97.6],[1740.0,97.7],[1750.0,97.4],[1760.0,97.6],[1770.0,98.0],[1780.0,97.6],[1790.0,97.7],[1800.0,97.8],[1810.0,97.6],[1820.0,97.9],
+[1830.0,97.9],[1840.0,97.8],[1850.0,97.7],[1860.0,97.7],[1870.0,97.7],[1880.0,97.4],[1890.0,97.3],[1900.0,97.2],[1910.0,96.9],[1920.0,97.2],[1930.0,97.4],[1940.0,97.7],[1950.0,97.1],[1960.0,97.1],[1970.0,96.6],[1980.0,96.7],[1990.0,96.5],[2000.0,97.2],[2010.0,96.6],[2020.0,96.4],[2030.0,96.7],[2040.0,96.8],[2050.0,96.6],[2060.0,96.6],[2070.0,96.5],[2080.0,96.6],[2090.0,96.4],[2100.0,96.6],[2110.0,96.5],[2120.0,96.2],[2130.0,96.2],[2140.0,96.5],[2150.0,96.0],[2160.0,96.2],[2170.0,96.3],[2180.0,96.4],[2190.0,97.0],[2200.0,96.8],[2210.0,96.5],[2220.0,96.6],[2230.0,96.1],[2240.0,96.1],[2250.0,96.6],[2260.0,96.5],[2270.0,96.6],[2280.0,96.4],[2290.0,96.5],[2300.0,96.6],[2310.0,96.9],[2320.0,96.8],[2330.0,96.9],[2340.0,97.2],[2350.0,96.6],[2360.0,97.3],[2370.0,97.4],[2380.0,97.1],[2390.0,97.1],[2400.0,96.8],[2410.0,97.0],[2420.0,97.1],[2430.0,97.1],[2440.0,97.0],[2450.0,97.1],[2460.0,97.1],[2470.0,97.5],[2480.0,96.9],[2490.0,96.8],[2500.0,96.8],[2510.0,97.0],[2520.0,96.7],[2530.0,97.0],[2540.0,97.1],[2550.0,97.2],[2560.0,97.1],[2570.0,97.1],[2580.0,97.1],[2590.0,96.8],[2600.0,97.2],[2610.0,97.1],[2620.0,97.3],[2630.0,97.1],[2640.0,97.1],[2650.0,97.1],[2660.0,97.0],[2670.0,96.8],[2680.0,97.3],[2690.0,97.4],[2700.0,97.3],[2710.0,97.2],[2720.0,97.1],[2730.0,97.2],[2740.0,97.1],[2750.0,97.1],[2760.0,97.1],[2770.0,96.8],[2780.0,96.4],[2790.0,96.6],[2800.0,96.6]];
+var OutPr = [[0.0,1788.1],[10.0,1803.3],[20.0,1807.3],[30.0,1813.5],[40.0,1822.0],[50.0,1820.3],[60.0,1823.7],[70.0,1823.7],[80.0,1825.3],[90.0,1831.0],[100.0,1832.1],[110.0,1834.4],[120.0,1834.4],[130.0,1831.5],[140.0,1832.7],[150.0,1834.4],[160.0,1831.5],[170.0,1832.1],[180.0,1830.4],[190.0,1831.0],[200.0,1830.4],[210.0,1829.3],[220.0,1829.9],[230.0,1828.2],[240.0,1831.0],[250.0,1828.7],[260.0,1827.0],[270.0,1829.3],[280.0,1826.5],[290.0,1824.8],[300.0,1824.2],[310.0,1823.7],[320.0,1823.7],[330.0,1823.7],[340.0,1825.3],[350.0,1822.0],[360.0,1820.3],[370.0,1818.0],[380.0,1819.1],[390.0,1816.3],[400.0,1820.8],[410.0,1820.8],[420.0,1819.7],[430.0,1820.3],[440.0,1819.7],[450.0,1819.1],
+[460.0,1819.1],[470.0,1821.4],[480.0,1821.4],[490.0,1818.0],[500.0,1816.9],[510.0,1819.1],[520.0,1818.6],[530.0,1816.9],[540.0,1816.9],[550.0,1815.2],[560.0,1814.1],[570.0,1814.6],[580.0,1811.2],[590.0,1814.1],[600.0,1813.5],[610.0,1812.4],[620.0,1809.0],[630.0,1813.5],[640.0,1811.8],[650.0,1815.8],[660.0,1816.3],[670.0,1815.2],[680.0,1815.2],[690.0,1815.8],[700.0,1816.3],[710.0,1818.6],[720.0,1816.9],[730.0,1814.6],[740.0,1816.3],[750.0,1814.1],[760.0,1812.9],[770.0,1812.9],[780.0,1811.2],[790.0,1812.4],[800.0,1815.2],[810.0,1812.4],[820.0,1813.5],[830.0,1811.8],[840.0,1811.2],[850.0,1812.9],[860.0,1809.0],[870.0,1811.2],[880.0,1816.9],[890.0,1815.2],[900.0,1813.5],[910.0,1812.9],
+[920.0,1815.8],[930.0,1819.1],[940.0,1818.0],[950.0,1816.3],[960.0,1818.0],[970.0,1815.2],[980.0,1818.6],[990.0,1815.2],[1000.0,1822.5],[1010.0,1822.5],[1020.0,1816.9],[1030.0,1816.3],[1040.0,1817.4],[1050.0,1816.9],[1060.0,1811.8],[1070.0,1818.6],[1080.0,1818.6],[1090.0,1815.2],[1100.0,1816.9],[1110.0,1815.8],[1120.0,1815.8],[1130.0,1816.9],[1140.0,1815.2],[1150.0,1815.2],[1160.0,1818.0],[1170.0,1817.4],[1180.0,1818.0],[1190.0,1819.1],[1200.0,1817.4],[1210.0,1822.5],[1220.0,1313.9],[1230.0,1694.5],[1240.0,1891.3],[1250.0,1813.5],[1260.0,1827.0],[1270.0,1831.5],[1280.0,1827.6],[1290.0,1832.1],[1300.0,1831.5],[1310.0,1829.9],[1320.0,1834.4],[1330.0,1831.0],[1340.0,1827.6],
+[1350.0,1829.3],[1360.0,1832.1],[1370.0,1834.9],[1380.0,1834.9],[1390.0,1839.4],[1400.0,1830.4],[1410.0,1832.7],[1420.0,1833.8],[1430.0,1847.9],[1440.0,1770.6],[1450.0,1668.0],[1460.0,1279.5],[1470.0,1138.5],[1480.0,1724.4],[1490.0,1571.0],[1500.0,1740.8],[1510.0,1326.8],[1520.0,1661.2],[1530.0,1859.2],[1540.0,1851.8],[1550.0,1885.7],[1560.0,1876.1],[1570.0,1860.3],[1580.0,1870.5],[1590.0,1851.8],[1600.0,1853.5],[1610.0,1863.7],[1620.0,1854.1],[1630.0,1855.8],[1640.0,1858.6],[1650.0,1857.5],[1660.0,1858.6],[1670.0,1841.7],[1680.0,1824.2],[1690.0,1817.4],[1700.0,1813.5],[1710.0,1814.6],[1720.0,1809.0],[1730.0,1806.2],[1740.0,1803.9],[1750.0,1804.5],[1760.0,1798.8],[1770.0,1793.8],[1780.0,1792.1],[1790.0,1793.2],[1800.0,1792.6],[1810.0,1787.0],[1820.0,1787.0],[1830.0,1786.4],[1840.0,1788.1],[1850.0,1784.7],
+[1860.0,1781.4],[1870.0,1780.2],[1880.0,1777.4],[1890.0,1775.7],[1900.0,1775.2],[1910.0,1775.2],[1920.0,1776.8],[1930.0,1778.0],[1940.0,1775.7],[1950.0,1769.5],[1960.0,1769.5],[1970.0,1768.4],[1980.0,1771.2],[1990.0,1770.1],[2000.0,1769.5],[2010.0,1767.8],[2020.0,1764.4],[2030.0,1764.4],[2040.0,1765.0],[2050.0,1762.7],[2060.0,1765.6],[2070.0,1763.9],[2080.0,1762.2],[2090.0,1759.9],[2100.0,1759.9],[2110.0,1762.2],[2120.0,1762.7],[2130.0,1762.2],[2140.0,1762.7],[2150.0,1759.4],[2160.0,1761.1],[2170.0,1761.6],[2180.0,1763.3],[2190.0,1765.0],[2200.0,1768.4],[2210.0,1763.3],[2220.0,1762.7],[2230.0,1759.9],[2240.0,1762.7],[2250.0,1764.4],[2260.0,1765.6],[2270.0,1766.7],[2280.0,1763.3],[2290.0,1763.3],[2300.0,1763.9],[2310.0,1762.7],[2320.0,1762.7],[2330.0,1767.3],[2340.0,1767.8],[2350.0,1765.6],[2360.0,1766.1],
+[2370.0,1766.7],[2380.0,1766.7],[2390.0,1765.0],[2400.0,1765.0],[2410.0,1765.0],[2420.0,1765.0],[2430.0,1765.6],[2440.0,1765.6],[2450.0,1763.3],[2460.0,1767.8],[2470.0,1767.8],[2480.0,1765.0],[2490.0,1761.6],[2500.0,1761.6],[2510.0,1762.7],[2520.0,1763.3],[2530.0,1763.3],[2540.0,1763.9],[2550.0,1765.0],[2560.0,1766.1],[2570.0,1765.6],[2580.0,1766.7],[2590.0,1765.6],[2600.0,1768.4],[2610.0,1766.7],[2620.0,1764.4],[2630.0,1764.4],[2640.0,1766.1],[2650.0,1766.1],[2660.0,1766.1],[2670.0,1763.9],[2680.0,1765.6],[2690.0,1765.6],[2700.0,1765.6],[2710.0,1765.0],[2720.0,1765.6],[2730.0,1766.1],[2740.0,1767.3],[2750.0,1766.7],[2760.0,1762.2],[2770.0,1754.9],[2780.0,1750.9],[2790.0,1750.3],[2800.0,1748.1]];
+var ERPM = [[0.0,1503.],[10.0,3006.],[20.0,3005.],[30.0,1505.],[40.0,1505.],[50.0,3015.],[60.0,1503.],[70.0,3006.],[80.0,3006.],[90.0,1503.],[100.0,1503.],[110.0,1503.],[120.0,1500.],[130.0,1503.],[140.0,752.],[150.0,1503.],[160.0,1503.],[170.0,1503.],[180.0,1505.],[190.0,1503.],[200.0,1503.],[210.0,3006.],[220.0,1503.],[230.0,1503.],[240.0,1502.],[250.0,1503.],[260.0,3005.],[270.0,1500.],[280.0,1502.],[290.0,1502.],[300.0,1502.],[310.0,752.],[320.0,1502.],[330.0,1502.],[340.0,1504.],[350.0,1502.],[360.0,1502.],[370.0,1501.],[380.0,1502.],[390.0,501.],[400.0,1501.],[410.0,501.],[420.0,751.],[430.0,751.],[440.0,1503.],[450.0,750.],[460.0,1501.],[470.0,1503.],[480.0,501.],[490.0,1501.],[500.0,1501.],[510.0,501.],[520.0,1501.],[530.0,751.],[540.0,1501.],[550.0,1501.],[560.0,1501.],[570.0,1501.],[580.0,1504.],[590.0,1504.],
+[600.0,1502.],[610.0,751.],[620.0,1501.],[630.0,1501.],[640.0,1501.],[650.0,1501.],[660.0,1504.],[670.0,1502.],[680.0,751.],[690.0,751.],[700.0,1501.],[710.0,751.],[720.0,1501.],[730.0,1502.],[740.0,1502.],[750.0,751.],[760.0,376.],[770.0,1502.],[780.0,1501.],[790.0,1502.],[800.0,1499.],[810.0,1499.],[820.0,750.],[830.0,1499.],[840.0,501.],[850.0,300.],[860.0,1504.],[870.0,751.],[880.0,1502.],[890.0,1502.],[900.0,1502.],[910.0,751.],[920.0,501.],[930.0,1502.],[940.0,751.],[950.0,1502.],[960.0,501.],[970.0,1504.],[980.0,751.],[990.0,1502.],[1000.0,751.],[1010.0,1502.],[1020.0,500.],[1030.0,751.],[1040.0,1502.],[1050.0,751.],[1060.0,1502.],[1070.0,1502.],[1080.0,751.],[1090.0,751.],[1100.0,1502.],[1110.0,750.],[1120.0,1502.],[1130.0,375.],[1140.0,1502.],[1150.0,300.],[1160.0,375.],[1170.0,1499.],[1180.0,300.],
+[1190.0,375.],[1200.0,1502.],[1210.0,373.],[1220.0,368.],[1230.0,502.],[1240.0,495.],[1250.0,1475.],[1260.0,1468.],[1270.0,732.],[1280.0,1461.],[1290.0,1458.],[1300.0,1456.],[1310.0,1456.],[1320.0,1451.],[1330.0,1453.],[1340.0,1453.],[1350.0,726.],[1360.0,1451.],[1370.0,1451.],[1380.0,1451.],[1390.0,1451.],[1400.0,1449.],[1410.0,1449.],[1420.0,1449.],[1430.0,1944.],[1440.0,1197.],[1450.0,786.],[1460.0,0.],[1470.0,0.],[1480.0,1079.],[1490.0,1070.],[1500.0,1085.],[1510.0,923.],[1520.0,1121.],[1530.0,1293.],[1540.0,1762.],[1550.0,367.],[1560.0,352.],[1570.0,186.],[1580.0,892.],[1590.0,892.],[1600.0,892.],[1610.0,892.],[1620.0,892.],[1630.0,892.],[1640.0,892.],[1650.0,892.],[1660.0,892.],[1670.0,892.],[1680.0,0.],[1690.0,0.],[1700.0,0.],[1710.0,0.],[1720.0,0.],[1730.0,0.],[1740.0,0.],[1750.0,0.],[1760.0,0.],
+[1770.0,0.],[1780.0,0.],[1790.0,0.],[1800.0,0.],[1810.0,0.],[1820.0,0.],[1830.0,0.],[1840.0,0.],[1850.0,0.],[1860.0,0.],[1870.0,0.],[1880.0,0.],[1890.0,0.],[1900.0,0.],[1910.0,0.],[1920.0,0.],[1930.0,0.],[1940.0,0.],[1950.0,0.],[1960.0,0.],[1970.0,0.],[1980.0,0.],[1990.0,0.],[2000.0,0.],[2010.0,0.],[2020.0,0.],[2030.0,0.],[2040.0,0.],[2050.0,0.],[2060.0,0.],[2070.0,0.],[2080.0,0.],[2090.0,0.],[2100.0,0.],[2110.0,0.],[2120.0,0.],[2130.0,0.],[2140.0,0.],[2150.0,0.],[2160.0,0.],[2170.0,0.],[2180.0,0.],[2190.0,0.],[2200.0,0.],[2210.0,0.],[2220.0,0.],[2230.0,0.],[2240.0,0.],[2250.0,0.],[2260.0,0.],[2270.0,0.],[2280.0,0.],[2290.0,0.],[2300.0,0.],[2310.0,0.],[2320.0,0.],[2330.0,0.],[2340.0,0.],[2350.0,0.],[2360.0,0.],[2370.0,0.],[2380.0,0.],[2390.0,0.],[2400.0,0.],[2410.0,0.],[2420.0,0.],[2430.0,0.],[2440.0,0.],
+[2450.0,0.],[2460.0,0.],[2470.0,0.],[2480.0,0.],[2490.0,0.],[2500.0,0.],[2510.0,0.],[2520.0,0.],[2530.0,0.],[2540.0,0.],[2550.0,0.],[2560.0,0.],[2570.0,0.],[2580.0,0.],[2590.0,0.],[2600.0,0.],[2610.0,0.],[2620.0,0.],[2630.0,0.],[2640.0,0.],[2650.0,0.],[2660.0,0.],[2670.0,0.],[2680.0,0.],[2690.0,0.],[2700.0,0.],[2710.0,0.],[2720.0,0.],[2730.0,0.],[2740.0,0.],[2750.0,0.],[2760.0,0.],[2770.0,0.],[2780.0,0.],[2790.0,0.],[2800.0,0.]];
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  var plot1 = $.jqplot('chart1', [goog], { 
+      title: 'Google, Inc.', 
+      series: [{ 
+          label: 'Google, Inc.', 
+          neighborThreshold: -1 
+      }], 
+      axes: { 
+          xaxis: { 
+              renderer: $.jqplot.DateAxisRenderer
+          }, 
+          yaxis: { 
+              tickOptions:{ prefix: '$' } 
+          } 
+      }, 
+      cursor:{ 
+        show: true,
+        zoom:true, 
+        showTooltip:false
+      } 
+  });
+
+  $('.button-reset').click(function() { plot1.resetZoom() });
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+    var plot2 = $.jqplot('chart2', [InPr, OutPr, ERPM], { 
+        title:'Plot with Zooming and 3 Y Axes', 
+        seriesDefaults: {showMarker:false}, 
+        series:[
+            {},
+            {yaxis:'y2axis'}, 
+            {yaxis:'y3axis'}
+        ], 
+        cursor: {
+            show: true,
+            tooltipLocation:'sw', 
+            zoom:true
+        }, 
+        axesDefaults:{
+            // color the axes baselines the same color as the series.
+            useSeriesColor: true,
+            rendererOptions: {
+                // align ticks for each axis across the grid
+                alignTicks: true
+            }
+        }, 
+        axes:{
+            // Let the lines start at the edge of the axis.
+            xaxis:{ pad: 0 }
+        } 
+    });
+});
+</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.cursor.js"></script>
+    <script class="include" language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File src/jqplot.linearAxisRenderer.js

         // Major ticks are ticks supplied by user or auto computed.
         // Minor ticks cannot be created by user.
         this.minorTicks = 0;
+        // prop: alignTicks
+        // true to align tick marks across opposed axes
+        // such as from the y2axis to yaxis.
         this.alignTicks = false;
         this._autoFormatString = '';
         this._overrideFormatString = false;

File src/plugins/jqplot.dateAxisRenderer.js

                 if (this.tickRenderer === $.jqplot.CanvasAxisTickRenderer && this.tickOptions.angle) {
                     spacingFactor = 115 - 40 * Math.abs(Math.sin(this.tickOptions.angle/180*Math.PI));
                 }
+
                 nttarget =  Math.ceil((tdim-threshold)/spacingFactor + 1);
                 titarget = (max - min) / (nttarget - 1);
             }
             }
 
             // If we can use an interval of 2 weeks or less, pick best one
-            if (titarget <= niceIntervals[niceIntervals.length-1] * 1.5) {
+            if (titarget <= 19*day) {
                 var ret = bestDateInterval(min, max, titarget);
                 var tempti = ret[0];
                 this._autoFormatString = ret[1];