<!-- 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.MekkoRenderer"></a>$.jqplot.<wbr>MekkoRenderer</div><divclass=CBody><p>Draws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph. the <ahref="jqplot-mekkoAxisRenderer-js.html#$.jqplot.MekkoAxisRenderer"class=LClassid=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">$.jqplot.MekkoAxisRenderer</a> should be used with mekko charts. The mekko renderer overrides the default legend renderer with its own $.jqplot.MekkoLegendRenderer which allows more flexibility to specify number of rows and columns in the legend.</p><p>Data is specified per bar in the chart. You can specify data as an array of y values, or as an array of [label, value] pairs. Note that labels are used only on the first series. Labels on subsequent series are ignored:</p><blockquote><pre>bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]];
bar2 = [15,6,9,13,6];
bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];</pre></blockquote><p>If you want to place labels for each bar under the axis, you use the barLabels option on the axes. The bar labels can be styled with the “.jqplot-mekko-barLabel” css class.</p><blockquote><pre>barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
axes:{xaxis:{barLabels:barLabels}}</pre></blockquote><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#$.jqplot.MekkoRenderer">$.jqplot.<wbr>MekkoRenderer</a></td><tdclass=SDescription>Draws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#$.jqplot.MekkoRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.MekkoRenderer.borderColor"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">borderColor</a></td><tdclass=SDescription>color of the borders between areas on the chart</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.MekkoRenderer.showBorders"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">showBorders</a></td><tdclass=SDescription>True to draw borders lines between areas on the chart. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#$.jqplot.MekkoRenderer.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.MekkoRenderer.setGridData"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">setGridData</a></td><tdclass=SDescription>converts the user data values to grid coordinates and stores them in the gridData array. </td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#$.jqplot.MekkoRenderer.makeGridData"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">makeGridData</a></td><tdclass=SDescription>converts any arbitrary data values to grid coordinates and returns them. </td></tr><trclass="SClass"><tdclass=SEntry><ahref="#$.jqplot.MekkoLegendRenderer">$.jqplot.<wbr>MekkoLegendRenderer</a></td><tdclass=SDescription>Legend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#$.jqplot.MekkoLegendRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.MekkoLegendRenderer.numberRows"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">numberRows</a></td><tdclass=SDescription>Maximum number of rows in the legend. </td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.MekkoLegendRenderer.numberColumns"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">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.MekkoRenderer.borderColor"></a>borderColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.borderColor = null</td></tr></table></blockquote><p>color of the borders between areas on the chart</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.MekkoRenderer.showBorders"></a>showBorders</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showBorders = true</td></tr></table></blockquote><p>True to draw borders lines between areas on the chart. False will draw borders lines with the same color as the area.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.MekkoRenderer.setGridData"></a>setGridData</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>$.jqplot.MekkoRenderer.prototype.setGridData = function(</td><tdclass=PParameternowrap>plot</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>converts the user data values to grid coordinates and stores them in the gridData array. Will convert user data into appropriate rectangles. Called with scope of a series.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.MekkoRenderer.makeGridData"></a>makeGridData</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>$.jqplot.MekkoRenderer.prototype.makeGridData = function(</td><tdclass=PParameternowrap>data,</td></tr><tr><td></td><tdclass=PParameternowrap>plot</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>converts any arbitrary data values to grid coordinates and returns them. This method exists so that plugins can use a series’ linerenderer to generate grid data points without overwriting the grid data associated with that series. Called with scope of a series.</p></div></div></div>
<divclass="CClass"><divclass=CTopic><h2class=CTitle><aname="$.jqplot.MekkoLegendRenderer"></a>$.jqplot.<wbr>MekkoLegendRenderer</h2><divclass=CBody><p>Legend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area.</p><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SGroup"><tdclass=SEntry><ahref="#$.jqplot.MekkoLegendRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent1 SMarked"><tdclass=SEntry><ahref="#$.jqplot.MekkoLegendRenderer.numberRows"id=link8onMouseOver="ShowTip(event, 'tt5', 'link8')"onMouseOut="HideTip('tt5')">numberRows</a></td><tdclass=SDescription>Maximum number of rows in the legend. </td></tr><trclass="SProperty SIndent1"><tdclass=SEntry><ahref="#$.jqplot.MekkoLegendRenderer.numberColumns"id=link9onMouseOver="ShowTip(event, 'tt6', 'link9')"onMouseOut="HideTip('tt6')">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.MekkoLegendRenderer.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.MekkoLegendRenderer.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.borderColor = null</td></tr></table></blockquote>color of the borders between areas on the chart</div></div><divclass=CToolTipid="tt2"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showBorders = true</td></tr></table></blockquote>True to draw borders lines between areas on the chart. </div></div><divclass=CToolTipid="tt3"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>$.jqplot.MekkoRenderer.prototype.setGridData = function(</td><tdclass=PParameternowrap>plot</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>converts the user data values to grid coordinates and stores them in the gridData array. </div></div><divclass=CToolTipid="tt4"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>$.jqplot.MekkoRenderer.prototype.makeGridData = function(</td><tdclass=PParameternowrap>data,</td></tr><tr><td></td><tdclass=PParameternowrap>plot</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>converts any arbitrary data values to grid coordinates and returns them. </div></div><divclass=CToolTipid="tt5"><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="tt6"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.numberColumns = null</td></tr></table></blockquote>Maximum number of columns in the legend. </div></div><divclass=CToolTipid="tt7"><divclass=CClass>An axis renderer for a Mekko chart. </div></div><!--END_ND_TOOLTIPS-->
