public/javascripts/jqplot/examples/date-axes.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Date Axes</title>
   7
   8     <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
   9     <link rel="stylesheet" type="text/css" href="examples.min.css" />
  10     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
  11     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
  12
  13   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  14     <script class="include" type="text/javascript" src="../jquery.min.js"></script>
  15
  16
  17 </head>
  18 <body>
  19     <div class="logo">
  20    <div class="nav">
  21    <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
  22    <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
  23    <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
  24    <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
  25    <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
  26    </div>
  27 </div>
  28     <div class="example-content">
  29
  30     <div class="example-nav">
  31   <a href="data-renderers.html">Previous</a> <a href="./">Examples</a> <a href="dateAxisLogAxisZooming.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35 <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>
  36
  37 <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>
  38
  39 <div id="chart1" style="height:300px; width:650px;"></div>
  40
  41 <pre class="code prettyprint brush: js"></pre>
  42
  43 <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>
  44
  45 <div id="chart2" style="height:300px; width:650px;"></div>
  46
  47 <pre class="code prettyprint brush: js"></pre>
  48
  49 <script class="code" type="text/javascript">
  50 $(document).ready(function(){
  51   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]];
  52   var plot1 = $.jqplot('chart1', [line1], {
  53     title:'Default Date Axis',
  54     axes:{
  55         xaxis:{
  56             renderer:$.jqplot.DateAxisRenderer
  57         }
  58     },
  59     series:[{lineWidth:4, markerOptions:{style:'square'}}]
  60   });
  61 });
  62 </script>
  63
  64
  65 <script class="code" type="text/javascript">
  66 $(document).ready(function(){
  67   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]];
  68   var plot2 = $.jqplot('chart2', [line1], {
  69       title:'Customized Date Axis',
  70       axes:{
  71         xaxis:{
  72           renderer:$.jqplot.DateAxisRenderer,
  73           tickOptions:{formatString:'%b %#d, %#I %p'},
  74           min:'June 16, 2008 8:00AM',
  75           tickInterval:'2 weeks'
  76         }
  77       },
  78       series:[{lineWidth:4, markerOptions:{style:'square'}}]
  79   });
  80 });
  81 </script>
  82
  83 <!-- End example scripts -->
  84
  85 <!-- Don't touch this! -->
  86
  87
  88     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
  89     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
  90     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
  91     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
  92 <!-- End Don't touch this! -->
  93
  94 <!-- Additional plugins go here -->
  95
  96     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
  97
  98 <!-- End additional plugins -->
  99
 100
 101         </div>
 102         <script type="text/javascript" src="example.min.js"></script>
 103
 104 </body>
 105
 106
 107 </html>