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

   1 <!DOCTYPE html><html><head><title>Ext.chart.axis.Category | 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.Category',
  13         docClass: 'Ext.chart.axis.Category',
  14         docReq: 'Ext.chart.axis.Category',
  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 = 'Category.html#Ext-chart.axis.Category';
  33     clsInfo = {"methods":["drawAxis","drawGrid","drawLabel","setTitle"],"cfgs":["dashSize","length","majorTickSteps","minorTickSteps","position","width"],"properties":["calculateCategoryCount","categoryNames"],"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/Category.html#Ext-chart.axis.Category" target="_blank">Ext.chart.axis.Category</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.Category</strong></div></div></div></pre><p>A type of axis that displays items in categories. This axis is generally used to
  38 display categorical information like names of items, month names, quarters, etc.
  39 but no quantitative values. For that other type of information <em>Number</em>
  40 axis are more suitable.</p>
  41
  42 <p>As with other axis you can set the position of the axis and its title. For example:</p>
  43
  44 <p><img class="screenshot" src="../Ext.chart.axis.Category.png" alt="Ext.chart.axis.Category chart axis" /></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 with set the category axis to the bottom of the surface, bound the axis to
 104 the <em>name</em> property and set as title <em>Month of the Year</em>.</p>
 105 <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.Category.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.Category.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>
 106 </div><div class="long"><p>The size of the dash marker. Default's 3.</p>
 107 </div></div></div><div id="config-length" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.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>
 108 </div><div class="long"><p>Offset axis position. Default's 0.</p>
 109 </div></div></div><div id="config-majorTickSteps" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.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>
 110 </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>
 111 </div></div></div><div id="config-minorTickSteps" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.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>
 112 </div><div class="long"><p>The number of small ticks between two major ticks. Default is zero.</p>
 113 </div></div></div><div id="config-position" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.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>
 114 </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>
 115 </div></div></div><div id="config-width" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.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>
 116 </div><div class="long"><p>Offset axis width. Default's 0.</p>
 117 </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-calculateCategoryCount" class="member f ni"><a href="Ext.chart.axis.Category.html#property-calculateCategoryCount" rel="property-calculateCategoryCount" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Category.html" class="definedIn docClass">Ext.chart.axis.Category</a><br/><a href="../source/Category.html#Ext-chart.axis.Category-property-calculateCategoryCount" class="viewSource">view source</a></div><a name="calculateCategoryCount"></a><a name="property-calculateCategoryCount"></a><a href="Ext.chart.axis.Category.html#" rel="property-calculateCategoryCount" class="cls expand">calculateCategoryCount</a><span> : Boolean</span></div><div class="description"><div class="short">Indicates whether or not to calculate the number of categories (ticks and
 118 labels) when there is not enough room to di...</div><div class="long"><p>Indicates whether or not to calculate the number of categories (ticks and
 119 labels) when there is not enough room to display all labels on the axis.
 120 If set to true, the axis will determine the number of categories to plot.
 121 If not, all categories will be plotted.</p>
 122 </div></div></div><div id="property-categoryNames" class="member ni"><a href="Ext.chart.axis.Category.html#property-categoryNames" rel="property-categoryNames" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.axis.Category.html" class="definedIn docClass">Ext.chart.axis.Category</a><br/><a href="../source/Category.html#Ext-chart.axis.Category-property-categoryNames" class="viewSource">view source</a></div><a name="categoryNames"></a><a name="property-categoryNames"></a><a href="Ext.chart.axis.Category.html#" rel="property-categoryNames" class="cls expand">categoryNames</a><span> : Array</span></div><div class="description"><div class="short"><p>A list of category names to display along this axis.</p>
 123 </div><div class="long"><p>A list of category names to display along this axis.</p>
 124 </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 inherited"><a href="Ext.chart.axis.Category.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.Category.html#" rel="method-drawAxis" class="cls expand">drawAxis</a>(
 125 <span class="pre">Object init</span>)
 126  : void</div><div class="description"><div class="short"><p>Renders the axis into the screen and updates it's position.</p>
 127 </div><div class="long"><p>Renders the axis into the screen and updates it's position.</p>
 128 <h3 class="pa">Parameters</h3><ul><li><span class="pre">init</span> : Object<div class="sub-desc">
 129 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 130 </li></ul></div></div></div><div id="method-drawGrid" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.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>
 131 </div><div class="long"><p>Renders an horizontal and/or vertical grid into the Surface.</p>
 132 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 133 </li></ul></div></div></div><div id="method-drawLabel" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.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>
 134 </div><div class="long"><p>Renders the labels in the axes.</p>
 135 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 136 </li></ul></div></div></div><div id="method-setTitle" class="member inherited"><a href="Ext.chart.axis.Category.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.Category.html#" rel="method-setTitle" class="cls expand">setTitle</a>(
 137 <span class="pre">String title</span>)
 138  : void</div><div class="description"><div class="short"><p>Updates the <a href="Ext.chart.axis.Category.html#title" rel="Ext.chart.axis.Category#title" class="docClass">title</a> of this axis.</p>
 139 </div><div class="long"><p>Updates the <a href="Ext.chart.axis.Category.html#title" rel="Ext.chart.axis.Category#title" class="docClass">title</a> of this axis.</p>
 140 <h3 class="pa">Parameters</h3><ul><li><span class="pre">title</span> : String<div class="sub-desc">
 141 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 142 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>