CANeedleGauge

Configuration Options

animationDuration

Type: number
Default: 2000
Units: ms

Duration of time for the animation

chartName

Type: string
Default: "CANeedleGauge"

Name of chart for Reporting.

gaugeFillNotFilledColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is empty

gaugeFillPrimaryColor

Type: color
Default: "#73B0D7"

Fill color for each element

gaugeMax

Type: number
Default: 100

Maximum value for the gauge

gaugeMin

Type: number
Default: 0

Minimum value for the gauge

gaugeThickness

Type: number
Default: 13
Units: px

Thickness of the gauge

goalArrowColor

Type: color
Default: "#333333"

Fill color for the target indicator

goalTextColor

Type: color
Default: "#888888"

Font color for the goal

goalTextSize

Type: number
Default: 64
Units: px

Font size for the goal

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.

labelText

Type: string
Default: "METRIC"

Text for the label

labelTextColor

Type: color
Default: "#888888"

Font color for the label

labelTextSize

Type: number
Default: 64
Units: px

Font size for the label

needleColor

Type: color
Default: "#333333"

Fill color for the needle

needleLength

Type: number
Default: 5
Units: px

Length of the needle indicator

needleWidth

Type: number
Default: 6
Units: px

Width of the needle indicator at the base

rangeTextColor

Type: color
Default: "#888888"

Font color for the range values

rangeTextSize

Type: number
Default: 13
Units: px

Font size for the range values

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

updateSizeableConfigs

Type: boolean
Default: true

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

valueTextColor

Type: color
Default: "#333333"

Font color for the value

valueTextSize

Type: number
Default: 21
Units: px

Font size for the value

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

Goal

Type: number

Default validate:

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

Default accessor:

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

Name

Type: string

Default validate:

function (d) { return this.accessor(d) || this.accessor(d) === 0; }

Default accessor:

function (line) { return line[0]; }

Value

Type: number

Default validate:

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

Default accessor:

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

Events

Dispatch Events

External Events

Example

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

// var data2 = [
//   [78,107]
// ];

//Initialze the widget
var svg = d3.select('#vis')
  .append('svg');

var chart = svg
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .attr('transform', 'translate(50,50)')
  .chart('CANeedleGauge')
  .c({
    width: 400,
    height: 400
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
// setTimeout(function(){
//   chart.draw(data2);
// }, 5000)