public/javascripts/jqplot/examples/dateAxisRenderer.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="dateAxisLogAxisZooming.html">Previous</a> <a href="./">Examples</a> <a href="fillBetweenLines.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36 <p class="text">Date axis renderer with default settings.  Ticks are given wider spacing by default since date axes typically have longer tick labels.</p>
  37 <div id="chart1" style="margin:20px;height:240px; width:640px;"></div>
  38 <p class="text">Date axis recognizes rotated tick labels.  It will space ticks a little closer when labels are rotated.</p>
  39 <div id="chart2" style="margin:20px;height:240px; width:640px;"></div>
  40 <p class="text">If you want more or less ticks, specify the "numberTicks" options.  Date axes will try to produce the desired number of ticks, but may adjust to get a nice interval.</p>
  41 <div id="chart3" style="margin:20px;height:240px; width:640px;"></div>
  42
  43 <script type="text/javascript">
  44     var ohlc = [['07/06/09', 138.7, 139.68, 135.18, 135.4],
  45     ['06/29/09', 143.46, 144.66, 139.79, 140.02],
  46     ['06/22/09', 140.67, 143.56, 132.88, 142.44],
  47     ['06/15/09', 136.01, 139.5, 134.53, 139.48],
  48     ['06/08/09', 143.82, 144.56, 136.04, 136.97],
  49     ['06/01/09', 136.47, 146.4, 136, 144.67],
  50     ['05/26/09', 124.76, 135.9, 124.55, 135.81],
  51     ['05/18/09', 123.73, 129.31, 121.57, 122.5],
  52     ['05/11/09', 127.37, 130.96, 119.38, 122.42],
  53     ['05/04/09', 128.24, 133.5, 126.26, 129.19],
  54     ['04/27/09', 122.9, 127.95, 122.66, 127.24],
  55     ['04/20/09', 121.73, 127.2, 118.6, 123.9],
  56     ['04/13/09', 120.01, 124.25, 115.76, 123.42],
  57     ['04/06/09', 114.94, 120, 113.28, 119.57],
  58     ['03/30/09', 104.51, 116.13, 102.61, 115.99],
  59     ['03/23/09', 102.71, 109.98, 101.75, 106.85],
  60     ['03/16/09', 96.53, 103.48, 94.18, 101.59],
  61     ['03/09/09', 84.18, 97.2, 82.57, 95.93],
  62     ['03/02/09', 88.12, 92.77, 82.33, 85.3],
  63     ['02/23/09', 91.65, 92.92, 86.51, 89.31],
  64     ['02/17/09', 96.87, 97.04, 89, 91.2],
  65     ['02/09/09', 100, 103, 95.77, 99.16],
  66     ['02/02/09', 89.1, 100, 88.9, 99.72],
  67     ['01/26/09', 88.86, 95, 88.3, 90.13],
  68     ['01/20/09', 81.93, 90, 78.2, 88.36],
  69     ['01/12/09', 90.46, 90.99, 80.05, 82.33],
  70     ['01/05/09', 93.17, 97.17, 90.04, 90.58],
  71     ['12/29/08', 86.52, 91.04, 84.72, 90.75],
  72     ['12/22/08', 90.02, 90.03, 84.55, 85.81],
  73     ['12/15/08', 95.99, 96.48, 88.02, 90],
  74     ['12/08/08', 97.28, 103.6, 92.53, 98.27],
  75     ['12/01/08', 91.3, 96.23, 86.5, 94],
  76     ['11/24/08', 85.21, 95.25, 84.84, 92.67],
  77     ['11/17/08', 88.48, 91.58, 79.14, 82.58],
  78     ['11/10/08', 100.17, 100.4, 86.02, 90.24],
  79     ['11/03/08', 105.93, 111.79, 95.72, 98.24],
  80     ['10/27/08', 95.07, 112.19, 91.86, 107.59],
  81     ['10/20/08', 99.78, 101.25, 90.11, 96.38],
  82     ['10/13/08', 104.55, 116.4, 85.89, 97.4],
  83     ['10/06/08', 91.96, 101.5, 85, 96.8],
  84     ['09/29/08', 119.62, 119.68, 94.65, 97.07],
  85     ['09/22/08', 139.94, 140.25, 123, 128.24],
  86     ['09/15/08', 142.03, 147.69, 120.68, 140.91],
  87     ['09/08/08', 164.57, 164.89, 146, 148.94]
  88     ];
  89
  90     var hlc = [['07/06/09', 139.68, 135.18, 135.4],
  91     ['06/29/09', 144.66, 139.79, 140.02],
  92     ['06/22/09', 143.56, 132.88, 142.44],
  93     ['06/15/09', 139.5, 134.53, 139.48],
  94     ['06/08/09', 144.56, 136.04, 136.97],
  95     ['06/01/09', 146.4, 136, 144.67],
  96     ['05/26/09', 135.9, 124.55, 135.81],
  97     ['05/18/09', 129.31, 121.57, 122.5],
  98     ['05/11/09', 130.96, 119.38, 122.42],
  99     ['05/04/09', 133.5, 126.26, 129.19],
 100     ['04/27/09', 127.95, 122.66, 127.24],
 101     ['04/20/09', 127.2, 118.6, 123.9],
 102     ['04/13/09', 124.25, 115.76, 123.42],
 103     ['04/06/09', 120, 113.28, 119.57],
 104     ['03/30/09', 116.13, 102.61, 115.99],
 105     ['03/23/09',  109.98, 101.75, 106.85],
 106     ['03/16/09', 103.48, 94.18, 101.59],
 107     ['03/09/09', 97.2, 82.57, 95.93],
 108     ['03/02/09', 92.77, 82.33, 85.3],
 109     ['02/23/09', 92.92, 86.51, 89.31],
 110     ['02/17/09', 97.04, 89, 91.2],
 111     ['02/09/09', 103, 95.77, 99.16],
 112     ['02/02/09', 100, 88.9, 99.72],
 113     ['01/26/09', 95, 88.3, 90.13],
 114     ['01/20/09', 90, 78.2, 88.36],
 115     ['01/12/09', 90.99, 80.05, 82.33],
 116     ['01/05/09', 97.17, 90.04, 90.58],
 117     ['12/29/08', 91.04, 84.72, 90.75],
 118     ['12/22/08', 90.03, 84.55, 85.81],
 119     ['12/15/08', 96.48, 88.02, 90],
 120     ['12/08/08', 103.6, 92.53, 98.27],
 121     ['12/01/08', 96.23, 86.5, 94],
 122     ['11/24/08', 95.25, 84.84, 92.67],
 123     ['11/17/08', 91.58, 79.14, 82.58],
 124     ['11/10/08', 100.4, 86.02, 90.24],
 125     ['11/03/08', 111.79, 95.72, 98.24],
 126     ['10/27/08', 112.19, 91.86, 107.59],
 127     ['10/20/08', 101.25, 90.11, 96.38],
 128     ['10/13/08', 116.4, 85.89, 97.4],
 129     ['10/06/08', 101.5, 85, 96.8],
 130     ['09/29/08', 119.68, 94.65, 97.07],
 131     ['09/22/08', 140.25, 123, 128.24],
 132     ['09/15/08', 147.69, 120.68, 140.91],
 133     ['09/08/08', 164.89, 146, 148.94]
 134     ];
 135 </script>
 136
 137 <script class="code" type="text/javascript">
 138 $(document).ready(function(){
 139     title: "CandleStick Chart",
 140     // Globally enable plugins like cursor and highlighter
 141     $.jqplot.config.enablePlugins = true;
 142
 143     // for 2 digit years, set the default centry to 2000.
 144     $.jsDate.config.defaultCentury = 2000;
 145
 146     plot1 = $.jqplot('chart1',[ohlc],{
 147         axes: {
 148           xaxis: {
 149               renderer:$.jqplot.DateAxisRenderer
 150           },
 151           yaxis: {
 152               tickOptions:{prefix: '$'}
 153           }
 154         },
 155         series: [
 156             {
 157                 renderer:$.jqplot.OHLCRenderer,
 158                 rendererOptions:{
 159                     candleStick:true
 160                 }
 161             }
 162         ],
 163         highlighter: {
 164             showMarker:false,
 165             tooltipAxes: 'xy',
 166             yvalues: 4,
 167             formatString:'<table class="jqplot-highlighter"> \
 168                 <tr><td>date:</td><td>%s</td></tr> \
 169                 <tr><td>open:</td><td>%s</td></tr> \
 170                 <tr><td>hi:</td><td>%s</td></tr> \
 171                 <tr><td>low:</td><td>%s</td></tr> \
 172                 <tr><td>close:</td><td>%s</td></tr> \
 173             </table>'
 174         }
 175     });
 176 });
 177 </script>
 178
 179 <script class="code" type="text/javascript">
 180 $(document).ready(function(){
 181
 182     plot2 = $.jqplot('chart2',[ohlc],{
 183         title: 'OHLC chart',
 184         axes: {
 185             xaxis: {
 186                 renderer:$.jqplot.DateAxisRenderer,
 187                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 188                 tickOptions: {
 189                     angle: -30
 190                 }
 191             },
 192             yaxis: {
 193                 tickOptions:{
 194                     prefix: '$'
 195                 }
 196             }
 197         },
 198         series: [
 199             {
 200                 renderer:$.jqplot.OHLCRenderer
 201             }
 202         ],
 203         highlighter: {
 204             showMarker:false,
 205             tooltipAxes: 'xy',
 206             yvalues: 4,
 207             formatString:'<table class="jqplot-highlighter"> \
 208                 <tr><td>date:</td><td>%s</td></tr> \
 209                 <tr><td>open:</td><td>%s</td></tr> \
 210                 <tr><td>hi:</td><td>%s</td></tr> \
 211                 <tr><td>low:</td><td>%s</td></tr> \
 212                 <tr><td>close:</td><td>%s</td></tr> \
 213             </table>'
 214         }
 215     });
 216 });
 217 </script>
 218
 219 <script class="code" type="text/javascript">
 220 $(document).ready(function(){
 221
 222     plot3 = $.jqplot('chart3',[ohlc],{
 223         axesDefaults:{},
 224         axes: {
 225             xaxis: {
 226                 renderer:$.jqplot.DateAxisRenderer,
 227                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 228                 numberTicks: 7,
 229                 tickOptions: {
 230                     angle: -30
 231                 }
 232             },
 233             yaxis: {
 234                 tickOptions:{
 235                     prefix: '$'
 236                 }
 237             }
 238         },
 239         series: [
 240             {
 241                 renderer:$.jqplot.OHLCRenderer,
 242                 rendererOptions:{
 243                     candleStick:true
 244                 }
 245             }
 246         ],
 247         highlighter: {
 248             showMarker:false,
 249             tooltipAxes: 'xy',
 250             yvalues: 4,
 251             formatString:'<table class="jqplot-highlighter"> \
 252                 <tr><td>date:</td><td>%s</td></tr> \
 253                 <tr><td>open:</td><td>%s</td></tr> \
 254                 <tr><td>hi:</td><td>%s</td></tr> \
 255                 <tr><td>low:</td><td>%s</td></tr> \
 256                 <tr><td>close:</td><td>%s</td></tr> \
 257             </table>'
 258         }
 259     });
 260 });
 261 </script>
 262
 263 <!-- End example scripts -->
 264
 265 <!-- Don't touch this! -->
 266
 267
 268     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 269     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 270     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 271     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 272 <!-- End Don't touch this! -->
 273
 274 <!-- Additional plugins go here -->
 275
 276     <script class="include" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
 277     <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
 278     <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 279     <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
 280     <script class="include" type="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js"></script>
 281     <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
 282
 283 <!-- End additional plugins -->
 284
 285
 286         </div>
 287         <script type="text/javascript" src="example.min.js"></script>
 288
 289 </body>
 290
 291
 292 </html>