public/javascripts/jqplot/examples/bandedLine.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Error Bands and Confidence Intervals</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="axisScalingForceTickAt.html">Previous</a> <a href="./">Examples</a> <a href="bar-charts.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35 <p>Bands (like confidence intervals or error bands) can be added to line charts through the "bands" option of the line renderer.  The band data can be automatically computed or manually assigned.  If assigned manually, the simpliest approach is to set the "rendererOptions: { bandData: [] }" array on the series.  Note that band data is taken into account when axes scale themselves so bands will not get clipped.</p>
  36
  37
  38 <p>Band data can be supplied as arrays of [x,y] values.  One array for the upper band line and one for the lower band line.</p>
  39
  40  <div id="chart01" style="height:300px; width:600px;"></div>
  41     <pre class="code brush:js"></pre>
  42
  43
  44 <p>The number of points in the band data arrays does not have to correspond to the number of points in the data series.  Also, band data will be drawn as smoothed lines if the data series is smoothed.</p>
  45
  46  <div id="chart02" style="height:300px; width:600px;"></div>
  47     <pre class="code brush:js"></pre>
  48
  49 <p>In this example, band data is supplied as an array of arrays of y values for the low and hi bands.  X values for the bands are taken from the x values of the series.  The band data is of the form:  [ [y low 1, y hi 1], [y low 2, y hi 2], ... ] and there must be a corresponding array of low/hi y values for each x value in the data series.</p>
  50
  51  <div id="chart1" style="height:300px; width:600px;"></div>
  52     <pre class="code brush:js"></pre>
  53
  54 <p>The band data can also be supplied as an array of [low y values], [hi y values].  In this case there must also be an equal number of low y values and hi y values as there are data points in the series.  X values for the low and hi bands will be taken from the series data.  Additionally, the order of low/hi values does not matter as long as they are consistent.  jqPlot will figure out which is the low values and which are the high values.</p>
  55
  56  <div id="chart2" style="height:300px; width:600px;"></div>
  57     <pre class="code brush:js"></pre>
  58
  59 <p>Band data does not have to be provided.  By default, jqPlot will compute +/- 3% band intervals if the "rendererOptions: { bands: { show: true } }" option is set.  The band intervals can be customized as well through the "rendererOptions: { bands: { interval: [number|string|arry] } }" option.  Valid intervals are:</p>
  60
  61 <ul>
  62 <li> '1.7' - will add bands at y +/- 1.7 above and below the line.</li>
  63 <li> '10%' - will compute +/- 10% interval bands.</li>
  64 <li> [3, '-10%'] - will add bands at y + 3 and y - 10% above and below the line.</li>
  65 </ul>
  66
  67 <p>Examples of such interval specifications are shown below:</p>
  68
  69  <div id="chart3" style="height:300px; width:600px;"></div>
  70     <pre class="code brush:js"></pre>
  71  <div id="chart4" style="height:300px; width:600px;"></div>
  72     <pre class="code brush:js"></pre>
  73
  74  <div id="chart5" style="height:300px; width:600px;"></div>
  75     <pre class="code brush:js"></pre>
  76
  77 <p>You can also customize the fill color of the bands and turn on/off band lines.  By default, bands respond to the mouse over event, but they can be set to respond to mouse down as well.</p>
  78  <div id="chart6" style="height:300px; width:600px;"></div>
  79     <pre class="code brush:js"></pre>
  80
  81 <p>Note, the plots on this page all extend the following pre-defined theme:</p>
  82
  83     <pre class="code brush:js"></pre>
  84
  85
  86 <script class="code" type="text/javascript">
  87 $(document).ready(function(){
  88     // Band data in arrays of [x,y] values.
  89     bdat = [[['7/1/2011', 8], ['7/2/2011', 9], ['7/3/2011', 8], ['7/4/2011', 13], ['7/5/2011', 11], ['7/6/2011', 13]],
  90     [['7/1/2011', 12], ['7/2/2011', 13], ['7/3/2011', 12], ['7/4/2011', 17], ['7/5/2011', 15], ['7/6/2011', 17]]];
  91
  92     dat = [['7/1/2011', 10], ['7/2/2011', 11], ['7/3/2011', 10], ['7/4/2011', 15], ['7/5/2011', 13], ['7/6/2011', 15]];
  93
  94     plot01 = $.jqplot('chart01', [dat], $.extend(true, {}, myTheme, {
  95         series: [{
  96             rendererOptions: {
  97                 bandData: bdat
  98             }
  99         }],
 100         axes: {
 101             xaxis: {
 102                 renderer: $.jqplot.DateAxisRenderer,
 103                 min: '7/1/2011',
 104                 max: '7/6/2011',
 105                 tickInterval: '1 day'
 106             }
 107         }
 108     }));
 109 });
 110 </script>
 111
 112 <script class="code" type="text/javascript">
 113 $(document).ready(function(){
 114     // Band data in arrays of [x,y] values.
 115     // Here the low band line (1st array) has 5 points and the hi band line has 4 points.
 116     bdat = [[['7/1/2011', 9], ['7/3/2011', 7], ['7/4/2011', 13], ['7/5/2011', 11], ['7/6/2011', 13]],
 117     [['7/1/2011', 12], ['7/3/2011', 14], ['7/4/2011', 18], ['7/6/2011', 16]]];
 118
 119     dat = [['7/1/2011', 10], ['7/2/2011', 11], ['7/3/2011', 10], ['7/4/2011', 15], ['7/5/2011', 13], ['7/6/2011', 15]];
 120
 121     plot02 = $.jqplot('chart02', [dat], $.extend(true, {}, myTheme, {
 122         series: [{
 123             rendererOptions: {
 124                 bandData: bdat,
 125
 126                 // turn on smoothing
 127                 smooth: true
 128             }
 129         }],
 130         axes: {
 131             xaxis: {
 132                 renderer: $.jqplot.DateAxisRenderer,
 133                 min: '7/1/2011',
 134                 max: '7/6/2011',
 135                 tickInterval: '1 day'
 136             }
 137         }
 138     }));
 139 });
 140 </script>
 141
 142 <script class="code" type="text/javascript">
 143 $(document).ready(function(){
 144     // data points for line.
 145     dat = [[0, 10], [1, 11], [2, 10], [3, 15], [4, 13], [5, 15]];
 146
 147     // band data in [[low_y_1, hi_y_1], [low_y_2, hi_y_2],...] format
 148     bdat = [[7, 13], [8, 14], [7, 13], [12, 18], [10, 16], [12, 18]];
 149
 150     plot1 = $.jqplot('chart1', [dat], $.extend(true, {}, myTheme, {
 151         series: [{
 152             rendererOptions: {
 153                 // Set the band data on the series.
 154                 // Bands will be turned on automatically if
 155                 // valid band data is present.
 156                 bandData: bdat,
 157                 smooth: true
 158             }
 159         }]
 160     }));
 161 });
 162
 163 </script>
 164
 165
 166 <script class="code" type="text/javascript">
 167
 168 $(document).ready(function(){
 169     // here band data specified as an array of [low y values] and [hi y values]
 170     bdat = [[7, 8, 7, 12, 10, 12], [13, 14, 13, 18, 16, 18]];
 171
 172     // Same plot as before with different band data specification and smoothed lines.
 173     plot2 = $.jqplot('chart2', [dat], $.extend(true, {}, myTheme, {
 174         series: [
 175         {
 176             rendererOptions: {
 177                 bandData: bdat,
 178                 smooth: true
 179             }
 180         }]
 181     }));
 182 });
 183
 184 </script>
 185
 186 <script class="code" type="text/javascript">
 187 $(document).ready(function(){
 188     plot3 = $.jqplot('chart3', [dat], $.extend(true, {}, myTheme, {
 189         series: [{
 190             rendererOptions: {
 191                 bands: {
 192                     // draw bands at 1.7 "units" above and below line.
 193                     interval: 1.7
 194                 },
 195                 smooth: true
 196             }
 197         }]
 198     }));
 199 });
 200
 201 </script>
 202
 203 <script class="code" type="text/javascript">
 204 $(document).ready(function(){
 205     plot4 = $.jqplot('chart4', [dat], $.extend(true, {}, myTheme, {
 206         series: [{
 207             rendererOptions: {
 208                 bands: {
 209                     // draw interval at 10% above and below line.
 210                     interval: '10%'
 211                 },
 212                 smooth: true
 213             }
 214         }]
 215     }));
 216 });
 217 </script>
 218
 219 <script class="code" type="text/javascript">
 220 $(document).ready(function(){
 221     plot5 = $.jqplot('chart5', [dat], $.extend(true, {}, myTheme, {
 222         series: [{
 223             rendererOptions: {
 224                 bands: {
 225                     // draw interval at 3 units above and 10% below line.
 226                     interval: [3, '-10%']
 227                 },
 228                 smooth: true
 229             }
 230         }]
 231     }));
 232 });
 233 </script>
 234
 235 <script class="code" type="text/javascript">
 236 $(document).ready(function(){
 237     plot6 = $.jqplot('chart6', [dat], $.extend(true, {}, myTheme, {
 238         series: [{
 239             rendererOptions: {
 240                 bands: {
 241                     // draw interval at 3 units above and 10% below line.
 242                     interval: 4,
 243                     fillColor: 'rgba(198, 88, 88, 0.6)',
 244                     showLines: true
 245                 },
 246
 247                 // highlight the band on mouse down, not on mouse over.
 248                 highlightMouseDown: true,
 249                 smooth: true
 250             }
 251         }]
 252     }));
 253 });
 254 </script>
 255
 256 <script class="code" type="text/javascript">
 257 ///////
 258 // A default set of reusable plot options.  Note that line
 259 // smoothing is turned on.  Bands will be drawn with the same
 260 // smoothing as the line.
 261 //////
 262 myTheme = {
 263   grid: {
 264       drawBorder: false,
 265       shadow: false,
 266       background: 'rgba(255, 255, 255, 0.0)'
 267   },
 268   seriesDefaults: {
 269     shadow: false,
 270     showMarker: false
 271   },
 272   axes: {
 273       xaxis: {
 274           pad: 1.0,
 275           tickOptions: {
 276               showGridline: false
 277           }
 278       },
 279       yaxis: {
 280           pad: 1.05
 281       }
 282   }
 283 };
 284 </script>
 285 <!-- End example scripts -->
 286
 287 <!-- Don't touch this! -->
 288
 289
 290     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 291     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 292     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 293     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 294 <!-- Additional plugins go here -->
 295
 296     <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
 297     <script class="include" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
 298     <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
 299     <script class="include" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
 300
 301 <!-- End additional plugins -->
 302
 303
 304         </div>
 305         <script type="text/javascript" src="example.min.js"></script>
 306
 307 </body>
 308
 309
 310 </html>