docs/source/Gauge.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.axis.Gauge'>/**
   2 </span> * @class Ext.chart.axis.Gauge
   3  * @extends Ext.chart.axis.Abstract
   4  *
   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.
   9  *
  10  * A possible configuration for this axis would look like:
  11  *
  12  *     axes: [{
  13  *         type: 'gauge',
  14  *         position: 'gauge',
  15  *         minimum: 0,
  16  *         maximum: 100,
  17  *         steps: 10,
  18  *         margin: 7
  19  *     }],
  20  */
  21 Ext.define('Ext.chart.axis.Gauge', {
  22
  23     /* Begin Definitions */
  24
  25     extend: 'Ext.chart.axis.Abstract',
  26
  27     /* End Definitions */
  28
  29 <span id='Ext-chart.axis.Gauge-cfg-minimum'>    /**
  30 </span>     * @cfg {Number} minimum (required) the minimum value of the interval to be displayed in the axis.
  31      */
  32
  33 <span id='Ext-chart.axis.Gauge-cfg-maximum'>    /**
  34 </span>     * @cfg {Number} maximum (required) the maximum value of the interval to be displayed in the axis.
  35      */
  36
  37 <span id='Ext-chart.axis.Gauge-cfg-steps'>    /**
  38 </span>     * @cfg {Number} steps (required) the number of steps and tick marks to add to the interval.
  39      */
  40
  41 <span id='Ext-chart.axis.Gauge-cfg-margin'>    /**
  42 </span>     * @cfg {Number} margin (optional) the offset positioning of the tick marks and labels in pixels. Default's 10.
  43      */
  44
  45     position: 'gauge',
  46
  47     alias: 'axis.gauge',
  48
  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,
  57             sprites = [], sprite,
  58             steps = this.steps,
  59             i, pi = Math.PI,
  60             cos = Math.cos,
  61             sin = Math.sin;
  62
  63         if (this.sprites &amp;&amp; !chart.resizing) {
  64             this.drawLabel();
  65             return;
  66         }
  67
  68         if (this.margin &gt;= 0) {
  69             if (!this.sprites) {
  70                 //draw circles
  71                 for (i = 0; i &lt;= steps; i++) {
  72                     sprite = surface.add({
  73                         type: 'path',
  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'],
  78                         stroke: '#ccc'
  79                     });
  80                     sprite.setAttributes({
  81                         hidden: false
  82                     }, true);
  83                     sprites.push(sprite);
  84                 }
  85             } else {
  86                 sprites = this.sprites;
  87                 //draw circles
  88                 for (i = 0; i &lt;= 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'],
  94                         stroke: '#ccc'
  95                     }, true);
  96                 }
  97             }
  98         }
  99         this.sprites = sprites;
 100         this.drawLabel();
 101         if (this.title) {
 102             this.drawTitle();
 103         }
 104     },
 105
 106     drawTitle: function() {
 107         var me = this,
 108             chart = me.chart,
 109             surface = chart.surface,
 110             bbox = chart.chartBBox,
 111             labelSprite = me.titleSprite,
 112             labelBBox;
 113
 114         if (!labelSprite) {
 115             me.titleSprite = labelSprite = surface.add({
 116                 type: 'text',
 117                 zIndex: 2
 118             });
 119         }
 120         labelSprite.setAttributes(Ext.apply({
 121             text: me.title
 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
 127         }, true);
 128     },
 129
 130 <span id='Ext-chart.axis.Gauge-method-setTitle'>    /**
 131 </span>     * Updates the {@link #title} of this axis.
 132      * @param {String} title
 133      */
 134     setTitle: function(title) {
 135         this.title = title;
 136         this.drawTitle();
 137     },
 138
 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,
 147             round = Math.round,
 148             labelArray = [], label,
 149             maxValue = this.maximum || 0,
 150             steps = this.steps, i = 0,
 151             adjY,
 152             pi = Math.PI,
 153             cos = Math.cos,
 154             sin = Math.sin,
 155             labelConf = this.label,
 156             renderer = labelConf.renderer || function(v) { return v; };
 157
 158         if (!this.labelArray) {
 159             //draw scale
 160             for (i = 0; i &lt;= steps; i++) {
 161                 // TODO Adjust for height of text / 2 instead
 162                 adjY = (i === 0 || i === steps) ? 7 : 0;
 163                 label = surface.add({
 164                     type: 'text',
 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',
 169                     'stroke-width': 0.2,
 170                     zIndex: 10,
 171                     stroke: '#333'
 172                 });
 173                 label.setAttributes({
 174                     hidden: false
 175                 }, true);
 176                 labelArray.push(label);
 177             }
 178         }
 179         else {
 180             labelArray = this.labelArray;
 181             //draw values
 182             for (i = 0; i &lt;= 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
 189                 }, true);
 190             }
 191         }
 192         this.labelArray = labelArray;
 193     }
 194 });</pre></pre></body></html>