X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/Chart.html
diff --git a/docs/source/Chart.html b/docs/source/Chart.html
new file mode 100644
index 00000000..ec59f433
--- /dev/null
+++ b/docs/source/Chart.html
@@ -0,0 +1,724 @@
+
+
+ The source code
+
+
+
+
+ /**
+ * @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.
+ * @constructor
+ * @xtype chart
+ */
+
+ Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {
+ refreshBuffer: 100,
+
+ /**
+ * @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.
+ */
+ 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
+ }
+ }
+ },
+
+ /**
+ * @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.
+ */
+
+ /**
+ * @cfg {Object} extraStyle
+ * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null.
+ */
+ extraStyle: null,
+
+ /**
+ * @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'
+ );
+ this.store = Ext.StoreMgr.lookup(this.store);
+ },
+
+ /**
+ * 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));
+ },
+
+ /**
+ * Resets all styles on the Chart instance.
+ *
+ * @param styles {Object} Initializer for all Chart styles.
+ */
+ setStyles: function(styles){
+ this.swf.setStyles(Ext.encode(styles));
+ },
+
+ /**
+ * Sets the styles on all series in the Chart.
+ *
+ * @param styles {Array} Initializer for all Chart series styles.
+ */
+ setSeriesStyles: function(styles){
+ var s = [];
+ Ext.each(styles, function(style){
+ s.push(Ext.encode(style));
+ });
+ this.swf.setSeriesStyles(s);
+ },
+
+ setCategoryNames : function(names){
+ this.swf.setCategoryNames(names);
+ },
+
+ setTipRenderer : function(fn){
+ var chart = this;
+ this.tipFnName = this.createFnProxy(function(item, index, series){
+ var record = chart.store.getAt(index);
+ return fn(chart, record, index, series);
+ }, this.tipFnName);
+ this.swf.setDataTipFunction(this.tipFnName);
+ },
+
+ setSeries : function(series){
+ this.series = series;
+ this.refresh();
+ },
+
+ /**
+ * 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){
+ 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();
+ }
+ }
+ 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);
+ 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){
+ this.setTipRenderer(this.tipRenderer);
+ }
+ 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(){
+ 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);
+ },
+
+ createFnProxy : function(fn, old){
+ if(old){
+ delete window[old];
+ }
+ var fnName = "extFnProxy" + (++Ext.chart.Chart.PROXY_FN_ID);
+ window[fnName] = fn;
+ return fnName;
+ },
+
+ onDestroy: function(){
+ Ext.chart.Chart.superclass.onDestroy.call(this);
+ delete window[this.tipFnName];
+ }
+});
+Ext.reg('chart', Ext.chart.Chart);
+Ext.chart.Chart.PROXY_FN_ID = 0;
+
+/**
+ * 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.7.0/build/charts/assets/charts.swf';
+
+/**
+ * @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);
+
+/**
+ * @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);
+
+ if(this.xField){
+ this.setXField(this.xField);
+ }
+ if(this.yField){
+ this.setYField(this.yField);
+ }
+ if(this.xAxis){
+ this.setXAxis(this.xAxis);
+ }
+ if(this.yAxis){
+ this.setYAxis(this.yAxis);
+ }
+ },
+
+ 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);
+ },
+
+ setYAxis : function(value){
+ this.yAxis = this.createAxis('yAxis', value);
+ this.swf.setVerticalAxis(this.yAxis);
+ },
+
+ createAxis : function(axis, value){
+ var o = Ext.apply({}, value), oldFn = null;
+ if(this[axis]){
+ oldFn = this[axis].labelFunction;
+ }
+ if(o.labelRenderer){
+ var fn = o.labelRenderer;
+ o.labelFunction = this.createFnProxy(function(v){
+ return fn(v);
+ }, oldFn);
+ delete o.labelRenderer;
+ }
+ return o;
+ }
+});
+Ext.reg('cartesianchart', Ext.chart.CartesianChart);
+
+/**
+ * @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);
+
+/**
+ * @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);
+
+/**
+ * @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);
+
+/**
+ * @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);
+
+/**
+ * @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);
+
+
+
+/**
+ * @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 =
+{
+ /**
+ * The type of axis.
+ *
+ * @property type
+ * @type String
+ */
+ type: null,
+
+ /**
+ * The direction in which the axis is drawn. May be "horizontal" or "vertical".
+ *
+ * @property orientation
+ * @type String
+ */
+ orientation: "horizontal",
+
+ /**
+ * If true, the items on the axis will be drawn in opposite direction.
+ *
+ * @property reverse
+ * @type Boolean
+ */
+ reverse: false,
+
+ /**
+ * 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,
+
+ /**
+ * If true, labels that overlap previously drawn labels on the axis will be hidden.
+ *
+ * @property hideOverlappingLabels
+ * @type Boolean
+ */
+ hideOverlappingLabels: true
+};
+
+/**
+ * @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",
+
+ /**
+ * The minimum value drawn by the axis. If not set explicitly, the axis minimum
+ * will be calculated automatically.
+ *
+ * @property minimum
+ * @type Number
+ */
+ minimum: NaN,
+
+ /**
+ * The maximum value drawn by the axis. If not set explicitly, the axis maximum
+ * will be calculated automatically.
+ *
+ * @property maximum
+ * @type Number
+ */
+ maximum: NaN,
+
+ /**
+ * The spacing between major intervals on this axis.
+ *
+ * @property majorUnit
+ * @type Number
+ */
+ majorUnit: NaN,
+
+ /**
+ * The spacing between minor intervals on this axis.
+ *
+ * @property minorUnit
+ * @type Number
+ */
+ minorUnit: NaN,
+
+ /**
+ * 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,
+
+ /**
+ * If true, and the bounds are calculated automatically, either the minimum or
+ * maximum will be set to zero.
+ *
+ * @property alwaysShowZero
+ * @type Boolean
+ */
+ alwaysShowZero: true,
+
+ /**
+ * The scaling algorithm to use on this axis. May be "linear" or "logarithmic".
+ *
+ * @property scale
+ * @type String
+ */
+ scale: "linear"
+});
+
+/**
+ * @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",
+
+ /**
+ * The minimum value drawn by the axis. If not set explicitly, the axis minimum
+ * will be calculated automatically.
+ *
+ * @property minimum
+ * @type Date
+ */
+ minimum: null,
+
+ /**
+ * The maximum value drawn by the axis. If not set explicitly, the axis maximum
+ * will be calculated automatically.
+ *
+ * @property maximum
+ * @type Number
+ */
+ maximum: null,
+
+ /**
+ * The spacing between major intervals on this axis.
+ *
+ * @property majorUnit
+ * @type Number
+ */
+ majorUnit: NaN,
+
+ /**
+ * The time unit used by the majorUnit.
+ *
+ * @property majorTimeUnit
+ * @type String
+ */
+ majorTimeUnit: null,
+
+ /**
+ * The spacing between minor intervals on this axis.
+ *
+ * @property majorUnit
+ * @type Number
+ */
+ minorUnit: NaN,
+
+ /**
+ * The time unit used by the minorUnit.
+ *
+ * @property majorTimeUnit
+ * @type String
+ */
+ minorTimeUnit: null,
+
+ /**
+ * 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
+});
+
+/**
+ * @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",
+
+ /**
+ * A list of category names to display along this axis.
+ *
+ * @property categoryNames
+ * @type Array
+ */
+ categoryNames: null
+});
+
+/**
+ * @class Ext.chart.Series
+ * Series class for the charts widget.
+ * @constructor
+ */
+Ext.chart.Series = function(config) { Ext.apply(this, config); };
+
+Ext.chart.Series.prototype =
+{
+ /**
+ * The type of series.
+ *
+ * @property type
+ * @type String
+ */
+ type: null,
+
+ /**
+ * The human-readable name of the series.
+ *
+ * @property displayName
+ * @type String
+ */
+ displayName: null
+};
+
+/**
+ * @class Ext.chart.CartesianSeries
+ * @extends Ext.chart.Series
+ * CartesianSeries class for the charts widget.
+ * @constructor
+ */
+Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {
+ /**
+ * The field used to access the x-axis value from the items from the data source.
+ *
+ * @property xField
+ * @type String
+ */
+ xField: null,
+
+ /**
+ * The field used to access the y-axis value from the items from the data source.
+ *
+ * @property yField
+ * @type String
+ */
+ yField: null
+});
+
+/**
+ * @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"
+});
+
+/**
+ * @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"
+});
+
+/**
+ * @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"
+});
+
+
+/**
+ * @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
+});
+
+
\ No newline at end of file