<!-- saved from url=(0026)http://www.naturaldocs.org -->
<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><divclass="CTitle logo"><divclass="nav"><aclass="nav"href="../../../index.php"><span>></span>Home</a><aclass="nav"href="../../../tests/"><span>></span>Examples</a><aclass="nav"href="../../../docs/"><span>></span>Docs</a><aclass="nav"href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>></span>Download</a><aclass="nav"href="../../../info.php"><span>></span>Info</a><aclass="nav"href="../../../donate.php"><span>></span>Donate</a></div><aname="$.jqplot.FunnelRenderer"></a>$.jqplot.<wbr>FunnelRenderer</div><divclass=CBody><p>Plugin renderer to draw a funnel chart. x values, if present, will be used as labels. y values give area size.</p><p>Funnel charts will draw a single series only.</p><p>To use this renderer, you need to include the funnel renderer plugin, for example:</p><blockquote><pre><script type="text/javascript" src="plugins/jqplot.funnelRenderer.js"></script></pre></blockquote><p>Properties described here are passed into the $.jqplot function as options on the series renderer. For example:</p><blockquote><pre>plot2 = $.jqplot('chart2', [s1, s2], {
seriesDefaults: {
renderer:$.jqplot.FunnelRenderer,
rendererOptions:{
sectionMargin: 12,
widthRatio: 0.3
}
}
});</pre></blockquote><p>IMPORTANT</p><p><b>The funnel renderer will reorder data in descending order</b> so the largest value in the data set is first and displayed on top of the funnel. Data will then be displayed in descending order down the funnel. The area of each funnel section will correspond to the value of each data point relative to the sum of all values. That is section area is proportional to section value divided by sum of all section values.</p><p>If your data is not in descending order when passed into the plot, <b>it will be reordered</b> when stored in the series.data property. A copy of the unordered data is kept in the series._unorderedData property.</p><p>A funnel plot will trigger events on the plot target according to user interaction. All events return the event object, the series index, the point (section) index, and the point data for the appropriate section. <b>Note</b> the point index will referr to the ordered data, not the original unordered data.</p><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>’jqplotDataMouseOver’</td><tdclass=CDLDescription>triggered when mousing over a section.</td></tr><tr><tdclass=CDLEntry>’jqplotDataHighlight’</td><tdclass=CDLDescription>triggered the first time user mouses over a section, if highlighting is enabled.</td></tr><tr><tdclass=CDLEntry>’jqplotDataUnhighlight’</td><tdclass=CDLDescription>triggered when a user moves the mouse out of a highlighted section.</td></tr><tr><tdclass=CDLEntry>’jqplotDataClick’</td><tdclass=CDLDescription>triggered when the user clicks on a section.</td></tr><tr><tdclass=CDLEntry>’jqplotDataRightClick’</td><tdclass=CDLDescription>tiggered when the user right clicks on a section if the “captureRightClick” option is set to true on the plot.</td></tr></table><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer">$.jqplot.<wbr>FunnelRenderer</a></td><tdclass=SDescription>Plugin renderer to draw a funnel chart. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer.padding"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">padding</a></td><tdclass=SDescription>padding between the funnel and plot edges, legend, etc.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer.sectionMargin"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">sectionMargin</a></td><tdclass=SDescription>spacing between funnel sections in pixels.</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer.fill"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">fill</a></td><tdclass=SDescription>true or false, wether to fill the areas.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer.shadowOffset"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">shadowOffset</a></td><tdclass=SDescription>offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer.shadowAlpha"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">shadowAlpha</a></td><tdclass=SDescription>transparency of the shadow (0 = transparent, 1 = opaque)</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.FunnelRenderer.shadowDepth"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">shadowDepth</a></td><tdclass=SDescription>number of s
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.padding"></a>padding</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.padding = {top: 20, right: 20, bottom: 20, left: 20}</td></tr></table></blockquote><p>padding between the funnel and plot edges, legend, etc.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.sectionMargin"></a>sectionMargin</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.sectionMargin = 6</td></tr></table></blockquote><p>spacing between funnel sections in pixels.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.fill"></a>fill</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fill = true</td></tr></table></blockquote><p>true or false, wether to fill the areas.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.shadowOffset"></a>shadowOffset</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.shadowOffset = 2</td></tr></table></blockquote><p>offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.shadowAlpha"></a>shadowAlpha</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.shadowAlpha = 0.07</td></tr></table></blockquote><p>transparency of the shadow (0 = transparent, 1 = opaque)</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.shadowDepth"></a>shadowDepth</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.shadowDepth = 5</td></tr></table></blockquote><p>number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.highlightMouseOver"></a>highlightMouseOver</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightMouseOver = true</td></tr></table></blockquote><p>True to highlight area when moused over. This must be false to enable highlightMouseDown to highlight when clicking on a area.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.highlightMouseDown"></a>highlightMouseDown</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightMouseDown = false</td></tr></table></blockquote><p>True to highlight when a mouse button is pressed over a area. This will be disabled if highlightMouseOver is true.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.highlightColors"></a>highlightColors</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightColors = []</td></tr></table></blockquote><p>array of colors to use when highlighting an area.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.widthRatio"></a>widthRatio</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.widthRatio = 0.2</td></tr></table></blockquote><p>The ratio of the width of the top of the funnel to the bottom. a ratio of 0 will make an upside down pyramid.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.lineWidth"></a>lineWidth</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.lineWidth = 2</td></tr></table></blockquote><p>width of line if areas are stroked and not filled.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.dataLabels"></a>dataLabels</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabels = 'percent'</td></tr></table></blockquote><p>Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. Defaults to percentage of each pie slice.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.showDataLabels"></a>showDataLabels</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showDataLabels = false</td></tr></table></blockquote><p>true to show data labels on slices.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.dataLabelFormatString"></a>dataLabelFormatString</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabelFormatString = null</td></tr></table></blockquote><p>Format string for data labels. If none, ‘%s’ is used for “label” and for arrays, ‘%d’ for value and ‘%d%%’ for percentage.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelRenderer.dataLabelThreshold"></a>dataLabelThreshold</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabelThreshold = 3</td></tr></table></blockquote><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>Threshhold in percentage (0</td><tdclass=CDLDescription>100) of pie area, below which no label will be displayed. This applies to all label types, not just to percentage labels.</td></tr></table></div></div></div>
<divclass="CClass"><divclass=CTopic><h2class=CTitle><aname="$.jqplot.FunnelLegendRenderer"></a>$.jqplot.<wbr>FunnelLegendRenderer</h2><divclass=CBody><p>Legend Renderer specific to funnel plots. Set by default when the user creates a funnel plot.</p><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SGroup"><tdclass=SEntry><ahref="#$.jqplot.FunnelLegendRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent1 SMarked"><tdclass=SEntry><ahref="#$.jqplot.FunnelLegendRenderer.numberRows"id=link18onMouseOver="ShowTip(event, 'tt16', 'link18')"onMouseOut="HideTip('tt16')">numberRows</a></td><tdclass=SDescription>Maximum number of rows in the legend. </td></tr><trclass="SProperty SIndent1"><tdclass=SEntry><ahref="#$.jqplot.FunnelLegendRenderer.numberColumns"id=link19onMouseOver="ShowTip(event, 'tt17', 'link19')"onMouseOut="HideTip('tt17')">numberColumns</a></td><tdclass=SDescription>Maximum number of columns in the legend. </td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelLegendRenderer.numberRows"></a>numberRows</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.numberRows = null</td></tr></table></blockquote><p>Maximum number of rows in the legend. 0 or null for unlimited.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.FunnelLegendRenderer.numberColumns"></a>numberColumns</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.numberColumns = null</td></tr></table></blockquote><p>Maximum number of columns in the legend. 0 or null for unlimited.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.padding = {top: 20, right: 20, bottom: 20, left: 20}</td></tr></table></blockquote>padding between the funnel and plot edges, legend, etc.</div></div><divclass=CToolTipid="tt2"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.sectionMargin = 6</td></tr></table></blockquote>spacing between funnel sections in pixels.</div></div><divclass=CToolTipid="tt3"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fill = true</td></tr></table></blockquote>true or false, wether to fill the areas.</div></div><divclass=CToolTipid="tt4"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.shadowOffset = 2</td></tr></table></blockquote>offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.</div></div><divclass=CToolTipid="tt5"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.shadowAlpha = 0.07</td></tr></table></blockquote>transparency of the shadow (0 = transparent, 1 = opaque)</div></div><divclass=CToolTipid="tt6"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.shadowDepth = 5</td></tr></table></blockquote>number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.</div></div><divclass=CToolTipid="tt7"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightMouseOver = true</td></tr></table></blockquote>True to highlight area when moused over. </div></div><divclass=CToolTipid="tt8"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightMouseDown = false</td></tr></table></blockquote>True to highlight when a mouse button is pressed over a area. </div></div><divclass=CToolTipid="tt9"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightColors = []</td></tr></table></blockquote>array of colors to use when highlighting an area.</div></div><divclass=CToolTipid="tt10"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.widthRatio = 0.2</td></tr></table></blockquote>The ratio of the width of the top of the funnel to the bottom. </div></div><divclass=CToolTipid="tt11"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.lineWidth = 2</td></tr></table></blockquote>width of line if areas are stroked and not filled.</div></div><divclass=CToolTipid="tt12"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabels = 'percent'</td></tr></table></blockquote>Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. </div></div><divclass=CToolTipid="tt13"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showDataLabels = false</td></tr></table></blockquote>true to show data labels on slices.</div></div><divclass=CToolTipid="tt14"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabelFormatString = null</td></tr></table></blockquote>Format string for data labels. </div></div><divclass=CToolTipid="tt15"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabelThreshold = 3</td></tr></table></blockquote></div></div><divclass=CToolTipid="tt16"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.numberRows = null</td></tr></table></blockquote>Maximum number of rows in the legend. </div></div><divclass=CToolTipid="tt17">
