Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / api / Ext.chart.axis.Axis.html
diff --git a/docs/api/Ext.chart.axis.Axis.html b/docs/api/Ext.chart.axis.Axis.html
new file mode 100644 (file)
index 0000000..a419db3
--- /dev/null
@@ -0,0 +1,106 @@
+<!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]>
+<style type="text/css">.head-band { display: none; }
+.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
+.doc-tab .members .member a.more { background-color: #efefef; }
+</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
+</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
+<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">
+
+    req = {
+        liveURL: '.',
+        standAloneMode: true,
+        origDocClass: 'Ext.chart.axis.Axis',
+        docClass: 'Ext.chart.axis.Axis',
+        docReq: 'Ext.chart.axis.Axis',
+        version: '4.0',
+        baseURL: '.',
+        baseDocURL: '.',
+        baseProdURL: '.'
+    };
+
+    clsInfo = {};
+
+
+
+</script>
+
+<script type="text/javascript" src="../search.js"></script>
+<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
+<script type="text/javascript" src="../class_tree.js"></script>
+<script type="text/javascript" src="../class_doc.js"></script>
+<script type="text/javascript">
+    req.source = 'Axis.html#Ext-chart.axis.Axis';
+    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"]};
+    Ext.onReady(function() {
+        Ext.create('Docs.classPanel');
+    });
+</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.
+The axes are defined in an axes array of configuration objects where the type,
+field, grid and other configuration options can be set. To know more about how
+to create a Chart please check the Chart class documentation. Here's an example for the axes part:
+An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:</p>
+
+<pre class="prettyprint"><code>axes: [{
+    type: 'Numeric',
+    grid: true,
+    position: 'left',
+    fields: ['data1', 'data2', 'data3'],
+    title: 'Number of Hits',
+    grid: {
+        odd: {
+            opacity: 1,
+            fill: '#ddd',
+            stroke: '#bbb',
+            'stroke-width': 1
+        }
+    },
+    minimum: 0
+}, {
+    type: 'Category',
+    position: 'bottom',
+    fields: ['name'],
+    title: 'Month of the Year',
+    grid: true,
+    label: {
+        rotate: {
+            degrees: 315
+        }
+    }
+}]
+</code></pre>
+
+<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
+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.
+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
+category axis the labels will be rotated so they can fit the space better.</p>
+<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>
+</div><div class="long"><p>The size of the dash marker. Default's 3.</p>
+</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>
+</div><div class="long"><p>Offset axis position. Default's 0.</p>
+</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>
+</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>
+</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>
+</div><div class="long"><p>The number of small ticks between two major ticks. Default is zero.</p>
+</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>
+</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>
+</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>
+</div><div class="long"><p>Offset axis width. Default's 0.</p>
+</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>(
+<span class="pre">Object init</span>)
+ : void</div><div class="description"><div class="short"><p>Renders the axis into the screen and updates it's position.</p>
+</div><div class="long"><p>Renders the axis into the screen and updates it's position.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">init</span> : Object<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</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>
+</div><div class="long"><p>Renders an horizontal and/or vertical grid into the Surface.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</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>
+</div><div class="long"><p>Renders the labels in the axes.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</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>(
+<span class="pre">String title</span>)
+ : 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>
+</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>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">title</span> : String<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>
\ No newline at end of file