BarChart
Configuration Options
axesLabelColor
Type: color
Default: #888
Color of all the labels on the Axis.
axesLabelFontFamily
Type: string
Default: Open Sans
Font family for axis labels.
axesLabelSize
Type: number
Default: 11
Units: px
Size in pixels of the labels.
axesLineColor
Type: color
Default: #E3E3E3
Color of all lines found in an Axis.
barLabelFormat
Type: function
Default: function (d) { return i18n.summaryNumber(d.value); }
Format for the bar labels
barPadding
Type: number
Default: 0.25
Padding between the bars
chartLabelColor
Type: color
Default: #888888
Color any general chart labels.
chartName
Type: string
Default: BarChart
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.
colors
Type: array
Default: null
Specified colors to be used in color scale
generalSeparatorColor
Type: color
Default: #FFFFFF
Color is used to to outline bar segments filled with the washout color to distinguish the different segments.
generalWashoutColor
Type: color
Default: #E4E5E5
Color is indicate bar segments that are not being hightlighted on events such as a mouse hover.
hasSeriesData
Type: boolean
Default: false
Determines if the chart should have just one color or multiple. Used primarily with single layout
height
Type: number
Default: 100
Units: px
Height of the chart.
layout
Type: string
Default: single
Determines if the chart is stacked or grouped, or single bars
orientation
Type: string
Default: vertical
Determines if the orientation is vertical or horizontal
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation.
showXAxis
Type: boolean
Default: true
Flag to show the Axis
showYAxis
Type: boolean
Default: true
Flag to show the Y Axis
textFontFamily
Type: string
Default: Open Sans
Font family for any text.
textSize
Type: number
Default: 12
Units: px
General size in pixels for any text.
toolTipTextSize
Type: number
Default: 12
Units: px
tooltipBackgroundColor
Type: color
Default: #555555
Background color on any tool tips.
tooltipTextColor
Type: color
Default: #FFFFFF
Color of any text inside a tooltip.
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality.
width
Type: number
Default: 100
Units: px
Width of the chart.
xAxisAddGridlines
Type: boolean
Default: false
Flag to show the gridlines
xAxisDisplayTicks
Type: boolean
Default: true
Flag to show the tick line
xAxisOrient
Type: string
Default: bottom
Sets the orientation of the axis
xAxisTickFormat
Type: function
Default: function (d) { return i18n.summaryNumber(d); }
Label formatter for the ticks
xScale
Type: scale
Default: null
X Axis Scale.
yAxisAddGridlines
Type: boolean
Default: false
Flag to show the gridlines
yAxisDisplayTicks
Type: boolean
Default: true
Flag to show the tick line
yAxisOrient
Type: string
Default: left
Sets the orientation of the axis
yAxisTickFormat
Type: function
Default: function (d) { return i18n.summaryNumber(d); }
Label formatter for the ticks
yScale
Type: scale
Default: null
Y Axis Scale.
Data Definition
Example
//Setup some fake data
var sampleData = [
['North', 85, 'Jan'],
['North', 60, 'Feb'],
['North', 70, 'Mar'],
['North', 80, 'Apr'],
['South', 110, 'Jan'],
['South', 120, 'Feb'],
['South', 90, 'Mar'],
['South', 90, 'Apr'],
['East', 80, 'Jan'],
['East', 70, 'Feb'],
['East', 60, 'Mar'],
['East', 55, 'Apr'],
['West', 40, 'Jan'],
['West', 50, 'Feb'],
['West', 30, 'Mar'],
['West', 30, 'Apr']
];
var sampleData1 = [
['Jan', 2],
['Feb', 4],
['Mar', 8],
['Apr', 13]
];
var sampleData2 = [
['North', 100, 'North'],
['South', 400, 'South'],
['East', 300, 'East'],
['West', 100, 'West']
];
var aHeight = 400;
var aWidth = 400;
//Initialze the widget
var chart = d3.select("#vis")
.append("svg")
.attr({
width: aWidth + 100,
height: aHeight + 100
})
.append("g")
.attr("transform", "translate(60,45)")
.chart("BarChart")
.c({
width: aWidth,
height: aHeight
});
//Render the chart with data
chart._notifier.showMessage(true);
var chartNames = [
'DomoBarChartHorizontalDomo',
'DomoBarChartVerticalStackedDomo',
'DomoBarChartVerticalMultiSeriesDomo',
'DomoBarChartVerticalGroupedDomo',
'DomoBarChartVerticalDomo',
'DomoBarChartHorizontalStackedDomo',
'DomoBarChartHorizontalMultiSeriesDomo',
'DomoBarChartHorizontalGroupedDomo'
];
//var chartName = chartNames[0];
//var chartName = chartNames[1];
//var chartName = chartNames[2];
//var chartName = chartNames[3];
//var chartName = chartNames[4];
//var chartName = chartNames[5];
//var chartName = chartNames[6];
var chartName = chartNames[7];
drawChartByName(chartName);
function drawChartByName(theChartName) {
switch (theChartName) {
case 'DomoBarChartHorizontalDomo':
chart.c({
layout: 'single',
hasSeriesData: false,
orientation: 'horizontal',
yAxisAddGridlines: false
})
.draw(sampleData1);
break;
case 'DomoBarChartVerticalStackedDomo':
chart.c({
layout: 'single',
hasSeriesData: true,
yAxisAddGridlines: true
})
.draw(sampleData);
break;
case 'DomoBarChartVerticalMultiSeriesDomo':
chart.c({
layout: 'single',
hasSeriesData: true,
yAxisAddGridlines: true
})
.draw(sampleData2);
break;
case 'DomoBarChartVerticalGroupedDomo':
chart.c({
layout: 'grouped',
hasSeriesData: true,
yAxisAddGridlines: true
})
.draw(sampleData);
break;
case 'DomoBarChartVerticalDomo':
chart.c({
layout: 'single',
hasSeriesData: false,
yAxisAddGridlines: true
})
.draw(sampleData1);
break;
case 'DomoBarChartHorizontalStackedDomo':
chart.c({
layout: 'stacked',
hasSeriesData: true,
orientation: 'horizontal',
yAxisAddGridlines: false
})
.draw(sampleData);
break;
case 'DomoBarChartHorizontalMultiSeriesDomo':
chart.c({
layout: 'single',
hasSeriesData: true,
orientation: 'horizontal',
yAxisAddGridlines: false
})
.draw(sampleData2);
break;
case 'DomoBarChartHorizontalGroupedDomo':
chart.c({
layout: 'grouped',
hasSeriesData: true,
orientation: 'horizontal',
yAxisAddGridlines: false
})
.draw(sampleData);
break;
}
}