JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>
JavaScript
$(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 () {
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...