Upgrade to ExtJS 3.2.2 - Released 06/02/2010
[extjs.git] / docs / source / Chart.html
index e3881a5..779ac21 100644 (file)
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \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
- * To change the look and feel of a chart, see the {@link #chartStyle} and {@link #extraStyle} config options.\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-backgroundColor"></div>/**\r
-     * @cfg {String} backgroundColor\r
-     * @hide\r
-     */\r
-\r
-    <div id="cfg-Ext.chart.Chart-chartStyle"></div>/**\r
-     * @cfg {Object} chartStyle\r
-     * Sets styles for this chart. This contains default styling, so modifying this property will <b>override</b>\r
-     * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling. \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
-     * For a detailed list of the options available, visit the YUI Charts site \r
-     * at <a href="http://developer.yahoo.com/yui/charts/#basicstyles">http://developer.yahoo.com/yui/charts/#basicstyles</a><br/>\r
-     * Some of the options availabe:<br />\r
-     * <ul style="padding:5px;padding-left:16px;list-style-type:inherit;">\r
-     * <li><b>padding</b> - The space around the edge of the chart's contents. Padding does not increase the size of the chart.</li>\r
-     * <li><b>animationEnabled</b> - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.</li>\r
-     * <li><b>font</b> - An Object defining the font style to be used in the chart. Defaults to <tt>{ name: 'Tahoma', color: 0x444444, size: 11 }</tt><br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>name</b> - font name</li>\r
-     *      <li><b>color</b> - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>\r
-     *      <li><b>size</b> - font size in points (numeric portion only, ie: 11)</li>\r
-     *      <li><b>bold</b> - boolean</li>\r
-     *      <li><b>italic</b> - boolean</li>\r
-     *      <li><b>underline</b> - boolean</li>\r
-     *  </ul>\r
-     * </li>\r
-     * <li><b>border</b> - An object defining the border style around the chart. The chart itself will decrease in dimensions to accomodate the border.<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>\r
-     *      <li><b>size</b> - border size in pixels (numeric portion only, ie: 1)</li>\r
-     *  </ul>\r
-     * </li>\r
-     * <li><b>background</b> - An object defining the background style of the chart.<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>\r
-     *      <li><b>image</b> - an image URL. May be relative to the current document or absolute.</li>\r
-     *  </ul>\r
-     * </li>\r
-     * <li><b>legend</b> - An object defining the legend style<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>display</b> - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".</li>\r
-     *      <li><b>spacing</b> - an image URL. May be relative to the current document or absolute.</li>\r
-     *      <li><b>padding, border, background, font</b> - same options as described above.</li>\r
-     *  </ul></li>\r
-     * <li><b>dataTip</b> - An object defining the style of the data tip (tooltip).<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>padding, border, background, font</b> - same options as described above.</li>\r
-     *  </ul></li>\r
-     * <li><b>xAxis and yAxis</b> - An object defining the style of the style of either axis.<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>color</b> - same option as described above.</li>\r
-     *      <li><b>size</b> - same option as described above.</li>\r
-     *      <li><b>showLabels</b> - boolean</li>\r
-     *      <li><b>labelRotation</b> - a value in degrees from -90 through 90. Default is zero.</li>\r
-     *  </ul></li>\r
-     * <li><b>majorGridLines and minorGridLines</b> - An object defining the style of the style of the grid lines.<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>color, size</b> - same options as described above.</li>\r
-     *  </ul></li></li>\r
-     * <li><b>zeroGridLine</b> - An object defining the style of the style of the zero grid line.<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>color, size</b> - same options as described above.</li>\r
-     *  </ul></li></li>\r
-     * <li><b>majorTicks and minorTicks</b> - An object defining the style of the style of ticks in the chart.<br/>\r
-     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">\r
-     *      <li><b>color, size</b> - same options as described above.</li>\r
-     *      <li><b>length</b> - the length of each tick in pixels extending from the axis.</li>\r
-     *      <li><b>display</b> - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".</li>\r
-     *  </ul></li></li>\r
-     * </ul>\r
-     */\r
-    extraStyle: null,\r
-    \r
-    <div id="cfg-Ext.chart.Chart-seriesStyles"></div>/**\r
-     * @cfg {Object} seriesStyles\r
-     * Contains styles to apply to the series after a refresh. Defaults to <tt>null</tt>.\r
-     */\r
-    seriesStyles: 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
-            <div id="event-Ext.chart.Chart-beforerefresh"></div>/**\r
-             * @event beforerefresh\r
-             * Fires before a refresh to the chart data is called.  If the beforerefresh handler returns\r
-             * <tt>false</tt> the {@link #refresh} action will be cancelled.\r
-             * @param {Chart} this\r
-             */\r
-            'beforerefresh',\r
-            <div id="event-Ext.chart.Chart-refresh"></div>/**\r
-             * @event refresh\r
-             * Fires after the chart data has been refreshed.\r
-             * @param {Chart} this\r
-             */\r
-            'refresh'\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
-        this.seriesStyles = 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
-            if(store !== this.store && this.store.autoDestroy){\r
-                this.store.destroy();\r
-            }else{\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
-            }\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
-        if(this.fireEvent('beforerefresh', this) !== false){\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
-               if(this.seriesStyles){\r
-                   this.setSeriesStyles(this.seriesStyles);\r
-               }\r
-            this.fireEvent('refresh', this);\r
-        }\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
-        this.bindStore(null);\r
-        var tip = this.tipFnName;\r
-        if(!Ext.isEmpty(tip)){\r
-            delete window[tip];\r
-        }\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>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.2.2
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.chart.Chart"></div>/**
+ * @class Ext.chart.Chart
+ * @extends Ext.FlashComponent
+ * The Ext.chart package provides the capability to visualize data with flash based charting.
+ * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
+ * To change the look and feel of a chart, see the {@link #chartStyle} and {@link #extraStyle} config options.
+ * @constructor
+ * @xtype chart
+ */
+
+ Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {
+    refreshBuffer: 100,
+
+    <div id="cfg-Ext.chart.Chart-backgroundColor"></div>/**
+     * @cfg {String} backgroundColor
+     * @hide
+     */
+
+    <div id="cfg-Ext.chart.Chart-chartStyle"></div>/**
+     * @cfg {Object} chartStyle
+     * Sets styles for this chart. This contains default styling, so modifying this property will <b>override</b>
+     * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling.
+     */
+    chartStyle: {
+        padding: 10,
+        animationEnabled: true,
+        font: {
+            name: 'Tahoma',
+            color: 0x444444,
+            size: 11
+        },
+        dataTip: {
+            padding: 5,
+            border: {
+                color: 0x99bbe8,
+                size:1
+            },
+            background: {
+                color: 0xDAE7F6,
+                alpha: .9
+            },
+            font: {
+                name: 'Tahoma',
+                color: 0x15428B,
+                size: 10,
+                bold: true
+            }
+        }
+    },
+
+    <div id="cfg-Ext.chart.Chart-url"></div>/**
+     * @cfg {String} url
+     * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should
+     * be modified to point to the local charts resource.
+     */
+
+    <div id="cfg-Ext.chart.Chart-extraStyle"></div>/**
+     * @cfg {Object} extraStyle
+     * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to <tt>null</tt>.
+     * For a detailed list of the options available, visit the YUI Charts site
+     * at <a href="http://developer.yahoo.com/yui/charts/#basicstyles">http://developer.yahoo.com/yui/charts/#basicstyles</a><br/>
+     * Some of the options availabe:<br />
+     * <ul style="padding:5px;padding-left:16px;list-style-type:inherit;">
+     * <li><b>padding</b> - The space around the edge of the chart's contents. Padding does not increase the size of the chart.</li>
+     * <li><b>animationEnabled</b> - A Boolean value that specifies whether marker animations are enabled or not. Enabled by default.</li>
+     * <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/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>name</b> - font name</li>
+     *      <li><b>color</b> - font color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>
+     *      <li><b>size</b> - font size in points (numeric portion only, ie: 11)</li>
+     *      <li><b>bold</b> - boolean</li>
+     *      <li><b>italic</b> - boolean</li>
+     *      <li><b>underline</b> - boolean</li>
+     *  </ul>
+     * </li>
+     * <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/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>
+     *      <li><b>size</b> - border size in pixels (numeric portion only, ie: 1)</li>
+     *  </ul>
+     * </li>
+     * <li><b>background</b> - An object defining the background style of the chart.<br/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>color</b> - border color (hex code, ie: "#ff0000", "ff0000" or 0xff0000)</li>
+     *      <li><b>image</b> - an image URL. May be relative to the current document or absolute.</li>
+     *  </ul>
+     * </li>
+     * <li><b>legend</b> - An object defining the legend style<br/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>display</b> - location of the legend. Possible values are "none", "left", "right", "top", and "bottom".</li>
+     *      <li><b>spacing</b> - an image URL. May be relative to the current document or absolute.</li>
+     *      <li><b>padding, border, background, font</b> - same options as described above.</li>
+     *  </ul></li>
+     * <li><b>dataTip</b> - An object defining the style of the data tip (tooltip).<br/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>padding, border, background, font</b> - same options as described above.</li>
+     *  </ul></li>
+     * <li><b>xAxis and yAxis</b> - An object defining the style of the style of either axis.<br/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>color</b> - same option as described above.</li>
+     *      <li><b>size</b> - same option as described above.</li>
+     *      <li><b>showLabels</b> - boolean</li>
+     *      <li><b>labelRotation</b> - a value in degrees from -90 through 90. Default is zero.</li>
+     *  </ul></li>
+     * <li><b>majorGridLines and minorGridLines</b> - An object defining the style of the style of the grid lines.<br/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>color, size</b> - same options as described above.</li>
+     *  </ul></li></li>
+     * <li><b>zeroGridLine</b> - An object defining the style of the style of the zero grid line.<br/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>color, size</b> - same options as described above.</li>
+     *  </ul></li></li>
+     * <li><b>majorTicks and minorTicks</b> - An object defining the style of the style of ticks in the chart.<br/>
+     *  <ul style="padding:5px;padding-left:26px;list-style-type:circle;">
+     *      <li><b>color, size</b> - same options as described above.</li>
+     *      <li><b>length</b> - the length of each tick in pixels extending from the axis.</li>
+     *      <li><b>display</b> - how the ticks are drawn. Possible values are "none", "inside", "outside", and "cross".</li>
+     *  </ul></li></li>
+     * </ul>
+     */
+    extraStyle: null,
+
+    <div id="cfg-Ext.chart.Chart-seriesStyles"></div>/**
+     * @cfg {Object} seriesStyles
+     * Contains styles to apply to the series after a refresh. Defaults to <tt>null</tt>.
+     */
+    seriesStyles: null,
+
+    <div id="cfg-Ext.chart.Chart-disableCaching"></div>/**
+     * @cfg {Boolean} disableCaching
+     * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
+     */
+    disableCaching: Ext.isIE || Ext.isOpera,
+    disableCacheParam: '_dc',
+
+    initComponent : function(){
+        Ext.chart.Chart.superclass.initComponent.call(this);
+        if(!this.url){
+            this.url = Ext.chart.Chart.CHART_URL;
+        }
+        if(this.disableCaching){
+            this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));
+        }
+        this.addEvents(
+            'itemmouseover',
+            'itemmouseout',
+            'itemclick',
+            'itemdoubleclick',
+            'itemdragstart',
+            'itemdrag',
+            'itemdragend',
+            <div id="event-Ext.chart.Chart-beforerefresh"></div>/**
+             * @event beforerefresh
+             * Fires before a refresh to the chart data is called.  If the beforerefresh handler returns
+             * <tt>false</tt> the {@link #refresh} action will be cancelled.
+             * @param {Chart} this
+             */
+            'beforerefresh',
+            <div id="event-Ext.chart.Chart-refresh"></div>/**
+             * @event refresh
+             * Fires after the chart data has been refreshed.
+             * @param {Chart} this
+             */
+            'refresh'
+        );
+        this.store = Ext.StoreMgr.lookup(this.store);
+    },
+
+    <div id="method-Ext.chart.Chart-setStyle"></div>/**
+     * Sets a single style value on the Chart instance.
+     *
+     * @param name {String} Name of the Chart style value to change.
+     * @param value {Object} New value to pass to the Chart style.
+     */
+     setStyle: function(name, value){
+         this.swf.setStyle(name, Ext.encode(value));
+     },
+
+    <div id="method-Ext.chart.Chart-setStyles"></div>/**
+     * Resets all styles on the Chart instance.
+     *
+     * @param styles {Object} Initializer for all Chart styles.
+     */
+    setStyles: function(styles){
+        this.swf.setStyles(Ext.encode(styles));
+    },
+
+    <div id="method-Ext.chart.Chart-setSeriesStyles"></div>/**
+     * Sets the styles on all series in the Chart.
+     *
+     * @param styles {Array} Initializer for all Chart series styles.
+     */
+    setSeriesStyles: function(styles){
+        this.seriesStyles = styles;
+        var s = [];
+        Ext.each(styles, function(style){
+            s.push(Ext.encode(style));
+        });
+        this.swf.setSeriesStyles(s);
+    },
+
+    setCategoryNames : function(names){
+        this.swf.setCategoryNames(names);
+    },
+
+    setLegendRenderer : function(fn, scope){
+        var chart = this;
+        scope = scope || chart;
+        chart.removeFnProxy(chart.legendFnName);
+        chart.legendFnName = chart.createFnProxy(function(name){
+            return fn.call(scope, name);
+        });
+        chart.swf.setLegendLabelFunction(chart.legendFnName);
+    },
+
+    setTipRenderer : function(fn, scope){
+        var chart = this;
+        scope = scope || chart;
+        chart.removeFnProxy(chart.tipFnName);
+        chart.tipFnName = chart.createFnProxy(function(item, index, series){
+            var record = chart.store.getAt(index);
+            return fn.call(scope, chart, record, index, series);
+        });
+        chart.swf.setDataTipFunction(chart.tipFnName);
+    },
+
+    setSeries : function(series){
+        this.series = series;
+        this.refresh();
+    },
+
+    <div id="method-Ext.chart.Chart-bindStore"></div>/**
+     * Changes the data store bound to this chart and refreshes it.
+     * @param {Store} store The store to bind to this chart
+     */
+    bindStore : function(store, initial){
+        if(!initial && this.store){
+            if(store !== this.store && this.store.autoDestroy){
+                this.store.destroy();
+            }else{
+                this.store.un("datachanged", this.refresh, this);
+                this.store.un("add", this.delayRefresh, this);
+                this.store.un("remove", this.delayRefresh, this);
+                this.store.un("update", this.delayRefresh, this);
+                this.store.un("clear", this.refresh, this);
+            }
+        }
+        if(store){
+            store = Ext.StoreMgr.lookup(store);
+            store.on({
+                scope: this,
+                datachanged: this.refresh,
+                add: this.delayRefresh,
+                remove: this.delayRefresh,
+                update: this.delayRefresh,
+                clear: this.refresh
+            });
+        }
+        this.store = store;
+        if(store && !initial){
+            this.refresh();
+        }
+    },
+
+    onSwfReady : function(isReset){
+        Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
+        var ref;
+        this.swf.setType(this.type);
+
+        if(this.chartStyle){
+            this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle));
+        }
+
+        if(this.categoryNames){
+            this.setCategoryNames(this.categoryNames);
+        }
+
+        if(this.tipRenderer){
+            ref = this.getFunctionRef(this.tipRenderer);
+            this.setTipRenderer(ref.fn, ref.scope);
+        }
+        if(this.legendRenderer){
+            ref = this.getFunctionRef(this.legendRenderer);
+            this.setLegendRenderer(ref.fn, ref.scope);
+        }
+        if(!isReset){
+            this.bindStore(this.store, true);
+        }
+        this.refresh.defer(10, this);
+    },
+
+    delayRefresh : function(){
+        if(!this.refreshTask){
+            this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);
+        }
+        this.refreshTask.delay(this.refreshBuffer);
+    },
+
+    refresh : function(){
+        if(this.fireEvent('beforerefresh', this) !== false){
+            var styleChanged = false;
+            // convert the store data into something YUI charts can understand
+            var data = [], rs = this.store.data.items;
+            for(var j = 0, len = rs.length; j < len; j++){
+                data[j] = rs[j].data;
+            }
+            //make a copy of the series definitions so that we aren't
+            //editing them directly.
+            var dataProvider = [];
+            var seriesCount = 0;
+            var currentSeries = null;
+            var i = 0;
+            if(this.series){
+                seriesCount = this.series.length;
+                for(i = 0; i < seriesCount; i++){
+                    currentSeries = this.series[i];
+                    var clonedSeries = {};
+                    for(var prop in currentSeries){
+                        if(prop == "style" && currentSeries.style !== null){
+                            clonedSeries.style = Ext.encode(currentSeries.style);
+                            styleChanged = true;
+                            //we don't want to modify the styles again next time
+                            //so null out the style property.
+                            // this causes issues
+                            // currentSeries.style = null;
+                        } else{
+                            clonedSeries[prop] = currentSeries[prop];
+                        }
+                    }
+                    dataProvider.push(clonedSeries);
+                }
+            }
+
+            if(seriesCount > 0){
+                for(i = 0; i < seriesCount; i++){
+                    currentSeries = dataProvider[i];
+                    if(!currentSeries.type){
+                        currentSeries.type = this.type;
+                    }
+                    currentSeries.dataProvider = data;
+                }
+            } else{
+                dataProvider.push({type: this.type, dataProvider: data});
+            }
+            this.swf.setDataProvider(dataProvider);
+            if(this.seriesStyles){
+                this.setSeriesStyles(this.seriesStyles);
+            }
+            this.fireEvent('refresh', this);
+        }
+    },
+
+    // private
+    createFnProxy : function(fn){
+        var fnName = 'extFnProxy' + (++Ext.chart.Chart.PROXY_FN_ID);
+        Ext.chart.Chart.proxyFunction[fnName] = fn;
+        return 'Ext.chart.Chart.proxyFunction.' + fnName;
+    },
+
+    // private
+    removeFnProxy : function(fn){
+        if(!Ext.isEmpty(fn)){
+            fn = fn.replace('Ext.chart.Chart.proxyFunction.', '');
+            delete Ext.chart.Chart.proxyFunction[fn];
+        }
+    },
+
+    // private
+    getFunctionRef : function(val){
+        if(Ext.isFunction(val)){
+            return {
+                fn: val,
+                scope: this
+            };
+        }else{
+            return {
+                fn: val.fn,
+                scope: val.scope || this
+            }
+        }
+    },
+
+    // private
+    onDestroy: function(){
+        if (this.refreshTask && this.refreshTask.cancel){
+            this.refreshTask.cancel();
+        }
+        Ext.chart.Chart.superclass.onDestroy.call(this);
+        this.bindStore(null);
+        this.removeFnProxy(this.tipFnName);
+        this.removeFnProxy(this.legendFnName);
+    }
+});
+Ext.reg('chart', Ext.chart.Chart);
+Ext.chart.Chart.PROXY_FN_ID = 0;
+Ext.chart.Chart.proxyFunction = {};
+
+<div id="prop-Ext.chart.Chart-CHART_URL"></div>/**
+ * Sets the url to load the chart from. This should be set to a local resource.
+ * @static
+ * @type String
+ */
+Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.8.0/build/charts/assets/charts.swf';
+
+<div id="cls-Ext.chart.PieChart"></div>/**
+ * @class Ext.chart.PieChart
+ * @extends Ext.chart.Chart
+ * @constructor
+ * @xtype piechart
+ */
+Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {
+    type: 'pie',
+
+    onSwfReady : function(isReset){
+        Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);
+
+        this.setDataField(this.dataField);
+        this.setCategoryField(this.categoryField);
+    },
+
+    setDataField : function(field){
+        this.dataField = field;
+        this.swf.setDataField(field);
+    },
+
+    setCategoryField : function(field){
+        this.categoryField = field;
+        this.swf.setCategoryField(field);
+    }
+});
+Ext.reg('piechart', Ext.chart.PieChart);
+
+<div id="cls-Ext.chart.CartesianChart"></div>/**
+ * @class Ext.chart.CartesianChart
+ * @extends Ext.chart.Chart
+ * @constructor
+ * @xtype cartesianchart
+ */
+Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {
+    onSwfReady : function(isReset){
+        Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);
+        this.labelFn = [];
+        if(this.xField){
+            this.setXField(this.xField);
+        }
+        if(this.yField){
+            this.setYField(this.yField);
+        }
+        if(this.xAxis){
+            this.setXAxis(this.xAxis);
+        }
+        if(this.xAxes){
+            this.setXAxes(this.xAxes);
+        }
+        if(this.yAxis){
+            this.setYAxis(this.yAxis);
+        }
+        if(this.yAxes){
+            this.setYAxes(this.yAxes);
+        }
+        if(Ext.isDefined(this.constrainViewport)){
+            this.swf.setConstrainViewport(this.constrainViewport);
+        }
+    },
+
+    setXField : function(value){
+        this.xField = value;
+        this.swf.setHorizontalField(value);
+    },
+
+    setYField : function(value){
+        this.yField = value;
+        this.swf.setVerticalField(value);
+    },
+
+    setXAxis : function(value){
+        this.xAxis = this.createAxis('xAxis', value);
+        this.swf.setHorizontalAxis(this.xAxis);
+    },
+
+    setXAxes : function(value){
+        var axis;
+        for(var i = 0; i < value.length; i++) {
+            axis = this.createAxis('xAxis' + i, value[i]);
+            this.swf.setHorizontalAxis(axis);
+        }
+    },
+
+    setYAxis : function(value){
+        this.yAxis = this.createAxis('yAxis', value);
+        this.swf.setVerticalAxis(this.yAxis);
+    },
+
+    setYAxes : function(value){
+        var axis;
+        for(var i = 0; i < value.length; i++) {
+            axis = this.createAxis('yAxis' + i, value[i]);
+            this.swf.setVerticalAxis(axis);
+        }
+    },
+
+    createAxis : function(axis, value){
+        var o = Ext.apply({}, value),
+            ref,
+            old;
+
+        if(this[axis]){
+            old = this[axis].labelFunction;
+            this.removeFnProxy(old);
+            this.labelFn.remove(old);
+        }
+        if(o.labelRenderer){
+            ref = this.getFunctionRef(o.labelRenderer);
+            o.labelFunction = this.createFnProxy(function(v){
+                return ref.fn.call(ref.scope, v);
+            });
+            delete o.labelRenderer;
+            this.labelFn.push(o.labelFunction);
+        }
+        if(axis.indexOf('xAxis') > -1 && o.position == 'left'){
+            o.position = 'bottom';
+        }
+        return o;
+    },
+
+    onDestroy : function(){
+        Ext.chart.CartesianChart.superclass.onDestroy.call(this);
+        Ext.each(this.labelFn, function(fn){
+            this.removeFnProxy(fn);
+        }, this);
+    }
+});
+Ext.reg('cartesianchart', Ext.chart.CartesianChart);
+
+<div id="cls-Ext.chart.LineChart"></div>/**
+ * @class Ext.chart.LineChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype linechart
+ */
+Ext.chart.LineChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'line'
+});
+Ext.reg('linechart', Ext.chart.LineChart);
+
+<div id="cls-Ext.chart.ColumnChart"></div>/**
+ * @class Ext.chart.ColumnChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype columnchart
+ */
+Ext.chart.ColumnChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'column'
+});
+Ext.reg('columnchart', Ext.chart.ColumnChart);
+
+<div id="cls-Ext.chart.StackedColumnChart"></div>/**
+ * @class Ext.chart.StackedColumnChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype stackedcolumnchart
+ */
+Ext.chart.StackedColumnChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'stackcolumn'
+});
+Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);
+
+<div id="cls-Ext.chart.BarChart"></div>/**
+ * @class Ext.chart.BarChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype barchart
+ */
+Ext.chart.BarChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'bar'
+});
+Ext.reg('barchart', Ext.chart.BarChart);
+
+<div id="cls-Ext.chart.StackedBarChart"></div>/**
+ * @class Ext.chart.StackedBarChart
+ * @extends Ext.chart.CartesianChart
+ * @constructor
+ * @xtype stackedbarchart
+ */
+Ext.chart.StackedBarChart = Ext.extend(Ext.chart.CartesianChart, {
+    type: 'stackbar'
+});
+Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);
+
+
+
+<div id="cls-Ext.chart.Axis"></div>/**
+ * @class Ext.chart.Axis
+ * Defines a CartesianChart's vertical or horizontal axis.
+ * @constructor
+ */
+Ext.chart.Axis = function(config){
+    Ext.apply(this, config);
+};
+
+Ext.chart.Axis.prototype =
+{
+    <div id="prop-Ext.chart.Axis-type"></div>/**
+     * The type of axis.
+     *
+     * @property type
+     * @type String
+     */
+    type: null,
+
+    <div id="prop-Ext.chart.Axis-orientation"></div>/**
+     * The direction in which the axis is drawn. May be "horizontal" or "vertical".
+     *
+     * @property orientation
+     * @type String
+     */
+    orientation: "horizontal",
+
+    <div id="prop-Ext.chart.Axis-reverse"></div>/**
+     * If true, the items on the axis will be drawn in opposite direction.
+     *
+     * @property reverse
+     * @type Boolean
+     */
+    reverse: false,
+
+    <div id="prop-Ext.chart.Axis-labelFunction"></div>/**
+     * A string reference to the globally-accessible function that may be called to
+     * determine each of the label values for this axis.
+     *
+     * @property labelFunction
+     * @type String
+     */
+    labelFunction: null,
+
+    <div id="prop-Ext.chart.Axis-hideOverlappingLabels"></div>/**
+     * If true, labels that overlap previously drawn labels on the axis will be hidden.
+     *
+     * @property hideOverlappingLabels
+     * @type Boolean
+     */
+    hideOverlappingLabels: true,
+
+    <div id="prop-Ext.chart.Axis-labelSpacing"></div>/**
+     * The space, in pixels, between labels on an axis.
+     *
+     * @property labelSpacing
+     * @type Number
+     */
+    labelSpacing: 2
+};
+
+<div id="cls-Ext.chart.NumericAxis"></div>/**
+ * @class Ext.chart.NumericAxis
+ * @extends Ext.chart.Axis
+ * A type of axis whose units are measured in numeric values.
+ * @constructor
+ */
+Ext.chart.NumericAxis = Ext.extend(Ext.chart.Axis, {
+    type: "numeric",
+
+    <div id="prop-Ext.chart.NumericAxis-minimum"></div>/**
+     * The minimum value drawn by the axis. If not set explicitly, the axis
+     * minimum will be calculated automatically.
+     *
+     * @property minimum
+     * @type Number
+     */
+    minimum: NaN,
+
+    <div id="prop-Ext.chart.NumericAxis-maximum"></div>/**
+     * The maximum value drawn by the axis. If not set explicitly, the axis
+     * maximum will be calculated automatically.
+     *
+     * @property maximum
+     * @type Number
+     */
+    maximum: NaN,
+
+    <div id="prop-Ext.chart.NumericAxis-majorUnit"></div>/**
+     * The spacing between major intervals on this axis.
+     *
+     * @property majorUnit
+     * @type Number
+     */
+    majorUnit: NaN,
+
+    <div id="prop-Ext.chart.NumericAxis-minorUnit"></div>/**
+     * The spacing between minor intervals on this axis.
+     *
+     * @property minorUnit
+     * @type Number
+     */
+    minorUnit: NaN,
+
+    <div id="prop-Ext.chart.NumericAxis-snapToUnits"></div>/**
+     * If true, the labels, ticks, gridlines, and other objects will snap to the
+     * nearest major or minor unit. If false, their position will be based on
+     * the minimum value.
+     *
+     * @property snapToUnits
+     * @type Boolean
+     */
+    snapToUnits: true,
+
+    <div id="prop-Ext.chart.NumericAxis-alwaysShowZero"></div>/**
+     * If true, and the bounds are calculated automatically, either the minimum
+     * or maximum will be set to zero.
+     *
+     * @property alwaysShowZero
+     * @type Boolean
+     */
+    alwaysShowZero: true,
+
+    <div id="prop-Ext.chart.NumericAxis-scale"></div>/**
+     * The scaling algorithm to use on this axis. May be "linear" or
+     * "logarithmic".
+     *
+     * @property scale
+     * @type String
+     */
+    scale: "linear",
+
+    <div id="prop-Ext.chart.NumericAxis-roundMajorUnit"></div>/**
+     * Indicates whether to round the major unit.
+     *
+     * @property roundMajorUnit
+     * @type Boolean
+     */
+    roundMajorUnit: true,
+
+    <div id="prop-Ext.chart.NumericAxis-calculateByLabelSize"></div>/**
+     * Indicates whether to factor in the size of the labels when calculating a
+     * major unit.
+     *
+     * @property calculateByLabelSize
+     * @type Boolean
+     */
+    calculateByLabelSize: true,
+
+    <div id="prop-Ext.chart.NumericAxis-position"></div>/**
+     * Indicates the position of the axis relative to the chart
+     *
+     * @property position
+     * @type String
+     */
+    position: 'left',
+
+    <div id="prop-Ext.chart.NumericAxis-adjustMaximumByMajorUnit"></div>/**
+     * Indicates whether to extend maximum beyond data's maximum to the nearest
+     * majorUnit.
+     *
+     * @property adjustMaximumByMajorUnit
+     * @type Boolean
+     */
+    adjustMaximumByMajorUnit: true,
+
+    <div id="prop-Ext.chart.NumericAxis-adjustMinimumByMajorUnit"></div>/**
+     * Indicates whether to extend the minimum beyond data's minimum to the
+     * nearest majorUnit.
+     *
+     * @property adjustMinimumByMajorUnit
+     * @type Boolean
+     */
+    adjustMinimumByMajorUnit: true
+
+});
+
+<div id="cls-Ext.chart.TimeAxis"></div>/**
+ * @class Ext.chart.TimeAxis
+ * @extends Ext.chart.Axis
+ * A type of axis whose units are measured in time-based values.
+ * @constructor
+ */
+Ext.chart.TimeAxis = Ext.extend(Ext.chart.Axis, {
+    type: "time",
+
+    <div id="prop-Ext.chart.TimeAxis-minimum"></div>/**
+     * The minimum value drawn by the axis. If not set explicitly, the axis
+     * minimum will be calculated automatically.
+     *
+     * @property minimum
+     * @type Date
+     */
+    minimum: null,
+
+    <div id="prop-Ext.chart.TimeAxis-maximum"></div>/**
+     * The maximum value drawn by the axis. If not set explicitly, the axis
+     * maximum will be calculated automatically.
+     *
+     * @property maximum
+     * @type Number
+     */
+    maximum: null,
+
+    <div id="prop-Ext.chart.TimeAxis-majorUnit"></div>/**
+     * The spacing between major intervals on this axis.
+     *
+     * @property majorUnit
+     * @type Number
+     */
+    majorUnit: NaN,
+
+    <div id="prop-Ext.chart.TimeAxis-majorTimeUnit"></div>/**
+     * The time unit used by the majorUnit.
+     *
+     * @property majorTimeUnit
+     * @type String
+     */
+    majorTimeUnit: null,
+
+    <div id="prop-Ext.chart.TimeAxis-majorUnit"></div>/**
+     * The spacing between minor intervals on this axis.
+     *
+     * @property majorUnit
+     * @type Number
+     */
+    minorUnit: NaN,
+
+    <div id="prop-Ext.chart.TimeAxis-majorTimeUnit"></div>/**
+     * The time unit used by the minorUnit.
+     *
+     * @property majorTimeUnit
+     * @type String
+     */
+    minorTimeUnit: null,
+
+    <div id="prop-Ext.chart.TimeAxis-snapToUnits"></div>/**
+     * If true, the labels, ticks, gridlines, and other objects will snap to the
+     * nearest major or minor unit. If false, their position will be based on
+     * the minimum value.
+     *
+     * @property snapToUnits
+     * @type Boolean
+     */
+    snapToUnits: true,
+
+    <div id="prop-Ext.chart.TimeAxis-stackingEnabled"></div>/**
+     * Series that are stackable will only stack when this value is set to true.
+     *
+     * @property stackingEnabled
+     * @type Boolean
+     */
+    stackingEnabled: false,
+
+    <div id="prop-Ext.chart.TimeAxis-calculateByLabelSize"></div>/**
+     * Indicates whether to factor in the size of the labels when calculating a
+     * major unit.
+     *
+     * @property calculateByLabelSize
+     * @type Boolean
+     */
+    calculateByLabelSize: true
+
+});
+
+<div id="cls-Ext.chart.CategoryAxis"></div>/**
+ * @class Ext.chart.CategoryAxis
+ * @extends Ext.chart.Axis
+ * A type of axis that displays items in categories.
+ * @constructor
+ */
+Ext.chart.CategoryAxis = Ext.extend(Ext.chart.Axis, {
+    type: "category",
+
+    <div id="prop-Ext.chart.CategoryAxis-categoryNames"></div>/**
+     * A list of category names to display along this axis.
+     *
+     * @property categoryNames
+     * @type Array
+     */
+    categoryNames: null,
+
+    <div id="prop-Ext.chart.CategoryAxis-calculateCategoryCount"></div>/**
+     * Indicates whether or not to calculate the number of categories (ticks and
+     * labels) when there is not enough room to display all labels on the axis.
+     * If set to true, the axis will determine the number of categories to plot.
+     * If not, all categories will be plotted.
+     *
+     * @property calculateCategoryCount
+     * @type Boolean
+     */
+    calculateCategoryCount: false
+
+});
+
+<div id="cls-Ext.chart.Series"></div>/**
+ * @class Ext.chart.Series
+ * Series class for the charts widget.
+ * @constructor
+ */
+Ext.chart.Series = function(config) { Ext.apply(this, config); };
+
+Ext.chart.Series.prototype =
+{
+    <div id="prop-Ext.chart.Series-type"></div>/**
+     * The type of series.
+     *
+     * @property type
+     * @type String
+     */
+    type: null,
+
+    <div id="prop-Ext.chart.Series-displayName"></div>/**
+     * The human-readable name of the series.
+     *
+     * @property displayName
+     * @type String
+     */
+    displayName: null
+};
+
+<div id="cls-Ext.chart.CartesianSeries"></div>/**
+ * @class Ext.chart.CartesianSeries
+ * @extends Ext.chart.Series
+ * CartesianSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {
+    <div id="prop-Ext.chart.CartesianSeries-xField"></div>/**
+     * The field used to access the x-axis value from the items from the data
+     * source.
+     *
+     * @property xField
+     * @type String
+     */
+    xField: null,
+
+    <div id="prop-Ext.chart.CartesianSeries-yField"></div>/**
+     * The field used to access the y-axis value from the items from the data
+     * source.
+     *
+     * @property yField
+     * @type String
+     */
+    yField: null,
+
+    <div id="prop-Ext.chart.CartesianSeries-showInLegend"></div>/**
+     * False to not show this series in the legend. Defaults to <tt>true</tt>.
+     *
+     * @property showInLegend
+     * @type Boolean
+     */
+    showInLegend: true,
+
+    <div id="prop-Ext.chart.CartesianSeries-axis"></div>/**
+     * Indicates which axis the series will bind to
+     *
+     * @property axis
+     * @type String
+     */
+    axis: 'primary'
+});
+
+<div id="cls-Ext.chart.ColumnSeries"></div>/**
+ * @class Ext.chart.ColumnSeries
+ * @extends Ext.chart.CartesianSeries
+ * ColumnSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {
+    type: "column"
+});
+
+<div id="cls-Ext.chart.LineSeries"></div>/**
+ * @class Ext.chart.LineSeries
+ * @extends Ext.chart.CartesianSeries
+ * LineSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {
+    type: "line"
+});
+
+<div id="cls-Ext.chart.BarSeries"></div>/**
+ * @class Ext.chart.BarSeries
+ * @extends Ext.chart.CartesianSeries
+ * BarSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {
+    type: "bar"
+});
+
+
+<div id="cls-Ext.chart.PieSeries"></div>/**
+ * @class Ext.chart.PieSeries
+ * @extends Ext.chart.Series
+ * PieSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {
+    type: "pie",
+    dataField: null,
+    categoryField: null
+});</pre>    
+</body>
 </html>
\ No newline at end of file