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);