RepeatingImageBar
Configuration Options
chartName
Type: string
Default: "RepeatingImageBar"
Name of chart for Reporting.
color
Type: color
Default: "#CA0000"
height
Type: number
Default: 250
Units: px
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.
maxValue
Type: number
Default: 100
Max value to use when scaling this widget
notFilledColor
Type: color
Default: "#D9D9D9"
Fill color that indicates something has no data
prefix
Type: string
Default: ""
repeatSelection
Type: d3Selection
Default: null
d3 selection of the DOM element to repeat
repeatingImagePadding
Type: number
Default: 0
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
suffix
Type: string
Default: ""
titleFontColor
Type: color
Default: "#888888"
Font color for the text
titleFontFamily
Type: string
Default: "Open Sans"
Font type for the text
titleFontSize
Type: number
Default: 12
Units: px
Font size for the text
titleFontWeight
Type: select
Default: {"name":"400 - Regular","value":400}
Greater values correspond to increased font boldness (some fonts do not support every value)
titleLetterSpacing
Type: number
Default: 0
Units: px
Space between characters in the text
titlePadding
Type: number
Default: 10
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueFontFamily
Type: string
Default: "Open Sans"
Font type for the text
valueFontSize
Type: number
Default: 18
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)
washoutColor
Type: color
Default: "#E4E5E5"
Fill color that indicates something is not 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
dispatch:mouseenter
dispatch:mouseleave
External Events
external:mouseenter
external:mouseover
external:mouseleave
external:mouseout
Example
/*----------------------------------------------------------------------------------
Create Widget -> index.html
© 2011 - 2015 DOMO, INC.
----------------------------------------------------------------------------------*/
//Setup some fake data
var data = [
['PAGE VIEWS', 42],
['PAGE VIEWS', 62]
];
var aHeight = 500;
var aWidth = 400;
//Initialize SVG
var g = d3.select('#vis')
.append('svg')
.attr({
height: '550px',
width: '550px'
})
.append('g')
.attr('transform', 'translate(' + 50 + ', ' + 0 + ')');
g.append('rect')
.attr('height', aHeight)
.attr('width', aWidth)
.attr('stroke', 'black')
.style('fill', 'white')
.style('fill-opacity', 0);
//Initialize Widget
var sampleDomElement = d3.select('#SampleDomElement');
var chart = g.chart('RepeatingImageBar')
.c({
width: aWidth,
maxValue: 200,
repeatSelection: sampleDomElement,
suffix: '%',
prefix: '$',
notFilledColor: 'red'
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
/*----------------------------------------------------------------------------------
Event Test
----------------------------------------------------------------------------------*/
//chart.on('dispatch:mouseenter', function (d) {console.log('ON: ',d)});
//chart.on('dispatch:mouseleave', function (d) {console.log('OFF: ', d)});
//setTimeout(function () {
// chart.trigger('external:mouseenter', {})
//}, 1000);
//setTimeout(function () {
// chart.trigger('external:mouseenter', {name:'PAGE VIEWS'})
//}, 2000);setTimeout(function () {
// chart.trigger('external:mouseenter', {})
//}, 3000);
//setTimeout(function () {
// chart.trigger('external:mouseout', {name:'PAGE VIEWS'})
//}, 4000);
setTimeout(function() {
chart.c('color', 'blue')
.draw(data)
}, 2000);