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.FunnelRendererPlugin renderer to draw a funnel chart.
Properties
paddingpadding between the funnel and plot edges, legend, etc.
sectionMarginspacing between funnel sections in pixels.
filltrue or false, whether to fill the areas.
shadowOffsetoffset of the shadow from the area and offset of each succesive stroke of the shadow from the last.
shadowAlphatransparency of the shadow (0 = transparent, 1 = opaque)
shadowDepthnumber of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
highlightMouseOverTrue to highlight area when moused over.
highlightMouseDownTrue to highlight when a mouse button is pressed over a area.
highlightColorsarray of colors to use when highlighting an area.
widthRatioThe ratio of the width of the top of the funnel to the bottom.
lineWidthwidth of line if areas are stroked and not filled.
dataLabelsEither ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
showDataLabelstrue to show data labels on slices.
dataLabelFormatStringFormat string for data labels.
dataLabelThreshold
$.jqplot.FunnelLegendRendererLegend Renderer specific to funnel plots.
Properties
numberRowsMaximum number of rows in the legend.
numberColumnsMaximum 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, whether 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 (0100) 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
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.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, whether 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