$.jqplot.FunnelRenderer

>Home >Examples >Docs >Download >Info >Donate

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.