Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / Chart.html
diff --git a/docs/source/Chart.html b/docs/source/Chart.html
new file mode 100644 (file)
index 0000000..ec59f43
--- /dev/null
@@ -0,0 +1,724 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.chart.Chart"></div>/**\r
+ * @class Ext.chart.Chart\r
+ * @extends Ext.FlashComponent\r
+ * The Ext.chart package provides the capability to visualize data with flash based charting.\r
+ * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.\r
+ * @constructor\r
+ * @xtype chart\r
+ */\r
\r
+ Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {\r
+    refreshBuffer: 100,\r
+\r
+    <div id="cfg-Ext.chart.Chart-chartStyle"></div>/**\r
+     * @cfg {Object} chartStyle\r
+     * Sets styles for this chart. Contains a number of default values. Modifying this property will override\r
+     * the base styles on the chart.\r
+     */\r
+    chartStyle: {\r
+        padding: 10,\r
+        animationEnabled: true,\r
+        font: {\r
+            name: 'Tahoma',\r
+            color: 0x444444,\r
+            size: 11\r
+        },\r
+        dataTip: {\r
+            padding: 5,\r
+            border: {\r
+                color: 0x99bbe8,\r
+                size:1\r
+            },\r
+            background: {\r
+                color: 0xDAE7F6,\r
+                alpha: .9\r
+            },\r
+            font: {\r
+                name: 'Tahoma',\r
+                color: 0x15428B,\r
+                size: 10,\r
+                bold: true\r
+            }\r
+        }\r
+    },\r
+    \r
+    <div id="cfg-Ext.chart.Chart-url"></div>/**\r
+     * @cfg {String} url\r
+     * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should\r
+     * be modified to point to the local charts resource.\r
+     */\r
+    \r
+    <div id="cfg-Ext.chart.Chart-extraStyle"></div>/**\r
+     * @cfg {Object} extraStyle\r
+     * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to <tt>null</tt>.\r
+     */\r
+    extraStyle: null,\r
+    \r
+    <div id="cfg-Ext.chart.Chart-disableCaching"></div>/**\r
+     * @cfg {Boolean} disableCaching\r
+     * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.\r
+     */\r
+    disableCaching: Ext.isIE || Ext.isOpera,\r
+    disableCacheParam: '_dc',\r
+\r
+    initComponent : function(){\r
+        Ext.chart.Chart.superclass.initComponent.call(this);\r
+        if(!this.url){\r
+            this.url = Ext.chart.Chart.CHART_URL;\r
+        }\r
+        if(this.disableCaching){\r
+            this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));\r
+        }\r
+        this.addEvents(\r
+            'itemmouseover',\r
+            'itemmouseout',\r
+            'itemclick',\r
+            'itemdoubleclick',\r
+            'itemdragstart',\r
+            'itemdrag',\r
+            'itemdragend'\r
+        );\r
+        this.store = Ext.StoreMgr.lookup(this.store);\r
+    },\r
+\r
+    <div id="method-Ext.chart.Chart-setStyle"></div>/**\r
+     * Sets a single style value on the Chart instance.\r
+     *\r
+     * @param name {String} Name of the Chart style value to change.\r
+     * @param value {Object} New value to pass to the Chart style.\r
+     */\r
+     setStyle: function(name, value){\r
+         this.swf.setStyle(name, Ext.encode(value));\r
+     },\r
+\r
+    <div id="method-Ext.chart.Chart-setStyles"></div>/**\r
+     * Resets all styles on the Chart instance.\r
+     *\r
+     * @param styles {Object} Initializer for all Chart styles.\r
+     */\r
+    setStyles: function(styles){\r
+        this.swf.setStyles(Ext.encode(styles));\r
+    },\r
+\r
+    <div id="method-Ext.chart.Chart-setSeriesStyles"></div>/**\r
+     * Sets the styles on all series in the Chart.\r
+     *\r
+     * @param styles {Array} Initializer for all Chart series styles.\r
+     */\r
+    setSeriesStyles: function(styles){\r
+        var s = [];\r
+        Ext.each(styles, function(style){\r
+            s.push(Ext.encode(style));\r
+        });\r
+        this.swf.setSeriesStyles(s);\r
+    },\r
+\r
+    setCategoryNames : function(names){\r
+        this.swf.setCategoryNames(names);\r
+    },\r
+\r
+    setTipRenderer : function(fn){\r
+        var chart = this;\r
+        this.tipFnName = this.createFnProxy(function(item, index, series){\r
+            var record = chart.store.getAt(index);\r
+            return fn(chart, record, index, series);\r
+        }, this.tipFnName);\r
+        this.swf.setDataTipFunction(this.tipFnName);\r
+    },\r
+\r
+    setSeries : function(series){\r
+        this.series = series;\r
+        this.refresh();\r
+    },\r
+\r
+    <div id="method-Ext.chart.Chart-bindStore"></div>/**\r
+     * Changes the data store bound to this chart and refreshes it.\r
+     * @param {Store} store The store to bind to this chart\r
+     */\r
+    bindStore : function(store, initial){\r
+        if(!initial && this.store){\r
+            this.store.un("datachanged", this.refresh, this);\r
+            this.store.un("add", this.delayRefresh, this);\r
+            this.store.un("remove", this.delayRefresh, this);\r
+            this.store.un("update", this.delayRefresh, this);\r
+            this.store.un("clear", this.refresh, this);\r
+            if(store !== this.store && this.store.autoDestroy){\r
+                this.store.destroy();\r
+            }\r
+        }\r
+        if(store){\r
+            store = Ext.StoreMgr.lookup(store);\r
+            store.on({\r
+                scope: this,\r
+                datachanged: this.refresh,\r
+                add: this.delayRefresh,\r
+                remove: this.delayRefresh,\r
+                update: this.delayRefresh,\r
+                clear: this.refresh\r
+            });\r
+        }\r
+        this.store = store;\r
+        if(store && !initial){\r
+            this.refresh();\r
+        }\r
+    },\r
+\r
+    onSwfReady : function(isReset){\r
+        Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);\r
+        this.swf.setType(this.type);\r
+\r
+        if(this.chartStyle){\r
+            this.setStyles(Ext.apply(this.extraStyle || {}, this.chartStyle));\r
+        }\r
+\r
+        if(this.categoryNames){\r
+            this.setCategoryNames(this.categoryNames);\r
+        }\r
+\r
+        if(this.tipRenderer){\r
+            this.setTipRenderer(this.tipRenderer);\r
+        }\r
+        if(!isReset){\r
+            this.bindStore(this.store, true);\r
+        }\r
+        this.refresh.defer(10, this);\r
+    },\r
+\r
+    delayRefresh : function(){\r
+        if(!this.refreshTask){\r
+            this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);\r
+        }\r
+        this.refreshTask.delay(this.refreshBuffer);\r
+    },\r
+\r
+    refresh : function(){\r
+        var styleChanged = false;\r
+        // convert the store data into something YUI charts can understand\r
+        var data = [], rs = this.store.data.items;\r
+        for(var j = 0, len = rs.length; j < len; j++){\r
+            data[j] = rs[j].data;\r
+        }\r
+        //make a copy of the series definitions so that we aren't\r
+        //editing them directly.\r
+        var dataProvider = [];\r
+        var seriesCount = 0;\r
+        var currentSeries = null;\r
+        var i = 0;\r
+        if(this.series){\r
+            seriesCount = this.series.length;\r
+            for(i = 0; i < seriesCount; i++){\r
+                currentSeries = this.series[i];\r
+                var clonedSeries = {};\r
+                for(var prop in currentSeries){\r
+                    if(prop == "style" && currentSeries.style !== null){\r
+                        clonedSeries.style = Ext.encode(currentSeries.style);\r
+                        styleChanged = true;\r
+                        //we don't want to modify the styles again next time\r
+                        //so null out the style property.\r
+                        // this causes issues\r
+                        // currentSeries.style = null;\r
+                    } else{\r
+                        clonedSeries[prop] = currentSeries[prop];\r
+                    }\r
+                }\r
+                dataProvider.push(clonedSeries);\r
+            }\r
+        }\r
+\r
+        if(seriesCount > 0){\r
+            for(i = 0; i < seriesCount; i++){\r
+                currentSeries = dataProvider[i];\r
+                if(!currentSeries.type){\r
+                    currentSeries.type = this.type;\r
+                }\r
+                currentSeries.dataProvider = data;\r
+            }\r
+        } else{\r
+            dataProvider.push({type: this.type, dataProvider: data});\r
+        }\r
+        this.swf.setDataProvider(dataProvider);\r
+    },\r
+\r
+    createFnProxy : function(fn, old){\r
+        if(old){\r
+            delete window[old];\r
+        }\r
+        var fnName = "extFnProxy" + (++Ext.chart.Chart.PROXY_FN_ID);\r
+        window[fnName] = fn;\r
+        return fnName;\r
+    },\r
+    \r
+    onDestroy: function(){\r
+        Ext.chart.Chart.superclass.onDestroy.call(this);\r
+        delete window[this.tipFnName];\r
+    }\r
+});\r
+Ext.reg('chart', Ext.chart.Chart);\r
+Ext.chart.Chart.PROXY_FN_ID = 0;\r
+\r
+<div id="prop-Ext.chart.Chart-CHART_URL"></div>/**\r
+ * Sets the url to load the chart from. This should be set to a local resource.\r
+ * @static\r
+ * @type String\r
+ */\r
+Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf';\r
+\r
+<div id="cls-Ext.chart.PieChart"></div>/**\r
+ * @class Ext.chart.PieChart\r
+ * @extends Ext.chart.Chart\r
+ * @constructor\r
+ * @xtype piechart\r
+ */\r
+Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {\r
+    type: 'pie',\r
+\r
+    onSwfReady : function(isReset){\r
+        Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);\r
+\r
+        this.setDataField(this.dataField);\r
+        this.setCategoryField(this.categoryField);\r
+    },\r
+\r
+    setDataField : function(field){\r
+        this.dataField = field;\r
+        this.swf.setDataField(field);\r
+    },\r
+\r
+    setCategoryField : function(field){\r
+        this.categoryField = field;\r
+        this.swf.setCategoryField(field);\r
+    }\r
+});\r
+Ext.reg('piechart', Ext.chart.PieChart);\r
+\r
+<div id="cls-Ext.chart.CartesianChart"></div>/**\r
+ * @class Ext.chart.CartesianChart\r
+ * @extends Ext.chart.Chart\r
+ * @constructor\r
+ * @xtype cartesianchart\r
+ */\r
+Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {\r
+    onSwfReady : function(isReset){\r
+        Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);\r
+\r
+        if(this.xField){\r
+            this.setXField(this.xField);\r
+        }\r
+        if(this.yField){\r
+            this.setYField(this.yField);\r
+        }\r
+        if(this.xAxis){\r
+            this.setXAxis(this.xAxis);\r
+        }\r
+        if(this.yAxis){\r
+            this.setYAxis(this.yAxis);\r
+        }\r
+    },\r
+\r
+    setXField : function(value){\r
+        this.xField = value;\r
+        this.swf.setHorizontalField(value);\r
+    },\r
+\r
+    setYField : function(value){\r
+        this.yField = value;\r
+        this.swf.setVerticalField(value);\r
+    },\r
+\r
+    setXAxis : function(value){\r
+        this.xAxis = this.createAxis('xAxis', value);\r
+        this.swf.setHorizontalAxis(this.xAxis);\r
+    },\r
+\r
+    setYAxis : function(value){\r
+        this.yAxis = this.createAxis('yAxis', value);\r
+        this.swf.setVerticalAxis(this.yAxis);\r
+    },\r
+\r
+    createAxis : function(axis, value){\r
+        var o = Ext.apply({}, value), oldFn = null;\r
+        if(this[axis]){\r
+            oldFn = this[axis].labelFunction;\r
+        }\r
+        if(o.labelRenderer){\r
+            var fn = o.labelRenderer;\r
+            o.labelFunction = this.createFnProxy(function(v){\r
+                return fn(v);\r
+            }, oldFn);\r
+            delete o.labelRenderer;\r
+        }\r
+        return o;\r
+    }\r
+});\r
+Ext.reg('cartesianchart', Ext.chart.CartesianChart);\r
+\r
+<div id="cls-Ext.chart.LineChart"></div>/**\r
+ * @class Ext.chart.LineChart\r
+ * @extends Ext.chart.CartesianChart\r
+ * @constructor\r
+ * @xtype linechart\r
+ */\r
+Ext.chart.LineChart = Ext.extend(Ext.chart.CartesianChart, {\r
+    type: 'line'\r
+});\r
+Ext.reg('linechart', Ext.chart.LineChart);\r
+\r
+<div id="cls-Ext.chart.ColumnChart"></div>/**\r
+ * @class Ext.chart.ColumnChart\r
+ * @extends Ext.chart.CartesianChart\r
+ * @constructor\r
+ * @xtype columnchart\r
+ */\r
+Ext.chart.ColumnChart = Ext.extend(Ext.chart.CartesianChart, {\r
+    type: 'column'\r
+});\r
+Ext.reg('columnchart', Ext.chart.ColumnChart);\r
+\r
+<div id="cls-Ext.chart.StackedColumnChart"></div>/**\r
+ * @class Ext.chart.StackedColumnChart\r
+ * @extends Ext.chart.CartesianChart\r
+ * @constructor\r
+ * @xtype stackedcolumnchart\r
+ */\r
+Ext.chart.StackedColumnChart = Ext.extend(Ext.chart.CartesianChart, {\r
+    type: 'stackcolumn'\r
+});\r
+Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);\r
+\r
+<div id="cls-Ext.chart.BarChart"></div>/**\r
+ * @class Ext.chart.BarChart\r
+ * @extends Ext.chart.CartesianChart\r
+ * @constructor\r
+ * @xtype barchart\r
+ */\r
+Ext.chart.BarChart = Ext.extend(Ext.chart.CartesianChart, {\r
+    type: 'bar'\r
+});\r
+Ext.reg('barchart', Ext.chart.BarChart);\r
+\r
+<div id="cls-Ext.chart.StackedBarChart"></div>/**\r
+ * @class Ext.chart.StackedBarChart\r
+ * @extends Ext.chart.CartesianChart\r
+ * @constructor\r
+ * @xtype stackedbarchart\r
+ */\r
+Ext.chart.StackedBarChart = Ext.extend(Ext.chart.CartesianChart, {\r
+    type: 'stackbar'\r
+});\r
+Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);\r
+\r
+\r
+\r
+<div id="cls-Ext.chart.Axis"></div>/**\r
+ * @class Ext.chart.Axis\r
+ * Defines a CartesianChart's vertical or horizontal axis.\r
+ * @constructor\r
+ */\r
+Ext.chart.Axis = function(config){\r
+    Ext.apply(this, config);\r
+};\r
+\r
+Ext.chart.Axis.prototype =\r
+{\r
+    <div id="prop-Ext.chart.Axis-type"></div>/**\r
+     * The type of axis.\r
+     *\r
+     * @property type\r
+     * @type String\r
+     */\r
+    type: null,\r
+\r
+    <div id="prop-Ext.chart.Axis-orientation"></div>/**\r
+     * The direction in which the axis is drawn. May be "horizontal" or "vertical".\r
+     *\r
+     * @property orientation\r
+     * @type String\r
+     */\r
+    orientation: "horizontal",\r
+\r
+    <div id="prop-Ext.chart.Axis-reverse"></div>/**\r
+     * If true, the items on the axis will be drawn in opposite direction.\r
+     *\r
+     * @property reverse\r
+     * @type Boolean\r
+     */\r
+    reverse: false,\r
+\r
+    <div id="prop-Ext.chart.Axis-labelFunction"></div>/**\r
+     * A string reference to the globally-accessible function that may be called to\r
+     * determine each of the label values for this axis.\r
+     *\r
+     * @property labelFunction\r
+     * @type String\r
+     */\r
+    labelFunction: null,\r
+\r
+    <div id="prop-Ext.chart.Axis-hideOverlappingLabels"></div>/**\r
+     * If true, labels that overlap previously drawn labels on the axis will be hidden.\r
+     *\r
+     * @property hideOverlappingLabels\r
+     * @type Boolean\r
+     */\r
+    hideOverlappingLabels: true\r
+};\r
+\r
+<div id="cls-Ext.chart.NumericAxis"></div>/**\r
+ * @class Ext.chart.NumericAxis\r
+ * @extends Ext.chart.Axis\r
+ * A type of axis whose units are measured in numeric values.\r
+ * @constructor\r
+ */\r
+Ext.chart.NumericAxis = Ext.extend(Ext.chart.Axis, {\r
+    type: "numeric",\r
+\r
+    <div id="prop-Ext.chart.NumericAxis-minimum"></div>/**\r
+     * The minimum value drawn by the axis. If not set explicitly, the axis minimum\r
+     * will be calculated automatically.\r
+     *\r
+     * @property minimum\r
+     * @type Number\r
+     */\r
+    minimum: NaN,\r
+\r
+    <div id="prop-Ext.chart.NumericAxis-maximum"></div>/**\r
+     * The maximum value drawn by the axis. If not set explicitly, the axis maximum\r
+     * will be calculated automatically.\r
+     *\r
+     * @property maximum\r
+     * @type Number\r
+     */\r
+    maximum: NaN,\r
+\r
+    <div id="prop-Ext.chart.NumericAxis-majorUnit"></div>/**\r
+     * The spacing between major intervals on this axis.\r
+     *\r
+     * @property majorUnit\r
+     * @type Number\r
+     */\r
+    majorUnit: NaN,\r
+\r
+    <div id="prop-Ext.chart.NumericAxis-minorUnit"></div>/**\r
+     * The spacing between minor intervals on this axis.\r
+     *\r
+     * @property minorUnit\r
+     * @type Number\r
+     */\r
+    minorUnit: NaN,\r
+\r
+    <div id="prop-Ext.chart.NumericAxis-snapToUnits"></div>/**\r
+     * If true, the labels, ticks, gridlines, and other objects will snap to\r
+     * the nearest major or minor unit. If false, their position will be based\r
+     * on the minimum value.\r
+     *\r
+     * @property snapToUnits\r
+     * @type Boolean\r
+     */\r
+    snapToUnits: true,\r
+\r
+    <div id="prop-Ext.chart.NumericAxis-alwaysShowZero"></div>/**\r
+     * If true, and the bounds are calculated automatically, either the minimum or\r
+     * maximum will be set to zero.\r
+     *\r
+     * @property alwaysShowZero\r
+     * @type Boolean\r
+     */\r
+    alwaysShowZero: true,\r
+\r
+    <div id="prop-Ext.chart.NumericAxis-scale"></div>/**\r
+     * The scaling algorithm to use on this axis. May be "linear" or "logarithmic".\r
+     *\r
+     * @property scale\r
+     * @type String\r
+     */\r
+    scale: "linear"\r
+});\r
+\r
+<div id="cls-Ext.chart.TimeAxis"></div>/**\r
+ * @class Ext.chart.TimeAxis\r
+ * @extends Ext.chart.Axis\r
+ * A type of axis whose units are measured in time-based values.\r
+ * @constructor\r
+ */\r
+Ext.chart.TimeAxis = Ext.extend(Ext.chart.Axis, {\r
+    type: "time",\r
+\r
+    <div id="prop-Ext.chart.TimeAxis-minimum"></div>/**\r
+     * The minimum value drawn by the axis. If not set explicitly, the axis minimum\r
+     * will be calculated automatically.\r
+     *\r
+     * @property minimum\r
+     * @type Date\r
+     */\r
+    minimum: null,\r
+\r
+    <div id="prop-Ext.chart.TimeAxis-maximum"></div>/**\r
+     * The maximum value drawn by the axis. If not set explicitly, the axis maximum\r
+     * will be calculated automatically.\r
+     *\r
+     * @property maximum\r
+     * @type Number\r
+     */\r
+    maximum: null,\r
+\r
+    <div id="prop-Ext.chart.TimeAxis-majorUnit"></div>/**\r
+     * The spacing between major intervals on this axis.\r
+     *\r
+     * @property majorUnit\r
+     * @type Number\r
+     */\r
+    majorUnit: NaN,\r
+\r
+    <div id="prop-Ext.chart.TimeAxis-majorTimeUnit"></div>/**\r
+     * The time unit used by the majorUnit.\r
+     *\r
+     * @property majorTimeUnit\r
+     * @type String\r
+     */\r
+    majorTimeUnit: null,\r
+\r
+    <div id="prop-Ext.chart.TimeAxis-majorUnit"></div>/**\r
+     * The spacing between minor intervals on this axis.\r
+     *\r
+     * @property majorUnit\r
+     * @type Number\r
+     */\r
+    minorUnit: NaN,\r
+\r
+    <div id="prop-Ext.chart.TimeAxis-majorTimeUnit"></div>/**\r
+     * The time unit used by the minorUnit.\r
+     *\r
+     * @property majorTimeUnit\r
+     * @type String\r
+     */\r
+    minorTimeUnit: null,\r
+\r
+    <div id="prop-Ext.chart.TimeAxis-snapToUnits"></div>/**\r
+     * If true, the labels, ticks, gridlines, and other objects will snap to\r
+     * the nearest major or minor unit. If false, their position will be based\r
+     * on the minimum value.\r
+     *\r
+     * @property snapToUnits\r
+     * @type Boolean\r
+     */\r
+    snapToUnits: true\r
+});\r
+\r
+<div id="cls-Ext.chart.CategoryAxis"></div>/**\r
+ * @class Ext.chart.CategoryAxis\r
+ * @extends Ext.chart.Axis\r
+ * A type of axis that displays items in categories.\r
+ * @constructor\r
+ */\r
+Ext.chart.CategoryAxis = Ext.extend(Ext.chart.Axis, {\r
+    type: "category",\r
+\r
+    <div id="prop-Ext.chart.CategoryAxis-categoryNames"></div>/**\r
+     * A list of category names to display along this axis.\r
+     *\r
+     * @property categoryNames\r
+     * @type Array\r
+     */\r
+    categoryNames: null\r
+});\r
+\r
+<div id="cls-Ext.chart.Series"></div>/**\r
+ * @class Ext.chart.Series\r
+ * Series class for the charts widget.\r
+ * @constructor\r
+ */\r
+Ext.chart.Series = function(config) { Ext.apply(this, config); };\r
+\r
+Ext.chart.Series.prototype =\r
+{\r
+    <div id="prop-Ext.chart.Series-type"></div>/**\r
+     * The type of series.\r
+     *\r
+     * @property type\r
+     * @type String\r
+     */\r
+    type: null,\r
+\r
+    <div id="prop-Ext.chart.Series-displayName"></div>/**\r
+     * The human-readable name of the series.\r
+     *\r
+     * @property displayName\r
+     * @type String\r
+     */\r
+    displayName: null\r
+};\r
+\r
+<div id="cls-Ext.chart.CartesianSeries"></div>/**\r
+ * @class Ext.chart.CartesianSeries\r
+ * @extends Ext.chart.Series\r
+ * CartesianSeries class for the charts widget.\r
+ * @constructor\r
+ */\r
+Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {\r
+    <div id="prop-Ext.chart.CartesianSeries-xField"></div>/**\r
+     * The field used to access the x-axis value from the items from the data source.\r
+     *\r
+     * @property xField\r
+     * @type String\r
+     */\r
+    xField: null,\r
+\r
+    <div id="prop-Ext.chart.CartesianSeries-yField"></div>/**\r
+     * The field used to access the y-axis value from the items from the data source.\r
+     *\r
+     * @property yField\r
+     * @type String\r
+     */\r
+    yField: null\r
+});\r
+\r
+<div id="cls-Ext.chart.ColumnSeries"></div>/**\r
+ * @class Ext.chart.ColumnSeries\r
+ * @extends Ext.chart.CartesianSeries\r
+ * ColumnSeries class for the charts widget.\r
+ * @constructor\r
+ */\r
+Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {\r
+    type: "column"\r
+});\r
+\r
+<div id="cls-Ext.chart.LineSeries"></div>/**\r
+ * @class Ext.chart.LineSeries\r
+ * @extends Ext.chart.CartesianSeries\r
+ * LineSeries class for the charts widget.\r
+ * @constructor\r
+ */\r
+Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {\r
+    type: "line"\r
+});\r
+\r
+<div id="cls-Ext.chart.BarSeries"></div>/**\r
+ * @class Ext.chart.BarSeries\r
+ * @extends Ext.chart.CartesianSeries\r
+ * BarSeries class for the charts widget.\r
+ * @constructor\r
+ */\r
+Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {\r
+    type: "bar"\r
+});\r
+\r
+\r
+<div id="cls-Ext.chart.PieSeries"></div>/**\r
+ * @class Ext.chart.PieSeries\r
+ * @extends Ext.chart.Series\r
+ * PieSeries class for the charts widget.\r
+ * @constructor\r
+ */\r
+Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {\r
+    type: "pie",\r
+    dataField: null,\r
+    categoryField: null\r
+});</pre>    \r
+</body>\r
+</html>
\ No newline at end of file