FunnelTotalLayer

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.775

Percent of width allocated to bars.

barsTextColor

Type: undefined
Default: "#FFF"

Color of text inside bars

chartName

Type: string
Default: "FunnelLayer"

Name of chart for Reporting.

chartPrimarySeriesColors

Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]

The primary colors used to represent series data

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.174

Percent of width allocated to padding between labels and bars.

labelPercent

Type: number
Default: 0.174

Percent of width allocated to labels.

lineColor

Type: color
Default: "#E3E3E3"

undefined

lineStartOffset

Type: number
Default: 5
Units: px

undefined

outerPadding

Type: number
Default: 0
Units: decimal

Range Band Outer Padding [0,1]. 0.5 means padding and bar width are equal. Outer === on outer edges.

padding

Type: number
Default: 0.2
Units: decimal

Range Band Padding [0,1]. 0.5 means padding and bar width are equal.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: undefined
Default: "#FFF"

Color of text inside bars

textFontFamily

Type: string
Default: "Open Sans"

textSize

Type: number
Default: 12
Units: px

totalBarWidthPaddingPercent

Type: number
Default: 0.15

Percent of the total charts width allocated to padding.

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:mouseenter
dispatch:mouseleave
dispatch:mouseover
dispatch:mouseout

External Events

external:mouseover
external:mouseout
external:mouseenter
external:mouseleave

Example

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

var aHeight = 60;
var aWidth = 820;

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

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

//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', {name: 'SEM', data: ['SEM', 4000]});
// }, 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);