X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Numeric.html diff --git a/docs/source/Numeric.html b/docs/source/Numeric.html new file mode 100644 index 00000000..90ad2ad5 --- /dev/null +++ b/docs/source/Numeric.html @@ -0,0 +1,186 @@ +
\ No newline at end of file/** + * @class Ext.chart.axis.Numeric + * @extends Ext.chart.axis.Axis + * + * 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. + * + * {@img Ext.chart.axis.Numeric/Ext.chart.axis.Numeric.png Ext.chart.axis.Numeric chart axis} + * + * For 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', + * grid: true, + * 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 <em>position</em> to <em>left</em>. + * We bind three different store fields to this axis by setting <em>fields</em> to an array. + * We set the title of the axis to <em>Number of Hits</em> by using the <em>title</em> property. + * We use a <em>grid</em> configuration to set odd background rows to a certain style and even rows + * to be transparent/ignored. + * + * @constructor + */ +Ext.define('Ext.chart.axis.Numeric', { + + /* Begin Definitions */ + + extend: 'Ext.chart.axis.Axis', + + alternateClassName: 'Ext.chart.NumericAxis', + + /* End Definitions */ + + type: 'numeric', + + alias: 'axis.numeric', + + constructor: function(config) { + var me = this, label, f; + me.callParent([config]); + label = me.label; + if (me.roundToDecimal === false) { + return; + } + if (label.renderer) { + f = label.renderer; + label.renderer = function(v) { + return me.roundToDecimal( f(v), me.decimals ); + }; + } else { + label.renderer = function(v) { + return me.roundToDecimal(v, me.decimals); + }; + } + }, + + roundToDecimal: function(v, dec) { + var val = Math.pow(10, dec || 0); + return ((v * val) >> 0) / val; + }, + + /** + * 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 number of decimals to round the value to. + * Default's 2. + * + * @property decimals + * @type Number + */ + decimals: 2, + + /** + * The scaling algorithm to use on this axis. May be "linear" or + * "logarithmic". + * + * @property scale + * @type String + */ + scale: "linear", + + /** + * Indicates the position of the axis relative to the chart + * + * @property position + * @type String + */ + position: 'left', + + /** + * Indicates whether to extend maximum beyond data's maximum to the nearest + * majorUnit. + * + * @property adjustMaximumByMajorUnit + * @type Boolean + */ + adjustMaximumByMajorUnit: false, + + /** + * Indicates whether to extend the minimum beyond data's minimum to the + * nearest majorUnit. + * + * @property adjustMinimumByMajorUnit + * @type Boolean + */ + adjustMinimumByMajorUnit: false, + + // @private apply data. + applyData: function() { + this.callParent(); + return this.calcEnds(); + } +}); +