Spider diagram in Captivate

[Brigitte_Wuethrich]

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

[OH_CP_Lover_&_Hacker]

Hello there,

Adding graphs to Captivate can be done. I've usesd several graphing librarys over the years to make graphs in Captivate.  I'd recommed you make an HTML document that draws the diagram you wish to share. Share (or add) your HTML document into you Captivate project using a WebObject.  When you create your HTML doc, you will easily be able to set it up to load all necessary librarys needed  to run the graph as well as load needed variables from Captivate into the doc  The D3 website should have examples and documentation on how to setup your HTML document.

[Brigitte_Wuethrich]

Thank you. I'll try your suggestion via HTML document. 

[OH_CP_Lover_&_Hacker]

You are welcome.  If you get stuck let me know, and I'll do my best to help get you on track.

[OH_CP_Lover_&_Hacker]

Where you able to get your graph to work? Let me know when you have a moment.  I can put together a quick example project for you if you would like.   Hope you are having a great week.

[Greg Vose]

I'd love to see an example, OH_CP_Lover_&_Hacker.

Best,

Greg