MarketFunnelChart

Marketing ROI Funnel

Configuration Options

barLineTransitionTime

Type: number
Default: 250
Units: ms

undefined

barTransitionTime

Type: number
Default: 250
Units: ms

undefined

barsPercent

Type: number
Default: 0.775

Percent of width allocated to bars

barsTextColor

Type: color
Default: "#FFF"

Color of text inside bars

chartName

Type: string
Default: "MarketFunnelChart"

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

funnelBarPaddingPercent

Type: number
Default: 0.23

Percent of funnel bar height allocated to padding(space)

funnelBarsHeightPercent

Type: number
Default: 0.536

Percent of height allocated to funnel bars

funnelLineArrayX2Positions

Type: n/a
Default: null

Array of absolute x2 positions for placing the funnel lines

funnelOutlineColor

Type: color
Default: "#f1f1f1"

Color of the space between each layer

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

lineCircleHeightPercent

Type: number
Default: 0.083

Percent of height allocated to the circles

lineColor

Type: color
Default: "#E3E3E3"

undefined

lineHeightPercent

Type: number
Default: 0.179

Percent of height allocated to vertical lines

lineStartOffset

Type: number
Default: 10
Units: px

undefined

lineTransitionTime

Type: number
Default: 1000
Units: ms

undefined

minBarWidthPercent

Type: number
Default: 0.1

Percent of width allocated to bars

shouldCenterCircle

Type: boolean
Default: false

If true, circle will be centered at the lines end point

shouldFillCircle

Type: boolean
Default: false

If true, chart will fill the circle

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showTopLayerLabels

Type: boolean
Default: true

If true, the top funnel layer will label each section

showTotalLayer

Type: boolean
Default: true

Flag to hide the total layer(last funnel layer)

sort

Type: boolean
Default: true

Whether or not the chart should sort the data

sortGroupsByArray

Type: n/a
Default: null

Array of group names. Order determines funnel order

textFontFamily

Type: string
Default: "Open Sans"

textSize

Type: number
Default: 12
Units: px

totalBarHeightPercent

Type: number
Default: 0.143

Percent of height allocated to totals bar

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

category

Type: string

Default validate:

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

Default accessor:

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

group

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[2]);
	        }

Events

Dispatch Events

dispatch:mouseover
dispatch:mouseout

External Events

external:mouseover
external:mouseout

Example

//Setup some fake data
var data = [
  ['Prospects', 'SEM', 5500],
  ['Prospects', 'DISPLAY', 2500],
  ['Prospects', 'SOCIAL', 7500],
  ['Prospects', 'FIELD', 5500],

  ['SAL', 'SEM', 4000],
  ['SAL', 'DISPLAY', 1000],
  ['SAL', 'FIELD', 4000],
  ['SAL', 'SOCIAL', 6000],

  ['SQL', 'SEM', 2000],
  ['SQL', 'DISPLAY', 500],
  ['SQL', 'SOCIAL', 3000],
  ['SQL', 'FIELD', 2000],

  ['Closed Deals', 'SEM', 300],
  ['Closed Deals', 'DISPLAY', 90],
  ['Closed Deals', 'SOCIAL', 500],
  ['Closed Deals', 'FIELD', 300],

  ['Marketing ROI', 'SEM', 200],
  ['Marketing ROI', 'DISPLAY', 90],
  ['Marketing ROI', 'SOCIAL', 500],
  ['Marketing ROI', 'FIELD', 300]
];

var aHeight = 400;
var aWidth = 400;

//var sortOrder = ['Prospects', 'Marketing ROI', 'SQL', 'SAL', 'Closed Deals'];
//var sortOrder = ['Prospects', 'Marketing ROI', 'Closed Deals'];

var offset = 87;
var funnelLineXPos = [175 + offset, 261 + offset, 347 + offset, 434 + offset];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '1000px',
    width: '2000px'
  })
  .append('g')
  .attr('transform', 'translate(50, 50)')
  .chart('MarketFunnelChart')
  .c({
    shouldFillCircle: true,
    shouldCenterCircle: true,
    showTotalLayer: true,
    showTopLayerLabels: true,
    textSize: 10,
    width: aWidth,
    height: aHeight
  });


/*----------------------------------------------------------------------------------
// Test Custom Color Scale
----------------------------------------------------------------------------------*/
//chart.setColorScale(d3.scale.ordinal()
//  .domain(['SEM', 'DISPLAY', 'SOCIAL', 'FIELD'])
//  .range(['#fff700', '#ffe100', '#ffae00', '#ff5900', '#ff3c00']));


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


/*----------------------------------------------------------------------------------
 // Top Layer Box Center API
 ----------------------------------------------------------------------------------*/
//var boxXCenters = chart.preCalcBoxLayoutData(data);
//for (var i = 0; i < boxXCenters.length; i++)
//{
//    d3.select('svg').append('circle')
//        .attr({
//            cx:boxXCenters[i],
//            cy:0,
//            r:3
//        })
//}


chart.draw(data);


/*----------------------------------------------------------------------------------
 // Trigger Hover API
 ----------------------------------------------------------------------------------*/
setTimeout(function () {
   chart.trigger('external:mouseover', {name: 'FIELD', data: ['FIELD', 5500]}, 0);
}, 3000);
//setTimeout(function () {
//
//    chart.trigger('external:mouseout');
//
//}, 4000);

chart.on('dispatch:mouseover', function(obj, i) {
  console.log(obj, i);
});
// chart.on('dispatch:mouseout', function() {
//   console.log('out');
// });


/*----------------------------------------------------------------------------------
 // Update
 ----------------------------------------------------------------------------------*/
//setTimeout(function () {
//  chart.draw([
//    ['Prospects', 'DISPLAY', 2500],
//    ['Prospects', 'SOCIAL', 7500],
//    ['Prospects', 'FIELD', 5500],
//
//    ['SAL', 'DISPLAY', 1000],
//    ['SAL', 'FIELD', 4000],
//    ['SAL', 'SOCIAL', 6000],
//
//    ['SQL', 'DISPLAY', 500],
//    ['SQL', 'SOCIAL', 3000],
//    ['SQL', 'FIELD', 2000],
//
//    ['Closed Deals', 'DISPLAY', 90],
//    ['Closed Deals', 'SOCIAL', 500],
//    ['Closed Deals', 'FIELD', 300],
//
//    ['Marketing ROI', 'DISPLAY', 90],
//    ['Marketing ROI', 'SOCIAL', 500],
//    ['Marketing ROI', 'FIELD', 300]
//
//  ]);
//}, 3000);

/*----------------------------------------------------------------------------------
 // Border
 ----------------------------------------------------------------------------------*/

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