public/javascripts/jqplot/examples/zoom1.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Zooming</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="waterfall2.html">Previous</a> <a href="./">Examples</a> <a href="zoomOptions.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36     <style type="text/css">
  37         .jqplot-cursor-legend {
  38             width: 160px;
  39             font-family: "Courier New";
  40             font-size: 0.85em;
  41         }
  42
  43         td.jqplot-cursor-legend-swatch {
  44             width: 1.3em;
  45         }
  46     </style>
  47
  48
  49
  50     <div id="chart1" style="height:200px; width:600px;"></div>
  51     <div id="chart2" style="height:500px; width:600px;"></div>
  52
  53
  54 <script type="text/javascript" class="code">
  55 $(document).ready(function(){
  56     goog = [["6/22/2009",425.32], ["6/8/2009",424.84], ["5/26/2009",417.23], ["5/11/2009",390],
  57     ["4/27/2009",393.69], ["4/13/2009",392.24], ["3/30/2009",369.78], ["3/16/2009",330.16], ["3/2/2009",308.57],
  58     ["2/17/2009",346.45], ["2/2/2009",371.28], ["1/20/2009",324.7], ["1/5/2009",315.07], ["12/22/2008",300.36],
  59     ["12/8/2008",315.76], ["11/24/2008",292.96], ["11/10/2008",310.02], ["10/27/2008",359.36], ["10/13/2008",372.54],
  60     ["9/29/2008",386.91], ["9/15/2008",449.15], ["9/2/2008",444.25], ["8/25/2008",463.29],  ["8/11/2008",510.15],
  61     ["7/28/2008",467.86], ["7/14/2008",481.32], ["6/30/2008",537], ["6/16/2008",546.43], ["6/2/2008",567],
  62     ["5/19/2008",544.62], ["5/5/2008",573.2], ["4/21/2008",544.06], ["4/7/2008",457.45], ["3/24/2008",438.08],
  63     ["3/10/2008",437.92], ["2/25/2008",471.18], ["2/11/2008",529.64], ["1/28/2008",515.9], ["1/14/2008",600.25],
  64     ["12/31/2007",657], ["12/17/2007",696.69], ["12/3/2007",714.87], ["11/19/2007",676.7], ["11/5/2007",663.97],
  65     ["10/22/2007",674.6], ["10/8/2007",637.39], ["9/24/2007",567.27], ["9/10/2007",528.75], ["8/27/2007",515.25]];
  66
  67     var plot1 = $.jqplot('chart1', [goog], {
  68         title: 'Google, Inc.',
  69         series: [{
  70             label: 'Google, Inc.',
  71             neighborThreshold: -1
  72         }],
  73         axes: {
  74             xaxis: {
  75                 renderer:$.jqplot.DateAxisRenderer,
  76                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
  77                 tickOptions: {
  78                   angle: -30
  79                 }
  80             },
  81             yaxis: {
  82                 renderer: $.jqplot.LogAxisRenderer,
  83                 tickOptions:{ prefix: '$' }
  84             }
  85         },
  86         cursor:{
  87             show: true,
  88             zoom: true
  89         }
  90     });
  91 });
  92 </script>
  93
  94 <script type="text/javascript" class="code">
  95 $(document).ready(function(){
  96     plot2 = $.jqplot('chart2', [goog], {
  97         title: 'Google, Inc.',
  98         series: [{
  99             label: 'Google, Inc.',
 100             neighborThreshold: -1
 101         }],
 102         axes: {
 103             xaxis: {
 104                 renderer:$.jqplot.DateAxisRenderer,
 105                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 106                 tickOptions: {
 107                   angle: -30
 108                 }
 109             },
 110             yaxis: {
 111                 renderer: $.jqplot.LogAxisRenderer,
 112                 tickOptions:{ prefix: '$' }
 113             }
 114         },
 115         cursor:{
 116             show: true,
 117             zoom: true
 118         }
 119     });
 120 });
 121 </script>
 122
 123 <!-- End example scripts -->
 124
 125 <!-- Don't touch this! -->
 126
 127
 128     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 129     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 130     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 131     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 132 <!-- End Don't touch this! -->
 133
 134 <!-- Additional plugins go here -->
 135     <script class="include" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
 136     <script class="include" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
 137     <script class="include" type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
 138     <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 139     <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
 140 <!-- End additional plugins -->
 141
 142
 143         </div>
 144         <script type="text/javascript" src="example.min.js"></script>
 145
 146 </body>
 147
 148
 149 </html>