public/javascripts/jqplot/examples/selectorSyntax.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Plot Creation with jQuery Selectors</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="rotatedTickLabelsZoom.html">Previous</a> <a href="./">Examples</a> <a href="smoothedLine.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36 <div id="chart1" style="height:300px; width:500px;"></div>
  37
  38 <pre class="code prettyprint brush: js"></pre>
  39
  40 <div class="chart2" style="height:300px; width:500px;"></div>
  41
  42 <pre class="code prettyprint brush: js"></pre>
  43
  44 <div class="jqplot" style="height:300px; width:500px;"></div>
  45
  46 <div class="jqplot" style="height:300px; width:500px;"></div>
  47
  48 <pre class="code prettyprint brush: js"></pre>
  49
  50
  51 <script class="code" type="text/javascript">
  52 $(document).ready(function(){
  53   // Use jQuery selector for a specific element ID.
  54   $('#chart1').jqplot([[3,7,9,1,5,3,8,2,5]]);
  55 });
  56 </script>
  57
  58 <script class="code" type="text/javascript">
  59 $(document).ready(function(){
  60   // jQuery selector for elements with a specific class attribute.
  61   // Here, there is one div with the class "chart2"
  62   $(".chart2").jqplot ([[3,7,9,1,5,3,8,2,5]], {
  63       title: "Plot With Options",
  64       axesDefaults: {
  65         labelRenderer: $.jqplot.CanvasAxisLabelRenderer
  66       },
  67       seriesDefaults: {
  68           rendererOptions: {
  69               smooth: true
  70           }
  71       },
  72       axes: {
  73         xaxis: {
  74           label: "X Axis",
  75           pad: 0
  76         },
  77         yaxis: {
  78           label: "Y Axis"
  79         }
  80       }
  81     });
  82 });
  83
  84 // the jqPlot plot object can be accessed through the jQuery "data" method:
  85 //
  86 // >>> $('.chart2').data('jqplot').series[0].data
  87 // [[1, 3], [2, 7], [3, 9], [4, 1], [5, 5], [6, 3], [7, 8], [8, 2], [9, 5]]
  88
  89 </script>
  90
  91 <script class="code" type="text/javascript">
  92 $(document).ready(function(){
  93   // Some simple loops to build up data arrays.
  94   var cosPoints = [];
  95   for (var i=0; i<2*Math.PI; i+=1){
  96     cosPoints.push([i, Math.cos(i)]);
  97   }
  98
  99   var sinPoints = [];
 100   for (var i=0; i<2*Math.PI; i+=0.4){
 101      sinPoints.push([i, 2*Math.sin(i-.8)]);
 102   }
 103
 104   var powPoints1 = [];
 105   for (var i=0; i<2*Math.PI; i+=1) {
 106       powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]);
 107   }
 108
 109   var powPoints2 = [];
 110   for (var i=0; i<2*Math.PI; i+=1) {
 111       powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]);
 112   }
 113
 114   // jQuery selector for all divs with a class of "jqplot".
 115   // Here, there are two divs that match.  By supplying 2 seperate
 116   // arrays of data, each plot will have it's own independent series.
 117   // Only one options array is supplied, so it will be used for both
 118   // plots.
 119   $("div.jqplot").jqplot([cosPoints, sinPoints], [powPoints1, powPoints2], {
 120       title: "One Selector, Multiple Plots",
 121       seriesDefaults: {
 122           rendererOptions: {
 123               smooth: true
 124           }
 125       }
 126   });
 127
 128 });
 129 </script>
 130
 131
 132 <!-- End example scripts -->
 133
 134 <!-- Don't touch this! -->
 135
 136
 137     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 138     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 139     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 140     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 141 <!-- End Don't touch this! -->
 142
 143 <!-- Additional plugins go here -->
 144
 145   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 146   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
 147
 148 <!-- End additional plugins -->
 149
 150
 151         </div>
 152         <script type="text/javascript" src="example.min.js"></script>
 153
 154 </body>
 155
 156
 157 </html>