src/widgets/chart/Chart.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.chart.Chart\r
   9  * @extends Ext.FlashComponent\r
  10  * The Ext.chart package provides the capability to visualize data with flash based charting.\r
  11  * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.\r
  12  * @constructor\r
  13  * @xtype chart\r
  14  */\r
  15  \r
  16  Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {\r
  17     refreshBuffer: 100,\r
  18 \r
  19     /**\r
  20      * @cfg {Object} chartStyle\r
  21      * Sets styles for this chart. Contains a number of default values. Modifying this property will override\r
  22      * the base styles on the chart.\r
  23      */\r
  24     chartStyle: {\r
  25         padding: 10,\r
  26         animationEnabled: true,\r
  27         font: {\r
  28             name: 'Tahoma',\r
  29             color: 0x444444,\r
  30             size: 11\r
  31         },\r
  32         dataTip: {\r
  33             padding: 5,\r
  34             border: {\r
  35                 color: 0x99bbe8,\r
  36                 size:1\r
  37             },\r
  38             background: {\r
  39                 color: 0xDAE7F6,\r
  40                 alpha: .9\r
  41             },\r
  42             font: {\r
  43                 name: 'Tahoma',\r
  44                 color: 0x15428B,\r
  45                 size: 10,\r
  46                 bold: true\r
  47             }\r
  48         }\r
  49     },\r
  50     \r
  51     /**\r
  52      * @cfg {String} url\r
  53      * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should\r
  54      * be modified to point to the local charts resource.\r
  55      */\r
  56     \r
  57     /**\r
  58      * @cfg {Object} extraStyle\r
  59      * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to <tt>null</tt>.\r
  60      */\r
  61     extraStyle: null,\r
  62     \r
  63     /**\r
  64      * @cfg {Boolean} disableCaching\r
  65      * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.\r
  66      */\r
  67     disableCaching: Ext.isIE || Ext.isOpera,\r
  68     disableCacheParam: '_dc',\r
  69 \r
  70     initComponent : function(){\r
  71         Ext.chart.Chart.superclass.initComponent.call(this);\r
  72         if(!this.url){\r
  73             this.url = Ext.chart.Chart.CHART_URL;\r
  74         }\r
  75         if(this.disableCaching){\r
  76             this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));\r
  77         }\r
  78         this.addEvents(\r
  79             'itemmouseover',\r
  80             'itemmouseout',\r
  81             'itemclick',\r
  82             'itemdoubleclick',\r
  83             'itemdragstart',\r
  84             'itemdrag',\r
  85             'itemdragend'\r
  86         );\r
  87         this.store = Ext.StoreMgr.lookup(this.store);\r
  88     },\r
  89 \r
  90     /**\r
  91      * Sets a single style value on the Chart instance.\r
  92      *\r
  93      * @param name {String} Name of the Chart style value to change.\r
  94      * @param value {Object} New value to pass to the Chart style.\r
  95      */\r
  96      setStyle: function(name, value){\r
  97          this.swf.setStyle(name, Ext.encode(value));\r
  98      },\r
  99 \r
 100     /**\r
 101      * Resets all styles on the Chart instance.\r
 102      *\r
 103      * @param styles {Object} Initializer for all Chart styles.\r
 104      */\r
 105     setStyles: function(styles){\r
 106         this.swf.setStyles(Ext.encode(styles));\r
 107     },\r
 108 \r
 109     /**\r
 110      * Sets the styles on all series in the Chart.\r
 111      *\r
 112      * @param styles {Array} Initializer for all Chart series styles.\r
 113      */\r
 114     setSeriesStyles: function(styles){\r
 115         var s = [];\r
 116         Ext.each(styles, function(style){\r
 117             s.push(Ext.encode(style));\r
 118         });\r
 119         this.swf.setSeriesStyles(s);\r
 120     },\r
 121 \r
 122     setCategoryNames : function(names){\r
 123         this.swf.setCategoryNames(names);\r
 124     },\r
 125 \r
 126     setTipRenderer : function(fn){\r
 127         var chart = this;\r
 128         this.tipFnName = this.createFnProxy(function(item, index, series){\r
 129             var record = chart.store.getAt(index);\r
 130             return fn(chart, record, index, series);\r
 131         }, this.tipFnName);\r
 132         this.swf.setDataTipFunction(this.tipFnName);\r
 133     },\r
 134 \r
 135     setSeries : function(series){\r
 136         this.series = series;\r
 137         this.refresh();\r
 138     },\r
 139 \r
 140     /**\r
 141      * Changes the data store bound to this chart and refreshes it.\r
 142      * @param {Store} store The store to bind to this chart\r
 143      */\r
 144     bindStore : function(store, initial){\r
 145         if(!initial && this.store){\r
 146             this.store.un("datachanged", this.refresh, this);\r
 147             this.store.un("add", this.delayRefresh, this);\r
 148             this.store.un("remove", this.delayRefresh, this);\r
 149             this.store.un("update", this.delayRefresh, this);\r
 150             this.store.un("clear", this.refresh, this);\r
 151             if(store !== this.store && this.store.autoDestroy){\r
 152                 this.store.destroy();\r
 153             }\r
 154         }\r
 155         if(store){\r
 156             store = Ext.StoreMgr.lookup(store);\r
 157             store.on({\r
 158                 scope: this,\r
 159                 datachanged: this.refresh,\r
 160                 add: this.delayRefresh,\r
 161                 remove: this.delayRefresh,\r
 162                 update: this.delayRefresh,\r
 163                 clear: this.refresh\r
 164             });\r
 165         }\r
 166         this.store = store;\r
 167         if(store && !initial){\r
 168             this.refresh();\r
 169         }\r
 170     },\r
 171 \r
 172     onSwfReady : function(isReset){\r
 173         Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);\r
 174         this.swf.setType(this.type);\r
 175 \r
 176         if(this.chartStyle){\r
 177             this.setStyles(Ext.apply(this.extraStyle || {}, this.chartStyle));\r
 178         }\r
 179 \r
 180         if(this.categoryNames){\r
 181             this.setCategoryNames(this.categoryNames);\r
 182         }\r
 183 \r
 184         if(this.tipRenderer){\r
 185             this.setTipRenderer(this.tipRenderer);\r
 186         }\r
 187         if(!isReset){\r
 188             this.bindStore(this.store, true);\r
 189         }\r
 190         this.refresh.defer(10, this);\r
 191     },\r
 192 \r
 193     delayRefresh : function(){\r
 194         if(!this.refreshTask){\r
 195             this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);\r
 196         }\r
 197         this.refreshTask.delay(this.refreshBuffer);\r
 198     },\r
 199 \r
 200     refresh : function(){\r
 201         var styleChanged = false;\r
 202         // convert the store data into something YUI charts can understand\r
 203         var data = [], rs = this.store.data.items;\r
 204         for(var j = 0, len = rs.length; j < len; j++){\r
 205             data[j] = rs[j].data;\r
 206         }\r
 207         //make a copy of the series definitions so that we aren't\r
 208         //editing them directly.\r
 209         var dataProvider = [];\r
 210         var seriesCount = 0;\r
 211         var currentSeries = null;\r
 212         var i = 0;\r
 213         if(this.series){\r
 214             seriesCount = this.series.length;\r
 215             for(i = 0; i < seriesCount; i++){\r
 216                 currentSeries = this.series[i];\r
 217                 var clonedSeries = {};\r
 218                 for(var prop in currentSeries){\r
 219                     if(prop == "style" && currentSeries.style !== null){\r
 220                         clonedSeries.style = Ext.encode(currentSeries.style);\r
 221                         styleChanged = true;\r
 222                         //we don't want to modify the styles again next time\r
 223                         //so null out the style property.\r
 224                         // this causes issues\r
 225                         // currentSeries.style = null;\r
 226                     } else{\r
 227                         clonedSeries[prop] = currentSeries[prop];\r
 228                     }\r
 229                 }\r
 230                 dataProvider.push(clonedSeries);\r
 231             }\r
 232         }\r
 233 \r
 234         if(seriesCount > 0){\r
 235             for(i = 0; i < seriesCount; i++){\r
 236                 currentSeries = dataProvider[i];\r
 237                 if(!currentSeries.type){\r
 238                     currentSeries.type = this.type;\r
 239                 }\r
 240                 currentSeries.dataProvider = data;\r
 241             }\r
 242         } else{\r
 243             dataProvider.push({type: this.type, dataProvider: data});\r
 244         }\r
 245         this.swf.setDataProvider(dataProvider);\r
 246     },\r
 247 \r
 248     createFnProxy : function(fn, old){\r
 249         if(old){\r
 250             delete window[old];\r
 251         }\r
 252         var fnName = "extFnProxy" + (++Ext.chart.Chart.PROXY_FN_ID);\r
 253         window[fnName] = fn;\r
 254         return fnName;\r
 255     },\r
 256     \r
 257     onDestroy: function(){\r
 258         Ext.chart.Chart.superclass.onDestroy.call(this);\r
 259         delete window[this.tipFnName];\r
 260     }\r
 261 });\r
 262 Ext.reg('chart', Ext.chart.Chart);\r
 263 Ext.chart.Chart.PROXY_FN_ID = 0;\r
 264 \r
 265 /**\r
 266  * Sets the url to load the chart from. This should be set to a local resource.\r
 267  * @static\r
 268  * @type String\r
 269  */\r
 270 Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf';\r
 271 \r
 272 /**\r
 273  * @class Ext.chart.PieChart\r
 274  * @extends Ext.chart.Chart\r
 275  * @constructor\r
 276  * @xtype piechart\r
 277  */\r
 278 Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {\r
 279     type: 'pie',\r
 280 \r
 281     onSwfReady : function(isReset){\r
 282         Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);\r
 283 \r
 284         this.setDataField(this.dataField);\r
 285         this.setCategoryField(this.categoryField);\r
 286     },\r
 287 \r
 288     setDataField : function(field){\r
 289         this.dataField = field;\r
 290         this.swf.setDataField(field);\r
 291     },\r
 292 \r
 293     setCategoryField : function(field){\r
 294         this.categoryField = field;\r
 295         this.swf.setCategoryField(field);\r
 296     }\r
 297 });\r
 298 Ext.reg('piechart', Ext.chart.PieChart);\r
 299 \r
 300 /**\r
 301  * @class Ext.chart.CartesianChart\r
 302  * @extends Ext.chart.Chart\r
 303  * @constructor\r
 304  * @xtype cartesianchart\r
 305  */\r
 306 Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {\r
 307     onSwfReady : function(isReset){\r
 308         Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);\r
 309 \r
 310         if(this.xField){\r
 311             this.setXField(this.xField);\r
 312         }\r
 313         if(this.yField){\r
 314             this.setYField(this.yField);\r
 315         }\r
 316         if(this.xAxis){\r
 317             this.setXAxis(this.xAxis);\r
 318         }\r
 319         if(this.yAxis){\r
 320             this.setYAxis(this.yAxis);\r
 321         }\r
 322     },\r
 323 \r
 324     setXField : function(value){\r
 325         this.xField = value;\r
 326         this.swf.setHorizontalField(value);\r
 327     },\r
 328 \r
 329     setYField : function(value){\r
 330         this.yField = value;\r
 331         this.swf.setVerticalField(value);\r
 332     },\r
 333 \r
 334     setXAxis : function(value){\r
 335         this.xAxis = this.createAxis('xAxis', value);\r
 336         this.swf.setHorizontalAxis(this.xAxis);\r
 337     },\r
 338 \r
 339     setYAxis : function(value){\r
 340         this.yAxis = this.createAxis('yAxis', value);\r
 341         this.swf.setVerticalAxis(this.yAxis);\r
 342     },\r
 343 \r
 344     createAxis : function(axis, value){\r
 345         var o = Ext.apply({}, value), oldFn = null;\r
 346         if(this[axis]){\r
 347             oldFn = this[axis].labelFunction;\r
 348         }\r
 349         if(o.labelRenderer){\r
 350             var fn = o.labelRenderer;\r
 351             o.labelFunction = this.createFnProxy(function(v){\r
 352                 return fn(v);\r
 353             }, oldFn);\r
 354             delete o.labelRenderer;\r
 355         }\r
 356         return o;\r
 357     }\r
 358 });\r
 359 Ext.reg('cartesianchart', Ext.chart.CartesianChart);\r
 360 \r
 361 /**\r
 362  * @class Ext.chart.LineChart\r
 363  * @extends Ext.chart.CartesianChart\r
 364  * @constructor\r
 365  * @xtype linechart\r
 366  */\r
 367 Ext.chart.LineChart = Ext.extend(Ext.chart.CartesianChart, {\r
 368     type: 'line'\r
 369 });\r
 370 Ext.reg('linechart', Ext.chart.LineChart);\r
 371 \r
 372 /**\r
 373  * @class Ext.chart.ColumnChart\r
 374  * @extends Ext.chart.CartesianChart\r
 375  * @constructor\r
 376  * @xtype columnchart\r
 377  */\r
 378 Ext.chart.ColumnChart = Ext.extend(Ext.chart.CartesianChart, {\r
 379     type: 'column'\r
 380 });\r
 381 Ext.reg('columnchart', Ext.chart.ColumnChart);\r
 382 \r
 383 /**\r
 384  * @class Ext.chart.StackedColumnChart\r
 385  * @extends Ext.chart.CartesianChart\r
 386  * @constructor\r
 387  * @xtype stackedcolumnchart\r
 388  */\r
 389 Ext.chart.StackedColumnChart = Ext.extend(Ext.chart.CartesianChart, {\r
 390     type: 'stackcolumn'\r
 391 });\r
 392 Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);\r
 393 \r
 394 /**\r
 395  * @class Ext.chart.BarChart\r
 396  * @extends Ext.chart.CartesianChart\r
 397  * @constructor\r
 398  * @xtype barchart\r
 399  */\r
 400 Ext.chart.BarChart = Ext.extend(Ext.chart.CartesianChart, {\r
 401     type: 'bar'\r
 402 });\r
 403 Ext.reg('barchart', Ext.chart.BarChart);\r
 404 \r
 405 /**\r
 406  * @class Ext.chart.StackedBarChart\r
 407  * @extends Ext.chart.CartesianChart\r
 408  * @constructor\r
 409  * @xtype stackedbarchart\r
 410  */\r
 411 Ext.chart.StackedBarChart = Ext.extend(Ext.chart.CartesianChart, {\r
 412     type: 'stackbar'\r
 413 });\r
 414 Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);\r
 415 \r
 416 \r
 417 \r
 418 /**\r
 419  * @class Ext.chart.Axis\r
 420  * Defines a CartesianChart's vertical or horizontal axis.\r
 421  * @constructor\r
 422  */\r
 423 Ext.chart.Axis = function(config){\r
 424     Ext.apply(this, config);\r
 425 };\r
 426 \r
 427 Ext.chart.Axis.prototype =\r
 428 {\r
 429     /**\r
 430      * The type of axis.\r
 431      *\r
 432      * @property type\r
 433      * @type String\r
 434      */\r
 435     type: null,\r
 436 \r
 437     /**\r
 438      * The direction in which the axis is drawn. May be "horizontal" or "vertical".\r
 439      *\r
 440      * @property orientation\r
 441      * @type String\r
 442      */\r
 443     orientation: "horizontal",\r
 444 \r
 445     /**\r
 446      * If true, the items on the axis will be drawn in opposite direction.\r
 447      *\r
 448      * @property reverse\r
 449      * @type Boolean\r
 450      */\r
 451     reverse: false,\r
 452 \r
 453     /**\r
 454      * A string reference to the globally-accessible function that may be called to\r
 455      * determine each of the label values for this axis.\r
 456      *\r
 457      * @property labelFunction\r
 458      * @type String\r
 459      */\r
 460     labelFunction: null,\r
 461 \r
 462     /**\r
 463      * If true, labels that overlap previously drawn labels on the axis will be hidden.\r
 464      *\r
 465      * @property hideOverlappingLabels\r
 466      * @type Boolean\r
 467      */\r
 468     hideOverlappingLabels: true\r
 469 };\r
 470 \r
 471 /**\r
 472  * @class Ext.chart.NumericAxis\r
 473  * @extends Ext.chart.Axis\r
 474  * A type of axis whose units are measured in numeric values.\r
 475  * @constructor\r
 476  */\r
 477 Ext.chart.NumericAxis = Ext.extend(Ext.chart.Axis, {\r
 478     type: "numeric",\r
 479 \r
 480     /**\r
 481      * The minimum value drawn by the axis. If not set explicitly, the axis minimum\r
 482      * will be calculated automatically.\r
 483      *\r
 484      * @property minimum\r
 485      * @type Number\r
 486      */\r
 487     minimum: NaN,\r
 488 \r
 489     /**\r
 490      * The maximum value drawn by the axis. If not set explicitly, the axis maximum\r
 491      * will be calculated automatically.\r
 492      *\r
 493      * @property maximum\r
 494      * @type Number\r
 495      */\r
 496     maximum: NaN,\r
 497 \r
 498     /**\r
 499      * The spacing between major intervals on this axis.\r
 500      *\r
 501      * @property majorUnit\r
 502      * @type Number\r
 503      */\r
 504     majorUnit: NaN,\r
 505 \r
 506     /**\r
 507      * The spacing between minor intervals on this axis.\r
 508      *\r
 509      * @property minorUnit\r
 510      * @type Number\r
 511      */\r
 512     minorUnit: NaN,\r
 513 \r
 514     /**\r
 515      * If true, the labels, ticks, gridlines, and other objects will snap to\r
 516      * the nearest major or minor unit. If false, their position will be based\r
 517      * on the minimum value.\r
 518      *\r
 519      * @property snapToUnits\r
 520      * @type Boolean\r
 521      */\r
 522     snapToUnits: true,\r
 523 \r
 524     /**\r
 525      * If true, and the bounds are calculated automatically, either the minimum or\r
 526      * maximum will be set to zero.\r
 527      *\r
 528      * @property alwaysShowZero\r
 529      * @type Boolean\r
 530      */\r
 531     alwaysShowZero: true,\r
 532 \r
 533     /**\r
 534      * The scaling algorithm to use on this axis. May be "linear" or "logarithmic".\r
 535      *\r
 536      * @property scale\r
 537      * @type String\r
 538      */\r
 539     scale: "linear"\r
 540 });\r
 541 \r
 542 /**\r
 543  * @class Ext.chart.TimeAxis\r
 544  * @extends Ext.chart.Axis\r
 545  * A type of axis whose units are measured in time-based values.\r
 546  * @constructor\r
 547  */\r
 548 Ext.chart.TimeAxis = Ext.extend(Ext.chart.Axis, {\r
 549     type: "time",\r
 550 \r
 551     /**\r
 552      * The minimum value drawn by the axis. If not set explicitly, the axis minimum\r
 553      * will be calculated automatically.\r
 554      *\r
 555      * @property minimum\r
 556      * @type Date\r
 557      */\r
 558     minimum: null,\r
 559 \r
 560     /**\r
 561      * The maximum value drawn by the axis. If not set explicitly, the axis maximum\r
 562      * will be calculated automatically.\r
 563      *\r
 564      * @property maximum\r
 565      * @type Number\r
 566      */\r
 567     maximum: null,\r
 568 \r
 569     /**\r
 570      * The spacing between major intervals on this axis.\r
 571      *\r
 572      * @property majorUnit\r
 573      * @type Number\r
 574      */\r
 575     majorUnit: NaN,\r
 576 \r
 577     /**\r
 578      * The time unit used by the majorUnit.\r
 579      *\r
 580      * @property majorTimeUnit\r
 581      * @type String\r
 582      */\r
 583     majorTimeUnit: null,\r
 584 \r
 585     /**\r
 586      * The spacing between minor intervals on this axis.\r
 587      *\r
 588      * @property majorUnit\r
 589      * @type Number\r
 590      */\r
 591     minorUnit: NaN,\r
 592 \r
 593     /**\r
 594      * The time unit used by the minorUnit.\r
 595      *\r
 596      * @property majorTimeUnit\r
 597      * @type String\r
 598      */\r
 599     minorTimeUnit: null,\r
 600 \r
 601     /**\r
 602      * If true, the labels, ticks, gridlines, and other objects will snap to\r
 603      * the nearest major or minor unit. If false, their position will be based\r
 604      * on the minimum value.\r
 605      *\r
 606      * @property snapToUnits\r
 607      * @type Boolean\r
 608      */\r
 609     snapToUnits: true\r
 610 });\r
 611 \r
 612 /**\r
 613  * @class Ext.chart.CategoryAxis\r
 614  * @extends Ext.chart.Axis\r
 615  * A type of axis that displays items in categories.\r
 616  * @constructor\r
 617  */\r
 618 Ext.chart.CategoryAxis = Ext.extend(Ext.chart.Axis, {\r
 619     type: "category",\r
 620 \r
 621     /**\r
 622      * A list of category names to display along this axis.\r
 623      *\r
 624      * @property categoryNames\r
 625      * @type Array\r
 626      */\r
 627     categoryNames: null\r
 628 });\r
 629 \r
 630 /**\r
 631  * @class Ext.chart.Series\r
 632  * Series class for the charts widget.\r
 633  * @constructor\r
 634  */\r
 635 Ext.chart.Series = function(config) { Ext.apply(this, config); };\r
 636 \r
 637 Ext.chart.Series.prototype =\r
 638 {\r
 639     /**\r
 640      * The type of series.\r
 641      *\r
 642      * @property type\r
 643      * @type String\r
 644      */\r
 645     type: null,\r
 646 \r
 647     /**\r
 648      * The human-readable name of the series.\r
 649      *\r
 650      * @property displayName\r
 651      * @type String\r
 652      */\r
 653     displayName: null\r
 654 };\r
 655 \r
 656 /**\r
 657  * @class Ext.chart.CartesianSeries\r
 658  * @extends Ext.chart.Series\r
 659  * CartesianSeries class for the charts widget.\r
 660  * @constructor\r
 661  */\r
 662 Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {\r
 663     /**\r
 664      * The field used to access the x-axis value from the items from the data source.\r
 665      *\r
 666      * @property xField\r
 667      * @type String\r
 668      */\r
 669     xField: null,\r
 670 \r
 671     /**\r
 672      * The field used to access the y-axis value from the items from the data source.\r
 673      *\r
 674      * @property yField\r
 675      * @type String\r
 676      */\r
 677     yField: null\r
 678 });\r
 679 \r
 680 /**\r
 681  * @class Ext.chart.ColumnSeries\r
 682  * @extends Ext.chart.CartesianSeries\r
 683  * ColumnSeries class for the charts widget.\r
 684  * @constructor\r
 685  */\r
 686 Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {\r
 687     type: "column"\r
 688 });\r
 689 \r
 690 /**\r
 691  * @class Ext.chart.LineSeries\r
 692  * @extends Ext.chart.CartesianSeries\r
 693  * LineSeries class for the charts widget.\r
 694  * @constructor\r
 695  */\r
 696 Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {\r
 697     type: "line"\r
 698 });\r
 699 \r
 700 /**\r
 701  * @class Ext.chart.BarSeries\r
 702  * @extends Ext.chart.CartesianSeries\r
 703  * BarSeries class for the charts widget.\r
 704  * @constructor\r
 705  */\r
 706 Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {\r
 707     type: "bar"\r
 708 });\r
 709 \r
 710 \r
 711 /**\r
 712  * @class Ext.chart.PieSeries\r
 713  * @extends Ext.chart.Series\r
 714  * PieSeries class for the charts widget.\r
 715  * @constructor\r
 716  */\r
 717 Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {\r
 718     type: "pie",\r
 719     dataField: null,\r
 720     categoryField: null\r
 721 });