So I've got a javascript with a pie chart and 5 slices. I want to implement this chart into a Storyline slide. In this Storyline project I've got 5 variables that has got specific values. When a user answers some questions, these values change. At the end of the project these values will be visualized with this Pie Chart.
The Pie chart works perfectly, but now I have to connect these slices with the Storyline variables. How can I do this?
Here you can see how the pie chart is build.
// This gives the pie slices a name. //
var myPersoonlijkheid = {
"Categorie1": 10,
"Categorie2": 44,
"Categorie3": 32,
"Categorie4": 12,
"Categorie5": 8
Can I just say var=Categorie1 where the numbers are? Or is it more complicated than that? I;ve searched on the internet for some answers, but I couldn't found something, Obviously otherwhise I wouldn't be asking this now. Haha!
So.. Is there someone who can help me? :D I would appriciate it! Thank you!
I managed to make it work :D
What I did:
I made a Storyline project where I have 5 sliders. Those sliders have each their own variable (var1, var2, var3, var4 and var5). I created a blank slide where this pie chart is going to be.
Then I made an index.html file. This file contains
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript"src="pie-chart.js"></script>
</body>
I saved this file into a map on the server.
After that I put this Javascript together:
// the JS code will first get a reference to the canvas and then set its width and height. To draw on the canvas, we only need a reference to its 2D context which contains all the drawing methods. //
/*global quotes:true, global $*/
window.onload = function() {
var player = window.parent.GetPlayer(); //this piece was missing.//
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
var ctx = myCanvas.getContext("2d");
// Define what the function. //
function drawLine(ctx, startX, startY, endX, endY) {
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
}
// This function draws an arc between the lines. //
function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle) {
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.stroke();
}
// This function draws a coloured shape between the lines. //
function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
/* drawLine(_ctx,100,100,200,200);
drawArc(_ctx, 150,150,150, 0, Math.PI/3);
drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000'); */
}
/* This retrieves the value of the Storyline variable
(the one between the quote symbols). */
var var1 = player.GetVar("var1");
var var2 = player.GetVar("var2");
var var3 = player.GetVar("var3");
var var4 = player.GetVar("var4");
var var5 = player.GetVar("var5");
// This gives the slices the value from above. //
var myPersoonlijkheid = {
"Categorie1": var1,
"Categorie2": var2,
"Categorie3": var3,
"Categorie4": var4,
"Categorie5": var5
};
var Piechart = function(options) {
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function() {
var total_value = 0;
var color_index = 0;
for (var categ in this.options.data) {
var val = this.options.data[categ];
total_value += val;
}
var start_angle = 0;
for (categ in this.options.data) {
val = this.options.data[categ];
var slice_angle = 2 * Math.PI * val / total_value;
drawPieSlice(this.ctx, this.canvas.width / 2, this.canvas.height / 2, Math.min(this.canvas.width / 2, this.canvas.height / 2), start_angle, start_angle + slice_angle, this.colors[color_index % this.colors.length]);
start_angle += slice_angle;
color_index++;
}
}
}
var myPiechart = new Piechart({
canvas: myCanvas,
data: myPersoonlijkheid,
colors: ["#f2f2f2", "#b3dcff", "#1b96ff", "#004682", "#002341"]
});
myPiechart.draw();
}
After that I published the Storyline file. And now it works perfectly!
Thanks Mustafa for your help. I appriciate it :D