docs/source/Gauge2.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-series-Gauge'>/**
  19 </span> * @class Ext.chart.series.Gauge
  20  * @extends Ext.chart.series.Series
  21  *
  22  * Creates a Gauge Chart. Gauge Charts are used to show progress in a certain variable. There are two ways of using the Gauge chart.
  23  * One is setting a store element into the Gauge and selecting the field to be used from that store. Another one is instantiating the
  24  * visualization and using the `setValue` method to adjust the value you want.
  25  *
  26  * A chart/series configuration for the Gauge visualization could look like this:
  27  *
  28  *     {
  29  *         xtype: 'chart',
  30  *         store: store,
  31  *         axes: [{
  32  *             type: 'gauge',
  33  *             position: 'gauge',
  34  *             minimum: 0,
  35  *             maximum: 100,
  36  *             steps: 10,
  37  *             margin: -10
  38  *         }],
  39  *         series: [{
  40  *             type: 'gauge',
  41  *             field: 'data1',
  42  *             donut: false,
  43  *             colorSet: ['#F49D10', '#ddd']
  44  *         }]
  45  *     }
  46  *
  47  * In this configuration we create a special Gauge axis to be used with the gauge visualization (describing half-circle markers), and also we're
  48  * setting a maximum, minimum and steps configuration options into the axis. The Gauge series configuration contains the store field to be bound to
  49  * the visual display and the color set to be used with the visualization.
  50  *
  51  * @xtype gauge
  52  */
  53 Ext.define('Ext.chart.series.Gauge', {
  54
  55     /* Begin Definitions */
  56
  57     extend: 'Ext.chart.series.Series',
  58
  59     /* End Definitions */
  60
  61     type: &quot;gauge&quot;,
  62     alias: 'series.gauge',
  63
  64     rad: Math.PI / 180,
  65
  66 <span id='Ext-chart-series-Gauge-cfg-highlightDuration'>    /**
  67 </span>     * @cfg {Number} highlightDuration
  68      * The duration for the pie slice highlight effect.
  69      */
  70     highlightDuration: 150,
  71
  72 <span id='Ext-chart-series-Gauge-cfg-angleField'>    /**
  73 </span>     * @cfg {String} angleField (required)
  74      * The store record field name to be used for the pie angles.
  75      * The values bound to this field name must be positive real numbers.
  76      */
  77     angleField: false,
  78
  79 <span id='Ext-chart-series-Gauge-cfg-needle'>    /**
  80 </span>     * @cfg {Boolean} needle
  81      * Use the Gauge Series as an area series or add a needle to it. Default's false.
  82      */
  83     needle: false,
  84
  85 <span id='Ext-chart-series-Gauge-cfg-donut'>    /**
  86 </span>     * @cfg {Boolean/Number} donut
  87      * Use the entire disk or just a fraction of it for the gauge. Default's false.
  88      */
  89     donut: false,
  90
  91 <span id='Ext-chart-series-Gauge-cfg-showInLegend'>    /**
  92 </span>     * @cfg {Boolean} showInLegend
  93      * Whether to add the pie chart elements as legend items. Default's false.
  94      */
  95     showInLegend: false,
  96
  97 <span id='Ext-chart-series-Gauge-cfg-style'>    /**
  98 </span>     * @cfg {Object} style
  99      * An object containing styles for overriding series styles from Theming.
 100      */
 101     style: {},
 102
 103     constructor: function(config) {
 104         this.callParent(arguments);
 105         var me = this,
 106             chart = me.chart,
 107             surface = chart.surface,
 108             store = chart.store,
 109             shadow = chart.shadow, i, l, cfg;
 110         Ext.apply(me, config, {
 111             shadowAttributes: [{
 112                 &quot;stroke-width&quot;: 6,
 113                 &quot;stroke-opacity&quot;: 1,
 114                 stroke: 'rgb(200, 200, 200)',
 115                 translate: {
 116                     x: 1.2,
 117                     y: 2
 118                 }
 119             },
 120             {
 121                 &quot;stroke-width&quot;: 4,
 122                 &quot;stroke-opacity&quot;: 1,
 123                 stroke: 'rgb(150, 150, 150)',
 124                 translate: {
 125                     x: 0.9,
 126                     y: 1.5
 127                 }
 128             },
 129             {
 130                 &quot;stroke-width&quot;: 2,
 131                 &quot;stroke-opacity&quot;: 1,
 132                 stroke: 'rgb(100, 100, 100)',
 133                 translate: {
 134                     x: 0.6,
 135                     y: 1
 136                 }
 137             }]
 138         });
 139         me.group = surface.getGroup(me.seriesId);
 140         if (shadow) {
 141             for (i = 0, l = me.shadowAttributes.length; i &lt; l; i++) {
 142                 me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
 143             }
 144         }
 145         surface.customAttributes.segment = function(opt) {
 146             return me.getSegment(opt);
 147         };
 148     },
 149
 150     //@private updates some onbefore render parameters.
 151     initialize: function() {
 152         var me = this,
 153             store = me.chart.getChartStore();
 154         //Add yFields to be used in Legend.js
 155         me.yField = [];
 156         if (me.label.field) {
 157             store.each(function(rec) {
 158                 me.yField.push(rec.get(me.label.field));
 159             });
 160         }
 161     },
 162
 163     // @private returns an object with properties for a Slice
 164     getSegment: function(opt) {
 165         var me = this,
 166             rad = me.rad,
 167             cos = Math.cos,
 168             sin = Math.sin,
 169             abs = Math.abs,
 170             x = me.centerX,
 171             y = me.centerY,
 172             x1 = 0, x2 = 0, x3 = 0, x4 = 0,
 173             y1 = 0, y2 = 0, y3 = 0, y4 = 0,
 174             delta = 1e-2,
 175             r = opt.endRho - opt.startRho,
 176             startAngle = opt.startAngle,
 177             endAngle = opt.endAngle,
 178             midAngle = (startAngle + endAngle) / 2 * rad,
 179             margin = opt.margin || 0,
 180             flag = abs(endAngle - startAngle) &gt; 180,
 181             a1 = Math.min(startAngle, endAngle) * rad,
 182             a2 = Math.max(startAngle, endAngle) * rad,
 183             singleSlice = false;
 184
 185         x += margin * cos(midAngle);
 186         y += margin * sin(midAngle);
 187
 188         x1 = x + opt.startRho * cos(a1);
 189         y1 = y + opt.startRho * sin(a1);
 190
 191         x2 = x + opt.endRho * cos(a1);
 192         y2 = y + opt.endRho * sin(a1);
 193
 194         x3 = x + opt.startRho * cos(a2);
 195         y3 = y + opt.startRho * sin(a2);
 196
 197         x4 = x + opt.endRho * cos(a2);
 198         y4 = y + opt.endRho * sin(a2);
 199
 200         if (abs(x1 - x3) &lt;= delta &amp;&amp; abs(y1 - y3) &lt;= delta) {
 201             singleSlice = true;
 202         }
 203         //Solves mysterious clipping bug with IE
 204         if (singleSlice) {
 205             return {
 206                 path: [
 207                 [&quot;M&quot;, x1, y1],
 208                 [&quot;L&quot;, x2, y2],
 209                 [&quot;A&quot;, opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
 210                 [&quot;Z&quot;]]
 211             };
 212         } else {
 213             return {
 214                 path: [
 215                 [&quot;M&quot;, x1, y1],
 216                 [&quot;L&quot;, x2, y2],
 217                 [&quot;A&quot;, opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
 218                 [&quot;L&quot;, x3, y3],
 219                 [&quot;A&quot;, opt.startRho, opt.startRho, 0, +flag, 0, x1, y1],
 220                 [&quot;Z&quot;]]
 221             };
 222         }
 223     },
 224
 225     // @private utility function to calculate the middle point of a pie slice.
 226     calcMiddle: function(item) {
 227         var me = this,
 228             rad = me.rad,
 229             slice = item.slice,
 230             x = me.centerX,
 231             y = me.centerY,
 232             startAngle = slice.startAngle,
 233             endAngle = slice.endAngle,
 234             radius = Math.max(('rho' in slice) ? slice.rho: me.radius, me.label.minMargin),
 235             donut = +me.donut,
 236             a1 = Math.min(startAngle, endAngle) * rad,
 237             a2 = Math.max(startAngle, endAngle) * rad,
 238             midAngle = -(a1 + (a2 - a1) / 2),
 239             xm = x + (item.endRho + item.startRho) / 2 * Math.cos(midAngle),
 240             ym = y - (item.endRho + item.startRho) / 2 * Math.sin(midAngle);
 241
 242         item.middle = {
 243             x: xm,
 244             y: ym
 245         };
 246     },
 247
 248 <span id='Ext-chart-series-Gauge-method-drawSeries'>    /**
 249 </span>     * Draws the series for the current chart.
 250      */
 251     drawSeries: function() {
 252         var me = this,
 253             chart = me.chart,
 254             store = chart.getChartStore(),
 255             group = me.group,
 256             animate = me.chart.animate,
 257             axis = me.chart.axes.get(0),
 258             minimum = axis &amp;&amp; axis.minimum || me.minimum || 0,
 259             maximum = axis &amp;&amp; axis.maximum || me.maximum || 0,
 260             field = me.angleField || me.field || me.xField,
 261             surface = chart.surface,
 262             chartBBox = chart.chartBBox,
 263             rad = me.rad,
 264             donut = +me.donut,
 265             values = {},
 266             items = [],
 267             seriesStyle = me.seriesStyle,
 268             seriesLabelStyle = me.seriesLabelStyle,
 269             colorArrayStyle = me.colorArrayStyle,
 270             colorArrayLength = colorArrayStyle &amp;&amp; colorArrayStyle.length || 0,
 271             gutterX = chart.maxGutter[0],
 272             gutterY = chart.maxGutter[1],
 273             cos = Math.cos,
 274             sin = Math.sin,
 275             rendererAttributes, centerX, centerY, slice, slices, sprite, value,
 276             item, ln, record, i, j, startAngle, endAngle, middleAngle, sliceLength, path,
 277             p, spriteOptions, bbox, splitAngle, sliceA, sliceB;
 278
 279         Ext.apply(seriesStyle, me.style || {});
 280
 281         me.setBBox();
 282         bbox = me.bbox;
 283
 284         //override theme colors
 285         if (me.colorSet) {
 286             colorArrayStyle = me.colorSet;
 287             colorArrayLength = colorArrayStyle.length;
 288         }
 289
 290         //if not store or store is empty then there's nothing to draw
 291         if (!store || !store.getCount()) {
 292             return;
 293         }
 294
 295         centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
 296         centerY = me.centerY = chartBBox.y + chartBBox.height;
 297         me.radius = Math.min(centerX - chartBBox.x, centerY - chartBBox.y);
 298         me.slices = slices = [];
 299         me.items = items = [];
 300
 301         if (!me.value) {
 302             record = store.getAt(0);
 303             me.value = record.get(field);
 304         }
 305
 306         value = me.value;
 307         if (me.needle) {
 308             sliceA = {
 309                 series: me,
 310                 value: value,
 311                 startAngle: -180,
 312                 endAngle: 0,
 313                 rho: me.radius
 314             };
 315             splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
 316             slices.push(sliceA);
 317         } else {
 318             splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
 319             sliceA = {
 320                 series: me,
 321                 value: value,
 322                 startAngle: -180,
 323                 endAngle: splitAngle,
 324                 rho: me.radius
 325             };
 326             sliceB = {
 327                 series: me,
 328                 value: me.maximum - value,
 329                 startAngle: splitAngle,
 330                 endAngle: 0,
 331                 rho: me.radius
 332             };
 333             slices.push(sliceA, sliceB);
 334         }
 335
 336         //do pie slices after.
 337         for (i = 0, ln = slices.length; i &lt; ln; i++) {
 338             slice = slices[i];
 339             sprite = group.getAt(i);
 340             //set pie slice properties
 341             rendererAttributes = Ext.apply({
 342                 segment: {
 343                     startAngle: slice.startAngle,
 344                     endAngle: slice.endAngle,
 345                     margin: 0,
 346                     rho: slice.rho,
 347                     startRho: slice.rho * +donut / 100,
 348                     endRho: slice.rho
 349                 }
 350             }, Ext.apply(seriesStyle, colorArrayStyle &amp;&amp; { fill: colorArrayStyle[i % colorArrayLength] } || {}));
 351
 352             item = Ext.apply({},
 353             rendererAttributes.segment, {
 354                 slice: slice,
 355                 series: me,
 356                 storeItem: record,
 357                 index: i
 358             });
 359             items[i] = item;
 360             // Create a new sprite if needed (no height)
 361             if (!sprite) {
 362                 spriteOptions = Ext.apply({
 363                     type: &quot;path&quot;,
 364                     group: group
 365                 }, Ext.apply(seriesStyle, colorArrayStyle &amp;&amp; { fill: colorArrayStyle[i % colorArrayLength] } || {}));
 366                 sprite = surface.add(Ext.apply(spriteOptions, rendererAttributes));
 367             }
 368             slice.sprite = slice.sprite || [];
 369             item.sprite = sprite;
 370             slice.sprite.push(sprite);
 371             if (animate) {
 372                 rendererAttributes = me.renderer(sprite, record, rendererAttributes, i, store);
 373                 sprite._to = rendererAttributes;
 374                 me.onAnimate(sprite, {
 375                     to: rendererAttributes
 376                 });
 377             } else {
 378                 rendererAttributes = me.renderer(sprite, record, Ext.apply(rendererAttributes, {
 379                     hidden: false
 380                 }), i, store);
 381                 sprite.setAttributes(rendererAttributes, true);
 382             }
 383         }
 384
 385         if (me.needle) {
 386             splitAngle = splitAngle * Math.PI / 180;
 387
 388             if (!me.needleSprite) {
 389                 me.needleSprite = me.chart.surface.add({
 390                     type: 'path',
 391                     path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
 392                                 centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
 393                            'L', centerX + me.radius * cos(splitAngle),
 394                                 centerY + -Math.abs(me.radius * sin(splitAngle))],
 395                     'stroke-width': 4,
 396                     'stroke': '#222'
 397                 });
 398             } else {
 399                 if (animate) {
 400                     me.onAnimate(me.needleSprite, {
 401                         to: {
 402                         path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
 403                                     centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
 404                                'L', centerX + me.radius * cos(splitAngle),
 405                                     centerY + -Math.abs(me.radius * sin(splitAngle))]
 406                         }
 407                     });
 408                 } else {
 409                     me.needleSprite.setAttributes({
 410                         type: 'path',
 411                         path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
 412                                     centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
 413                                'L', centerX + me.radius * cos(splitAngle),
 414                                     centerY + -Math.abs(me.radius * sin(splitAngle))]
 415                     });
 416                 }
 417             }
 418             me.needleSprite.setAttributes({
 419                 hidden: false
 420             }, true);
 421         }
 422
 423         delete me.value;
 424     },
 425
 426 <span id='Ext-chart-series-Gauge-method-setValue'>    /**
 427 </span>     * Sets the Gauge chart to the current specified value.
 428     */
 429     setValue: function (value) {
 430         this.value = value;
 431         this.drawSeries();
 432     },
 433
 434     // @private callback for when creating a label sprite.
 435     onCreateLabel: function(storeItem, item, i, display) {},
 436
 437     // @private callback for when placing a label sprite.
 438     onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {},
 439
 440     // @private callback for when placing a callout.
 441     onPlaceCallout: function() {},
 442
 443     // @private handles sprite animation for the series.
 444     onAnimate: function(sprite, attr) {
 445         sprite.show();
 446         return this.callParent(arguments);
 447     },
 448
 449     isItemInPoint: function(x, y, item, i) {
 450         return false;
 451     },
 452
 453     // @private shows all elements in the series.
 454     showAll: function() {
 455         if (!isNaN(this._index)) {
 456             this.__excludes[this._index] = false;
 457             this.drawSeries();
 458         }
 459     },
 460
 461 <span id='Ext-chart-series-Gauge-method-getLegendColor'>    /**
 462 </span>     * Returns the color of the series (to be displayed as color for the series legend item).
 463      * @param item {Object} Info about the item; same format as returned by #getItemForPoint
 464      */
 465     getLegendColor: function(index) {
 466         var me = this;
 467         return me.colorArrayStyle[index % me.colorArrayStyle.length];
 468     }
 469 });
 470
 471 </pre>
 472 </body>
 473 </html>