LineBarChart
This is the line bar chart.
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: LineBarChart
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 used to indicate elements that are not being highlighted.
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.
initialAnimation
Type: boolean
Default: true
If true, the chart will animate the line in from left to right.
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
radiusSize
Type: number
Default: 5
Units: px
Radius of each data point on the lines.
scale
Type: scale
Default: function scale(x) { return output(x); }
d3 scale object for the axis
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
strokeWidth
Type: number
Default: 1
Units: px
The stroke width for each line.
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 tooltips.
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
Label
Type: string
Default validate:
function (d) { return typeof this.accessor(d) !== 'undefined'; }
Default accessor:
function (line) { return String(line[0]); }
LineLabel
Type: string
Default validate:
function (d) { return typeof this.accessor(d) !== 'undefined'; }
Default accessor:
function (line) { return String(line[1]); }
Series
Type: string
Default validate:
function (d) { return true; }
Default accessor:
function (line) { return line[2] ? line[2] : 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]); }
lineValue
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
External Events
Example
//Setup some fake data
var BAR_DATA = [
['Jan', 6, 'North'],
['Feb', 3, 'North'],
['Mar', 5, 'North'],
['Apr', 3, 'North'],
['May', 6, 'North']
];
var LINE_DATA = [
['North', 'Jan', 83],
['North', 'Feb', 56],
['North', 'Mar', 61],
['North', 'Apr', 83],
['North', 'May', 74]
];
var data = {
bar: BAR_DATA,
line: LINE_DATA
};
var aHeight = 400;
var aWidth = 400;
//Initialze the widget
var chart = d3.select("#vis")
.append("svg")
.attr({
width: 500,
height: 500
})
.append("g").attr('class', 'gStart')
.attr("transform", "translate(50,50)")
.chart("LineBarChart")
.c({
'width': aWidth,
'height': aHeight,
orientation: 'vertical',
yAxisOrient: "left",
yAxisTickFormat: d3.DomoNumberCleanup,
yAxisAddGridlines: true,
textSize: 18
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);