Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / api / Ext.chart.axis.Axis.html
1 <!DOCTYPE html><html><head><title>Ext.chart.axis.Axis | 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.Axis',
13         docClass: 'Ext.chart.axis.Axis',
14         docReq: 'Ext.chart.axis.Axis',
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 = 'Axis.html#Ext-chart.axis.Axis';
33     clsInfo = {"methods":["drawAxis","drawGrid","drawLabel","setTitle"],"cfgs":["dashSize","length","majorTickSteps","minorTickSteps","position","width"],"properties":[],"events":[],"subclasses":["Ext.chart.axis.Category","Ext.chart.axis.Numeric","Ext.chart.axis.Time"]};
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/Axis.html#Ext-chart.axis.Axis" target="_blank">Ext.chart.axis.Axis</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"><strong>Ext.chart.axis.Axis</strong></div></div></pre><p>Defines axis for charts. The axis position, type, style can be configured.
38 The axes are defined in an axes array of configuration objects where the type,
39 field, grid and other configuration options can be set. To know more about how
40 to create a Chart please check the Chart class documentation. Here's an example for the axes part:
41 An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:</p>
42
43 <pre class="prettyprint"><code>axes: [{
44     type: 'Numeric',
45     grid: true,
46     position: 'left',
47     fields: ['data1', 'data2', 'data3'],
48     title: 'Number of Hits',
49     grid: {
50         odd: {
51             opacity: 1,
52             fill: '#ddd',
53             stroke: '#bbb',
54             'stroke-width': 1
55         }
56     },
57     minimum: 0
58 }, {
59     type: 'Category',
60     position: 'bottom',
61     fields: ['name'],
62     title: 'Month of the Year',
63     grid: true,
64     label: {
65         rotate: {
66             degrees: 315
67         }
68     }
69 }]
70 </code></pre>
71
72 <p>In this case we use a <code>Numeric</code> axis for displaying the values of the Area series and a <code>Category</code> axis for displaying the names of
73 the store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart.
74 Both the category and numeric axes have <code>grid</code> set, which means that horizontal and vertical lines will cover the chart background. In the
75 category axis the labels will be rotated so they can fit the space better.</p>
76 <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 ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
77 </div><div class="long"><p>The size of the dash marker. Default's 3.</p>
78 </div></div></div><div id="config-length" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
79 </div><div class="long"><p>Offset axis position. Default's 0.</p>
80 </div></div></div><div id="config-majorTickSteps" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
81 </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>
82 </div></div></div><div id="config-minorTickSteps" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
83 </div><div class="long"><p>The number of small ticks between two major ticks. Default is zero.</p>
84 </div></div></div><div id="config-position" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
85 </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>
86 </div></div></div><div id="config-width" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
87 </div><div class="long"><p>Offset axis width. Default's 0.</p>
88 </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-drawAxis" class="member f ni"><a href="Ext.chart.axis.Axis.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.Axis.html#" rel="method-drawAxis" class="cls expand">drawAxis</a>(
89 <span class="pre">Object init</span>)
90  : void</div><div class="description"><div class="short"><p>Renders the axis into the screen and updates it's position.</p>
91 </div><div class="long"><p>Renders the axis into the screen and updates it's position.</p>
92 <h3 class="pa">Parameters</h3><ul><li><span class="pre">init</span> : Object<div class="sub-desc">
93 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
94 </li></ul></div></div></div><div id="method-drawGrid" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
95 </div><div class="long"><p>Renders an horizontal and/or vertical grid into the Surface.</p>
96 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
97 </li></ul></div></div></div><div id="method-drawLabel" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.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>
98 </div><div class="long"><p>Renders the labels in the axes.</p>
99 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
100 </li></ul></div></div></div><div id="method-setTitle" class="member ni"><a href="Ext.chart.axis.Axis.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.Axis.html#" rel="method-setTitle" class="cls expand">setTitle</a>(
101 <span class="pre">String title</span>)
102  : void</div><div class="description"><div class="short"><p>Updates the <a href="Ext.chart.axis.Axis.html#title" rel="Ext.chart.axis.Axis#title" class="docClass">title</a> of this axis.</p>
103 </div><div class="long"><p>Updates the <a href="Ext.chart.axis.Axis.html#title" rel="Ext.chart.axis.Axis#title" class="docClass">title</a> of this axis.</p>
104 <h3 class="pa">Parameters</h3><ul><li><span class="pre">title</span> : String<div class="sub-desc">
105 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
106 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>