public/javascripts/jqplot/examples/blockPlot.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Block Plots</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="bezierCurve.html">Previous</a> <a href="./">Examples</a> <a href="bodyOpenerNoHeader.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36  <p>Below is an example block plot.  This plot also uses the Enhanced Legend Renderer plugin.  Clicking on an item in the legend will toggle display of the appropriate series.</p>
  37
  38     <div id="chart1" class="plot" style="width:500px;height:300px;margin-bottom:30px;"></div>
  39
  40 <p>Blocks can be moved by selecting the series, the point, and an optional duration parameter.  If specified, duration will animate the movement.  Duration is either a number in milliseconds, or the keywords 'fast' or 'slow'.  Higher numbers will cause a slower animation.</p>
  41     Series: <select id="seriesId">
  42         <option value="0" selected>First</option>
  43         <option value="1">Second</option>
  44         <option value="2">Third</option>
  45     </select>
  46     Point: <select id="pointId">
  47         <option value="0" selected>first</option>
  48         <option value="1">second</option>
  49         <option value="2">third</option>
  50         <option value="3">fourth</option>
  51         <option value="4">fifth</option>
  52         <option value="5">six</option>
  53     </select>
  54     Duration: <select id="duration">
  55         <option value="" selected>None</option>
  56         <option value="150">100</option>
  57         <option value="fast">fast</option>
  58         <option value="300">300</option>
  59         <option value="300">400</option>
  60         <option value="300">500</option>
  61         <option value="slow">slow</option>
  62         <option value="900">700</option>
  63         <option value="900">800</option>
  64         <option value="900">900</option>
  65     </select>
  66     X: <button id="mxval" type="button" value="-0.5" onclick="move('x', -1);">-1</button> <button id="pxval" type="button" value="-0.5" onclick="move('x', 0.5);">0.5</button>
  67     Y: <button id="myval" type="button" name="myval" value="-10" onclick="move('y', -30);">-30</button> <button id="pyval" type="button" name="pyval" value="10" onclick="move('y', 15);">15</button>
  68
  69     <pre class="code brush:js"></pre>
  70
  71
  72     <p>This second chart is like the first except the "varyBlockColors" renderer option is set to true.  This will vary the color of each block in a series separately.  This allows displaying a third dimension to the data such as grouping beverage products by producer and by category such as "cola", "tea", "energy drink", etc.</p>
  73
  74     <p>Also, the legend has it's "showSwathces" option set to false, since the blocks of each series will be of varying color and won't correspond to one swatch color.  This still enables the user to show and hide the series by clicking on a label in the legend.</p>
  75
  76     <div id="chart2" class="plot" style="width:500px;height:300px;margin-bottom:30px;"></div>
  77
  78
  79 <script class="code" type="text/javascript">
  80 $(document).ready(function(){
  81
  82     var s1 = [[0.9, 120, 'Vernors'], [1.8, 140, 'Fanta'], [3.2, 90, 'Barqs', {background:'#ddbb33'}],
  83     [4.1, 140, 'Arizon Iced Tea'], [4.5, 91, 'Red Bull'], [6.8, 17, 'Go Girl']];
  84     var s2 = [[1.3, 44, 'Pepsi'], [2.1, 170, 'Sierra Mist'], [2.6, 66, 'Moutain Dew'],
  85     [4, 52, 'Sobe'], [5.4, 16, 'Amp'], [6, 48, 'Aquafina']];
  86     var s3 = [[1, 59, 'Coca-Cola', {background:'rgb(250, 160, 160)'}], [2, 50, 'Ambasa'],
  87     [3, 90, 'Mello Yello'], [4, 90, 'Sprite'], [5, 71, 'Squirt'], [5, 155, 'Youki']];
  88
  89     $('#chart1').jqplot([s1, s2, s3],{
  90         seriesDefaults:{
  91             renderer:$.jqplot.BlockRenderer
  92         },
  93        legend:{
  94            renderer: $.jqplot.EnhancedLegendRenderer,
  95            show:true
  96         },
  97         series: [
  98            {},
  99            {rendererOptions: {
 100                css:{background:'#A1EED6'}
 101            }},
 102            {rendererOptions: {
 103                css:{background:'#D3E4A0'}
 104            }}
 105         ],
 106         axes: {
 107             xaxis: {
 108                 min:0,
 109                 max: 8
 110             },
 111             yaxis: {
 112                 min:0,
 113                 max: 200
 114             }
 115         }
 116     });
 117 });
 118
 119  function move(dir, val) {
 120      var plot1 = $('#chart1').data('jqplot');
 121      val = parseFloat(val);
 122      var sidx = parseInt($('#seriesId').val());
 123      var pidx = parseInt($('#pointId').val());
 124      var duration = $('#duration').val();
 125      var x = plot1.series[sidx].data[pidx][0];
 126      var y = plot1.series[sidx].data[pidx][1];
 127      (dir == 'x') ? x += val : y += val;
 128      plot1.series[sidx].moveBlock(pidx, x, y, duration);
 129  }
 130
 131 </script>
 132
 133 <script class="code" type="text/javascript">
 134 $(document).ready(function(){
 135     var s1 = [[0.9, 120, 'Vernors'], [1.8, 140, 'Fanta'], [3.2, 90, 'Barqs'],
 136     [4.1, 140, 'Arizon Iced Tea'], [4.5, 91, 'Red Bull'], [6.8, 17, 'Go Girl']];
 137     var s2 = [[1.3, 44, 'Pepsi'], [2.1, 170, 'Sierra Mist'], [2.6, 66, 'Moutain Dew'],
 138     [4, 52, 'Sobe'], [5.4, 16, 'Amp'], [6, 48, 'Aquafina']];
 139     var s3 = [[1, 59, 'Coca-Cola'], [2, 50, 'Sprite'], [3, 90, 'Mello Yello'],
 140     [4, 90, 'Ambasa'], [5, 71, 'Squirt'], [5, 155, 'Youki']];
 141
 142
 143     var plot2 = $.jqplot('chart2',[s1, s2, s3],{
 144         seriesDefaults:{
 145             renderer:$.jqplot.BlockRenderer,
 146             rendererOptions: {
 147                 varyBlockColors: true
 148             },
 149             pointLabels:{
 150                 show: false
 151             }
 152         },
 153        legend:{
 154            renderer: $.jqplot.EnhancedLegendRenderer,
 155            show:true,
 156            showSwatches: false
 157         },
 158         series: [{label: 'Independent Brands'}, {label: 'Pepsi Brands'}, {label: 'Coke Brands'}],
 159         axes: {
 160             xaxis: {
 161                 min:0,
 162                 max: 8
 163             },
 164             yaxis: {
 165                 min:0,
 166                 max: 200
 167             }
 168         }
 169     });
 170
 171  });
 172
 173 </script>
 174
 175 <!-- End example scripts -->
 176
 177 <!-- Don't touch this! -->
 178
 179
 180     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 181     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 182     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 183     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 184 <!-- Additional plugins go here -->
 185
 186   <script class="include" type="text/javascript" src="../plugins/jqplot.blockRenderer.min.js"></script>
 187   <script class="include" type="text/javascript" src="../plugins/jqplot.enhancedLegendRenderer.min.js"></script>
 188   <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
 189
 190 <!-- End additional plugins -->
 191
 192
 193         </div>
 194         <script type="text/javascript" src="example.min.js"></script>
 195
 196 </body>
 197
 198
 199 </html>