Carousel
Slider with an image and/or text
Configuration Options
arrowHeight
Type: number
Default: 20
Units: px
Width of the arrow
arrowWidth
Type: number
Default: 10
Units: px
Width of the arrow
captionFontColor
Type: color
Default: #FFFFFF
Text color when there is a caption under the image
captionImagePadding
Type: number
Default: 16
Units: px
Padding between the image and the caption
captionRectColor
Type: color
Default: #666666
captionTextMaxHeight
Type: number
Default: 100
Units: px
Maximum height of the caption text when there is a picture
chartName
Type: string
Default: Carousel
Name of chart for reporting
height
Type: number
Default: 250
Units: px
pageFontColor
Type: color
Default: #333333
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
slidePadding
Type: number
Default: 200
Units: px
Padding between each slide to fit the arrows
textFontColor
Type: color
Default: #333333
textFontFamily
Type: string
Default: Open Sans
textFontSize
Type: number
Default: 18
Units: px
textFontWeight
Type: select
Default: [object Object]
Note: Not all weights are supported by every font family.
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
Data Definition
Image
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }
Default accessor:
function (line) { return line[1] === undefined || line[1] === null ? '' : String(line[1]); }
Text
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }
Default accessor:
function (line) { return line[0] === undefined || line[0] === null ? '' : String(line[0]); }
Events
Dispatch Events
External Events
Example
/*----------------------------------------------------------------------------------
Create Widget -> index.html
© 2011 - 2015 DOMO, INC.
----------------------------------------------------------------------------------*/
//Setup some fake data
var data = [
['Moe Rogerson is the sales leader of the month!', 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
['Lyle Simpson closed the most deals for this quarter. He has acheived employee of the year status.', 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-20-90.jpg'],
['', 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-20-90.jpg'],
['Collaborative vortals leverage, interactive unleash cross-platform incubate incentivize real-time bricks-and-clicks intuitive value-added. 24/365, magnetic transparent A-list matrix customized implement, enterprise user-contributed, experiences leverage optimize channels e-business recontextualize end-to-end supply-chains synthesize bandwidth deliver', ''],
['Stock prices for the company increased 5% this year.', ''],
];
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
width: '500px',
height: '500px',
})
.append('g')
.chart('Carousel')
.c({
width: 250,
height: 250,
// textFontSize: 5
});
//Render the chart with data
chart.draw(data);