Draws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph. the $.jqplot.MekkoAxisRenderer should be used with mekko charts.  The mekko renderer overrides the default legend renderer with it’s own $.jqplot.MekkoLegendRenderer which allows more flexibility to specify number of rows and columns in the legend.

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:

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]];

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.

barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
axes:{xaxis:{barLabels:barLabels}}
Summary
$.jqplot.MekkoRendererDraws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph.
Properties
borderColorcolor of the borders between areas on the chart
showBordersTrue to draw borders lines between areas on the chart.
Functions
setGridDataconverts the user data values to grid coordinates and stores them in the gridData array.
makeGridDataconverts any arbitrary data values to grid coordinates and returns them.
$.jqplot.MekkoLegendRendererLegend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area.
Properties
numberRowsMaximum number of rows in the legend.
numberColumnsMaximum number of columns in the legend.

Properties

borderColor

this.borderColor = null

color of the borders between areas on the chart

showBorders

this.showBorders = true

True to draw borders lines between areas on the chart.  False will draw borders lines with the same color as the area.

Functions

setGridData

$.jqplot.MekkoRenderer.prototype.setGridData = function(plot)

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.

makeGridData

$.jqplot.MekkoRenderer.prototype.makeGridData = function(data,
plot)

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.

$.jqplot.MekkoLegendRenderer

Legend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area.

Summary
Properties
numberRowsMaximum number of rows in the legend.
numberColumnsMaximum number of columns in the legend.

Properties

numberRows

this.numberRows = null

Maximum number of rows in the legend.  0 or null for unlimited.

numberColumns

this.numberColumns = null

Maximum number of columns in the legend.  0 or null for unlimited.

this.borderColor = null
color of the borders between areas on the chart
this.showBorders = true
True to draw borders lines between areas on the chart.
$.jqplot.MekkoRenderer.prototype.setGridData = function(plot)
converts the user data values to grid coordinates and stores them in the gridData array.
$.jqplot.MekkoRenderer.prototype.makeGridData = function(data,
plot)
converts any arbitrary data values to grid coordinates and returns them.
this.numberRows = null
Maximum number of rows in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
An axis renderer for a Mekko chart.
Close