docs/source/Chart.html

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