Basically I try to animate the lines in a donut chart (see example), so that each of them is counted up with document.ready. I tried to adopt the solution from here and here
As you can see, the countUp solution is already working well, but it needs to be connected to the chart, so that it is drawn on page load.
My knowledge regarding canvas isn´t amazing. I would be very happy, if anybody could help. Here is the code: https://jsfiddle.net/9oyoh67x/10/
$(document).ready(function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx);
ctx.lineWidth = 19;
ctx.lineCap = 'round';
ctx.shadowBlur = 10;
donutChart();
function degtoRad(degree) {
var factor = Math.PI / 180; // = 1 deg = 0.01745 rad
return degree * factor; // for 360 = 6.28 = 360°
}
/*function move() {
var elem = document.getElementById("canvas");
var width = 0;
var id = setInterval(countUp, 1000); }
*/
$(function () {
var countUp = setInterval(function () { donutChart }, 40);
function count($this) {
var current = parseInt($this.html(), 10);
$this.html(++current);
if (current !== $this.data('count')) {
setTimeout(function () { count($this) }, 50);
}
}
$(".testspan1").each(function () {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
$(".testspan2").each(function () {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
$(".testspan3").each(function () {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
$(".testspan4").each(function () {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
});
function donutChart() {
var factor_calc = Math.PI / 180;
var record = $('.testspan1').text(); // equal to 100% or 360°
var average = $('.testspan2').text();
var income = $('.testspan2').text();
var target = $('.testspan3').text();
// Record
ctx.strokeStyle = 'rgba(115, 100, 164, 1)';
ctx.beginPath();
ctx.arc(250, 250, 200, degtoRad(270), degtoRad(270 + (record / record) * 360));
ctx.stroke();
// Average
ctx.strokeStyle = 'rgba(125, 131, 164, 1)';
ctx.beginPath();
ctx.arc(250, 250, 170, degtoRad(270), degtoRad(270 + (average / record) * 360));
ctx.stroke();
//Income
ctx.strokeStyle = 'rgba(75, 181, 164, 1)';
ctx.beginPath();
ctx.arc(250, 250, 140, degtoRad(270), degtoRad(270 + (income / record) * 360));
ctx.stroke();
// Target
ctx.strokeStyle = 'rgba(26, 221, 164, 1)';
ctx.beginPath();
ctx.arc(250, 250, 110, degtoRad(270), degtoRad(270 + (target / record) * 360));
ctx.stroke();
// Record
ctx.font = "25px Philosopher";
ctx.fillStyle = 'rgba(115, 100, 164, 1)';
ctx.fillText(record, 220, 200);
//Average
ctx.font = "25px Philosopher";
ctx.fillStyle = 'rgba(125, 131, 164, 1)';
ctx.fillText(average, 220, 230);
//Income
ctx.font = "30px Philosopher";
ctx.fillStyle = 'rgba(75, 181, 164, 1)';
ctx.fillText(income, 220, 260);
// Target
ctx.font = "35px Philosopher";
ctx.fillStyle = 'rgba(26, 221, 164, 1)';
ctx.fillText(target, 220, 290);
// Euro
ctx.font = "60px Philosopher";
ctx.fillStyle = 'rgba(26, 221, 164, 1)';
ctx.fillText('€', 280, 255);
}
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '',
prefix: '',
suffix: '€'
};
});
HTML:
<div class="canvasdiv">
<canvas id="canvas" width="500" height="500"></canvas>
<img id="myImage" />
<span class='testspan1'>1250</span>
<span class='testspan2'>250</span>
<span class='testspan3'>450</span>
<span class='testspan4'>130</span>
</div>
For people with similar problems, here are some further related links (using no canvas):