Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Gauge.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-chart-axis-Gauge'>/**
19 </span> * @class Ext.chart.axis.Gauge
20  * @extends Ext.chart.axis.Abstract
21  *
22  * Gauge Axis is the axis to be used with a Gauge series. The Gauge axis
23  * displays numeric data from an interval defined by the `minimum`, `maximum` and
24  * `step` configuration properties. The placement of the numeric data can be changed
25  * by altering the `margin` option that is set to `10` by default.
26  *
27  * A possible configuration for this axis would look like:
28  *
29  *     axes: [{
30  *         type: 'gauge',
31  *         position: 'gauge',
32  *         minimum: 0,
33  *         maximum: 100,
34  *         steps: 10,
35  *         margin: 7
36  *     }],
37  */
38 Ext.define('Ext.chart.axis.Gauge', {
39
40     /* Begin Definitions */
41
42     extend: 'Ext.chart.axis.Abstract',
43
44     /* End Definitions */
45
46 <span id='Ext-chart-axis-Gauge-cfg-minimum'>    /**
47 </span>     * @cfg {Number} minimum (required)
48      * The minimum value of the interval to be displayed in the axis.
49      */
50
51 <span id='Ext-chart-axis-Gauge-cfg-maximum'>    /**
52 </span>     * @cfg {Number} maximum (required)
53      * The maximum value of the interval to be displayed in the axis.
54      */
55
56 <span id='Ext-chart-axis-Gauge-cfg-steps'>    /**
57 </span>     * @cfg {Number} steps (required)
58      * The number of steps and tick marks to add to the interval.
59      */
60
61 <span id='Ext-chart-axis-Gauge-cfg-margin'>    /**
62 </span>     * @cfg {Number} [margin=10]
63      * The offset positioning of the tick marks and labels in pixels.
64      */
65
66 <span id='Ext-chart-axis-Gauge-cfg-title'>    /**
67 </span>     * @cfg {String} title
68      * The title for the Axis.
69      */
70
71     position: 'gauge',
72
73     alias: 'axis.gauge',
74
75     drawAxis: function(init) {
76         var chart = this.chart,
77             surface = chart.surface,
78             bbox = chart.chartBBox,
79             centerX = bbox.x + (bbox.width / 2),
80             centerY = bbox.y + bbox.height,
81             margin = this.margin || 10,
82             rho = Math.min(bbox.width, 2 * bbox.height) /2 + margin,
83             sprites = [], sprite,
84             steps = this.steps,
85             i, pi = Math.PI,
86             cos = Math.cos,
87             sin = Math.sin;
88
89         if (this.sprites &amp;&amp; !chart.resizing) {
90             this.drawLabel();
91             return;
92         }
93
94         if (this.margin &gt;= 0) {
95             if (!this.sprites) {
96                 //draw circles
97                 for (i = 0; i &lt;= steps; i++) {
98                     sprite = surface.add({
99                         type: 'path',
100                         path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
101                                     centerY + (rho - margin) * sin(i / steps * pi - pi),
102                                     'L', centerX + rho * cos(i / steps * pi - pi),
103                                     centerY + rho * sin(i / steps * pi - pi), 'Z'],
104                         stroke: '#ccc'
105                     });
106                     sprite.setAttributes({
107                         hidden: false
108                     }, true);
109                     sprites.push(sprite);
110                 }
111             } else {
112                 sprites = this.sprites;
113                 //draw circles
114                 for (i = 0; i &lt;= steps; i++) {
115                     sprites[i].setAttributes({
116                         path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
117                                     centerY + (rho - margin) * sin(i / steps * pi - pi),
118                                'L', centerX + rho * cos(i / steps * pi - pi),
119                                     centerY + rho * sin(i / steps * pi - pi), 'Z'],
120                         stroke: '#ccc'
121                     }, true);
122                 }
123             }
124         }
125         this.sprites = sprites;
126         this.drawLabel();
127         if (this.title) {
128             this.drawTitle();
129         }
130     },
131
132     drawTitle: function() {
133         var me = this,
134             chart = me.chart,
135             surface = chart.surface,
136             bbox = chart.chartBBox,
137             labelSprite = me.titleSprite,
138             labelBBox;
139
140         if (!labelSprite) {
141             me.titleSprite = labelSprite = surface.add({
142                 type: 'text',
143                 zIndex: 2
144             });
145         }
146         labelSprite.setAttributes(Ext.apply({
147             text: me.title
148         }, me.label || {}), true);
149         labelBBox = labelSprite.getBBox();
150         labelSprite.setAttributes({
151             x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
152             y: bbox.y + bbox.height - (labelBBox.height / 2) - 4
153         }, true);
154     },
155
156 <span id='Ext-chart-axis-Gauge-method-setTitle'>    /**
157 </span>     * Updates the {@link #title} of this axis.
158      * @param {String} title
159      */
160     setTitle: function(title) {
161         this.title = title;
162         this.drawTitle();
163     },
164
165     drawLabel: function() {
166         var chart = this.chart,
167             surface = chart.surface,
168             bbox = chart.chartBBox,
169             centerX = bbox.x + (bbox.width / 2),
170             centerY = bbox.y + bbox.height,
171             margin = this.margin || 10,
172             rho = Math.min(bbox.width, 2 * bbox.height) /2 + 2 * margin,
173             round = Math.round,
174             labelArray = [], label,
175             maxValue = this.maximum || 0,
176             steps = this.steps, i = 0,
177             adjY,
178             pi = Math.PI,
179             cos = Math.cos,
180             sin = Math.sin,
181             labelConf = this.label,
182             renderer = labelConf.renderer || function(v) { return v; };
183
184         if (!this.labelArray) {
185             //draw scale
186             for (i = 0; i &lt;= steps; i++) {
187                 // TODO Adjust for height of text / 2 instead
188                 adjY = (i === 0 || i === steps) ? 7 : 0;
189                 label = surface.add({
190                     type: 'text',
191                     text: renderer(round(i / steps * maxValue)),
192                     x: centerX + rho * cos(i / steps * pi - pi),
193                     y: centerY + rho * sin(i / steps * pi - pi) - adjY,
194                     'text-anchor': 'middle',
195                     'stroke-width': 0.2,
196                     zIndex: 10,
197                     stroke: '#333'
198                 });
199                 label.setAttributes({
200                     hidden: false
201                 }, true);
202                 labelArray.push(label);
203             }
204         }
205         else {
206             labelArray = this.labelArray;
207             //draw values
208             for (i = 0; i &lt;= steps; i++) {
209                 // TODO Adjust for height of text / 2 instead
210                 adjY = (i === 0 || i === steps) ? 7 : 0;
211                 labelArray[i].setAttributes({
212                     text: renderer(round(i / steps * maxValue)),
213                     x: centerX + rho * cos(i / steps * pi - pi),
214                     y: centerY + rho * sin(i / steps * pi - pi) - adjY
215                 }, true);
216             }
217         }
218         this.labelArray = labelArray;
219     }
220 });</pre>
221 </body>
222 </html>