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>