Forum Discussion

Innowijs's avatar
Innowijs
Community Member
9 years ago

Infuence pie chart with variables

Hi everyone,   I'm working on a survey kind of project where there will be a lot of questions that sorts your personality into five types. For example based on what answers the user gives he has...
General E-Learning
storyline 360
JordanBest's avatar
JordanBest
Community Member
5 years ago

Howdy! I'm trying to create a bar chart in SL360 using some HTML code, but I can't seem to call the variables from SL into the code.

Here's what I'm trying to do: I've inserted the bar chart code as a Web Object, and I'd like to use the variables from Storyline as the data to populate the chart. This is the code that works (saved as index.html):

<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
 datasets: [{
 label: '# of Votes',
 data: [12, 19, 3, 5, 2, 3],
 backgroundColor: [
 'rgba(255, 99, 132, 0.2)',
 'rgba(54, 162, 235, 0.2)',
 'rgba(255, 206, 86, 0.2)',
 'rgba(75, 192, 192, 0.2)',
 'rgba(153, 102, 255, 0.2)',
 'rgba(255, 159, 64, 0.2)'
 ],
 borderColor: [
 'rgba(255, 99, 132, 1)',
 'rgba(54, 162, 235, 1)',
 'rgba(255, 206, 86, 1)',
 'rgba(75, 192, 192, 1)',
 'rgba(153, 102, 255, 1)',
 'rgba(255, 159, 64, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
});
</script>
</body

I'd like to use SL variables in place of the data: [12, 19, 3, 5, 2, 3], so it would look something like data: [var1, var2, var3, var4, var5, var6].

After doing some research, it seems I can call the parent.GetPlayer(); to call variables, but so far I haven't gotten anything to work. I added

var var1 = function getfromstoryline() {
var player = parent.GetPlayer();
player.GetVar("StorylineVar1");
}

right before the var ctx, but it's just showing as 0 (though the StorylineVar1 = 6).

Any help or guidance would be very appreciated!