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