@domoinc/ca-budget-half-circle

CABudgetHalfCircle

Semicircle that compares budget, spent, and expected quarterly spending

<img src=media/widget.png height=500 width=500>

Configuration Options

chartName

Type: string
Default: BudgetHalfCircle

Name of chart for reporting

dottedCircleBadColor

Type: color
Default: #E4584F

Color of the dotted circle and value indicating expected spending will go over the budget

dottedCircleGoodColor

Type: color
Default: #80C25D

Color of the dotted circle and value indicated expected spending will be within the budget

filledCircleColor

Type: color
Default: #73B0D7

Color used to fill the circle representing the percent

height

Type: number
Default: 250
Units: px

patternStrokeColor

Type: color
Default: #B0B0B0

Color of the striped total circle

percentTextColor

Type: color
Default: #FFFFFF

Text color for the percent circle text

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: Open Sans

Text font family

textSize

Type: number
Default: 18
Units: px

Text size of the number values

totalTextColor

Type: color
Default: #333

Text color for the total circle text

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

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

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['Budget', 2342345],
  ['Spent', 1243454],
  ['Projected Quarterly Spending', 1500000]
];

var data2 = [
  ['Total', 1834343],
  ['Part', 843454],
  ['Expected', 2100000]
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .attr('transform', 'translate(50,100)')
  .chart('CABudgetHalfCircle')
  .c({
    width: 400,
    height: 200,
  });

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

chart.draw(data);

setTimeout(function() {
  chart.draw(data2);
}, 2500);