docs/source/Chart.html

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