MultiTitledSalesMarker
Configuration Options
animationDelay
Type: number
Default: 500
Units: ms
Duration of time before the animation begins
animationDuration
Type: number
Default: 500
Units: ms
Duration of time for the animation
chartName
Type: string
Default: "MultiTitledSalesMarker"
Name of chart for Reporting
fontWeight
Type: select
Default: {"name":"300 - Light","value":300}
Greater values correspond to increased font boldness (some fonts do not support every value)
gaugeFillPrimaryColor
Type: color
Default: "#73B0D7"
Line and border color for the metrics
height
Type: number
Default: 400
Units: px
Height of the widget
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.
letterSpacing
Type: number
Default: 1
Letter spacing for the text
lineWidth
Type: number
Default: 1
Units: px
Width of the lines
manualTransition
Type: boolean
Default: false
Specify your own circle transition
prefix
Type: string
Default: "$"
Text added before the number value
radiusSize
Type: number
Default: 14
Units: px
Radii of the circle images
scale
Type: scale
Default: "function scale(x) {\n\t return output(x);\n\t }"
The scale for the lines
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
suffix
Type: string
Default: ""
Text added after the number value
textColor
Type: color
Default: "#888888"
Font color for the text
textFontFamily
Type: string
Default: "Open Sans"
Font type for the text
textSize
Type: number
Default: 12
Units: px
Font size for the text
transitionSetting
Type: string
Default: "zoom"
The circle transition
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
widgetSpacing
Type: number
Default: 35
Units: px
The space between the metrics
width
Type: number
Default: 400
Units: px
Width of the widget
Data Definition
Image
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return String(line[2]); }Name
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return String(line[0]).toUpperCase(); }Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return parseFloat(line[1]); }Events
Dispatch Events
External Events
Example
var data = [
// {"Name":"Karen Damaso","Team":"AE Enterprise","Sales":167000,"OverallRank":2,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Kevin Wilck","Team":"AE Enterprise","Sales":126250,"OverallRank":3,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-19T14:19:06"},
// {"Name":"Tod Bayne","Team":"Executive Team","Sales":117093,"OverallRank":4,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-14T22:31:26"},
// {"Name":"Joe Hawkins","Team":"AE Corporate","Sales":108200,"OverallRank":5,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-05T16:49:36"},
// {"Name":"Bryan Favero","Team":"AE Corporate","Sales":72000,"OverallRank":6,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Ryan Pretnik","Team":"AE Mid Market","Sales":69500,"OverallRank":7,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-03T21:02:42"}
['Karen Damaso', 167030, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
['Kevin Wilck', 126250, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-10-90.jpg'],
['Tod Bayne', 117093, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-18-90.jpg'],
['Joe Hawkins', 108200, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-19-90.jpg'],
['Bryan Favero', 72000, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-10-90.jpg'],
['Ryan Pretnik', 69500, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-20-90.jpg']
];
var data2 = [
// {"Name":"Karen Damaso","Team":"AE Enterprise","Sales":167000,"OverallRank":2,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Kevin Wilck","Team":"AE Enterprise","Sales":126250,"OverallRank":3,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-19T14:19:06"},
// {"Name":"Tod Bayne","Team":"Executive Team","Sales":117093,"OverallRank":4,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-14T22:31:26"},
// {"Name":"Joe Hawkins","Team":"AE Corporate","Sales":108200,"OverallRank":5,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-05T16:49:36"},
// {"Name":"Bryan Favero","Team":"AE Corporate","Sales":72000,"OverallRank":6,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Ryan Pretnik","Team":"AE Mid Market","Sales":69500,"OverallRank":7,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-03T21:02:42"}
['Karen Damas', 167030, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
['Kevin Wilc', 126250, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-10-90.jpg'],
['Tod Bayn', 117093, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-18-90.jpg'],
['Joe Hawkin', 108200, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-19-90.jpg'],
['Bryan Faver', 72000, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-10-90.jpg'],
['Ryan Pretni', 69500, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-20-90.jpg']
];
var sampleData = [
['Karen Damaso', 167030, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-10-90.jpg'],
['Kevin Wilck', 126250, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-01-90.jpg'],
['Tod Bayne', 117093, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-18-90.jpg'],
['Melody Hawkins', 108200, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-19-90.jpg'],
['Bryan Favero', 72000, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
['Ryan Pretnik', 69500, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-04-90.jpg']
];
//Initialze the widget
var svg = d3.select("#vis")
.append("svg");
// svg.append("rect").attr({'width':'500px', 'height': '500px'}).style({'stroke-width': '1px', 'stroke':'black', 'fill':'none'});
var chart = svg
.attr({
'width': '500px',
'height': '500px',
})
.append("g")
.attr("transform", "translate(-30,125)")
.chart('MultiTitledSalesMarker')
.c({
'height': 272.6,
'width': 500,
'animationDuration': 500,
'widgetSpacing': 35,
'radiusSize': 14
})
// .a({
// 'Name': function (line) { return String(line.Name).toUpperCase(); },
// 'Value': function (line) { return Number(line.Sales); },
// 'Image': function (line) { return String(line.PhotoURL); },
// 'id': function (line) { return String(line.Name); }
// });
//Render the chart with data
chart.draw(sampleData);
// setTimeout(function() {chart.c('textSize', 20); chart.draw(data);},2000)