@domoinc/multi-metric-comparison-bar-chart
v8.0.3
Published
MultiMetricComparisonBarChart - Domo Widget
Downloads
34
Readme
MultiMetricComparisonBarChart
Bar chart that compares multiple metrics.
Configuration Options
barHeight
Type: number
Default: 30
Units: px
Height of the bars
chartGap
Type: number
Default: 10
Units: px
The space between the bars
chartName
Type: string
Default: "MultiMetricComparisonBarChart"
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
generalWashoutColor
Type: color
Default: "#E4E5E5"
Color used to indicate elements that are not being highlighted
height
Type: number
Default: 400
Units: px
Height of the widget
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.
labelColor
Type: color
Default: "#888888"
Font color for the labels
labelSize
Type: number
Default: 12
Units: px
Font size for the labels
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showAnimations
Type: boolean
Default: true
Enable or disable the initial animation
textFontFamily
Type: string
Default: "Open Sans"
textLabel
Type: function
Default: "function (d, i) {\n\t return d[0] + ' ' + summaryNumber.summaryNumber(d[1]);\n\t }"
The function used for the text labels
titleColor
Type: color
Default: "#333"
Font color for the titles
titleSize
Type: number
Default: 12
Units: px
Font size for the titles
titleWeight
Type: number
Default: 700
Font weight for the title text
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 400
Units: px
Width of the widget
Data Definition
Label
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }
Default accessor:
function (line) { return String(line[1]); }
Metric
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[2]); }
Events
Dispatch Events
dispatch:mouseenter
dispatch:mouseleave
External Events
external:mouseover
external:mouseout
Example
//Setup some fake data
var data = [
['North', 'Jan', 600],
['North', 'Feb', 100],
['South', 'Jan', 10000],
['South', 'Mar', 7000],
['East', 'Feb', 20],
['East', 'Mar', 74]
];
var aWidth = 500;
var aHeight = 500;
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
height: aHeight,
width: aWidth
})
.append('g')
.attr('transform', 'translate(125,146)')
.chart('MultiMetricComparisonBarChart')
.c({
width: 250,
height: 263
})
// .colorScale(d3.scale.ordinal().domain(['Jan', 'Feb', 'Mar']).range(['red', 'orange', 'green']));
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);