X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..10a866c12701c0a0afd0ac85dcdcf32a421514ac:/docs/source/Chart.html diff --git a/docs/source/Chart.html b/docs/source/Chart.html index ec59f433..e3881a5a 100644 --- a/docs/source/Chart.html +++ b/docs/source/Chart.html @@ -1,5 +1,6 @@ + The source code @@ -10,17 +11,23 @@ * @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, + +
/** + * @cfg {String} backgroundColor + * @hide + */
/** * @cfg {Object} chartStyle - * Sets styles for this chart. Contains a number of default values. Modifying this property will override - * the base styles on the chart. + * Sets styles for this chart. This contains default styling, so modifying this property will override + * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling. */ chartStyle: { padding: 10, @@ -58,9 +65,75 @@
/** * @cfg {Object} extraStyle * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null. + * For a detailed list of the options available, visit the YUI Charts site + * at http://developer.yahoo.com/yui/charts/#basicstyles
+ * Some of the options availabe:
+ * */ extraStyle: null, +
/** + * @cfg {Object} seriesStyles + * Contains styles to apply to the series after a refresh. Defaults to null. + */ + seriesStyles: null, +
/** * @cfg {Boolean} disableCaching * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE. @@ -83,7 +156,20 @@ 'itemdoubleclick', 'itemdragstart', 'itemdrag', - 'itemdragend' + 'itemdragend', +
/** + * @event beforerefresh + * Fires before a refresh to the chart data is called. If the beforerefresh handler returns + * false the {@link #refresh} action will be cancelled. + * @param {Chart} this + */ + 'beforerefresh', +
/** + * @event refresh + * Fires after the chart data has been refreshed. + * @param {Chart} this + */ + 'refresh' ); this.store = Ext.StoreMgr.lookup(this.store); }, @@ -113,6 +199,7 @@ * @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)); @@ -144,13 +231,14 @@ */ bindStore : function(store, initial){ if(!initial && this.store){ - 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 !== 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){ @@ -175,7 +263,7 @@ this.swf.setType(this.type); if(this.chartStyle){ - this.setStyles(Ext.apply(this.extraStyle || {}, this.chartStyle)); + this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle)); } if(this.categoryNames){ @@ -199,51 +287,57 @@ }, refresh : function(){ - 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(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); } - - 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); }, createFnProxy : function(fn, old){ @@ -257,7 +351,11 @@ onDestroy: function(){ Ext.chart.Chart.superclass.onDestroy.call(this); - delete window[this.tipFnName]; + this.bindStore(null); + var tip = this.tipFnName; + if(!Ext.isEmpty(tip)){ + delete window[tip]; + } } }); Ext.reg('chart', Ext.chart.Chart);