public/javascripts/jqplot/examples/waterfall2.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Waterfall charts 2</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="waterfall.html">Previous</a> <a href="./">Examples</a> <a href="zoom1.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36   <style type="text/css" media="screen">
  37     .jqplot-axis {
  38       font-size: 0.85em;
  39     }
  40     .jqplot-title {
  41       font-size: 16px;
  42     }
  43       p {
  44         margin: 20px;
  45         font-family:Arial,Helvetica,Sans-serif;
  46       }
  47   </style>
  48
  49
  50     <div id="chart1" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
  51
  52     <div id="chart1b" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
  53
  54     <div id="chart1c" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
  55
  56     <div id="chart1d" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
  57
  58
  59
  60
  61 <script class="code" type="text/javascript">$(document).ready(function(){
  62     var line1 = [14, 4, 3, -23, 5, 2, -3, -7];
  63     var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
  64
  65
  66     plot1 = $.jqplot('chart1', [line1], {
  67         title: 'Crop Yield Change, 2008 to 2009',
  68         seriesDefaults:{
  69             fill: true,
  70             fillToZero: true,
  71             renderer:$.jqplot.BarRenderer,
  72             rendererOptions:{
  73                 waterfall:true,
  74                 disableStack: true,
  75                 varyBarColor: true
  76             },
  77             pointLabels: {
  78                 show: true,
  79                 hideZeros: true
  80             },
  81             yaxis:'y2axis'
  82         },
  83         axes:{
  84             xaxis:{
  85                 renderer:$.jqplot.CategoryAxisRenderer,
  86                 ticks:ticks,
  87                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
  88                 tickOptions: {
  89                     angle: -90,
  90                     fontSize: '10pt',
  91                     showMark: false,
  92                     showGridline: false
  93                 }
  94             }
  95         }
  96     });
  97 });</script>
  98
  99 <script class="code" type="text/javascript">$(document).ready(function(){
 100     var line1 = [14, 4, 0, -23, 5, 0, -3, -7];
 101     var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
 102
 103
 104     plot1b = $.jqplot('chart1b', [line1], {
 105         title: 'Crop Yield Change, 2008 to 2009',
 106         seriesDefaults:{
 107             renderer:$.jqplot.BarRenderer,
 108             rendererOptions:{
 109                 waterfall:true,
 110                 varyBarColor: true
 111             },
 112             pointLabels: {
 113                 show: true,
 114                 hideZeros: true
 115             },
 116             yaxis:'y2axis'
 117         },
 118         axes:{
 119             xaxis:{
 120                 renderer:$.jqplot.CategoryAxisRenderer,
 121                 ticks:ticks,
 122                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 123                 tickOptions: {
 124                     angle: -90,
 125                     fontSize: '10pt',
 126                     showMark: false,
 127                     showGridline: false
 128                 }
 129             }
 130         }
 131     });
 132 });</script>
 133
 134 <script class="code" type="text/javascript">$(document).ready(function(){
 135     var line1 = [14, 0, 13, 0, -5, -9, 3, 7];
 136     var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
 137
 138
 139     plot1c = $.jqplot('chart1c', [line1], {
 140         title: 'Crop Yield Change, 2008 to 2009',
 141         seriesDefaults:{
 142             renderer:$.jqplot.BarRenderer,
 143             rendererOptions:{
 144                 waterfall:true,
 145                 varyBarColor: true
 146             },
 147             pointLabels: {
 148                 show: true,
 149                 hideZeros: true
 150             },
 151             yaxis:'y2axis'
 152         },
 153         axes:{
 154             xaxis:{
 155                 renderer:$.jqplot.CategoryAxisRenderer,
 156                 ticks:ticks,
 157                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 158                 tickOptions: {
 159                     angle: -90,
 160                     fontSize: '10pt',
 161                     showMark: false,
 162                     showGridline: false
 163                 }
 164             }
 165         }
 166     });
 167 });</script>
 168
 169 <script class="code" type="text/javascript">$(document).ready(function(){
 170     var line1 = [-14, 0, -13, 0, 5, 9, -3, -7];
 171     var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
 172
 173
 174     plot1d = $.jqplot('chart1d', [line1], {
 175         title: 'Crop Yield Change, 2008 to 2009',
 176         seriesDefaults:{
 177             renderer:$.jqplot.BarRenderer,
 178             rendererOptions:{
 179                 waterfall: true,
 180                 varyBarColor: true
 181             },
 182             pointLabels: {
 183                 show: true,
 184                 hideZeros: true
 185             },
 186             yaxis:'y2axis'
 187         },
 188         axes:{
 189             xaxis:{
 190                 renderer:$.jqplot.CategoryAxisRenderer,
 191                 ticks:ticks,
 192                 tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 193                 tickOptions: {
 194                     angle: -90,
 195                     fontSize: '10pt',
 196                     showMark: false,
 197                     showGridline: false
 198                 }
 199             }
 200         }
 201     });
 202 });</script>
 203
 204 <!-- End example scripts -->
 205
 206 <!-- Don't touch this! -->
 207
 208
 209     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 210     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 211     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 212     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 213 <!-- End Don't touch this! -->
 214
 215 <!-- Additional plugins go here -->
 216   <script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
 217   <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
 218   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
 219   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 220   <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
 221
 222 <!-- End additional plugins -->
 223
 224
 225         </div>
 226         <script type="text/javascript" src="example.min.js"></script>
 227
 228 </body>
 229
 230
 231 </html>