HeatMap

Heat map

Configuration Options

chartName

Type: string
Default: "HeatMap"

Name of chart for Reporting.

fontColor

Type: color
Default: "#333333"

fontFamily

Type: string
Default: "Open Sans"

fontSize

Type: number
Default: 14
Units: px

hasTooltip

Type: boolean
Default: true

Whether or not to show the tooltip

height

Type: number
Default: 250
Units: px

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.

labelWidth

Type: number
Default: 40
Units: px

undefined

mapRangeColorsTheme

Type: select
Default: {"name":"Blue","value":["#31689B","#90c4e4"]}

numberOfColors

Type: number
Default: 4

padding

Type: number
Default: 5

undefined

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

tooltipBackgroundColor

Type: color
Default: "#555555"

tooltipBodyFontFamily

Type: string
Default: "Open Sans"

tooltipFontColor

Type: color
Default: "#FFFFFF"

tooltipFontSize

Type: number
Default: 14
Units: px

updateSizeableConfigs

Type: boolean
Default: true

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

washoutColor

Type: color
Default: "#CCC"

undefined

width

Type: number
Default: 250
Units: px

Data Definition

Category 1

Type: string

Default validate:

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

Default accessor:

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

Category 2

Type: string

Default validate:

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

Default accessor:

function (line) {
	          return line[2] === undefined ? undefined : String(line[2]);
	        }

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

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

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

//Setup some fake data
var data = [
  ['Month 1', 2, 'North'],
  ['Month 2', 5, 'North'],
  ['Month 3', 8, 'North'],
  ['Month 4', 8, 'North'],
  ['Month 5', 8, 'North'],
  ['Month 6', 8, 'North'],
  ['Month 1', 2, 'South'],
  ['Month 2', 5, 'South'],
  ['Month 3', 8, 'South'],
  ['Month 4', 8, 'South'],
  ['Month 5', 8, 'South'],
  ['Month 6', 8, 'South'],
  ['Month 1', 2, 'East'],
  ['Month 2', 5, 'East'],
  ['Month 3', 8, 'East'],
  ['Month 4', 8, 'East'],
  ['Month 5', 12, 'East'],
  ['Month 6', 1, 'East'],
  ['Month 1', 2, 'West'],
  ['Month 2', 5, 'West'],
  ['Month 3', 8, 'West'],
  ['Month 4', 8, 'West'],
  ['Month 5', 12, 'West'],
  ['Month 6', 12, 'West'],
];

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

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