/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* @class Ext.chart.axis.Numeric
*
* An axis to handle numeric values. This axis is used for quantitative data as
* opposed to the category axis. You can set mininum and maximum values to the
* axis so that the values are bound to that. If no values are set, then the
* scale will auto-adjust to the values.
*
* @example
* var store = Ext.create('Ext.data.JsonStore', {
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
* data: [
* {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
* {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
* {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
* {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
* {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
* ]
* });
*
* Ext.create('Ext.chart.Chart', {
* renderTo: Ext.getBody(),
* width: 500,
* height: 300,
* store: store,
* axes: [{
* type: 'Numeric',
* position: 'left',
* fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
* title: 'Sample Values',
* grid: {
* odd: {
* opacity: 1,
* fill: '#ddd',
* stroke: '#bbb',
* 'stroke-width': 1
* }
* },
* minimum: 0,
* adjustMinimumByMajorUnit: 0
* }, {
* type: 'Category',
* position: 'bottom',
* fields: ['name'],
* title: 'Sample Metrics',
* grid: true,
* label: {
* rotate: {
* degrees: 315
* }
* }
* }],
* series: [{
* type: 'area',
* highlight: false,
* axis: 'left',
* xField: 'name',
* yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
* style: {
* opacity: 0.93
* }
* }]
* });
*
* In this example we create an axis of Numeric type. We set a minimum value so that
* even if all series have values greater than zero, the grid starts at zero. We bind
* the axis onto the left part of the surface by setting `position` to `left`.
* We bind three different store fields to this axis by setting `fields` to an array.
* We set the title of the axis to _Number of Hits_ by using the `title` property.
* We use a `grid` configuration to set odd background rows to a certain style and even rows
* to be transparent/ignored.
*/
Ext.define('Ext.chart.axis.Numeric', {
/* Begin Definitions */
extend: 'Ext.chart.axis.Axis',
alternateClassName: 'Ext.chart.NumericAxis',
/* End Definitions */
type: 'Numeric',
// @private
isNumericAxis: true,
alias: 'axis.numeric',
uses: ['Ext.data.Store'],
constructor: function(config) {
var me = this,
hasLabel = !!(config.label && config.label.renderer),
label;
me.callParent([config]);
label = me.label;
if (config.constrain == null) {
me.constrain = (config.minimum != null && config.maximum != null);
}
if (!hasLabel) {
label.renderer = function(v) {
return me.roundToDecimal(v, me.decimals);
};
}
},
roundToDecimal: function(v, dec) {
var val = Math.pow(10, dec || 0);
return Math.round(v * val) / val;
},
/**
* @cfg {Number} minimum
* The minimum value drawn by the axis. If not set explicitly, the axis
* minimum will be calculated automatically. It is ignored for stacked charts.
*/
minimum: NaN,
/**
* @cfg {Number} maximum
* The maximum value drawn by the axis. If not set explicitly, the axis
* maximum will be calculated automatically. It is ignored for stacked charts.
*/
maximum: NaN,
/**
* @cfg {Boolean} constrain
* If true, the values of the chart will be rendered only if they belong between minimum and maximum.
* If false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not.
* Default's true if maximum and minimum is specified. It is ignored for stacked charts.
*/
constrain: true,
/**
* @cfg {Number} decimals
* The number of decimals to round the value to.
*/
decimals: 2,
/**
* @cfg {String} scale
* The scaling algorithm to use on this axis. May be "linear" or
* "logarithmic". Currently only linear scale is implemented.
* @private
*/
scale: "linear",
// @private constrains to datapoints between minimum and maximum only
doConstrain: function() {
var me = this,
chart = me.chart,
store = chart.getChartStore(),
items = store.data.items,
d, dLen, record,
series = chart.series.items,
fields = me.fields,
ln = fields.length,
range = me.calcEnds(),
min = range.from, max = range.to, i, l,
useAcum = false,
value, data = [],
addRecord;
for (d = 0, dLen = items.length; d < dLen; d++) {
addRecord = true;
record = items[d];
for (i = 0; i < ln; i++) {
value = record.get(fields[i]);
if (me.type == 'Time' && typeof value == "string") {
value = Date.parse(value);
}
if (+value < +min) {
addRecord = false;
break;
}
if (+value > +max) {
addRecord = false;
break;
}
}
if (addRecord) {
data.push(record);
}
}
chart.setSubStore(new Ext.data.Store({
model: store.model,
data: data
}));
},
/**
* @cfg {String} position
* Indicates the position of the axis relative to the chart
*/
position: 'left',
/**
* @cfg {Boolean} adjustMaximumByMajorUnit
* Indicates whether to extend maximum beyond data's maximum to the nearest
* majorUnit.
*/
adjustMaximumByMajorUnit: false,
/**
* @cfg {Boolean} adjustMinimumByMajorUnit
* Indicates whether to extend the minimum beyond data's minimum to the
* nearest majorUnit.
*/
adjustMinimumByMajorUnit: false,
// applying constraint
processView: function() {
var me = this,
chart = me.chart,
series = chart.series.items,
i, l;
for (i = 0, l = series.length; i < l; i++) {
if (series[i].stacked) {
// Do not constrain stacked charts (bar, column, or area).
delete me.minimum;
delete me.maximum;
me.constrain = false;
break;
}
}
if (me.constrain) {
me.doConstrain();
}
},
// @private apply data.
applyData: function() {
this.callParent();
return this.calcEnds();
}
});
|
Download
