JSFiddle - React, Tailwind, and code Playground

by svierkant

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.js"></script>
<canvas id="diagram2" width="120" height="120"></canvas>
<label></label>

<button>redraw</button>

JavaScript

function makeDoughnut(object, color, value, max)
        {
            if (typeof object.get(0) === "undefined") {
                return false;
            }
            var options = {
                percentageInnerCutout : 77,
                showTooltips: false,
                maintainAspectRatio: true,
                responsive: false
            };
            var ctx = object.get(0).getContext("2d");
                ctx.canvas.width = 120;
                ctx.canvas.height = 120;
            
            console.log(object);
                
            //This will get the first returned node in the jQuery collection.
            var percentage = value * 100 / max;
            
            object.get(0).attr('data-yes', true);
            
            console.log(object.get(0).data('yes'));
            
            
            var chart = new Chart(ctx).Doughnut([
                {
                    value: percentage,
                    color: color
                },
                {
                    value : 100 - percentage,
                    color : "#FF0000"
                }
            ], options);
            
            
            
            //label
            var waarde = Math.round(value * 10) / 10;
            object.next().html(waarde);
        }

makeDoughnut($("#diagram2"), '#2d7885',5, 10);

$('button').click(function()
{
    makeDoughnut($("#diagram2"), '#2d7885',7, 10);
});