https://eshop-2025.netlify.app/assets/js/dynamic-pie-chart.js

1(function() {
2  var pieCharts = document.querySelectorAll('.pie-chart');
3  
4  Array.prototype.forEach.call(pieCharts, function(wrapperEl) {
5    // Pull our variables out of our helper div
6    var dataset = wrapperEl.dataset;
7    var percentage = dataset.percentage ? parseInt(dataset.percentage, 10) : 0;
8    var diameter = dataset.diameter ? parseInt(dataset.diameter, 10) : 150;
9    var strokeWidth = dataset.strokeWidth ? parseInt(dataset.strokeWidth, 10) : 15;
10    var fillColor = dataset.fillColor || '#f47b28'; // orange
11    var bgColor = dataset.bgColor || '#fac5a1'; // light orange
12    
13    // Size our wrapper element and add our percentage
14    wrapperEl.style.height = diameter + 'px';
15    wrapperEl.style.width = diameter + 'px';
16    var percentageEl = document.createElement('span');
17    percentageEl.classList.add('pie-chart__percentage');
18    percentageEl.style.color = fillColor;
19    percentageEl.innerText = percentage + '%';
20    wrapperEl.appendChild(percentageEl);
21    
22    // Setting up the values we're gonna use to draw our circles
23    var center = diameter;
24    var radius = center - (strokeWidth);
25    var startAngle = degreesToRadians(-90);
26    var fullCircle = degreesToRadians(365);
27    var endAngle = startAngle + degreesToRadians(percentage / 100 * 365);
28    
29    // Draw our canvas! Note we're doubling our sizes so we look good on high res displays
30    var canvas = document.createElement('canvas');
31    canvas.classList.add('pie-chart__canvas');
32    canvas.height = diameter * 2;
33    canvas.width = diameter * 2;
34    var ctx = canvas.getContext('2d');
35    ctx.lineWidth = strokeWidth * 2;
36    ctx.strokeStyle = bgColor;
37    ctx.beginPath();
38    ctx.arc(center, center, radius, startAngle, fullCircle);
39    ctx.stroke();
40    ctx.strokeStyle = fillColor;
41    ctx.beginPath();
42    ctx.arc(center, center, radius, startAngle, endAngle);
43    ctx.stroke();
44
45    wrapperEl.appendChild(canvas);
46  });
47  
48  function degreesToRadians(degrees) {
49    return (degrees / 360) * (2 * Math.PI);
50  }
51})();