Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
15 
 
16 
 
17 
</head>
18 
<body>
19 
    <div id="header">
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="colmask leftmenu">
29 
      <div class="colleft">
30 
        <div class="col1" id="example-content">
31 
 
32 
 
33 
<!-- Example scripts go here -->
34 
 
35 
  <style type="text/css" media="screen">
36 
    .jqplot-axis {
37 
      font-size: 0.85em;
38 
    }
39 
    .jqplot-title {
40 
      font-size: 16px;
41 
    }
42 
      p {
43 
        margin: 20px;
44 
        font-family:Arial,Helvetica,Sans-serif;
45 
      }
46 
  </style>
47 
 
48 
 
49 
    <div id="chart1" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
50 
 
51 
    <div id="chart1b" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
52 
 
53 
    <div id="chart1c" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
54 
 
55 
    <div id="chart1d" style="margin-top:20px; margin-left:20px; width:350px; height:350px;"></div>
56 
 
57 
 
58 
 
59 
 
60 
<script class="code" type="text/javascript">$(document).ready(function(){
61 
    var line1 = [14, 4, 3, -23, 5, 2, -3, -7];
62 
    var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
63 
 
64 
 
65 
    plot1 = $.jqplot('chart1', [line1], {
66 
        title: 'Crop Yield Change, 2008 to 2009',
67 
        seriesDefaults:{
68 
            fill: true,
69 
            fillToZero: true,
70 
            renderer:$.jqplot.BarRenderer,
71 
            rendererOptions:{
72 
                waterfall:true,
73 
                disableStack: true,
74 
                varyBarColor: true
75 
            },
76 
            pointLabels: {
77 
                show: true,
78 
                hideZeros: true
79 
            },
80 
            yaxis:'y2axis'
81 
        },
82 
        axes:{
83 
            xaxis:{
84 
                renderer:$.jqplot.CategoryAxisRenderer,
85 
                ticks:ticks,
86 
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
87 
                tickOptions: {
88 
                    angle: -90,
89 
                    fontSize: '10pt',
90 
                    showMark: false,
91 
                    showGridline: false
92 
                }
93 
            }
94 
        }
95 
    });
96 
});</script>
97 
 
98 
<script class="code" type="text/javascript">$(document).ready(function(){
99 
    var line1 = [14, 4, 0, -23, 5, 0, -3, -7];
100 
    var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
101 
 
102 
 
103 
    plot1b = $.jqplot('chart1b', [line1], {
104 
        title: 'Crop Yield Change, 2008 to 2009',
105 
        seriesDefaults:{
106 
            renderer:$.jqplot.BarRenderer,
107 
            rendererOptions:{
108 
                waterfall:true,
109 
                varyBarColor: true
110 
            },
111 
            pointLabels: {
112 
                show: true,
113 
                hideZeros: true
114 
            },
115 
            yaxis:'y2axis'
116 
        },
117 
        axes:{
118 
            xaxis:{
119 
                renderer:$.jqplot.CategoryAxisRenderer,
120 
                ticks:ticks,
121 
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
122 
                tickOptions: {
123 
                    angle: -90,
124 
                    fontSize: '10pt',
125 
                    showMark: false,
126 
                    showGridline: false
127 
                }
128 
            }
129 
        }
130 
    });
131 
});</script>
132 
 
133 
<script class="code" type="text/javascript">$(document).ready(function(){
134 
    var line1 = [14, 0, 13, 0, -5, -9, 3, 7];
135 
    var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
136 
 
137 
 
138 
    plot1c = $.jqplot('chart1c', [line1], {
139 
        title: 'Crop Yield Change, 2008 to 2009',
140 
        seriesDefaults:{
141 
            renderer:$.jqplot.BarRenderer,
142 
            rendererOptions:{
143 
                waterfall:true,
144 
                varyBarColor: true
145 
            },
146 
            pointLabels: {
147 
                show: true,
148 
                hideZeros: true
149 
            },
150 
            yaxis:'y2axis'
151 
        },
152 
        axes:{
153 
            xaxis:{
154 
                renderer:$.jqplot.CategoryAxisRenderer,
155 
                ticks:ticks,
156 
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
157 
                tickOptions: {
158 
                    angle: -90,
159 
                    fontSize: '10pt',
160 
                    showMark: false,
161 
                    showGridline: false
162 
                }
163 
            }
164 
        }
165 
    });
166 
});</script>
167 
 
168 
<script class="code" type="text/javascript">$(document).ready(function(){
169 
    var line1 = [-14, 0, -13, 0, 5, 9, -3, -7];
170 
    var ticks = ['2008', 'Apricots', 'Tomatoes', 'Potatoes', 'Rhubarb', 'Squash', 'Grapes', 'Peanuts', '2009'];
171 
 
172 
 
173 
    plot1d = $.jqplot('chart1d', [line1], {
174 
        title: 'Crop Yield Change, 2008 to 2009',
175 
        seriesDefaults:{
176 
            renderer:$.jqplot.BarRenderer,
177 
            rendererOptions:{
178 
                waterfall: true,
179 
                varyBarColor: true
180 
            },
181 
            pointLabels: {
182 
                show: true,
183 
                hideZeros: true
184 
            },
185 
            yaxis:'y2axis'
186 
        },
187 
        axes:{
188 
            xaxis:{
189 
                renderer:$.jqplot.CategoryAxisRenderer,
190 
                ticks:ticks,
191 
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
192 
                tickOptions: {
193 
                    angle: -90,
194 
                    fontSize: '10pt',
195 
                    showMark: false,
196 
                    showGridline: false
197 
                }
198 
            }
199 
        }
200 
    });
201 
});</script>
202 
 
203 
<!-- End example scripts -->
204 
 
205 
<!-- Don't touch this! -->
206 
 
207 
 
208 
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
209 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
210 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
211 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
212 
<!-- End Don't touch this! -->
213 
 
214 
<!-- Additional plugins go here -->
215 
  <script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
216 
  <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
217 
  <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
218 
  <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
219 
  <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
220 
 
221 
<!-- End additional plugins -->
222 
 
223 
        </div>
224 
         <div class="col2">
225 
 
226 
           <div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
227 
           <div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
228 
           <div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
229 
           <div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
230 
           <div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
231 
           <div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
232 
           <div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
233 
           <div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
234 
           <div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
235 
           <div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
236 
           <div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
237 
           <div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
238 
           <div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
239 
           <div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
240 
           <div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
241 
           <div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
242 
           <div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
243 
           <div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
244 
           <div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
245 
           <div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
246 
           <div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
247 
           <div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
248 
           <div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
249 
           <div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
250 
           <div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
251 
           <div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
252 
           <div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
253 
           <div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
254 
           <div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
255 
           <div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
256 
           <div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
257 
           <div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
258 
           <div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
259 
           <div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
260 
           <div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
261 
           <div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
262 
           <div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
263 
           <div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
264 
           <div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
265 
           <div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
266 
           <div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
267 
           <div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
268 
           <div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
269 
           <div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
270 
           <div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
271 
           <div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
272 
           <div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
273 
           <div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
274 
           <div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
275 
           <div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
276 
           <div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
277 
           <div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
278 
           <div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
279 
           <div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
280 
           <div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
281 
           <div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
282 
 
283 
         </div>
284 
               </div>
285 
    </div>
286 
    <script type="text/javascript" src="example.min.js"></script>
287 
 
288 
</body>
289 
 
290 
 
291 
</html>