/**
* @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
});