-<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.0
+ * 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>
git.ithinksw.org / extjs.git / blobdiff