Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>