$.jqplot.FunnelRenderer

Plugin renderer to draw a funnel chart. x values, if present, will be used as labels. y values give area size.

Funnel charts will draw a single series only.

To use this renderer, you need to include the funnel renderer plugin, for example:

>     <script type="text/javascript" src="plugins/jqplot.funnelRenderer.js"></script>

Properties described here are passed into the $.jqplot function as options on the series renderer. For example:

>     plot2 = $.jqplot('chart2', [s1, s2], {
>         seriesDefaults: {
>             renderer:$.jqplot.FunnelRenderer,
>             rendererOptions:{
>                  sectionMargin: 12,
>                  widthRatio: 0.3
>              }
>          }
>     });

IMPORTANT

The funnel renderer will reorder data in descending order 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.

If your data is not in descending order when passed into the plot, it will be reordered when stored in the series.data property. A copy of the unordered data is kept in the series._unorderedData property.

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. Note the point index will referr to the ordered data, not the original unordered data.

’jqplotDataMouseOver’ | triggered when mousing over a section.
’jqplotDataHighlight’ | triggered the first time user mouses over a section, if highlighting is enabled.
’jqplotDataUnhighlight’ | triggered when a user moves the mouse out of a highlighted section.
’jqplotDataClick’ | triggered when the user clicks on a section.
’jqplotDataRightClick’ | tiggered when the user right clicks on a section if the “captureRightClick” option is set to true on the plot.

Summary

$.jqplot.FunnelRenderer | Plugin renderer to draw a funnel chart.
Properties |
padding | padding between the funnel and plot edges, legend, etc.
sectionMargin | spacing between funnel sections in pixels.
fill | true or false, wether to fill the areas.
shadowOffset | offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.
shadowAlpha | transparency of the shadow (0 = transparent, 1 = opaque)
shadowDepth | number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
highlightMouseOver | True to highlight area when moused over.
highlightMouseDown | True to highlight when a mouse button is pressed over a area.
highlightColors | array of colors to use when highlighting an area.
widthRatio | The ratio of the width of the top of the funnel to the bottom.
lineWidth | width of line if areas are stroked and not filled.
dataLabels | Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
showDataLabels | true to show data labels on slices.
dataLabelFormatString | Format string for data labels.
dataLabelThreshold |
$.jqplot.FunnelLegendRenderer | Legend Renderer specific to funnel plots.
Properties |
numberRows | Maximum number of rows in the legend.
numberColumns | Maximum number of columns in the legend.

### Properties

### padding

> this.padding = {top: 20, right: 20, bottom: 20, left: 20}

padding between the funnel and plot edges, legend, etc.

### sectionMargin

> this.sectionMargin = 6

spacing between funnel sections in pixels.

### fill

> this.fill = true

true or false, wether to fill the areas.

### shadowOffset

> this.shadowOffset = 2

offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.

### shadowAlpha

> this.shadowAlpha = 0.07

transparency of the shadow (0 = transparent, 1 = opaque)

### shadowDepth

> this.shadowDepth = 5

number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.

### highlightMouseOver

> this.highlightMouseOver = true

True to highlight area when moused over. This must be false to enable highlightMouseDown to highlight when clicking on a area.

### highlightMouseDown

> this.highlightMouseDown = false

True to highlight when a mouse button is pressed over a area. This will be disabled if highlightMouseOver is true.

### highlightColors

> this.highlightColors = []

array of colors to use when highlighting an area.

### widthRatio

> this.widthRatio = 0.2

The ratio of the width of the top of the funnel to the bottom. a ratio of 0 will make an upside down pyramid.

### lineWidth

> this.lineWidth = 2

width of line if areas are stroked and not filled.

### dataLabels

> this.dataLabels = 'percent'

Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. Defaults to percentage of each pie slice.

### showDataLabels

> this.showDataLabels = false

true to show data labels on slices.

### dataLabelFormatString

> this.dataLabelFormatString = null

Format string for data labels. If none, ‘%s’ is used for “label” and for arrays, ‘%d’ for value and ‘%d%%’ for percentage.

### dataLabelThreshold

> this.dataLabelThreshold = 3

Threshhold in percentage (0 | 100) of pie area, below which no label will be displayed. This applies to all label types, not just to percentage labels.

## $.jqplot.FunnelLegendRenderer

Legend Renderer specific to funnel plots. Set by default when the user creates a funnel plot.

Summary

Properties |
numberRows | Maximum number of rows in the legend.
numberColumns | Maximum 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.padding = {top: 20, right: 20, bottom: 20, left: 20}

padding between the funnel and plot edges, legend, etc.

> this.sectionMargin = 6

spacing between funnel sections in pixels.

> this.fill = true

true or false, wether to fill the areas.

> this.shadowOffset = 2

offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.

> this.shadowAlpha = 0.07

transparency of the shadow (0 = transparent, 1 = opaque)

> this.shadowDepth = 5

number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.

> this.highlightMouseOver = true

True to highlight area when moused over.

> this.highlightMouseDown = false

True to highlight when a mouse button is pressed over a area.

> this.highlightColors = []

array of colors to use when highlighting an area.

> this.widthRatio = 0.2

The ratio of the width of the top of the funnel to the bottom.

> this.lineWidth = 2

width of line if areas are stroked and not filled.

> this.dataLabels = 'percent'

Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.

> this.showDataLabels = false

true to show data labels on slices.

> this.dataLabelFormatString = null

Format string for data labels.

> this.dataLabelThreshold = 3

> this.numberRows = null

Maximum number of rows in the legend.

> this.numberColumns = null

Maximum number of columns in the legend.
Close