@domoinc/eight-ball v1.0.4

EightBall

Shows a random message from your data

Configuration Options

chartName

Type: string
Default: "EightBall"

Name of chart for Reporting.

fontColor

Type: color
Default: "#8A8D8F"

fontFamily

Type: string
Default: "Open Sans"

Font type for the body text

fontSize

Type: number
Default: 40

fontWeight

Type: select
Default: {"name":"400 - Regular","value":400}

Greater values correspond to increased font boldness (some fonts do not support every value)

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.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

strokeColor

Type: color
Default: "#E5E5E5"

Color for the border of the circle

strokeWidth

Type: number
Default: 2

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

Data Definition

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['Moe', 'Rogerson'],
  ['Lyle', 'Simpson'],
  ['Tucker', 'House'],
  ['Lizette', 'Styles'],
  ['Tiffani', 'Tuft'],
  ['Sophy', 'Brand'],
  ['Brayden', 'Sargent'],
  ['Rowan', 'Darby']
];

var aHeight = 400;
var aWidth = 400;

var svg = d3.select('#vis').append('svg')
  .attr({
    'width': 1000,
    'height': 1000
  });

var rad = _.min([aHeight,aWidth]) / 2;

//Initialze the widget
var chart1 = svg.append('g')
  .chart('EightBall')
  .c({
    'width': 400,
    'height': 400
  });

//Render the chart with data
chart1.draw(data);

// var chart2 = svg.append('g')
//   .attr('transform', 'translate(900, 100)')
//   .chart('EightBall')
// chart2.draw(data);

// setTimeout(function(){
//   chart1.draw([
//     ['bob'],
//     ['fred'],
//     ['george'],
//     ['amy']
//   ]);
// }, 2000);

// setTimeout(function(){
//   chart1.draw([
//     ['bob is cool', 'man'],
//     ['fred man'],
//     ['george starts with g'],
//     ['amy is a girl']
//   ]);
// }, 3000);

// setTimeout(function(){
//   chart2.draw([
//     ['THE ONE AND ONLY ANSWER']
//   ]);
// }, 4000);