docs/api/Ext.chart.axis.Numeric.html

   1 <!DOCTYPE html><html><head><title>Ext.chart.axis.Numeric | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.chart.axis.Numeric',
  13         docClass: 'Ext.chart.axis.Numeric',
  14         docReq: 'Ext.chart.axis.Numeric',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'Numeric.html#Ext-chart.axis.Numeric';
  33     clsInfo = {"methods":["Numeric","drawAxis","drawGrid","drawLabel","setTitle"],"cfgs":["dashSize","length","majorTickSteps","minorTickSteps","position","width"],"properties":["adjustMaximumByMajorUnit","adjustMinimumByMajorUnit","decimals","maximum","minimum","position","scale"],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Numeric.html#Ext-chart.axis.Numeric" target="_blank">Ext.chart.axis.Numeric</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.chart.axis.Abstract.html" rel="Ext.chart.axis.Abstract" class="cls docClass">Ext.chart.axis.Abstract</a><div class="subclass"><a href="Ext.chart.axis.Axis.html" rel="Ext.chart.axis.Axis" class="cls docClass">Ext.chart.axis.Axis</a><div class="subclass"><strong>Ext.chart.axis.Numeric</strong></div></div></div></pre><p>An axis to handle numeric values. This axis is used for quantitative data as
  38 opposed to the category axis. You can set mininum and maximum values to the
  39 axis so that the values are bound to that. If no values are set, then the
  40 scale will auto-adjust to the values.</p>
  41
  42 <p><img class="screenshot" src="../Ext.chart.axis.Numeric.png" alt="Ext.chart.axis.Numeric chart axis" /></p>
  43
  44 <p>For example:</p>
  45
  46 <pre class="prettyprint"><code>var store = Ext.create('Ext.data.JsonStore', {
  47      fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  48      data: [
  49          {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  50          {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  51          {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  52          {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  53          {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  54      ]
  55 });
  56
  57 Ext.create('Ext.chart.Chart', {
  58     renderTo: Ext.getBody(),
  59     width: 500,
  60     height: 300,
  61     store: store,
  62     axes: [{
  63         type: 'Numeric',
  64         grid: true,
  65         position: 'left',
  66         fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  67         title: 'Sample Values',
  68         grid: {
  69             odd: {
  70                 opacity: 1,
  71                 fill: '#ddd',
  72                 stroke: '#bbb',
  73                 'stroke-width': 1
  74             }
  75         },
  76         minimum: 0,
  77         adjustMinimumByMajorUnit: 0
  78     }, {
  79         type: 'Category',
  80         position: 'bottom',
  81         fields: ['name'],
  82         title: 'Sample Metrics',
  83         grid: true,
  84         label: {
  85             rotate: {
  86                 degrees: 315
  87             }
  88         }
  89     }],
  90     series: [{
  91         type: 'area',
  92         highlight: false,
  93         axis: 'left',
  94         xField: 'name',
  95         yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  96         style: {
  97             opacity: 0.93
  98         }
  99     }]
 100 });
 101 </code></pre>
 102
 103 <p>In this example we create an axis of Numeric type. We set a minimum value so that
 104 even if all series have values greater than zero, the grid starts at zero. We bind
 105 the axis onto the left part of the surface by setting <em>position</em> to <em>left</em>.
 106 We bind three different store fields to this axis by setting <em>fields</em> to an array.
 107 We set the title of the axis to <em>Number of Hits</em> by using the <em>title</em> property.
 108 We use a <em>grid</em> configuration to set odd background rows to a certain style and even rows
 109 to be transparent/ignored.</p>
 110 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-dashSize" class="member f inherited"><a href="Ext.chart.axis.Numeric.html#config-dashSize" rel="config-dashSize" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-cfg-dashSize" class="viewSource">view source</a></div><a name="dashSize"></a><a name="config-dashSize"></a><a href="Ext.chart.axis.Numeric.html#" rel="config-dashSize" class="cls expand">dashSize</a><span> : Number</span></div><div class="description"><div class="short"><p>The size of the dash marker. Default's 3.</p>
 111 </div><div class="long"><p>The size of the dash marker. Default's 3.</p>
 112 </div></div></div><div id="config-length" class="member inherited"><a href="Ext.chart.axis.Numeric.html#config-length" rel="config-length" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-cfg-length" class="viewSource">view source</a></div><a name="length"></a><a name="config-length"></a><a href="Ext.chart.axis.Numeric.html#" rel="config-length" class="cls expand">length</a><span> : Number</span></div><div class="description"><div class="short"><p>Offset axis position. Default's 0.</p>
 113 </div><div class="long"><p>Offset axis position. Default's 0.</p>
 114 </div></div></div><div id="config-majorTickSteps" class="member inherited"><a href="Ext.chart.axis.Numeric.html#config-majorTickSteps" rel="config-majorTickSteps" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-cfg-majorTickSteps" class="viewSource">view source</a></div><a name="majorTickSteps"></a><a name="config-majorTickSteps"></a><a href="Ext.chart.axis.Numeric.html#" rel="config-majorTickSteps" class="cls expand">majorTickSteps</a><span> : Number</span></div><div class="description"><div class="short"><p>If <code>minimum</code> and <code>maximum</code> are specified it forces the number of major ticks to the specified value.</p>
 115 </div><div class="long"><p>If <code>minimum</code> and <code>maximum</code> are specified it forces the number of major ticks to the specified value.</p>
 116 </div></div></div><div id="config-minorTickSteps" class="member inherited"><a href="Ext.chart.axis.Numeric.html#config-minorTickSteps" rel="config-minorTickSteps" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-cfg-minorTickSteps" class="viewSource">view source</a></div><a name="minorTickSteps"></a><a name="config-minorTickSteps"></a><a href="Ext.chart.axis.Numeric.html#" rel="config-minorTickSteps" class="cls expand">minorTickSteps</a><span> : Number</span></div><div class="description"><div class="short"><p>The number of small ticks between two major ticks. Default is zero.</p>
 117 </div><div class="long"><p>The number of small ticks between two major ticks. Default is zero.</p>
 118 </div></div></div><div id="config-position" class="member inherited"><a href="Ext.chart.axis.Numeric.html#config-position" rel="config-position" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-cfg-position" class="viewSource">view source</a></div><a name="position"></a><a name="config-position"></a><a href="Ext.chart.axis.Numeric.html#" rel="config-position" class="cls expand">position</a><span> : String</span></div><div class="description"><div class="short"><p>Where to set the axis. Available options are <code>left</code>, <code>bottom</code>, <code>right</code>, <code>top</code>. Default's <code>bottom</code>.</p>
 119 </div><div class="long"><p>Where to set the axis. Available options are <code>left</code>, <code>bottom</code>, <code>right</code>, <code>top</code>. Default's <code>bottom</code>.</p>
 120 </div></div></div><div id="config-width" class="member inherited"><a href="Ext.chart.axis.Numeric.html#config-width" rel="config-width" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-cfg-width" class="viewSource">view source</a></div><a name="width"></a><a name="config-width"></a><a href="Ext.chart.axis.Numeric.html#" rel="config-width" class="cls expand">width</a><span> : Number</span></div><div class="description"><div class="short"><p>Offset axis width. Default's 0.</p>
 121 </div><div class="long"><p>Offset axis width. Default's 0.</p>
 122 </div></div></div></div><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-adjustMaximumByMajorUnit" class="member f ni"><a href="Ext.chart.axis.Numeric.html#property-adjustMaximumByMajorUnit" rel="property-adjustMaximumByMajorUnit" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-property-adjustMaximumByMajorUnit" class="viewSource">view source</a></div><a name="adjustMaximumByMajorUnit"></a><a name="property-adjustMaximumByMajorUnit"></a><a href="Ext.chart.axis.Numeric.html#" rel="property-adjustMaximumByMajorUnit" class="cls expand">adjustMaximumByMajorUnit</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Indicates whether to extend maximum beyond data's maximum to the nearest
 123 majorUnit.</p>
 124 </div><div class="long"><p>Indicates whether to extend maximum beyond data's maximum to the nearest
 125 majorUnit.</p>
 126 </div></div></div><div id="property-adjustMinimumByMajorUnit" class="member ni"><a href="Ext.chart.axis.Numeric.html#property-adjustMinimumByMajorUnit" rel="property-adjustMinimumByMajorUnit" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-property-adjustMinimumByMajorUnit" class="viewSource">view source</a></div><a name="adjustMinimumByMajorUnit"></a><a name="property-adjustMinimumByMajorUnit"></a><a href="Ext.chart.axis.Numeric.html#" rel="property-adjustMinimumByMajorUnit" class="cls expand">adjustMinimumByMajorUnit</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Indicates whether to extend the minimum beyond data's minimum to the
 127 nearest majorUnit.</p>
 128 </div><div class="long"><p>Indicates whether to extend the minimum beyond data's minimum to the
 129 nearest majorUnit.</p>
 130 </div></div></div><div id="property-decimals" class="member ni"><a href="Ext.chart.axis.Numeric.html#property-decimals" rel="property-decimals" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-property-decimals" class="viewSource">view source</a></div><a name="decimals"></a><a name="property-decimals"></a><a href="Ext.chart.axis.Numeric.html#" rel="property-decimals" class="cls expand">decimals</a><span> : Number</span></div><div class="description"><div class="short"><p>The number of decimals to round the value to.
 131 Default's 2.</p>
 132 </div><div class="long"><p>The number of decimals to round the value to.
 133 Default's 2.</p>
 134 </div></div></div><div id="property-maximum" class="member ni"><a href="Ext.chart.axis.Numeric.html#property-maximum" rel="property-maximum" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-property-maximum" class="viewSource">view source</a></div><a name="maximum"></a><a name="property-maximum"></a><a href="Ext.chart.axis.Numeric.html#" rel="property-maximum" class="cls expand">maximum</a><span> : Number</span></div><div class="description"><div class="short"><p>The maximum value drawn by the axis. If not set explicitly, the axis
 135 maximum will be calculated automatically.</p>
 136 </div><div class="long"><p>The maximum value drawn by the axis. If not set explicitly, the axis
 137 maximum will be calculated automatically.</p>
 138 </div></div></div><div id="property-minimum" class="member ni"><a href="Ext.chart.axis.Numeric.html#property-minimum" rel="property-minimum" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-property-minimum" class="viewSource">view source</a></div><a name="minimum"></a><a name="property-minimum"></a><a href="Ext.chart.axis.Numeric.html#" rel="property-minimum" class="cls expand">minimum</a><span> : Number</span></div><div class="description"><div class="short"><p>The minimum value drawn by the axis. If not set explicitly, the axis
 139 minimum will be calculated automatically.</p>
 140 </div><div class="long"><p>The minimum value drawn by the axis. If not set explicitly, the axis
 141 minimum will be calculated automatically.</p>
 142 </div></div></div><div id="property-position" class="member ni"><a href="Ext.chart.axis.Numeric.html#property-position" rel="property-position" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-property-position" class="viewSource">view source</a></div><a name="position"></a><a name="property-position"></a><a href="Ext.chart.axis.Numeric.html#" rel="property-position" class="cls expand">position</a><span> : String</span></div><div class="description"><div class="short"><p>Indicates the position of the axis relative to the chart</p>
 143 </div><div class="long"><p>Indicates the position of the axis relative to the chart</p>
 144 </div></div></div><div id="property-scale" class="member ni"><a href="Ext.chart.axis.Numeric.html#property-scale" rel="property-scale" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-property-scale" class="viewSource">view source</a></div><a name="scale"></a><a name="property-scale"></a><a href="Ext.chart.axis.Numeric.html#" rel="property-scale" class="cls expand">scale</a><span> : String</span></div><div class="description"><div class="short"><p>The scaling algorithm to use on this axis. May be "linear" or
 145 "logarithmic".</p>
 146 </div><div class="long"><p>The scaling algorithm to use on this axis. May be "linear" or
 147 "logarithmic".</p>
 148 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-Numeric" class="member f ni"><a href="Ext.chart.axis.Numeric.html#method-Numeric" rel="method-Numeric" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Numeric.html" class="definedIn docClass">Ext.chart.axis.Numeric</a><br/><a href="../source/Numeric.html#Ext-chart.axis.Numeric-method-constructor" class="viewSource">view source</a></div><a name="Numeric"></a><a name="method-Numeric"></a><a href="Ext.chart.axis.Numeric.html#" rel="method-Numeric" class="cls expand">Numeric</a> : void</div><div class="description"><div class="short"><p>&nbsp;</p></div><div class="long">
 149 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 150 </li></ul></div></div></div><div id="method-drawAxis" class="member inherited"><a href="Ext.chart.axis.Numeric.html#method-drawAxis" rel="method-drawAxis" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-method-drawAxis" class="viewSource">view source</a></div><a name="drawAxis"></a><a name="method-drawAxis"></a><a href="Ext.chart.axis.Numeric.html#" rel="method-drawAxis" class="cls expand">drawAxis</a>(
 151 <span class="pre">Object init</span>)
 152  : void</div><div class="description"><div class="short"><p>Renders the axis into the screen and updates it's position.</p>
 153 </div><div class="long"><p>Renders the axis into the screen and updates it's position.</p>
 154 <h3 class="pa">Parameters</h3><ul><li><span class="pre">init</span> : Object<div class="sub-desc">
 155 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 156 </li></ul></div></div></div><div id="method-drawGrid" class="member inherited"><a href="Ext.chart.axis.Numeric.html#method-drawGrid" rel="method-drawGrid" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-method-drawGrid" class="viewSource">view source</a></div><a name="drawGrid"></a><a name="method-drawGrid"></a><a href="Ext.chart.axis.Numeric.html#" rel="method-drawGrid" class="cls expand">drawGrid</a> : void</div><div class="description"><div class="short"><p>Renders an horizontal and/or vertical grid into the Surface.</p>
 157 </div><div class="long"><p>Renders an horizontal and/or vertical grid into the Surface.</p>
 158 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 159 </li></ul></div></div></div><div id="method-drawLabel" class="member inherited"><a href="Ext.chart.axis.Numeric.html#method-drawLabel" rel="method-drawLabel" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-method-drawLabel" class="viewSource">view source</a></div><a name="drawLabel"></a><a name="method-drawLabel"></a><a href="Ext.chart.axis.Numeric.html#" rel="method-drawLabel" class="cls expand">drawLabel</a> : void</div><div class="description"><div class="short"><p>Renders the labels in the axes.</p>
 160 </div><div class="long"><p>Renders the labels in the axes.</p>
 161 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 162 </li></ul></div></div></div><div id="method-setTitle" class="member inherited"><a href="Ext.chart.axis.Numeric.html#method-setTitle" rel="method-setTitle" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Axis.html" class="definedIn docClass">Ext.chart.axis.Axis</a><br/><a href="../source/Axis.html#Ext-chart.axis.Axis-method-setTitle" class="viewSource">view source</a></div><a name="setTitle"></a><a name="method-setTitle"></a><a href="Ext.chart.axis.Numeric.html#" rel="method-setTitle" class="cls expand">setTitle</a>(
 163 <span class="pre">String title</span>)
 164  : void</div><div class="description"><div class="short"><p>Updates the <a href="Ext.chart.axis.Numeric.html#title" rel="Ext.chart.axis.Numeric#title" class="docClass">title</a> of this axis.</p>
 165 </div><div class="long"><p>Updates the <a href="Ext.chart.axis.Numeric.html#title" rel="Ext.chart.axis.Numeric#title" class="docClass">title</a> of this axis.</p>
 166 <h3 class="pa">Parameters</h3><ul><li><span class="pre">title</span> : String<div class="sub-desc">
 167 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 168 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>