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