docs/api/Ext.chart.series.Pie.html

   1 <!DOCTYPE html><html><head><title>Ext.chart.series.Pie | 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.series.Pie',
  13         docClass: 'Ext.chart.series.Pie',
  14         docReq: 'Ext.chart.series.Pie',
  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 = 'Pie.html#Ext-chart.series.Pie';
  33     clsInfo = {"methods":["addEvents","addListener","addManagedListener","capture","clearListeners","clearManagedListeners","drawSeries","enableBubble","fireEvent","getItemForPoint","getLegendColor","hasListener","hideAll","highlightItem","observe","on","relayEvents","releaseCapture","removeListener","removeManagedListener","resumeEvents","setTitle","showAll","suspendEvents","un","unHighlightItem"],"cfgs":["angleField","color","colorSet","display","donut","field","font","highlight","highlightDuration","lengthField","listeners","minMargin","orientation","renderer","shadowAttributes","showInLegend","style","tips","title","type"],"properties":["highlight"],"events":["titlechange"],"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/Pie.html#Ext-chart.series.Pie" target="_blank">Ext.chart.series.Pie</a><span>xtype: pie</span></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.series.Series.html" rel="Ext.chart.series.Series" class="cls docClass">Ext.chart.series.Series</a><div class="subclass"><strong>Ext.chart.series.Pie</strong></div></div><h4>Mixins</h4><div class="mixin"><a href="Ext.util.Observable.html" rel="Ext.util.Observable" class="cls docClass">Ext.util.Observable</a></div><div class="mixin"><a href="Ext.chart.Label.html" rel="Ext.chart.Label" class="cls docClass">Ext.chart.Label</a></div><div class="mixin"><a href="Ext.chart.Highlight.html" rel="Ext.chart.Highlight" class="cls docClass">Ext.chart.Highlight</a></div><div class="mixin"><a href="Ext.chart.Tip.html" rel="Ext.chart.Tip" class="cls docClass">Ext.chart.Tip</a></div><div class="mixin"><a href="Ext.chart.Callout.html" rel="Ext.chart.Callout" class="cls docClass">Ext.chart.Callout</a></div></pre><p>Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different
  38 categories that also have a meaning as a whole.
  39 As with all other series, the Pie Series must be appended in the <em>series</em> Chart array configuration. See the Chart
  40 documentation for more information. A typical configuration object for the pie series could be:</p>
  41
  42 <p><img class="screenshot" src="../Ext.chart.series.Pie.png" alt="Ext.chart.series.Pie chart series" /></p>
  43
  44 <pre class="prettyprint"><code>var store = Ext.create('Ext.data.JsonStore', {
  45     fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  46     data: [
  47         {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  48         {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  49         {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  50         {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  51         {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  52     ]
  53 });
  54
  55 Ext.create('Ext.chart.Chart', {
  56     renderTo: Ext.getBody(),
  57     width: 500,
  58     height: 300,
  59     animate: true,
  60     store: store,
  61     theme: 'Base:gradients',
  62     series: [{
  63         type: 'pie',
  64         field: 'data1',
  65         showInLegend: true,
  66         tips: {
  67           trackMouse: true,
  68           width: 140,
  69           height: 28,
  70           renderer: function(storeItem, item) {
  71             //calculate and display percentage on hover
  72             var total = 0;
  73             store.each(function(rec) {
  74                 total += rec.get('data1');
  75             });
  76             this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
  77           }
  78         },
  79         highlight: {
  80           segment: {
  81             margin: 20
  82           }
  83         },
  84         label: {
  85             field: 'name',
  86             display: 'rotate',
  87             contrast: true,
  88             font: '18px Arial'
  89         }
  90     }]
  91 });
  92 </code></pre>
  93
  94 <p>In this configuration we set <code>pie</code> as the type for the series, set an object with specific style properties for highlighting options
  95 (triggered when hovering elements). We also set true to <code>showInLegend</code> so all the pie slices can be represented by a legend item.
  96 We set <code>data1</code> as the value of the field to determine the angle span for each pie slice. We also set a label configuration object
  97 where we set the field name of the store field to be renderer as text for the label. The labels will also be displayed rotated.
  98 We set <code>contrast</code> to <code>true</code> to flip the color of the label if it is to similar to the background color. Finally, we set the font family
  99 and size through the <code>font</code> parameter.</p>
 100 <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-angleField" class="member f ni"><a href="Ext.chart.series.Pie.html#config-angleField" rel="config-angleField" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-cfg-angleField" class="viewSource">view source</a></div><a name="angleField"></a><a name="config-angleField"></a><a href="Ext.chart.series.Pie.html#" rel="config-angleField" class="cls expand">angleField</a><span> : String</span></div><div class="description"><div class="short">The store record field name to be used for the pie angles.
 101 The values bound to this field name must be positive real ...</div><div class="long"><p>The store record field name to be used for the pie angles.
 102 The values bound to this field name must be positive real numbers.
 103 This parameter is required.</p>
 104 </div></div></div><div id="config-color" class="member inherited"><a href="Ext.chart.series.Pie.html#config-color" rel="config-color" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Label.html" class="definedIn docClass">Ext.chart.Label</a><br/><a href="../source/Label2.html#Ext-chart.Label-cfg-color" class="viewSource">view source</a></div><a name="color"></a><a name="config-color"></a><a href="Ext.chart.series.Pie.html#" rel="config-color" class="cls expand">color</a><span> : String</span></div><div class="description"><div class="short"><p>The color of the label text.
 105 Default value: '#000' (black).</p>
 106 </div><div class="long"><p>The color of the label text.
 107 Default value: '#000' (black).</p>
 108 </div></div></div><div id="config-colorSet" class="member ni"><a href="Ext.chart.series.Pie.html#config-colorSet" rel="config-colorSet" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-cfg-colorSet" class="viewSource">view source</a></div><a name="colorSet"></a><a name="config-colorSet"></a><a href="Ext.chart.series.Pie.html#" rel="config-colorSet" class="cls expand">colorSet</a><span> : Array</span></div><div class="description"><div class="short"><p>An array of color values which will be used, in order, as the pie slice fill colors.</p>
 109 </div><div class="long"><p>An array of color values which will be used, in order, as the pie slice fill colors.</p>
 110 </div></div></div><div id="config-display" class="member inherited"><a href="Ext.chart.series.Pie.html#config-display" rel="config-display" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Label.html" class="definedIn docClass">Ext.chart.Label</a><br/><a href="../source/Label2.html#Ext-chart.Label-cfg-display" class="viewSource">view source</a></div><a name="display"></a><a name="config-display"></a><a href="Ext.chart.series.Pie.html#" rel="config-display" class="cls expand">display</a><span> : String</span></div><div class="description"><div class="short">Specifies the presence and position of labels for each pie slice. Either "rotate", "middle", "insideStart",
 111 "insideEn...</div><div class="long"><p>Specifies the presence and position of labels for each pie slice. Either "rotate", "middle", "insideStart",
 112 "insideEnd", "outside", "over", "under", or "none" to prevent label rendering.
 113 Default value: 'none'.</p>
 114 </div></div></div><div id="config-donut" class="member ni"><a href="Ext.chart.series.Pie.html#config-donut" rel="config-donut" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-cfg-donut" class="viewSource">view source</a></div><a name="donut"></a><a name="config-donut"></a><a href="Ext.chart.series.Pie.html#" rel="config-donut" class="cls expand">donut</a><span> : Boolean|Number</span></div><div class="description"><div class="short">Whether to set the pie chart as donut chart.
 115 Default's false. Can be set to a particular percentage to set the radius...</div><div class="long"><p>Whether to set the pie chart as donut chart.
 116 Default's false. Can be set to a particular percentage to set the radius
 117 of the donut chart.</p>
 118 </div></div></div><div id="config-field" class="member inherited"><a href="Ext.chart.series.Pie.html#config-field" rel="config-field" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Label.html" class="definedIn docClass">Ext.chart.Label</a><br/><a href="../source/Label2.html#Ext-chart.Label-cfg-field" class="viewSource">view source</a></div><a name="field"></a><a name="config-field"></a><a href="Ext.chart.series.Pie.html#" rel="config-field" class="cls expand">field</a><span> : String</span></div><div class="description"><div class="short"><p>The name of the field to be displayed in the label.
 119 Default value: 'name'.</p>
 120 </div><div class="long"><p>The name of the field to be displayed in the label.
 121 Default value: 'name'.</p>
 122 </div></div></div><div id="config-font" class="member inherited"><a href="Ext.chart.series.Pie.html#config-font" rel="config-font" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Label.html" class="definedIn docClass">Ext.chart.Label</a><br/><a href="../source/Label2.html#Ext-chart.Label-cfg-font" class="viewSource">view source</a></div><a name="font"></a><a name="config-font"></a><a href="Ext.chart.series.Pie.html#" rel="config-font" class="cls expand">font</a><span> : String</span></div><div class="description"><div class="short"><p>The font used for the labels.
 123 Defautl value: "11px Helvetica, sans-serif".</p>
 124 </div><div class="long"><p>The font used for the labels.
 125 Defautl value: "11px Helvetica, sans-serif".</p>
 126 </div></div></div><div id="config-highlight" class="member inherited"><a href="Ext.chart.series.Pie.html#config-highlight" rel="config-highlight" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-cfg-highlight" class="viewSource">view source</a></div><a name="highlight"></a><a name="config-highlight"></a><a href="Ext.chart.series.Pie.html#" rel="config-highlight" class="cls expand">highlight</a><span> : Boolean|Object</span></div><div class="description"><div class="short">If set to true it will highlight the markers or the series when hovering
 127 with the mouse. This parameter can also be a...</div><div class="long"><p>If set to <code>true</code> it will highlight the markers or the series when hovering
 128 with the mouse. This parameter can also be an object with the same style
 129 properties you would apply to a <a href="Ext.draw.Sprite.html" rel="Ext.draw.Sprite" class="docClass">Ext.draw.Sprite</a> to apply custom
 130 styles to markers and series.</p>
 131 </div></div></div><div id="config-highlightDuration" class="member ni"><a href="Ext.chart.series.Pie.html#config-highlightDuration" rel="config-highlightDuration" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-cfg-highlightDuration" class="viewSource">view source</a></div><a name="highlightDuration"></a><a name="config-highlightDuration"></a><a href="Ext.chart.series.Pie.html#" rel="config-highlightDuration" class="cls expand">highlightDuration</a><span> : Number</span></div><div class="description"><div class="short"><p>The duration for the pie slice highlight effect.</p>
 132 </div><div class="long"><p>The duration for the pie slice highlight effect.</p>
 133 </div></div></div><div id="config-lengthField" class="member ni"><a href="Ext.chart.series.Pie.html#config-lengthField" rel="config-lengthField" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-cfg-lengthField" class="viewSource">view source</a></div><a name="lengthField"></a><a name="config-lengthField"></a><a href="Ext.chart.series.Pie.html#" rel="config-lengthField" class="cls expand">lengthField</a><span> : String</span></div><div class="description"><div class="short">The store record field name to be used for the pie slice lengths.
 134 The values bound to this field name must be positiv...</div><div class="long"><p>The store record field name to be used for the pie slice lengths.
 135 The values bound to this field name must be positive real numbers.
 136 This parameter is optional.</p>
 137 </div></div></div><div id="config-listeners" class="member inherited"><a href="Ext.chart.series.Pie.html#config-listeners" rel="config-listeners" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-cfg-listeners" class="viewSource">view source</a></div><a name="listeners"></a><a name="config-listeners"></a><a href="Ext.chart.series.Pie.html#" rel="config-listeners" class="cls expand">listeners</a><span> : Object</span></div><div class="description"><div class="short">(optional) A config object containing one or more event handlers to be added to this
 138 object during initialization.  T...</div><div class="long"><p>(optional) <p>A config object containing one or more event handlers to be added to this
 139 object during initialization.  This should be a valid listeners config object as specified in the
 140 <a href="Ext.chart.series.Pie.html#addListener" rel="Ext.chart.series.Pie#addListener" class="docClass">addListener</a> example for attaching multiple handlers at once.</p></p>
 141
 142 <br><p><b><u>DOM events from ExtJs <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Components</a></u></b></p>
 143
 144
 145 <br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
 146
 147
 148 <p>is usually only done when extra value can be added. For example the <a href="Ext.view.View.html" rel="Ext.view.View" class="docClass">DataView</a>'s
 149 <b><code><a href="Ext.view.View.html#click" rel="Ext.view.View#click" class="docClass">click</a></code></b> event passing the node clicked on. To access DOM
 150 events directly from a child element of a Component, we need to specify the <code>element</code> option to
 151 identify the Component property to add a DOM listener to:</p>
 152
 153 <pre><code>new Ext.panel.Panel({
 154     width: 400,
 155     height: 200,
 156     dockedItems: [{
 157         xtype: 'toolbar'
 158     }],
 159     listeners: {
 160         click: {
 161             element: 'el', //bind to the underlying el property on the panel
 162             fn: function(){ console.log('click el'); }
 163         },
 164         dblclick: {
 165             element: 'body', //bind to the underlying body property on the panel
 166             fn: function(){ console.log('dblclick body'); }
 167         }
 168     }
 169 });
 170 </code></pre>
 171
 172
 173 <p></p></p>
 174 </div></div></div><div id="config-minMargin" class="member inherited"><a href="Ext.chart.series.Pie.html#config-minMargin" rel="config-minMargin" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Label.html" class="definedIn docClass">Ext.chart.Label</a><br/><a href="../source/Label2.html#Ext-chart.Label-cfg-minMargin" class="viewSource">view source</a></div><a name="minMargin"></a><a name="config-minMargin"></a><a href="Ext.chart.series.Pie.html#" rel="config-minMargin" class="cls expand">minMargin</a><span> : Number</span></div><div class="description"><div class="short">Specifies the minimum distance from a label to the origin of the visualization.
 175 This parameter is useful when using P...</div><div class="long"><p>Specifies the minimum distance from a label to the origin of the visualization.
 176 This parameter is useful when using PieSeries width variable pie slice lengths.
 177 Default value: 50.</p>
 178 </div></div></div><div id="config-orientation" class="member inherited"><a href="Ext.chart.series.Pie.html#config-orientation" rel="config-orientation" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Label.html" class="definedIn docClass">Ext.chart.Label</a><br/><a href="../source/Label2.html#Ext-chart.Label-cfg-orientation" class="viewSource">view source</a></div><a name="orientation"></a><a name="config-orientation"></a><a href="Ext.chart.series.Pie.html#" rel="config-orientation" class="cls expand">orientation</a><span> : String</span></div><div class="description"><div class="short"><p>Either "horizontal" or "vertical".
 179 Dafault value: "horizontal".</p>
 180 </div><div class="long"><p>Either "horizontal" or "vertical".
 181 Dafault value: "horizontal".</p>
 182 </div></div></div><div id="config-renderer" class="member inherited"><a href="Ext.chart.series.Pie.html#config-renderer" rel="config-renderer" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Label.html" class="definedIn docClass">Ext.chart.Label</a><br/><a href="../source/Label2.html#Ext-chart.Label-cfg-renderer" class="viewSource">view source</a></div><a name="renderer"></a><a name="config-renderer"></a><a href="Ext.chart.series.Pie.html#" rel="config-renderer" class="cls expand">renderer</a><span> : Function</span></div><div class="description"><div class="short"><p>Optional function for formatting the label into a displayable value.
 183 Default value: function(v) { return v; }</p>
 184 </div><div class="long"><p>Optional function for formatting the label into a displayable value.
 185 Default value: function(v) { return v; }</p>
 186 </div></div></div><div id="config-shadowAttributes" class="member inherited"><a href="Ext.chart.series.Pie.html#config-shadowAttributes" rel="config-shadowAttributes" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-cfg-shadowAttributes" class="viewSource">view source</a></div><a name="shadowAttributes"></a><a name="config-shadowAttributes"></a><a href="Ext.chart.series.Pie.html#" rel="config-shadowAttributes" class="cls expand">shadowAttributes</a><span> : Array</span></div><div class="description"><div class="short"><p>An array with shadow attributes</p>
 187 </div><div class="long"><p>An array with shadow attributes</p>
 188 </div></div></div><div id="config-showInLegend" class="member ni"><a href="Ext.chart.series.Pie.html#config-showInLegend" rel="config-showInLegend" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-cfg-showInLegend" class="viewSource">view source</a></div><a name="showInLegend"></a><a name="config-showInLegend"></a><a href="Ext.chart.series.Pie.html#" rel="config-showInLegend" class="cls expand">showInLegend</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Whether to add the pie chart elements as legend items. Default's false.</p>
 189 </div><div class="long"><p>Whether to add the pie chart elements as legend items. Default's false.</p>
 190 </div></div></div><div id="config-style" class="member ni"><a href="Ext.chart.series.Pie.html#config-style" rel="config-style" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-cfg-style" class="viewSource">view source</a></div><a name="style"></a><a name="config-style"></a><a href="Ext.chart.series.Pie.html#" rel="config-style" class="cls expand">style</a><span> : Object</span></div><div class="description"><div class="short"><p>An object containing styles for overriding series styles from Theming.</p>
 191 </div><div class="long"><p>An object containing styles for overriding series styles from Theming.</p>
 192 </div></div></div><div id="config-tips" class="member inherited"><a href="Ext.chart.series.Pie.html#config-tips" rel="config-tips" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-cfg-tips" class="viewSource">view source</a></div><a name="tips"></a><a name="config-tips"></a><a href="Ext.chart.series.Pie.html#" rel="config-tips" class="cls expand">tips</a><span> : Object</span></div><div class="description"><div class="short">Add tooltips to the visualization's markers. The options for the tips are the
 193 same configuration used with Ext.tip.To...</div><div class="long"><p>Add tooltips to the visualization's markers. The options for the tips are the
 194 same configuration used with <a href="Ext.tip.ToolTip.html" rel="Ext.tip.ToolTip" class="docClass">Ext.tip.ToolTip</a>. For example:</p>
 195
 196 <pre><code>tips: {
 197   trackMouse: true,
 198   width: 140,
 199   height: 28,
 200   renderer: function(storeItem, item) {
 201     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
 202   }
 203 },
 204 </code></pre>
 205 </div></div></div><div id="config-title" class="member inherited"><a href="Ext.chart.series.Pie.html#config-title" rel="config-title" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-cfg-title" class="viewSource">view source</a></div><a name="title"></a><a name="config-title"></a><a href="Ext.chart.series.Pie.html#" rel="config-title" class="cls expand">title</a><span> : String</span></div><div class="description"><div class="short"><p>The human-readable name of the series.</p>
 206 </div><div class="long"><p>The human-readable name of the series.</p>
 207 </div></div></div><div id="config-type" class="member inherited"><a href="Ext.chart.series.Pie.html#config-type" rel="config-type" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-cfg-type" class="viewSource">view source</a></div><a name="type"></a><a name="config-type"></a><a href="Ext.chart.series.Pie.html#" rel="config-type" class="cls expand">type</a><span> : String</span></div><div class="description"><div class="short"><p>The type of series. Set in subclasses.</p>
 208 </div><div class="long"><p>The type of series. Set in subclasses.</p>
 209 </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-highlight" class="member f inherited"><a href="Ext.chart.series.Pie.html#property-highlight" rel="property-highlight" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Highlight.html" class="definedIn docClass">Ext.chart.Highlight</a><br/><a href="../source/Highlight.html#Ext-chart.Highlight-property-highlight" class="viewSource">view source</a></div><a name="highlight"></a><a name="property-highlight"></a><a href="Ext.chart.series.Pie.html#" rel="property-highlight" class="cls expand">highlight</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Highlight the given series item.</p>
 210 </div><div class="long"><p>Highlight the given series item.</p>
 211 </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-addEvents" class="member f inherited"><a href="Ext.chart.series.Pie.html#method-addEvents" rel="method-addEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-addEvents" class="viewSource">view source</a></div><a name="addEvents"></a><a name="method-addEvents"></a><a href="Ext.chart.series.Pie.html#" rel="method-addEvents" class="cls expand">addEvents</a>(
 212 <span class="pre">Object/String o, String </span>)
 213  : void</div><div class="description"><div class="short"><p>Adds the specified events to the list of events which this Observable may fire.</p>
 214 </div><div class="long"><p>Adds the specified events to the list of events which this Observable may fire.</p>
 215 <h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Object/String<div class="sub-desc"><p>Either an object with event names as properties with a value of <code>true</code>
 216 or the first event name string if multiple event names are being passed as separate parameters.</p>
 217 </div></li><li><span class="pre"></span> : String<div class="sub-desc"><p>[additional] Optional additional event names if multiple event names are being passed as separate parameters.
 218 Usage:</p>
 219
 220 <pre><code>this.addEvents('storeloaded', 'storecleared');
 221 </code></pre>
 222
 223 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 224 </li></ul></div></div></div><div id="method-addListener" class="member inherited"><a href="Ext.chart.series.Pie.html#method-addListener" rel="method-addListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-addListener" class="viewSource">view source</a></div><a name="addListener"></a><a name="method-addListener"></a><a href="Ext.chart.series.Pie.html#" rel="method-addListener" class="cls expand">addListener</a>(
 225 <span class="pre">String eventName, Function handler, [Object scope], [Object options]</span>)
 226  : void</div><div class="description"><div class="short"><p>Appends an event handler to this object.</p>
 227 </div><div class="long"><p>Appends an event handler to this object.</p>
 228 <h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The name of the event to listen for. May also be an object who's property names are event names. See</p>
 229 </div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The method the event invokes.</p>
 230 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
 231 <b>If omitted, defaults to the object which fired the event.</b></p>
 232 </div></li><li><span class="pre">options</span> : Object<div class="sub-desc"><p>(optional) An object containing handler configuration.
 233 properties. This may contain any of the following properties:<ul>
 234 <li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
 235 <b>If omitted, defaults to the object which fired the event.</b></div></li>
 236 <li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
 237 <li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
 238 <li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an <a href="Ext.util.DelayedTask.html" rel="Ext.util.DelayedTask" class="docClass">Ext.util.DelayedTask</a> delayed
 239 by the specified number of milliseconds. If the event fires again within that time, the original
 240 handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
 241 <li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
 242 if the event was bubbled up from a child Observable.</div></li>
 243 <li><b>element</b> : String<div class="sub-desc"><b>This option is only valid for listeners bound to <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Components</a>.</b>
 244 The name of a Component property which references an element to add a listener to.</p>
 245
 246 <p>This option is useful during Component construction to add DOM event listeners to elements of <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Components</a> which
 247 will exist only after the Component is rendered. For example, to add a click listener to a Panel's body:
 248 <pre><code>new Ext.panel.Panel({
 249     title: 'The title',
 250     listeners: {
 251         click: this.handlePanelClick,
 252         element: 'body'
 253     }
 254 });
 255 </code></pre></p>
 256
 257
 258 <p>When added in this way, the options available are the options applicable to <a href="Ext.core.Element.html#addListener" rel="Ext.core.Element#addListener" class="docClass">Ext.core.Element.addListener</a></p>
 259
 260
 261 <p></div></li>
 262 </ul><br></p>
 263
 264 <p>
 265 <b>Combining Options</b><br>
 266 Using the options argument, it is possible to combine different types of listeners:<br>
 267 <br>
 268 A delayed, one-time listener.
 269 <pre><code>myPanel.on('hide', this.handleClick, this, {
 270 single: true,
 271 delay: 100
 272 });</code></pre>
 273 <p>
 274 <b>Attaching multiple handlers in 1 call</b><br>
 275 The method also allows for a single argument to be passed which is a config object containing properties
 276 which specify multiple events. For example:
 277 <pre><code>myGridPanel.on({
 278     cellClick: this.onCellClick,
 279     mouseover: this.onMouseOver,
 280     mouseout: this.onMouseOut,
 281     scope: this // Important. Ensure "this" is correct during handler execution
 282 });
 283 </code></pre>.
 284 <p>
 285
 286 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 287 </li></ul></div></div></div><div id="method-addManagedListener" class="member inherited"><a href="Ext.chart.series.Pie.html#method-addManagedListener" rel="method-addManagedListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-addManagedListener" class="viewSource">view source</a></div><a name="addManagedListener"></a><a name="method-addManagedListener"></a><a href="Ext.chart.series.Pie.html#" rel="method-addManagedListener" class="cls expand">addManagedListener</a>(
 288 <span class="pre">Observable/Element item, Object/String ename, Function fn, Object scope, Object opt</span>)
 289  : void</div><div class="description"><div class="short"><p>Adds listeners to any Observable object (or Element) which are automatically removed when this Component
 290 is destroyed.
 291
 292 </div><div class="long"><p>Adds listeners to any Observable object (or Element) which are automatically removed when this Component
 293 is destroyed.
 294
 295 <h3 class="pa">Parameters</h3><ul><li><span class="pre">item</span> : Observable/Element<div class="sub-desc"><p>The item to which to add a listener/listeners.</p>
 296 </div></li><li><span class="pre">ename</span> : Object/String<div class="sub-desc"><p>The event name, or an object containing event name properties.</p>
 297 </div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
 298 is the handler function.</p>
 299 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
 300 is the scope (<code>this</code> reference) in which the handler function is executed.</p>
 301 </div></li><li><span class="pre">opt</span> : Object<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
 302 is the <a href="Ext.util.Observable.html#addListener" rel="Ext.util.Observable#addListener" class="docClass">addListener</a> options.</p>
 303 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 304 </li></ul></div></div></div><div id="method-capture" class="member inherited"><a href="Ext.chart.series.Pie.html#method-capture" rel="method-capture" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-capture" class="viewSource">view source</a></div><a name="capture"></a><a name="method-capture"></a><a href="Ext.chart.series.Pie.html#" rel="method-capture" class="cls expand">capture</a>(
 305 <span class="pre">Observable o, Function fn, [Object scope]</span>)
 306  : void</div><div class="description"><div class="short">Starts capture on the specified Observable. All events will be passed
 307 to the supplied function with the event name + ...</div><div class="long"><p>Starts capture on the specified Observable. All events will be passed
 308 to the supplied function with the event name + standard signature of the event
 309 <b>before</b> the event is fired. If the supplied function returns false,
 310 the event will not fire.</p>
 311 <h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Observable<div class="sub-desc"><p>The Observable to capture events from.</p>
 312 </div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>The function to call when an event is fired.</p>
 313 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Observable firing the event.</p>
 314 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 315 </li></ul></div></div></div><div id="method-clearListeners" class="member inherited"><a href="Ext.chart.series.Pie.html#method-clearListeners" rel="method-clearListeners" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-clearListeners" class="viewSource">view source</a></div><a name="clearListeners"></a><a name="method-clearListeners"></a><a href="Ext.chart.series.Pie.html#" rel="method-clearListeners" class="cls expand">clearListeners</a> : void</div><div class="description"><div class="short"><p>Removes all listeners for this object including the managed listeners</p>
 316 </div><div class="long"><p>Removes all listeners for this object including the managed listeners</p>
 317 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 318 </li></ul></div></div></div><div id="method-clearManagedListeners" class="member inherited"><a href="Ext.chart.series.Pie.html#method-clearManagedListeners" rel="method-clearManagedListeners" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-clearManagedListeners" class="viewSource">view source</a></div><a name="clearManagedListeners"></a><a name="method-clearManagedListeners"></a><a href="Ext.chart.series.Pie.html#" rel="method-clearManagedListeners" class="cls expand">clearManagedListeners</a> : void</div><div class="description"><div class="short"><p>Removes all managed listeners for this object.</p>
 319 </div><div class="long"><p>Removes all managed listeners for this object.</p>
 320 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 321 </li></ul></div></div></div><div id="method-drawSeries" class="member ni"><a href="Ext.chart.series.Pie.html#method-drawSeries" rel="method-drawSeries" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-method-drawSeries" class="viewSource">view source</a></div><a name="drawSeries"></a><a name="method-drawSeries"></a><a href="Ext.chart.series.Pie.html#" rel="method-drawSeries" class="cls expand">drawSeries</a> : void</div><div class="description"><div class="short"><p>Draws the series for the current chart.</p>
 322 </div><div class="long"><p>Draws the series for the current chart.</p>
 323 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 324 </li></ul></div></div></div><div id="method-enableBubble" class="member inherited"><a href="Ext.chart.series.Pie.html#method-enableBubble" rel="method-enableBubble" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-enableBubble" class="viewSource">view source</a></div><a name="enableBubble"></a><a name="method-enableBubble"></a><a href="Ext.chart.series.Pie.html#" rel="method-enableBubble" class="cls expand">enableBubble</a>(
 325 <span class="pre">String/Array events</span>)
 326  : void</div><div class="description"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
 327 this.getBubbleTarget() if present....</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling
 328 <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>
 329
 330
 331 <p>This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="Ext.Component.html#getBubbleTarget" rel="Ext.Component#getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default
 332 implementation in <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to
 333 access the required target more quickly.</p>
 334
 335
 336 <p>Example:</p>
 337
 338
 339 <pre><code>Ext.override(Ext.form.field.Base, {
 340 //  Add functionality to Field&#39;s initComponent to enable the change event to bubble
 341 initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
 342     this.enableBubble('change');
 343 }),
 344
 345 //  We know that we want Field&#39;s events to bubble directly to the FormPanel.
 346 getBubbleTarget : function() {
 347     if (!this.formPanel) {
 348         this.formPanel = this.findParentByType('form');
 349     }
 350     return this.formPanel;
 351 }
 352 });
 353
 354 var myForm = new Ext.formPanel({
 355 title: 'User Details',
 356 items: [{
 357     ...
 358 }],
 359 listeners: {
 360     change: function() {
 361         // Title goes red if form has been modified.
 362         myForm.header.setStyle('color', 'red');
 363     }
 364 }
 365 });
 366 </code></pre>
 367
 368 <h3 class="pa">Parameters</h3><ul><li><span class="pre">events</span> : String/Array<div class="sub-desc"><p>The event name to bubble, or an Array of event names.</p>
 369 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 370 </li></ul></div></div></div><div id="method-fireEvent" class="member inherited"><a href="Ext.chart.series.Pie.html#method-fireEvent" rel="method-fireEvent" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-fireEvent" class="viewSource">view source</a></div><a name="fireEvent"></a><a name="method-fireEvent"></a><a href="Ext.chart.series.Pie.html#" rel="method-fireEvent" class="cls expand">fireEvent</a>(
 371 <span class="pre">String eventName, Object... args</span>)
 372  : Boolean</div><div class="description"><div class="short">Fires the specified event with the passed parameters (minus the event name).
 373
 374
 375 An event may be set to bubble up an Ob...</div><div class="long"><p>Fires the specified event with the passed parameters (minus the event name).</p>
 376
 377
 378 <p>An event may be set to bubble up an Observable parent hierarchy (See <a href="Ext.Component.html#getBubbleTarget" rel="Ext.Component#getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>)
 379 by calling <a href="Ext.chart.series.Pie.html#enableBubble" rel="Ext.chart.series.Pie#enableBubble" class="docClass">enableBubble</a>.</p>
 380
 381 <h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The name of the event to fire.</p>
 382 </div></li><li><span class="pre">args</span> : Object...<div class="sub-desc"><p>Variable number of parameters are passed to handlers.</p>
 383 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>returns false if any of the handlers return false otherwise it returns true.</p>
 384 </li></ul></div></div></div><div id="method-getItemForPoint" class="member inherited"><a href="Ext.chart.series.Pie.html#method-getItemForPoint" rel="method-getItemForPoint" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-method-getItemForPoint" class="viewSource">view source</a></div><a name="getItemForPoint"></a><a name="method-getItemForPoint"></a><a href="Ext.chart.series.Pie.html#" rel="method-getItemForPoint" class="cls expand">getItemForPoint</a>(
 385 <span class="pre">Number x, Number y</span>)
 386  : Object</div><div class="description"><div class="short"><p>For a given x/y point relative to the Surface, find a corresponding item from this
 387 series, if any.</p>
 388 </div><div class="long"><p>For a given x/y point relative to the Surface, find a corresponding item from this
 389 series, if any.</p>
 390 <h3 class="pa">Parameters</h3><ul><li><span class="pre">x</span> : Number<div class="sub-desc">
 391 </div></li><li><span class="pre">y</span> : Number<div class="sub-desc">
 392 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span>&nbsp; &nbsp;<p>An object describing the item, or null if there is no matching item. The exact contents of</p>
 393
 394 <pre><code>             this object will vary by series type, but should always contain at least the following:
 395              &lt;ul&gt;
 396                &lt;li&gt;{Ext.chart.series.Series} series - the Series object to which the item belongs&lt;/li&gt;
 397                &lt;li&gt;{Object} value - the value(s) of the item's data point&lt;/li&gt;
 398                &lt;li&gt;{Array} point - the x/y coordinates relative to the chart box of a single point
 399                    for this data item, which can be used as e.g. a tooltip anchor point.&lt;/li&gt;
 400                &lt;li&gt;{Ext.draw.Sprite} sprite - the item's rendering Sprite.
 401              &lt;/ul&gt;
 402 </code></pre>
 403 </li></ul></div></div></div><div id="method-getLegendColor" class="member ni"><a href="Ext.chart.series.Pie.html#method-getLegendColor" rel="method-getLegendColor" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-method-getLegendColor" class="viewSource">view source</a></div><a name="getLegendColor"></a><a name="method-getLegendColor"></a><a href="Ext.chart.series.Pie.html#" rel="method-getLegendColor" class="cls expand">getLegendColor</a>(
 404 <span class="pre">Object item</span>)
 405  : void</div><div class="description"><div class="short"><p>Returns the color of the series (to be displayed as color for the series legend item).</p>
 406 </div><div class="long"><p>Returns the color of the series (to be displayed as color for the series legend item).</p>
 407 <h3 class="pa">Parameters</h3><ul><li><span class="pre">item</span> : Object<div class="sub-desc"><p>{Object} Info about the item; same format as returned by #getItemForPoint</p>
 408 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 409 </li></ul></div></div></div><div id="method-hasListener" class="member inherited"><a href="Ext.chart.series.Pie.html#method-hasListener" rel="method-hasListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-hasListener" class="viewSource">view source</a></div><a name="hasListener"></a><a name="method-hasListener"></a><a href="Ext.chart.series.Pie.html#" rel="method-hasListener" class="cls expand">hasListener</a>(
 410 <span class="pre">String eventName</span>)
 411  : Boolean</div><div class="description"><div class="short"><p>Checks to see if this object has any listeners for a specified event</p>
 412 </div><div class="long"><p>Checks to see if this object has any listeners for a specified event</p>
 413 <h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The name of the event to check for</p>
 414 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>True if the event is being listened for, else false</p>
 415 </li></ul></div></div></div><div id="method-hideAll" class="member inherited"><a href="Ext.chart.series.Pie.html#method-hideAll" rel="method-hideAll" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-method-hideAll" class="viewSource">view source</a></div><a name="hideAll"></a><a name="method-hideAll"></a><a href="Ext.chart.series.Pie.html#" rel="method-hideAll" class="cls expand">hideAll</a> : void</div><div class="description"><div class="short"><p>Hides all the elements in the series.</p>
 416 </div><div class="long"><p>Hides all the elements in the series.</p>
 417 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 418 </li></ul></div></div></div><div id="method-highlightItem" class="member ni"><a href="Ext.chart.series.Pie.html#method-highlightItem" rel="method-highlightItem" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-method-highlightItem" class="viewSource">view source</a></div><a name="highlightItem"></a><a name="method-highlightItem"></a><a href="Ext.chart.series.Pie.html#" rel="method-highlightItem" class="cls expand">highlightItem</a>(
 419 <span class="pre">Object item</span>)
 420  : void</div><div class="description"><div class="short"><p>Highlight the specified item. If no item is provided the whole series will be highlighted.</p>
 421 </div><div class="long"><p>Highlight the specified item. If no item is provided the whole series will be highlighted.</p>
 422 <h3 class="pa">Parameters</h3><ul><li><span class="pre">item</span> : Object<div class="sub-desc"><p>{Object} Info about the item; same format as returned by #getItemForPoint</p>
 423 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 424 </li></ul></div></div></div><div id="method-observe" class="member inherited"><a href="Ext.chart.series.Pie.html#method-observe" rel="method-observe" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-observe" class="viewSource">view source</a></div><a name="observe"></a><a name="method-observe"></a><a href="Ext.chart.series.Pie.html#" rel="method-observe" class="cls expand">observe</a>(
 425 <span class="pre">Function c, Object listeners</span>)
 426  : void</div><div class="description"><div class="short">Sets observability on the passed class constructor.
 427
 428 This makes any event fired on any instance of the passed class a...</div><div class="long"><p>Sets observability on the passed class constructor.</p>
 429
 430 <p>This makes any event fired on any instance of the passed class also fire a single event through
 431 the <strong>class</strong> allowing for central handling of events on many instances at once.</p>
 432
 433 <p>Usage:</p>
 434
 435 <pre><code>Ext.util.Observable.observe(Ext.data.Connection);
 436 Ext.data.Connection.on('beforerequest', function(con, options) {
 437     console.log('Ajax request made to ' + options.url);
 438 });
 439 </code></pre>
 440 <h3 class="pa">Parameters</h3><ul><li><span class="pre">c</span> : Function<div class="sub-desc"><p>The class constructor to make observable.</p>
 441 </div></li><li><span class="pre">listeners</span> : Object<div class="sub-desc"><p>An object containing a series of listeners to add. See <a href="Ext.chart.series.Pie.html#addListener" rel="Ext.chart.series.Pie#addListener" class="docClass">addListener</a>.</p>
 442 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 443 </li></ul></div></div></div><div id="method-on" class="member inherited"><a href="Ext.chart.series.Pie.html#method-on" rel="method-on" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-on" class="viewSource">view source</a></div><a name="on"></a><a name="method-on"></a><a href="Ext.chart.series.Pie.html#" rel="method-on" class="cls expand">on</a>(
 444 <span class="pre">String eventName, Function handler, [Object scope], [Object options]</span>)
 445  : void</div><div class="description"><div class="short"><p>Appends an event handler to this object (shorthand for <a href="Ext.chart.series.Pie.html#addListener" rel="Ext.chart.series.Pie#addListener" class="docClass">addListener</a>.)</p>
 446 </div><div class="long"><p>Appends an event handler to this object (shorthand for <a href="Ext.chart.series.Pie.html#addListener" rel="Ext.chart.series.Pie#addListener" class="docClass">addListener</a>.)</p>
 447 <h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The type of event to listen for</p>
 448 </div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The method the event invokes</p>
 449 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
 450 <b>If omitted, defaults to the object which fired the event.</b></p>
 451 </div></li><li><span class="pre">options</span> : Object<div class="sub-desc"><p>(optional) An object containing handler configuration.</p>
 452 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 453 </li></ul></div></div></div><div id="method-relayEvents" class="member inherited"><a href="Ext.chart.series.Pie.html#method-relayEvents" rel="method-relayEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-relayEvents" class="viewSource">view source</a></div><a name="relayEvents"></a><a name="method-relayEvents"></a><a href="Ext.chart.series.Pie.html#" rel="method-relayEvents" class="cls expand">relayEvents</a>(
 454 <span class="pre">Object origin, Array events, Object prefix</span>)
 455  : void</div><div class="description"><div class="short"><p>Relays selected events from the specified Observable as if the events were fired by <code><b>this</b></code>.</p>
 456 </div><div class="long"><p>Relays selected events from the specified Observable as if the events were fired by <code><b>this</b></code>.</p>
 457 <h3 class="pa">Parameters</h3><ul><li><span class="pre">origin</span> : Object<div class="sub-desc"><p>The Observable whose events this object is to relay.</p>
 458 </div></li><li><span class="pre">events</span> : Array<div class="sub-desc"><p>Array of event names to relay.</p>
 459 </div></li><li><span class="pre">prefix</span> : Object<div class="sub-desc">
 460 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 461 </li></ul></div></div></div><div id="method-releaseCapture" class="member inherited"><a href="Ext.chart.series.Pie.html#method-releaseCapture" rel="method-releaseCapture" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-releaseCapture" class="viewSource">view source</a></div><a name="releaseCapture"></a><a name="method-releaseCapture"></a><a href="Ext.chart.series.Pie.html#" rel="method-releaseCapture" class="cls expand">releaseCapture</a>(
 462 <span class="pre">Observable o</span>)
 463  : void</div><div class="description"><div class="short"><p>Removes <b>all</b> added captures from the Observable.</p>
 464 </div><div class="long"><p>Removes <b>all</b> added captures from the Observable.</p>
 465 <h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Observable<div class="sub-desc"><p>The Observable to release</p>
 466 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 467 </li></ul></div></div></div><div id="method-removeListener" class="member inherited"><a href="Ext.chart.series.Pie.html#method-removeListener" rel="method-removeListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-removeListener" class="viewSource">view source</a></div><a name="removeListener"></a><a name="method-removeListener"></a><a href="Ext.chart.series.Pie.html#" rel="method-removeListener" class="cls expand">removeListener</a>(
 468 <span class="pre">String eventName, Function handler, [Object scope]</span>)
 469  : void</div><div class="description"><div class="short"><p>Removes an event handler.</p>
 470 </div><div class="long"><p>Removes an event handler.</p>
 471 <h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The type of event the handler was associated with.</p>
 472 </div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The handler to remove. <b>This must be a reference to the function passed into the <a href="Ext.chart.series.Pie.html#addListener" rel="Ext.chart.series.Pie#addListener" class="docClass">addListener</a> call.</b></p>
 473 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope originally specified for the handler.</p>
 474 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 475 </li></ul></div></div></div><div id="method-removeManagedListener" class="member inherited"><a href="Ext.chart.series.Pie.html#method-removeManagedListener" rel="method-removeManagedListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-removeManagedListener" class="viewSource">view source</a></div><a name="removeManagedListener"></a><a name="method-removeManagedListener"></a><a href="Ext.chart.series.Pie.html#" rel="method-removeManagedListener" class="cls expand">removeManagedListener</a>(
 476 <span class="pre">Observable|Element item, Object|String ename, Function fn, Object scope</span>)
 477  : void</div><div class="description"><div class="short"><p>Removes listeners that were added by the <a href="Ext.chart.series.Pie.html#mon" rel="Ext.chart.series.Pie#mon" class="docClass">mon</a> method.</p>
 478 </div><div class="long"><p>Removes listeners that were added by the <a href="Ext.chart.series.Pie.html#mon" rel="Ext.chart.series.Pie#mon" class="docClass">mon</a> method.</p>
 479 <h3 class="pa">Parameters</h3><ul><li><span class="pre">item</span> : Observable|Element<div class="sub-desc"><p>The item from which to remove a listener/listeners.</p>
 480 </div></li><li><span class="pre">ename</span> : Object|String<div class="sub-desc"><p>The event name, or an object containing event name properties.</p>
 481 </div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
 482 is the handler function.</p>
 483 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
 484 is the scope (<code>this</code> reference) in which the handler function is executed.</p>
 485 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 486 </li></ul></div></div></div><div id="method-resumeEvents" class="member inherited"><a href="Ext.chart.series.Pie.html#method-resumeEvents" rel="method-resumeEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-resumeEvents" class="viewSource">view source</a></div><a name="resumeEvents"></a><a name="method-resumeEvents"></a><a href="Ext.chart.series.Pie.html#" rel="method-resumeEvents" class="cls expand">resumeEvents</a> : void</div><div class="description"><div class="short">Resume firing events. (see suspendEvents)
 487 If events were suspended using the queueSuspended parameter, then all
 488 event...</div><div class="long"><p>Resume firing events. (see <a href="Ext.chart.series.Pie.html#suspendEvents" rel="Ext.chart.series.Pie#suspendEvents" class="docClass">suspendEvents</a>)
 489 If events were suspended using the <code><b>queueSuspended</b></code> parameter, then all
 490 events fired during event suspension will be sent to any listeners now.</p>
 491 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 492 </li></ul></div></div></div><div id="method-setTitle" class="member inherited"><a href="Ext.chart.series.Pie.html#method-setTitle" rel="method-setTitle" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-method-setTitle" class="viewSource">view source</a></div><a name="setTitle"></a><a name="method-setTitle"></a><a href="Ext.chart.series.Pie.html#" rel="method-setTitle" class="cls expand">setTitle</a>(
 493 <span class="pre">Number index, String title</span>)
 494  : void</div><div class="description"><div class="short">Changes the value of the title for the series.
 495 Arguments can take two forms:
 496
 497
 498 A single String value: this will be us...</div><div class="long"><p>Changes the value of the <a href="Ext.chart.series.Pie.html#title" rel="Ext.chart.series.Pie#title" class="docClass">title</a> for the series.
 499 Arguments can take two forms:</p>
 500
 501 <ul>
 502 <li>A single String value: this will be used as the new single title for the series (applies
 503 to series with only one yField)</li>
 504 <li>A numeric index and a String value: this will set the title for a single indexed yField.</li>
 505 </ul>
 506
 507 <h3 class="pa">Parameters</h3><ul><li><span class="pre">index</span> : Number<div class="sub-desc">
 508 </div></li><li><span class="pre">title</span> : String<div class="sub-desc">
 509 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 510 </li></ul></div></div></div><div id="method-showAll" class="member inherited"><a href="Ext.chart.series.Pie.html#method-showAll" rel="method-showAll" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-method-showAll" class="viewSource">view source</a></div><a name="showAll"></a><a name="method-showAll"></a><a href="Ext.chart.series.Pie.html#" rel="method-showAll" class="cls expand">showAll</a> : void</div><div class="description"><div class="short"><p>Shows all the elements in the series.</p>
 511 </div><div class="long"><p>Shows all the elements in the series.</p>
 512 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 513 </li></ul></div></div></div><div id="method-suspendEvents" class="member inherited"><a href="Ext.chart.series.Pie.html#method-suspendEvents" rel="method-suspendEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-suspendEvents" class="viewSource">view source</a></div><a name="suspendEvents"></a><a name="method-suspendEvents"></a><a href="Ext.chart.series.Pie.html#" rel="method-suspendEvents" class="cls expand">suspendEvents</a>(
 514 <span class="pre">Boolean queueSuspended</span>)
 515  : void</div><div class="description"><div class="short"><p>Suspend the firing of all events. (see <a href="Ext.chart.series.Pie.html#resumeEvents" rel="Ext.chart.series.Pie#resumeEvents" class="docClass">resumeEvents</a>)</p>
 516 </div><div class="long"><p>Suspend the firing of all events. (see <a href="Ext.chart.series.Pie.html#resumeEvents" rel="Ext.chart.series.Pie#resumeEvents" class="docClass">resumeEvents</a>)</p>
 517 <h3 class="pa">Parameters</h3><ul><li><span class="pre">queueSuspended</span> : Boolean<div class="sub-desc"><p>Pass as true to queue up suspended events to be fired
 518 after the <a href="Ext.chart.series.Pie.html#resumeEvents" rel="Ext.chart.series.Pie#resumeEvents" class="docClass">resumeEvents</a> call instead of discarding all suspended events;</p>
 519 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 520 </li></ul></div></div></div><div id="method-un" class="member inherited"><a href="Ext.chart.series.Pie.html#method-un" rel="method-un" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-un" class="viewSource">view source</a></div><a name="un"></a><a name="method-un"></a><a href="Ext.chart.series.Pie.html#" rel="method-un" class="cls expand">un</a>(
 521 <span class="pre">String eventName, Function handler, [Object scope]</span>)
 522  : void</div><div class="description"><div class="short"><p>Removes an event handler (shorthand for <a href="Ext.chart.series.Pie.html#removeListener" rel="Ext.chart.series.Pie#removeListener" class="docClass">removeListener</a>.)</p>
 523 </div><div class="long"><p>Removes an event handler (shorthand for <a href="Ext.chart.series.Pie.html#removeListener" rel="Ext.chart.series.Pie#removeListener" class="docClass">removeListener</a>.)</p>
 524 <h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The type of event the handler was associated with.</p>
 525 </div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The handler to remove. <b>This must be a reference to the function passed into the <a href="Ext.chart.series.Pie.html#addListener" rel="Ext.chart.series.Pie#addListener" class="docClass">addListener</a> call.</b></p>
 526 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope originally specified for the handler.</p>
 527 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 528 </li></ul></div></div></div><div id="method-unHighlightItem" class="member ni"><a href="Ext.chart.series.Pie.html#method-unHighlightItem" rel="method-unHighlightItem" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Pie.html" class="definedIn docClass">Ext.chart.series.Pie</a><br/><a href="../source/Pie.html#Ext-chart.series.Pie-method-unHighlightItem" class="viewSource">view source</a></div><a name="unHighlightItem"></a><a name="method-unHighlightItem"></a><a href="Ext.chart.series.Pie.html#" rel="method-unHighlightItem" class="cls expand">unHighlightItem</a>(
 529 <span class="pre">Object item</span>)
 530  : void</div><div class="description"><div class="short"><p>un-highlights the specified item. If no item is provided it will un-highlight the entire series.</p>
 531 </div><div class="long"><p>un-highlights the specified item. If no item is provided it will un-highlight the entire series.</p>
 532 <h3 class="pa">Parameters</h3><ul><li><span class="pre">item</span> : Object<div class="sub-desc"><p>{Object} Info about the item; same format as returned by #getItemForPoint</p>
 533 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 534 </li></ul></div></div></div></div><div class="m-events"><a name="events"></a><div class="definedBy">Defined By</div><h3 class="evt p">Events</h3><div id="event-titlechange" class="member f inherited"><a href="Ext.chart.series.Pie.html#event-titlechange" rel="event-titlechange" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.series.Series.html" class="definedIn docClass">Ext.chart.series.Series</a><br/><a href="../source/Series.html#Ext-chart.series.Series-event-titlechange" class="viewSource">view source</a></div><a name="titlechange"></a><a name="event-titlechange"></a><a href="Ext.chart.series.Pie.html#" rel="event-titlechange" class="cls expand">titlechange</a>(
 535 <span class="pre">String title, Number index</span>)
 536 </div><div class="description"><div class="short"><p>Fires when the series title is changed via <a href="Ext.chart.series.Pie.html#setTitle" rel="Ext.chart.series.Pie#setTitle" class="docClass">setTitle</a>.</p>
 537 </div><div class="long"><p>Fires when the series title is changed via <a href="Ext.chart.series.Pie.html#setTitle" rel="Ext.chart.series.Pie#setTitle" class="docClass">setTitle</a>.</p>
 538 <h3 class="pa">Parameters</h3><ul><li><span class="pre">title</span> : String<div class="sub-desc"><p>The new title value</p>
 539 </div></li><li><span class="pre">index</span> : Number<div class="sub-desc"><p>The index in the collection of titles</p>
 540 </div></li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>