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