CAStepsWithText
Configuration Options
bodyFontSize
Type: number
Default: 20
Units: px
The font size of the body text
bodyTextColor
Type: color
Default: #73B0D7
Color of the body text
chartName
Type: string
Default: CAStepsWithText
Name of chart for Reporting
circleColor
Type: color
Default: #73B0D7
Color of the circles
currentStep
Type: number
Default: 1
The current step on display
headerFontSize
Type: number
Default: 40
Units: px
The font size of the header
height
Type: number
Default: 250
Units: px
Height of the chart
labelFontSize
Type: number
Default: 12
Units: px
The font size of the step label text
previousStep
Type: number
Default: 1
The current step on display
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
Width of the chart
Data Definition
Copy
Type: string
Default validate:
function (d) {
return this.accessor(d) !== undefined && this.accessor(d) !== '' && this.accessor(d) !== null;
}
Default accessor:
function (line) {
return line[1] === undefined || line[1] === null ? undefined : String(line[1]);
}
Header
Type: string
Default validate:
function (d) {
return this.accessor(d) !== undefined && this.accessor(d) !== '' && this.accessor(d) !== null;
}
Default accessor:
function (line) {
return line[0] === undefined || line[0] === null ? undefined : String(line[0]);
}
Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
['Ask for more', 'Always ask for more than you expect. You will be surprised at what can be accomplished. Never be afraid to ask for the impossible.'],
['Never say yes at first', 'Always consider all of the facts. Walk away, take your time, and look at every angle. Make sure your getting everything you expect.'],
['State the facts', 'Confrontation is simply an emotional response to a technical problem. It never helps. Simply, gather the facts and use them to present your case.'],
['Be reluctant', 'Being reluctant is an invitation to sweeten the deal.'],
['Be patient', 'Eighty percent of the compromises will be made during the last twenty percent of the negotiation process.'],
['Evaluate the competitive landscape', 'Take some time to shop around, get several offers. Take your best offer to the one you like the most and ask them to beat it by an 1/8.'],
['Make the deal', 'Evaluate all the facts. Make the deal.']
];
//Initialze the widget
var svg = d3.select('#vis')
.append('svg');
//svg.append('rect').style('stroke', 'black').style('fill', 'none').attr('width', 500).attr('height', 500);
var chart = svg.attr({
height: '500px',
width: '500px'
})
.append('g')
.chart('CAStepsWithText')
.c({
width: 500,
height: 500
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
/*----------------------------------------------------------------------------------
Test Redraw
----------------------------------------------------------------------------------*/
//var data2 = [
// ['Room for 1', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 1'],
// ['Room for copy 2', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 2'],
// ['Room for copy 3', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 3'],
// ['Room for copy 4', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 4'],
// ['Room for copy 5', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 5'],
// ['Room for copy 6', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 6'],
// ['Room for copy 7', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 7'],
// ['Room for copy 8', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 8'],
// ['Room for copy 9', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 9'],
// ['Room for copy 10', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 10'],
// ['Room for copy 11', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 11'],
// ['Room for copy 12', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 12'],
// ['Room for copy 13', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 13'],
// ['14', null]
//];
/*setTimeout(function() {
chart.draw(data2);
}, 2000);*/