<!-- 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.DonutRenderer"></a>$.jqplot.<wbr>DonutRenderer</div><divclass=CBody><p>Plugin renderer to draw a donut chart. x values, if present, will be used as slice labels. y values give slice size.</p><p>To use this renderer, you need to include the donut renderer plugin, for example:</p><blockquote><pre><script type="text/javascript" src="plugins/jqplot.donutRenderer.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.DonutRenderer,
rendererOptions:{
sliceMargin: 2,
innerDiameter: 110,
startAngle: -90
}
}
});</pre></blockquote><p>A donut plot will trigger events on the plot target according to user interaction. All events return the event object, the series index, the point (slice) index, and the point data for the appropriate slice.</p><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>’jqplotDataMouseOver’</td><tdclass=CDLDescription>triggered when user mouseing over a slice.</td></tr><tr><tdclass=CDLEntry>’jqplotDataHighlight’</td><tdclass=CDLDescription>triggered the first time user mouses over a slice, if highlighting is enabled.</td></tr><tr><tdclass=CDLEntry>’jqplotDataUnhighlight’</td><tdclass=CDLDescription>triggered when a user moves the mouse out of a highlighted slice.</td></tr><tr><tdclass=CDLEntry>’jqplotDataClick’</td><tdclass=CDLDescription>triggered when the user clicks on a slice.</td></tr><tr><tdclass=CDLEntry>’jqplotDataRightClick’</td><tdclass=CDLDescription>tiggered when the user right clicks on a slice 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.DonutRenderer">$.jqplot.<wbr>DonutRenderer</a></td><tdclass=SDescription>Plugin renderer to draw a donut chart. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.diameter"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">diameter</a></td><tdclass=SDescription>Outer diameter of the donut, auto computed by default</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.innerDiameter"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">innerDiameter</a></td><tdclass=SDescription>Inner diameter of the donut, auto calculated by default. </td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.thickness"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">thickness</a></td><tdclass=SDescription>thickness of the donut, auto computed by default Overridden by if innerDiameter is specified.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.padding"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">padding</a></td><tdclass=SDescription>padding between the donut and plot edges, legend, etc.</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.sliceMargin"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">sliceMargin</a></td><tdclass=SDescription>angular spacing between donut slices in degrees.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.ringMargin"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">ringMargin</a></td><tdclass=SDescription>pixel distance between rings, or multiple series in a donut plot. </td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.fill"id=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">fill</a></td><tdclass=SDescription>true or false, whether to fil the slices.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.shadowOffset"id=link8onMouseOver="ShowTip(event, 'tt8', 'link8')"onMouseOut="HideTip('tt8')">shadowOffset</a></td><tdclass=SDescription>offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.DonutRenderer.shadowAlpha"id=link9onMouseOver="ShowTip(e
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.diameter"></a>diameter</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.diameter = null</td></tr></table></blockquote><p>Outer diameter of the donut, auto computed by default</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.innerDiameter"></a>innerDiameter</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.innerDiameter = null</td></tr></table></blockquote><p>Inner diameter of the donut, auto calculated by default. If specified will override thickness value.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.thickness"></a>thickness</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.thickness = null</td></tr></table></blockquote><p>thickness of the donut, auto computed by default Overridden by if innerDiameter is specified.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.padding"></a>padding</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.padding = 20</td></tr></table></blockquote><p>padding between the donut and plot edges, legend, etc.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.sliceMargin"></a>sliceMargin</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.sliceMargin = 0</td></tr></table></blockquote><p>angular spacing between donut slices in degrees.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.ringMargin"></a>ringMargin</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.ringMargin = null</td></tr></table></blockquote><p>pixel distance between rings, or multiple series in a donut plot. null will compute ringMargin based on sliceMargin.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.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, whether to fil the slices.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.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 slice and offset of each succesive stroke of the shadow from the last.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.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.DonutRenderer.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.DonutRenderer.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 slice when moused over. This must be false to enable highlightMouseDown to highlight when clicking on a slice.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.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 slice. This will be disabled if highlightMouseOver is true.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.highlightColors"></a>highlightColors</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightColors = []</td></tr></table></blockquote><p>an array of colors to use when highlighting a slice.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.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.DonutRenderer.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.DonutRenderer.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.DonutRenderer.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="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.dataLabelPositionFactor"></a>dataLabelPositionFactor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabelPositionFactor = 0.4</td></tr></table></blockquote><p>A Multiplier (0-1) of the pie radius which controls position of label on slice. Increasing will slide label toward edge of pie, decreasing will slide label toward center of pie.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.dataLabelNudge"></a>dataLabelNudge</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabelNudge = 0</td></tr></table></blockquote><p>Number of pixels to slide the label away from (+) or toward (-) the center of the pie.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.DonutRenderer.startAngle"></a>startAngle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.startAngle = 0</td></tr></table></blockquote><p>Angle to start drawing donut in degrees. According to orientation of canvas coordinate system: 0 = on the positive x axis -90 = on the positive y axis. 90 = on the negaive y axis. 180 or - 180 = on the negative x axis.</p></div></div></div>
<divclass="CClass"><divclass=CTopic><h2class=CTitle><aname="$.jqplot.DonutLegendRenderer"></a>$.jqplot.<wbr>DonutLegendRenderer</h2><divclass=CBody><p>Legend Renderer specific to donut plots. Set by default when user creates a donut plot.</p><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SGroup"><tdclass=SEntry><ahref="#$.jqplot.DonutLegendRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent1 SMarked"><tdclass=SEntry><ahref="#$.jqplot.DonutLegendRenderer.numberRows"id=link23onMouseOver="ShowTip(event, 'tt21', 'link23')"onMouseOut="HideTip('tt21')">numberRows</a></td><tdclass=SDescription>Maximum number of rows in the legend. </td></tr><trclass="SProperty SIndent1"><tdclass=SEntry><ahref="#$.jqplot.DonutLegendRenderer.numberColumns"id=link24onMouseOver="ShowTip(event, 'tt22', 'link24')"onMouseOut="HideTip('tt22')">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.DonutLegendRenderer.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.DonutLegendRenderer.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.diameter = null</td></tr></table></blockquote>Outer diameter of the donut, auto computed by default</div></div><divclass=CToolTipid="tt2"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.innerDiameter = null</td></tr></table></blockquote>Inner diameter of the donut, auto calculated by default. </div></div><divclass=CToolTipid="tt3"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.thickness = null</td></tr></table></blockquote>thickness of the donut, auto computed by default Overridden by if innerDiameter is specified.</div></div><divclass=CToolTipid="tt4"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.padding = 20</td></tr></table></blockquote>padding between the donut and plot edges, legend, etc.</div></div><divclass=CToolTipid="tt5"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.sliceMargin = 0</td></tr></table></blockquote>angular spacing between donut slices in degrees.</div></div><divclass=CToolTipid="tt6"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.ringMargin = null</td></tr></table></blockquote>pixel distance between rings, or multiple series in a donut plot. </div></div><divclass=CToolTipid="tt7"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fill = true</td></tr></table></blockquote>true or false, whether to fil the slices.</div></div><divclass=CToolTipid="tt8"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.shadowOffset = 2</td></tr></table></blockquote>offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.</div></div><divclass=CToolTipid="tt9"><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="tt10"><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="tt11"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightMouseOver = true</td></tr></table></blockquote>True to highlight slice when moused over. </div></div><divclass=CToolTipid="tt12"><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 slice. </div></div><divclass=CToolTipid="tt13"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.highlightColors = []</td></tr></table></blockquote>an array of colors to use when highlighting a slice.</div></div><divclass=CToolTipid="tt14"><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="tt15"><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="tt16"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.dataLabelFormatString = null</td></tr></tabl
