FunnelLayer

Configuration Options

barLineTransitionTime

Type: number
Default: null
Units: ms

undefined

barTextSize

Type: number
Default: 12
Units: px

barTransitionTime

Type: number
Default: 250
Units: ms

undefined

barsPercent

Type: number
Default: 0.75

Percent of width allocated to bars.

chartName

Type: string
Default: "FunnelLayer"

Name of chart for Reporting.

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.

labelBarPaddingPercent

Type: number
Default: 0.1

Percent of width allocated to padding between labels and bars.

labelPercent

Type: number
Default: 0.15

Percent of width allocated to labels.

labelPosition

Type: string
Default: "left"

Location of the label

lineColor

Type: color
Default: "#E3E3E3"

undefined

lineStartOffset

Type: number
Default: 10
Units: px

undefined

minBarWidthPercent

Type: number
Default: 0.1

Percent of width allocated to bars.

nextBarColor

Type: color
Default: "#f1f1f1"

Color used to outline the entire funnel.

nextBarHeight

Type: number
Default: 0
Units: px

undefined

nextBarTotal

Type: number
Default: null

Total of the next bar to be draw. If this and nextBarHeight are set, layer will draw grey layer to the next bar.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showLabels

Type: boolean
Default: true

Flag to show or hide bar labels.

textColor

Type: undefined
Default: "#FFF"

Color of text inside bars

textFontFamily

Type: string
Default: "Open Sans"

textSize

Type: number
Default: 12
Units: px

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

valueColor

Type: color
Default: "#333"

width

Type: number
Default: 250
Units: px

Data Definition

label

Type: string

Default validate:

undefined

Default accessor:

function (line) {
	          return line[0] === undefined ? undefined : String(line[0]);
	        }

value

Type: number

Default validate:

undefined

Default accessor:

function (line) {
	          return Number(line[1]);
	        }

Events

Dispatch Events

dispatch:mouseover
dispatch:mouseout

External Events

external:mouseover
external:mouseout

Example

//Setup some fake data
var data = {
  // max: 8000,
  max: 3000,
  layer: 'Prospects',
  data: [
    ['SEM', 1000],
    ['DISPLAY', 2000],
    ['SOCIAL', 700],
    ['FIELD', 600]
  ]
};
var data2 = {
  max: 3000,
  layer: 'Prospects',
  data: [
    ['DISPLAY', 2000],
    ['SOCIAL', 700],
    ['FIELD', 1600]
  ]
};

var aHeight = 45;
var aWidth = 820;

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    height: '5000px',
    width: '5000px'
  })
  .append("g")
  .chart("FunnelLayer")
  .c({
    width: aWidth,
    height: aHeight,
    nextBarTotal: 2000,
    nextBarHeight: aHeight / 2.0
  });

//Render the chart with data
chart._notifier.showMessage(true);

//Test preCalcBoxLayoutData

var a = chart.preCalcBoxLayoutData({
  //  max: 8000,
  max: 3000,
  layer: 'Prospects',
  data: [
    ['SEM', 1000],
    ['DISPLAY', 2000],
    ['SOCIAL', 700],
    ['FIELD', 600]
  ]
});

chart.draw(data);

// setTimeout(function() {
//   chart.draw(data2);
// }, 1000);

//chart.draw({
//  max: 8000,
//  layer: 'Prospects',
//  data: [
//    ['SEM2', 1100],
//    ['DISPLAY2', 2100],
//    ['SOCIAL2', 710],
//    ['FIELD2', 610]
//  ]
//});

//setTimeout(function () {
//  var fun = {
//    max: 8000,
//    layer: 'Prospects',
//    data: [
//      ['SEM2', 1100],
//      ['DISPLAY2', 2100],
//      ['SOCIAL2', 710],
//      ['FIELD2', 610]
//    ]
//  };
//
//  chart.draw(fun);
//
//}, 2000);

//TEST Hovers
// setTimeout(function () {
//     chart.trigger('external:mouseover', ['SEM', 4000], 0);
// }, 1000);
// setTimeout(function () {
//     chart.trigger('external:mouseover', ['hjusjM', 4000], 0);
// }, 2000);
// setTimeout(function () {
//     chart.trigger('external:mouseover', ['DISPLAY', 201230], 0);
// }, 3000);

//d3.select("svg").insert("rect", ":first-child")
//  .attr("height", aHeight)
//  .attr("width", aWidth)
//  .attr("stroke", "black")
//  // .style("fill", "#2F3132")
//  .style("fill", "white")
//  .style("fill-opacity", 1);

/*----------------------------------------------------------------------------------
// FUNNEL LABEL
----------------------------------------------------------------------------------*/
//var aWidth2 = 70;
//
////Initialze the widget
//var chart2 = d3.select("svg")
//  .append('g').attr('class', 'chart2')
//  .attr("transform", "translate(" + 50 + "," + 300 + ")")
//  .chart("FunnelLabel")
//  .c({
//    width: aWidth2,
//    textSize: 10,
//  });
//
//d3.select(".chart2").insert("rect", ":first-child")
//    .attr("height", 1)
//    .attr("width", aWidth2)
////    .attr("stroke", "black")
//    .style("fill", "#2F3132")
////    .style("fill", "white")
//    .style("fill-opacity", 1);
//
//
////Render the chart with data
//chart2.draw([
//  ['Prospects', 3400]
//]);
//
//setTimeout(function () {
//    chart2.trigger('showHighlight', 3400, 'lightblue');
//}, 1000);
//
//setTimeout(function () {
//    chart2.trigger('removeHighlight');
//}, 2000);