@domoinc/radar v2.0.6

Radar

Radar chart

Configuration Options

axesFontColor

Type: color
Default: "#8A8D8E"

axesFontFamily

Type: string
Default: "Open Sans"

axesFontSize

Type: number
Default: 11
Units: px

axesFontWeight

Type: select
Default: {"name":"300 - Light","value":300}

Note: Not all weights are supported by every font family.

axesLetterSpacing

Type: number
Default: 0
Units: px

The letter-spacing property increases or decreases the space between characters in a text string

chartName

Type: string
Default: "Radar"

Name of chart for Reporting.

height

Type: number
Default: 300
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.

legendFontColor

Type: color
Default: "#333333"

legendFontFamily

Type: string
Default: "Open Sans"

legendPosition

Type: undefined
Default: {"height":300,"width":200,"x":500,"y":50}

undefined

numberOfLegendItems

Type: number
Default: 5

Maximum number of items to display in the legend

primaryColorSeries

Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]

The primary colors used to represent series data

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showAxisLines

Type: select
Default: {"name":"Hide","value":false}

Show or hide the axis

showLegend

Type: select
Default: {"name":"Hide","value":false}

Show or hide the legend

tooltipBackground

Type: color
Default: "#555555"

tooltipFontColor

Type: color
Default: "#FFFFFF"

tooltipFontFamily

Type: string
Default: "Open Sans"

Font family for the tooltip

tooltipFontSize

Type: number
Default: 12
Units: px

Size of the tooltip text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 300
Units: px

Width of the widget

Data Definition

CategoryName

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined && this.accessor(d) !== ''; }

Default accessor:

function (line) { return (line[0] === undefined || line[0] === null) ? undefined : String(line[0]); }

Series

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

dispatch:mouseover
dispatch:mouseout

External Events

external:mouseover
external:mouseout

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data1 = [
  ['Sales', 10, 'North'],
  ['Finance', 6, 'North'],
  ['Development', 5, 'North'],
  ['Marketing', 9, 'North'],
  ['Human Resources', 4, 'North'],
  ['Sales', 6, 'South'],
  ['Finance', 7, 'South'],
  ['Development', 10, 'South'],
  ['Marketing', 10, 'South'],
  ['Human Resources', 4, 'South'],
  ['Sales', 3, 'East'],
  ['Finance', 10, 'East'],
  ['Development', 7, 'East'],
  ['Marketing', 10, 'East'],
  ['Human Resources', 4, 'East']
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '1000px'
  })
  .append('g')
  .attr('transform', 'translate(75, 75)')
  .chart('Radar')
  .c({
    width: 350,
    height: 350,
    showLegend: true
  });

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