@domoinc/repeating-image-multi-series-gauge v3.0.3

RepeatingImageMultiSeriesGauge

Configuration Options

DOM

Type: DOM element
Default: null

DOM element

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.

disableHover

Type: boolean
Default: false

Disable the hover events?

generalNotFilledColor

Type: color
Default: #E4E5E5

Fill color for each image that is not filled. Shows the max value.

height

Type: number
Default: 250
Units: px

Height of the chart.

innerHeight

Type: number
Default: 38

Inner height

innerWidth

Type: number
Default: 20

Inner width

newLines

Type: boolean
Default: true

Whether or not to start new series on a new line

scale

Type: number
Default: 1

Scale

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation.

updateSizeableConfigs

Type: boolean
Default: true

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

useGauge

Type: boolean
Default: false

Whether or not to use a gauge

vertical

Type: boolean
Default: false

Draw the images vertical?

width

Type: number
Default: 250
Units: px

Width of the chart.

xOffset

Type: number
Default: 0

xOffset

yOffset

Type: number
Default: 0

yOffset

Data Definition

Series

Type: string

Default validate:

function (d) { return this.accessor(d) !== 'undefined'; }

Default accessor:

function (line) { return String(line[0]); }

Total

Type: number

Default validate:

function (d) { return (!isNaN(this.accessor(d)) && this.accessor(d) >= 0) || _Chart.c('useGauge') === false; }

Default accessor:

function (line) { return Number(line[2]); }

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:mouseover
dispatch:mouseout

External Events

external:mouseover
external:mouseout

Example

var categoryData = [
	['Gold', 11, 12],
	['Silver', 7, 8],
	['Bronze', 18, 20]
];

var chart = d3.select('#vis')
	.append('svg')
	.attr('width', 800)
	.attr('height', 800)
	.append('g')
	.attr('transform', 'translate(0, 20)')
	.chart('RepeatingImageMultiSeriesGauge')
	.c({
		width: 800,
		height: 100,
		innerWidth: 20,
		innerHeight: 50,
		scale: 0,
		newLines: true,
		useGauge: true
	});
chart._notifier.showMessage(true);
chart.draw(categoryData);