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>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="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
    <p>Below is a default bar plot.  Bars will highlight on mouseover.  Events are triggered when you mouseover a bar and also when you click on a bar.  Here We capture the 'jqplotDataClick' event and display the clicked series index, point index and data values. When series data is assigned as a 1-dimensional array as in this example, jqPlot automatically converts it into a 2-dimensional array for plotting.  So a series defined as [2, 6, 7, 10] will become [[1,2], [2,6], [3,7], [4,10]].<p>
36
 
37
    <div><span>You Clicked: </span><span id="info1">Nothing yet</span></div>
38
 
39
    <div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
40
<pre class="code brush:js"></pre>
41
 
42
    <p>The plot target also fires a 'jqplotDataMouseOver' when the cursor is moused over a bar even if highlighting is turned off.  This event will fire continuously as the user mouses over the bar.  'jqplotDataHighlight' fires only once when the user first passes over the bar.  Additionally, a 'jqplotDataUnhighlight' event is fired when the user moves out of a bar (if highlighting is enabled).<p>
43
 
44
    <div><span>Moused Over: </span><span id="info2">Nothing</span></div>
45
 
46
    <div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
47
<pre class="code brush:js"></pre>
48
 
49
    <div><span>Moused Over: </span><span id="info2b">Nothing</span></div>
50
    <div><span>Clicked: </span><span id="info2c">Nothing</span></div>
51
 
52
    <div id="chart2b" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
53
<pre class="code brush:js"></pre>
54
 
55
    <p>The next example has the plot's 'captureRightClick' option set to true.  This causes the plot to fire a 'jqplotRightClick' event the the user clicks the right mouse button over a bar.  Here, the 'highlightMouseDown' option is also set to true.  This will highlight a slice on mouse down instead of on move over.  Highlighting will occur for either left or right click.</p>
56
 
57
    <div><span>You Right Clicked: </span><span id="info3">Nothing yet</span></div>
58
 
59
    <div id="chart3" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
60
<pre class="code brush:js"></pre>
61
 
62
    <div id="chart4" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
63
<pre class="code brush:js"></pre>
64
 
65
    <div id="chart5" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
66
<pre class="code brush:js"></pre>
67
 
68
<p>A pie chart is added to test for incompatibilities.</p>
69
    <div id="chart6" style="margin-top:20px; margin-left:20px; width:300px; height:200px;"></div>
70
<pre class="code brush:js"></pre>
71
 
72
<p>The next example shows the placement of point labels on negative bars. They should be placed on the opposite position. That is, if it is placed 'north' to the positive bars, then it should be placed 'south' to the negative bars.</p>
73
    <div id="chart7" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
74
<pre class="code brush:js"></pre>
75
 
76
  <script class="code" type="text/javascript">$(document).ready(function(){
77
        $.jqplot.config.enablePlugins = true;
78
        var s1 = [2, 6, 7, 10];
79
        var ticks = ['a', 'b', 'c', 'd'];
80
 
81
        plot1 = $.jqplot('chart1', [s1], {
82
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
83
            animate: !$.jqplot.use_excanvas,
84
            seriesDefaults:{
85
                renderer:$.jqplot.BarRenderer,
86
                pointLabels: { show: true }
87
            },
88
            axes: {
89
                xaxis: {
90
                    renderer: $.jqplot.CategoryAxisRenderer,
91
                    ticks: ticks
92
                }
93
            },
94
            highlighter: { show: false }
95
        });
96
 
97
        $('#chart1').bind('jqplotDataClick',
98
            function (ev, seriesIndex, pointIndex, data) {
99
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
100
            }
101
        );
102
    });</script>
103
 
104
  <script class="code" type="text/javascript">$(document).ready(function(){
105
        var s1 = [2, 6, 7, 10];
106
        var s2 = [7, 5, 3, 2];
107
        var ticks = ['a', 'b', 'c', 'd'];
108
 
109
        plot2 = $.jqplot('chart2', [s1, s2], {
110
            seriesDefaults: {
111
                renderer:$.jqplot.BarRenderer,
112
                pointLabels: { show: true }
113
            },
114
            axes: {
115
                xaxis: {
116
                    renderer: $.jqplot.CategoryAxisRenderer,
117
                    ticks: ticks
118
                }
119
            }
120
        });
121
 
122
        $('#chart2').bind('jqplotDataHighlight',
123
            function (ev, seriesIndex, pointIndex, data) {
124
                $('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
125
            }
126
        );
127
 
128
        $('#chart2').bind('jqplotDataUnhighlight',
129
            function (ev) {
130
                $('#info2').html('Nothing');
131
            }
132
        );
133
    });</script>
134
 
135
  <script class="code" type="text/javascript">$(document).ready(function(){
136
        plot2b = $.jqplot('chart2b', [[[2,1], [4,2], [6,3], [3,4]], [[5,1], [1,2], [3,3], [4,4]], [[4,1], [7,2], [1,3], [2,4]]], {
137
            seriesDefaults: {
138
                renderer:$.jqplot.BarRenderer,
139
                pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
140
                shadowAngle: 135,
141
                rendererOptions: {
142
                    barDirection: 'horizontal'
143
                }
144
            },
145
            axes: {
146
                yaxis: {
147
                    renderer: $.jqplot.CategoryAxisRenderer
148
                }
149
            }
150
        });
151
 
152
        $('#chart2b').bind('jqplotDataHighlight',
153
            function (ev, seriesIndex, pointIndex, data) {
154
                $('#info2b').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+ ', pageX: '+ev.pageX+', pageY: '+ev.pageY);
155
            }
156
        );
157
        $('#chart2b').bind('jqplotDataClick',
158
            function (ev, seriesIndex, pointIndex, data) {
159
                $('#info2c').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+ ', pageX: '+ev.pageX+', pageY: '+ev.pageY);
160
            }
161
        );
162
 
163
        $('#chart2b').bind('jqplotDataUnhighlight',
164
            function (ev) {
165
                $('#info2b').html('Nothing');
166
            }
167
        );
168
    });</script>
169
 
170
  <script class="code" type="text/javascript">$(document).ready(function(){
171
        var s1 = [2, 6, 7, 10];
172
        var s2 = [7, 5, 3, 2];
173
        var s3 = [14, 9, 3, 8];
174
        plot3 = $.jqplot('chart3', [s1, s2, s3], {
175
            stackSeries: true,
176
            captureRightClick: true,
177
            seriesDefaults:{
178
                renderer:$.jqplot.BarRenderer,
179
                rendererOptions: {
180
                    highlightMouseDown: true
181
                },
182
                pointLabels: {show: true}
183
            },
184
            legend: {
185
                show: true,
186
                location: 'e',
187
                placement: 'outside'
188
            }
189
        });
190
 
191
        $('#chart3').bind('jqplotDataRightClick',
192
            function (ev, seriesIndex, pointIndex, data) {
193
                $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
194
            }
195
        );
196
    });</script>
197
 
198
  <script class="code" type="text/javascript">$(document).ready(function(){
199
        plot4 = $.jqplot('chart4', [[[2,1], [6,2], [7,3], [10,4]], [[7,1], [5,2],[3,3],[2,4]], [[14,1], [9,2], [9,3], [8,4]]], {
200
            stackSeries: true,
201
            captureRightClick: true,
202
            seriesDefaults:{
203
                renderer:$.jqplot.BarRenderer,
204
                shadowAngle: 135,
205
                rendererOptions: {
206
                    barDirection: 'horizontal',
207
                    highlightMouseDown: true
208
                },
209
                pointLabels: {show: true, formatString: '%d'}
210
            },
211
            legend: {
212
                show: true,
213
                location: 'e',
214
                placement: 'outside'
215
            },
216
            axes: {
217
                yaxis: {
218
                    renderer: $.jqplot.CategoryAxisRenderer
219
                }
220
            }
221
        });
222
    });</script>
223
 
224
  <script class="code" type="text/javascript">$(document).ready(function(){
225
        plot5 = $.jqplot('chart5', [[[2,1], [null,2], [7,3], [10,4]]], {
226
            captureRightClick: true,
227
            seriesDefaults:{
228
                renderer:$.jqplot.BarRenderer,
229
                shadowAngle: 135,
230
                rendererOptions: {
231
                    barDirection: 'horizontal',
232
                    highlightMouseDown: true
233
                },
234
                pointLabels: {show: true, formatString: '%d'}
235
            },
236
            legend: {
237
                show: true,
238
                location: 'e',
239
                placement: 'outside'
240
            },
241
            axes: {
242
                yaxis: {
243
                    renderer: $.jqplot.CategoryAxisRenderer
244
                }
245
            }
246
        });
247
    });</script>
248
 
249
  <script class="code" type="text/javascript">$(document).ready(function(){
250
        plot6 = $.jqplot('chart6', [[1,2,3,4]], {seriesDefaults:{renderer:$.jqplot.PieRenderer}});
251
    });</script>
252
 
253
    <script class="code" type="text/javascript">$(document).ready(function(){
254
        var s1 = [2, -6, 7, -5];
255
        var ticks = ['a', 'b', 'c', 'd'];
256
 
257
        plot7 = $.jqplot('chart7', [s1], {
258
            seriesDefaults:{
259
                renderer:$.jqplot.BarRenderer,
260
                rendererOptions: { fillToZero: true },
261
                    pointLabels: { show: true }
262
            },
263
            axes: {
264
                // yaxis: { autoscale: true },
265
                xaxis: {
266
                    renderer: $.jqplot.CategoryAxisRenderer,
267
                    ticks: ticks
268
                }
269
            }
270
        });
271
    });</script>
272
<!-- End example scripts -->
273
 
274
<!-- Don't touch this! -->
275
 
276
 
277
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
278
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
279
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
280
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
281
<!-- Additional plugins go here -->
282
 
283
  <script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
284
  <script class="include" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
285
  <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
286
  <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
287
 
288
<!-- End additional plugins -->
289
 
290
        </div>
291
         <div class="col2">
292
 
293
           <div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
294
           <div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
295
           <div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
296
           <div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
297
           <div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
298
           <div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
299
           <div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
300
           <div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
301
           <div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
302
           <div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
303
           <div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
304
           <div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
305
           <div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
306
           <div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
307
           <div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
308
           <div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
309
           <div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
310
           <div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
311
           <div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
312
           <div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
313
           <div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
314
           <div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
315
           <div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
316
           <div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
317
           <div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
318
           <div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
319
           <div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
320
           <div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
321
           <div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
322
           <div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
323
           <div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
324
           <div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
325
           <div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
326
           <div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
327
           <div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
328
           <div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
329
           <div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
330
           <div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
331
           <div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
332
           <div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
333
           <div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
334
           <div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
335
           <div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
336
           <div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
337
           <div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
338
           <div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
339
           <div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
340
           <div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
341
           <div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
342
           <div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
343
           <div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
344
           <div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
345
           <div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
346
           <div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
347
           <div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
348
           <div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
349
 
350
         </div>
351
               </div>
352
    </div>
353
    <script type="text/javascript" src="example.min.js"></script>
354
 
355
</body>
356
 
357
 
358
</html>