@domoinc/ca-needle-gauge v3.1.4
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)