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>