MultiRepeatingImageBars

Configuration Options

chartName

Type: string
Default: MultiRepeatingImageBars

Name of chart for Reporting.

colors

Type: select
Default: [object Object]

height

Type: number
Default: 250
Units: px

Height of the chart

imageBarPadding

Type: number
Default: 20
Units: px

Padding below each repeating image bar

prefix

Type: string
Default: ``

repeatSelection

Type: d3Selection
Default: null

d3 selection of the DOM element to repeat

repeatingImagePadding

Type: number
Default: 0
Units: px

Pixels to the left of the repeating images

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

suffix

Type: string
Default: %

titleFontColor

Type: color
Default: #888888

titleFontFamily

Type: string
Default: Open Sans

titleFontSize

Type: number
Default: 12
Units: px

Text size

titleFontWeight

Type: select
Default: [object Object]

Note: Not all weights are supported by every font family.

titleLetterSpacing

Type: number
Default: 0
Units: px

The letter-spacing property increases or decreases the space between characters in a text

titlePadding

Type: number
Default: 10
Units: px

Pixels below each title

updateSizeableConfigs

Type: boolean
Default: true

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

valueFontFamily

Type: string
Default: Open Sans

valueFontSize

Type: number
Default: 18
Units: px

Text size

valueFontWeight

Type: select
Default: [object Object]

Note: Not all weights are supported by every font family.

valueLetterSpacing

Type: number
Default: 0
Units: px

The letter-spacing property increases or decreases the space between characters in a text

washoutColor

Type: color
Default: #E4E5E5

Color used to indicate elements that are not being highlighted

width

Type: number
Default: 250
Units: px

Width of the chart

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

dispatch:mouseenter
dispatch:mouseleave

External Events

external:mouseenter
external:mouseout

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['VIDEO PLAY', 50],
  ['PHOTO VIEW', 89],
  ['LINK CLICKS', 75]
];

var aHeight = 200;
var aWidth = 400;

//Initialze the widget
var sampleDomElement = d3.select('#SampleDomElement');
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    height: '550px',
    width: '550px'
  })
  .append("g")
  .attr("transform", "translate(" + 45 + "," + 150 + ")")
  .chart("MultiRepeatingImageBars")
  .c({
    width: aWidth,
    height: aHeight,
    repeatSelection: sampleDomElement,
    suffix: '%'
  });

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