CAStatsPill

Configuration Options

SVGX

Type: number
Default: 250
Units: px

X position of the SVG

animationDuration

Type: number
Default: 3000
Units: ms

Duration of time for the animation

fontSize

Type: number
Default: 40
Units: px

Text size of the number

fontWeight

Type: select
Default: {"name":"400 - Regular","value":400}

General text font weight. Note: Not all weights are supported by every font family.

gaugeFillPrimaryColor

Type: color
Default: "#73B0D7"

Color of the circle

gaugeFillSecondaryColor

Type: color
Default: "#DAEAF8"

Color of the bars

height

Type: number
Default: 250
Units: px

Height of the chart

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.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: color
Default: "#99CBED"

Color of the text

textFontFamily

Type: string
Default: "Open Sans"

Font family for the value number

updateSizeableConfigs

Type: boolean
Default: true

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

widgetName

Type: string
Default: "CAStatsPill"

Name of chart for reporting

widgetX

Type: number
Default: 250
Units: px

X position of the widget bounds

width

Type: number
Default: 250
Units: px

Width of the chart

Data Definition

Label

Type: string

Default validate:

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

Default accessor:

function accessor(line) {
	          return line[0] === undefined ? undefined : String(line[0]);
	        }

Value

Type: number

Default validate:

function validate(d) {
	          return !isNaN(this.accessor(d));
	        }

Default accessor:

function accessor(line) {
	          return Number(line[1]);
	        }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['Sales', 4725923]
];

//Initialze the widget
var chart = d3.select("#vis svg")
  .append("g")
  .attr('transform', 'translate(174.5,219)')
  .chart("CAStatsPill")
  .c({
    width: 201,
    height: 47.3
  });

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