docs/source/Chart.html

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