CAStatsCircle

Configuration Options

chartName

Type: string
Default: "CAStatsCircle"

Name of chart for reporting

fontColor

Type: color
Default: "#FFFFFF"

Color of the text

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"

Fill color of the main circle and outer circle strokes

gaugeFillSecondaryColor

Type: color
Default: "#DAEAF8"

Color of the bars and main circle stroke

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.

labelSize

Type: number
Default: 17
Units: px

Font size for the label

numberLabel

Type: string
Default: "NUMBER COUNTED"

Text for the label

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

textSize

Type: number
Default: 70
Units: px

Text size of the number

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 400
Units: px

Width of the widget

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 && d.length === 2; }

Default accessor:

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

Events

Dispatch Events

External Events

Example

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

var aHeight = 500;
var aWidth = 500;

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: aHeight,
    width: aWidth
  })
  .chart('CAStatsCircle')
  .c({
    width: aWidth,
    height: aHeight,
  });

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

chart.draw(data);