@domoinc/point-plot-scale v3.0.4

PointPlotScale

A scale with configurable ranges with points marked by the data

Configuration Options

chartName

Type: string
Default: "PointPlotScale"

Name of chart for reporting

colorSeries

Type: undefined
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"]]

Color Series

height

Type: number
Default: 11
Units: px

Height of the bar

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.

labelTextColor

Type: color
Default: "#333333"

Font color for the text

labelTextSize

Type: number
Default: 12
Units: px

undefined

pointScale

Type: number
Default: 1
Units: scale

Scale value for the point size: (i.g. 1 is default, 0.5 is half the default size, 2 is twice the default size, etc.)

ranges

Type: array
Default: [[0,2],[2,4],[4,6],[6,8],[8,14]]

Ranges for scales for each colored bar

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

Font family for the numbers and labels

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 400
Units: px

Width of the widget

xOffset

Type: boolean
Default: false

Choose to have the duplicate data points offset on X or Y (true is the X)

yOffset

Type: number
Default: -11

Offset each subsequent tier moves up in y

Data Definition

Key

Type: string

Default validate:

function (d) { return true; }

Default accessor:

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

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

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

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

//Setup some fake data
var data = [
  ['North', 3,],
  ['South', 4.5,],
  ['East',  5,],
  ['West',  7,],
  ['West',  7,],
  ['West',  7,],
];

var ranges = [
  [0,2],
  [2,4],
  [4,6],
  [6,8],
  [8,10],
]

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: 500,
    width: 500
  })
  .append('g')
  .attr('transform', 'translate(0,190)')
  .chart('PointPlotScale')
  .c({
  	width: 500,
  	height: 11,
    ranges: ranges,
    pointScale: 1,
  });

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