2 * @class Ext.chart.axis.Gauge
3 * @extends Ext.chart.axis.Abstract
5 * Gauge Axis is the axis to be used with a Gauge series. The Gauge axis
6 * displays numeric data from an interval defined by the `minimum`, `maximum` and
7 * `step` configuration properties. The placement of the numeric data can be changed
8 * by altering the `margin` option that is set to `10` by default.
10 * A possible configuration for this axis would look like:
21 Ext.define('Ext.chart.axis.Gauge', {
23 /* Begin Definitions */
25 extend: 'Ext.chart.axis.Abstract',
30 * @cfg {Number} minimum (required) the minimum value of the interval to be displayed in the axis.
34 * @cfg {Number} maximum (required) the maximum value of the interval to be displayed in the axis.
38 * @cfg {Number} steps (required) the number of steps and tick marks to add to the interval.
42 * @cfg {Number} margin (optional) the offset positioning of the tick marks and labels in pixels. Default's 10.
49 drawAxis: function(init) {
50 var chart = this.chart,
51 surface = chart.surface,
52 bbox = chart.chartBBox,
53 centerX = bbox.x + (bbox.width / 2),
54 centerY = bbox.y + bbox.height,
55 margin = this.margin || 10,
56 rho = Math.min(bbox.width, 2 * bbox.height) /2 + margin,
63 if (this.sprites && !chart.resizing) {
68 if (this.margin >= 0) {
71 for (i = 0; i <= steps; i++) {
72 sprite = surface.add({
74 path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
75 centerY + (rho - margin) * sin(i / steps * pi - pi),
76 'L', centerX + rho * cos(i / steps * pi - pi),
77 centerY + rho * sin(i / steps * pi - pi), 'Z'],
80 sprite.setAttributes({
86 sprites = this.sprites;
88 for (i = 0; i <= steps; i++) {
89 sprites[i].setAttributes({
90 path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
91 centerY + (rho - margin) * sin(i / steps * pi - pi),
92 'L', centerX + rho * cos(i / steps * pi - pi),
93 centerY + rho * sin(i / steps * pi - pi), 'Z'],
99 this.sprites = sprites;
106 drawTitle: function() {
109 surface = chart.surface,
110 bbox = chart.chartBBox,
111 labelSprite = me.titleSprite,
115 me.titleSprite = labelSprite = surface.add({
120 labelSprite.setAttributes(Ext.apply({
122 }, me.label || {}), true);
123 labelBBox = labelSprite.getBBox();
124 labelSprite.setAttributes({
125 x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
126 y: bbox.y + bbox.height - (labelBBox.height / 2) - 4
131 * Updates the {@link #title} of this axis.
132 * @param {String} title
134 setTitle: function(title) {
139 drawLabel: function() {
140 var chart = this.chart,
141 surface = chart.surface,
142 bbox = chart.chartBBox,
143 centerX = bbox.x + (bbox.width / 2),
144 centerY = bbox.y + bbox.height,
145 margin = this.margin || 10,
146 rho = Math.min(bbox.width, 2 * bbox.height) /2 + 2 * margin,
148 labelArray = [], label,
149 maxValue = this.maximum || 0,
150 steps = this.steps, i = 0,
155 labelConf = this.label,
156 renderer = labelConf.renderer || function(v) { return v; };
158 if (!this.labelArray) {
160 for (i = 0; i <= steps; i++) {
161 // TODO Adjust for height of text / 2 instead
162 adjY = (i === 0 || i === steps) ? 7 : 0;
163 label = surface.add({
165 text: renderer(round(i / steps * maxValue)),
166 x: centerX + rho * cos(i / steps * pi - pi),
167 y: centerY + rho * sin(i / steps * pi - pi) - adjY,
168 'text-anchor': 'middle',
173 label.setAttributes({
176 labelArray.push(label);
180 labelArray = this.labelArray;
182 for (i = 0; i <= steps; i++) {
183 // TODO Adjust for height of text / 2 instead
184 adjY = (i === 0 || i === steps) ? 7 : 0;
185 labelArray[i].setAttributes({
186 text: renderer(round(i / steps * maxValue)),
187 x: centerX + rho * cos(i / steps * pi - pi),
188 y: centerY + rho * sin(i / steps * pi - pi) - adjY
192 this.labelArray = labelArray;