Funnel
Funnel chart for pipelines
Configuration Options
barPadding
Type: number
Default: 10
The padding between bars
chartName
Type: string
Default: "Funnel"
Name of chart for reporting
gaugeFillPrimaryColor
Type: color
Default: "#73B0D7"
The primary fill color for each gauge
generalWashoutColor
Type: color
Default: "#E4E5E5"
Color used to indicate elements that are not being highlighted
height
Type: number
Default: 250
Units: px
isOnMobile
Type: boolean
Default: false
If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.
prefix
Type: string
Default: ""
Prefix string appended before the numbers
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showTooltip
Type: boolean
Default: true
Turns on or off the chart's tooltip
suffix
Type: string
Default: ""
Suffix string appended after the numbers
textColor
Type: color
Default: "#333"
Color of text when it is outside of the bars
textColorInsideBars
Type: color
Default: "#FFFFFF"
Color of text when it is inside of the bars
textFontFamily
Type: string
Default: "Open Sans"
textSize
Type: number
Default: 18
Units: px
Text size of bar number values
tooltipBackgroundColor
Type: color
Default: "#555555"
tooltipTextColor
Type: color
Default: "#FFFFFF"
tooltipTextSize
Type: number
Default: 14
Units: px
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
xScale
Type: scale
Default: null
The horizontal scale fo the chart
yScale
Type: scale
Default: null
The vertical scale fo the chart
zoomPercent
Type: number
Default: 1
Initial zoom value
Data Definition
Category
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return line[0] === undefined ? undefined : String(line[0]); }Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[1]); }Events
Dispatch Events
External Events
external:mousedrag
Example
//Setup some fake data
var data = [
['North', 15000],
['North', 10000],
['North', 7000],
['South', 6000],
['South', 4000],
['South', 3000],
['East', 2900],
['East', 1500],
['West', 1000],
['West', 100],
];
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
'width': '500px',
'height': '500px'
})
.append('g')
.attr('transform', 'translate(50,55)')
.chart('Funnel')
.c({
'height': 400,
'width': 400,
});
chart._notifier.showMessage(true);
//Render the chart with data
chart.draw(data);