• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Spider diagram in Captivate

New Here ,
Sep 22, 2021 Sep 22, 2021

Copy link to clipboard

Copied

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

TOPICS
Advanced

Views

125

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 22, 2021 Sep 22, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 22, 2021 Sep 22, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 22, 2021 Sep 22, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 07, 2021 Oct 07, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 07, 2021 Oct 07, 2021

Copy link to clipboard

Copied

LATEST

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

Best,

Greg

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines