Upgrade to ExtJS 4.0.1 - Released 05/18/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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../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) the minimum value of the interval to be displayed in the axis.
48      */
49
50 <span id='Ext-chart-axis-Gauge-cfg-maximum'>    /**
51 </span>     * @cfg {Number} maximum (required) the maximum value of the interval to be displayed in the axis.
52      */
53
54 <span id='Ext-chart-axis-Gauge-cfg-steps'>    /**
55 </span>     * @cfg {Number} steps (required) the number of steps and tick marks to add to the interval.
56      */
57
58 <span id='Ext-chart-axis-Gauge-cfg-margin'>    /**
59 </span>     * @cfg {Number} margin (optional) the offset positioning of the tick marks and labels in pixels. Default's 10.
60      */
61
62     position: 'gauge',
63
64     alias: 'axis.gauge',
65
66     drawAxis: function(init) {
67         var chart = this.chart,
68             surface = chart.surface,
69             bbox = chart.chartBBox,
70             centerX = bbox.x + (bbox.width / 2),
71             centerY = bbox.y + bbox.height,
72             margin = this.margin || 10,
73             rho = Math.min(bbox.width, 2 * bbox.height) /2 + margin,
74             sprites = [], sprite,
75             steps = this.steps,
76             i, pi = Math.PI,
77             cos = Math.cos,
78             sin = Math.sin;
79
80         if (this.sprites &amp;&amp; !chart.resizing) {
81             this.drawLabel();
82             return;
83         }
84
85         if (this.margin &gt;= 0) {
86             if (!this.sprites) {
87                 //draw circles
88                 for (i = 0; i &lt;= steps; i++) {
89                     sprite = surface.add({
90                         type: 'path',
91                         path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
92                                     centerY + (rho - margin) * sin(i / steps * pi - pi),
93                                     'L', centerX + rho * cos(i / steps * pi - pi),
94                                     centerY + rho * sin(i / steps * pi - pi), 'Z'],
95                         stroke: '#ccc'
96                     });
97                     sprite.setAttributes({
98                         hidden: false
99                     }, true);
100                     sprites.push(sprite);
101                 }
102             } else {
103                 sprites = this.sprites;
104                 //draw circles
105                 for (i = 0; i &lt;= steps; i++) {
106                     sprites[i].setAttributes({
107                         path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
108                                     centerY + (rho - margin) * sin(i / steps * pi - pi),
109                                'L', centerX + rho * cos(i / steps * pi - pi),
110                                     centerY + rho * sin(i / steps * pi - pi), 'Z'],
111                         stroke: '#ccc'
112                     }, true);
113                 }
114             }
115         }
116         this.sprites = sprites;
117         this.drawLabel();
118         if (this.title) {
119             this.drawTitle();
120         }
121     },
122     
123     drawTitle: function() {
124         var me = this,
125             chart = me.chart,
126             surface = chart.surface,
127             bbox = chart.chartBBox,
128             labelSprite = me.titleSprite,
129             labelBBox;
130         
131         if (!labelSprite) {
132             me.titleSprite = labelSprite = surface.add({
133                 type: 'text',
134                 zIndex: 2
135             });    
136         }
137         labelSprite.setAttributes(Ext.apply({
138             text: me.title
139         }, me.label || {}), true);
140         labelBBox = labelSprite.getBBox();
141         labelSprite.setAttributes({
142             x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
143             y: bbox.y + bbox.height - (labelBBox.height / 2) - 4
144         }, true);
145     },
146
147 <span id='Ext-chart-axis-Gauge-method-setTitle'>    /**
148 </span>     * Updates the {@link #title} of this axis.
149      * @param {String} title
150      */
151     setTitle: function(title) {
152         this.title = title;
153         this.drawTitle();
154     },
155
156     drawLabel: function() {
157         var chart = this.chart,
158             surface = chart.surface,
159             bbox = chart.chartBBox,
160             centerX = bbox.x + (bbox.width / 2),
161             centerY = bbox.y + bbox.height,
162             margin = this.margin || 10,
163             rho = Math.min(bbox.width, 2 * bbox.height) /2 + 2 * margin,
164             round = Math.round,
165             labelArray = [], label,
166             maxValue = this.maximum || 0,
167             steps = this.steps, i = 0,
168             adjY,
169             pi = Math.PI,
170             cos = Math.cos,
171             sin = Math.sin,
172             labelConf = this.label,
173             renderer = labelConf.renderer || function(v) { return v; };
174
175         if (!this.labelArray) {
176             //draw scale
177             for (i = 0; i &lt;= steps; i++) {
178                 // TODO Adjust for height of text / 2 instead
179                 adjY = (i === 0 || i === steps) ? 7 : 0;
180                 label = surface.add({
181                     type: 'text',
182                     text: renderer(round(i / steps * maxValue)),
183                     x: centerX + rho * cos(i / steps * pi - pi),
184                     y: centerY + rho * sin(i / steps * pi - pi) - adjY,
185                     'text-anchor': 'middle',
186                     'stroke-width': 0.2,
187                     zIndex: 10,
188                     stroke: '#333'
189                 });
190                 label.setAttributes({
191                     hidden: false
192                 }, true);
193                 labelArray.push(label);
194             }
195         }
196         else {
197             labelArray = this.labelArray;
198             //draw values
199             for (i = 0; i &lt;= steps; i++) {
200                 // TODO Adjust for height of text / 2 instead
201                 adjY = (i === 0 || i === steps) ? 7 : 0;
202                 labelArray[i].setAttributes({
203                     text: renderer(round(i / steps * maxValue)),
204                     x: centerX + rho * cos(i / steps * pi - pi),
205                     y: centerY + rho * sin(i / steps * pi - pi) - adjY
206                 }, true);
207             }
208         }
209         this.labelArray = labelArray;
210     }
211 });</pre>
212 </body>
213 </html>