public/javascripts/jqplot/examples/bar-charts.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Vertical and Horizontal Bar Charts</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="bandedLine.html">Previous</a> <a href="./">Examples</a> <a href="barLineAnimated.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36
  37   <style type="text/css">
  38
  39     .note {
  40         font-size: 0.8em;
  41     }
  42     .jqplot-yaxis-tick {
  43       white-space: nowrap;
  44     }
  45   </style>
  46
  47     <div id="chart1" style="width:600px; height:250px;"></div>
  48
  49     <pre class="code brush: js"></pre>
  50
  51     <div id="chart2" style="width:400px; height:300px;"></div>
  52
  53     <pre class="code brush: js"></pre>
  54
  55     <p class="text">Click on a bar in the plot below to update the text box.</p>
  56     <p class="text">You Clicked:
  57     <span id="info3">Nothing yet.</span>
  58     </p>
  59     <div id="chart3" style="width:400px; height:300px;"></div>
  60
  61     <pre class="code brush: js"></pre>
  62
  63   <script class="code" type="text/javascript">
  64 $(document).ready(function(){
  65     var s1 = [200, 600, 700, 1000];
  66     var s2 = [460, -210, 690, 820];
  67     var s3 = [-260, -440, 320, 200];
  68     // Can specify a custom tick Array.
  69     // Ticks should match up one for each y value (category) in the series.
  70     var ticks = ['May', 'June', 'July', 'August'];
  71
  72     var plot1 = $.jqplot('chart1', [s1, s2, s3], {
  73         // The "seriesDefaults" option is an options object that will
  74         // be applied to all series in the chart.
  75         seriesDefaults:{
  76             renderer:$.jqplot.BarRenderer,
  77             rendererOptions: {fillToZero: true}
  78         },
  79         // Custom labels for the series are specified with the "label"
  80         // option on the series option.  Here a series option object
  81         // is specified for each series.
  82         series:[
  83             {label:'Hotel'},
  84             {label:'Event Regristration'},
  85             {label:'Airfare'}
  86         ],
  87         // Show the legend and put it outside the grid, but inside the
  88         // plot container, shrinking the grid to accomodate the legend.
  89         // A value of "outside" would not shrink the grid and allow
  90         // the legend to overflow the container.
  91         legend: {
  92             show: true,
  93             placement: 'outsideGrid'
  94         },
  95         axes: {
  96             // Use a category axis on the x axis and use our custom ticks.
  97             xaxis: {
  98                 renderer: $.jqplot.CategoryAxisRenderer,
  99                 ticks: ticks
 100             },
 101             // Pad the y axis just a little so bars can get close to, but
 102             // not touch, the grid boundaries.  1.2 is the default padding.
 103             yaxis: {
 104                 pad: 1.05,
 105                 tickOptions: {formatString: '$%d'}
 106             }
 107         }
 108     });
 109 });
 110   </script>
 111
 112
 113 <script class="code" type="text/javascript">
 114 $(document).ready(function(){
 115     // For horizontal bar charts, x an y values must will be "flipped"
 116     // from their vertical bar counterpart.
 117     var plot2 = $.jqplot('chart2', [
 118         [[2,1], [4,2], [6,3], [3,4]],
 119         [[5,1], [1,2], [3,3], [4,4]],
 120         [[4,1], [7,2], [1,3], [2,4]]], {
 121         seriesDefaults: {
 122             renderer:$.jqplot.BarRenderer,
 123             // Show point labels to the right ('e'ast) of each bar.
 124             // edgeTolerance of -15 allows labels flow outside the grid
 125             // up to 15 pixels.  If they flow out more than that, they
 126             // will be hidden.
 127             pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
 128             // Rotate the bar shadow as if bar is lit from top right.
 129             shadowAngle: 135,
 130             // Here's where we tell the chart it is oriented horizontally.
 131             rendererOptions: {
 132                 barDirection: 'horizontal'
 133             }
 134         },
 135         axes: {
 136             yaxis: {
 137                 renderer: $.jqplot.CategoryAxisRenderer
 138             }
 139         }
 140     });
 141 });
 142 </script>
 143
 144 <script class="code" type="text/javascript">
 145 $(document).ready(function(){
 146   var s1 = [2, 6, 7, 10];
 147   var s2 = [7, 5, 3, 4];
 148   var s3 = [14, 9, 3, 8];
 149   plot3 = $.jqplot('chart3', [s1, s2, s3], {
 150     // Tell the plot to stack the bars.
 151     stackSeries: true,
 152     captureRightClick: true,
 153     seriesDefaults:{
 154       renderer:$.jqplot.BarRenderer,
 155       rendererOptions: {
 156           // Put a 30 pixel margin between bars.
 157           barMargin: 30,
 158           // Highlight bars when mouse button pressed.
 159           // Disables default highlighting on mouse over.
 160           highlightMouseDown: true
 161       },
 162       pointLabels: {show: true}
 163     },
 164     axes: {
 165       xaxis: {
 166           renderer: $.jqplot.CategoryAxisRenderer
 167       },
 168       yaxis: {
 169         // Don't pad out the bottom of the data range.  By default,
 170         // axes scaled as if data extended 10% above and below the
 171         // actual range to prevent data points right on grid boundaries.
 172         // Don't want to do that here.
 173         padMin: 0
 174       }
 175     },
 176     legend: {
 177       show: true,
 178       location: 'e',
 179       placement: 'outside'
 180     }
 181   });
 182   // Bind a listener to the "jqplotDataClick" event.  Here, simply change
 183   // the text of the info3 element to show what series and ponit were
 184   // clicked along with the data for that point.
 185   $('#chart3').bind('jqplotDataClick',
 186     function (ev, seriesIndex, pointIndex, data) {
 187       $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
 188     }
 189   );
 190 });
 191 </script>
 192
 193 <!-- End example scripts -->
 194
 195 <!-- Don't touch this! -->
 196
 197
 198     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 199     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 200     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 201     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 202 <!-- End Don't touch this! -->
 203
 204 <!-- Additional plugins go here -->
 205
 206     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
 207     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
 208     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
 209
 210 <!-- End additional plugins -->
 211
 212
 213         </div>
 214         <script type="text/javascript" src="example.min.js"></script>
 215
 216 </body>
 217
 218
 219 </html>