MetricComparisonBars

Metric comparison bar chart with modifiable images

Configuration Options

barHeight

Type: number
Default: 1
Units: px

barPaddingBottom

Type: number
Default: 10
Units: px

barYOffset

Type: number
Default: 0
Units: px

Value used to move the bar Y position up or down

chartName

Type: string
Default: "MetricComparisonBars"

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

colorTheme

Type: select
Default: {"name":"Domo","value":[]}

Color theme of the bubbles

height

Type: number
Default: 0

undefined

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.

prefix

Type: string
Default: ""

repeatSelection

Type: d3 selection
Default: null

d3 Selection of the element to place at the end of each bar

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

suffix

Type: string
Default: ""

textColor

Type: color
Default: "#333"

textFontFamily

Type: string
Default: "Open Sans"

titlePaddingBottom

Type: number
Default: 10
Units: px

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

valueFontColor

Type: color
Default: "#888888"

Font color for the text

valueFontFamily

Type: string
Default: "Open Sans"

Font type for the text

valueFontSize

Type: number
Default: 12
Units: px

Font size for the text

valueFontWeight

Type: select
Default: {"name":"400 - Regular","value":400}

Greater values correspond to increased font boldness (some fonts do not support every value)

valueLetterSpacing

Type: number
Default: 0
Units: px

The space between the characters within the text

washoutColor

Type: color
Default: "#E4E5E5"

Color used to indicate elements that are not being highlighted

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 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[1]); }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['VIDEO PLAYS', 62],
  ['PHOTO VIEWS', 78],
  ['LINK CLICKS', 44]
];


var aHeight = 400;
var aWidth = 450;

//Initialze the widget
var sampleDomElement = d3.select('#ChangeMe');
var chart = d3.select("#DomoWidgetLockDomo")
  .attr("transform", "translate(" + 40 + "," + 176.5 + ")")
  .chart("MetricComparisonBars")
  .c({
    width: aWidth,
    height: aHeight,
    repeatSelection: sampleDomElement
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);

setTimeout(function() {
  chart.draw(data);
}, 500);
setTimeout(function() {
  chart.draw(data);
}, 1000);

@domoinc/metric-comparison-bars