TitledSalesMarker

Configuration Options

animationDelay

Type: number
Default: 500
Units: ms

Specify the delay for app animations

animationDuration

Type: number
Default: 2000
Units: ms

Specify the length you want the animation to animate for

chartName

Type: string
Default: "TitledSalesMarker"

Name of chart for Reporting.

fontWeight

Type: number
Default: 400
Units: px

The font weight for the names, and numbers

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.

letterSpacing

Type: number
Default: 1
Units: px

The letter spacing for the names, and numbers

lineAnimationDuration

Type: number
Default: 500
Units: ms

Specify the length you want the animation to animate for

lineColor

Type: color
Default: "#F68C35"

The line and circle color

lineWidth

Type: number
Default: 2
Units: px

The width of the line

manualTransition

Type: boolean
Default: false

Specify your own circle transition

pulseSetting

Type: string
Default: "function widthPulse(selection) {\n\t selection\n\t .transition()\n\t .ease('linear')\n\t .duration(_Chart.c('lineAnimationDuration') / 2)\n\t .attr('stroke-width', _Chart.c('lineWidth') * 1.5)\n\t .transition()\n\t .ease('linear')\n\t .duration(_Chart.c('lineAnimationDuration') / 2)\n\t .attr('stroke-width', _Chart.c('lineWidth'));\n\t }"

After the chart update the circle will pulse

radiusSize

Type: number
Default: 10
Units: px

Specify your own circle pulse

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

textColor

Type: color
Default: "#333"

The Color of the names, and numbers

textFontFamily

Type: string
Default: "Open Sans"

Font family for any text.

textSize

Type: number
Default: 12
Units: px

The font size for the names, initials, and numbers

transitionSetting

Type: string
Default: "zoom"

The circle transition

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 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 Number(line[1]); }

Events

Dispatch Events

External Events

Example

// Ideal Data
// var myScale = d3.scale.linear()
// 	.domain([0, 50000]) //min and max number of sales
// 	.range([0, 500])
// 	.clamp(true);
var data = [
	["Chris Williams", 167, 'https://domo.domo.com/domoweb/avatar/full/domo/857654287']
	// ['Karen Damaso', 16700,123]
];

//Initialze the widget
var chart = d3.select('#vis')
	.append('svg')
	.attr({
		height: '500px',
		width: '1000px'
	})
	.chart('TitledSalesMarker')
	.c({
		width: 0,
		height: 100,
		//'textSize': 40,
		'radiusSize': 10,
		pulseSetting: 'widthPulse',
		'transitionSetting': 'zoom',
		'lineWidth': 2
	});

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