@domoinc/percent-circle v5.0.0

PercentCircle

Circle within a circle that compares data metrics.

Configuration Options

chartName

Type: string
Default: "PercentCircle"

Name of chart for reporting

gaugeFillPrimaryColor

Type: color
Default: "#73B0D7"

The primary fill color for each gauge

generalNotFilledColor

Type: color
Default: "#E4E5E5"

Color used to indicate no data

generalSeparatorColor

Type: color
Default: "#FFFFFF"

Font color for the maximum value

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.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: color
Default: "#333"

Font color for the value

textFontFamily

Type: string
Default: "Open Sans"

textSize

Type: number
Default: 12
Units: px

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]; }

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

//Setup some fake data
var data = [
  ['Sales Quota', 100],    //Total
  ['Sales', 70]   //Part
];

var aHeight = 400;
var aWidth = 400;

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr('width', 500 + 'px')
  .attr('height', 500 + 'px')
  .append("g")
  .attr("transform", "translate(59,50)")
  .chart("PercentCircle")
  .c('width', aWidth)
  .c('height', aHeight);


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