Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / Numeric.html
diff --git a/docs/source/Numeric.html b/docs/source/Numeric.html
new file mode 100644 (file)
index 0000000..90ad2ad
--- /dev/null
@@ -0,0 +1,186 @@
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.axis.Numeric-method-constructor'><span id='Ext-chart.axis.Numeric'>/**
+</span></span> * @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 &lt;em&gt;position&lt;/em&gt; to &lt;em&gt;left&lt;/em&gt;.
+ * We bind three different store fields to this axis by setting &lt;em&gt;fields&lt;/em&gt; to an array.
+ * We set the title of the axis to &lt;em&gt;Number of Hits&lt;/em&gt; by using the &lt;em&gt;title&lt;/em&gt; property.
+ * We use a &lt;em&gt;grid&lt;/em&gt; 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) &gt;&gt; 0) / val;
+    },
+    
+<span id='Ext-chart.axis.Numeric-property-minimum'>    /**
+</span>     * The minimum value drawn by the axis. If not set explicitly, the axis
+     * minimum will be calculated automatically.
+     *
+     * @property minimum
+     * @type Number
+     */
+    minimum: NaN,
+
+<span id='Ext-chart.axis.Numeric-property-maximum'>    /**
+</span>     * The maximum value drawn by the axis. If not set explicitly, the axis
+     * maximum will be calculated automatically.
+     *
+     * @property maximum
+     * @type Number
+     */
+    maximum: NaN,
+
+<span id='Ext-chart.axis.Numeric-property-decimals'>    /**
+</span>     * The number of decimals to round the value to.
+     * Default's 2.
+     *
+     * @property decimals
+     * @type Number
+     */
+    decimals: 2,
+
+<span id='Ext-chart.axis.Numeric-property-scale'>    /**
+</span>     * The scaling algorithm to use on this axis. May be &quot;linear&quot; or
+     * &quot;logarithmic&quot;.
+     *
+     * @property scale
+     * @type String
+     */
+    scale: &quot;linear&quot;,
+
+<span id='Ext-chart.axis.Numeric-property-position'>    /**
+</span>     * Indicates the position of the axis relative to the chart
+     *
+     * @property position
+     * @type String
+     */
+    position: 'left',
+
+<span id='Ext-chart.axis.Numeric-property-adjustMaximumByMajorUnit'>    /**
+</span>     * Indicates whether to extend maximum beyond data's maximum to the nearest
+     * majorUnit.
+     *
+     * @property adjustMaximumByMajorUnit
+     * @type Boolean
+     */
+    adjustMaximumByMajorUnit: false,
+
+<span id='Ext-chart.axis.Numeric-property-adjustMinimumByMajorUnit'>    /**
+</span>     * 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();
+    }
+});
+</pre></pre></body></html>
\ No newline at end of file