FunnelBar

Configuration Options

chartName

Type: string
Default: "FunnelBar"

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

formatFunction

Type: n/a
Default: "function (d) {\n\t return i18n.summaryNumber(d);\n\t }"

Function used to format value

generalSeparatorColor

Type: color
Default: "#FFFFFF"

Color for element separators

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.

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

transitionTime

Type: number
Default: 250
Units: ms

undefined

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

Data Definition

label

Type: string

Default validate:

function (d) {
	          return this.accessor(d) !== 'undefined';
	        }

Default accessor:

function (line) {
	          return 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

dispatch:mouseover
dispatch:mouseout

External Events

external:mouseover
external:mouseout

Example

//Setup some fake data

var data = [
  ['SEM', 1000],
  ['DISPLAY', 2000],
  ['SOCIAL', 700],
  ['FIELD', 600],
];

var data2 = [
  ['SEM', 2000],
  ['DISPLAY', 2000],
  ['SOCIAL', 700],
  ['FIELD', 600],
  ['FIELDS', 600],
];

var aHeight = 45;
var aWidth = 302;

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

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

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