Spider diagram in Captivate
Has anyone a clue where to find a tutorial on using variables and javascript to draw a spider diagram in captivate? I'm looking for something like this https://github.com/alangrafu/radar-chart-d3
After publishing I would have to load the library (d3) into my assets/js and edit the index-file, I suppose.
On entering the last slide of my Captivate 2019 project I call a javascript, pausing the project and transfering my 5 Variables to javascript:
window.cpAPIInterface.pause();
var f1 = window.cpAPIInterface.getVariableValue("F1");
var f2 = window.cpAPIInterface.getVariableValue("F2");
var f3 = window.cpAPIInterface.getVariableValue("F3");
var f4 = window.cpAPIInterface.getVariableValue("F4");
var f5 = window.cpAPIInterface.getVariableValue("F5");
and then? Thank you for any hint.
I was trying this:
var data = [
{
className: 'angaben', // optional, can be used for styling
axes: [
{axis: "F1 Führung", value: 13, yOffset: 10},
{axis: "F2 Team", value: 6},
{axis: "F3 Lernen", value: 5},
{axis: "F4 Userzentrierung", value: 9},
{axis: "F5 Allerlei", value: 2, xOffset: -20}
]
}
];
<div class="chart-container"></div>
<script>
RadarChart.draw(".chart-container", data);
</script>
var chart = RadarChart.chart();
var svg = d3.select('body').append('svg')
.attr('width', 600)
.attr('height', 800);
// draw one
svg.append('g').classed('focus', 1).datum(data).call(chart);
.radar-chart .area {
fill-opacity: 0.7;
}
.radar-chart.focus .area {
fill-opacity: 0.3;
}
.radar-chart.focus .area.focused {
fill-opacity: 0.9;
}
.area.angaben, .angaben.circle {
fill: #FFD700;
stroke: none;
}
// retrieve config
chart.config();
// all options with default values
chart.config({
containerClass: 'radar-chart', // target with css, the default stylesheet targets .radar-chart
w: 600,
h: 600,
factor: 0.95,
factorLegend: 1,
levels: 3,
maxValue: 0,
minValue: 0,
radians: 2 * Math.PI,
color: d3.scale.category10(), // pass a noop (function() {}) to decide color via css
axisLine: true,
axisText: true,
circles: true,
radius: 5,
open: false, // whether or not the last axis value should connect back to the first axis value
// if true, consider modifying the chart opacity (see "Style with CSS" section above)
axisJoin: function(d, i) {
return d.className || i;
},
tooltipFormatValue: function(d) {
return d;
},
tooltipFormatClass: function(d) {
return d;
},
transitionDuration: 300
});
AdChoices