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