jquery - Dynamic Data table with <canvas> -

i need figuring out displaying dynamic data canvas. check out life code here https://jsfiddle.net/fbteabu8/

html

<div class="data-square-percentage-2" data-type="square-percentage" data-id="percentage-2" data-value="50">   <div class="label"></div>   <canvas></canvas> </div> 

css

body {   font-family: 'helvetica', sans-serif; }  .data-square-percentage, .data-square-percentage-2 {   width: 250px;   height: 250px;   margin: 10px 20px 0;   background: #eee;   float: left;   position: relative; }  .label {   width: 100%;   height: 50px;   margin: auto;   position: absolute;   z-index: 2;   top: 0;   bottom: 0;   left: 0;   font-size: 50px;   color: #000;   text-align: center; } 

js

$('[data-type="square-percentage"]').each(function() {     var pdata = {       width: $(this).width(),       height: $(this).height(),       canvas: $(this).children('canvas'),       percentwidth: $(this).width() / 10,       percentheight: $(this).height() / 10,       elid: $(this).data('id'),       percent: $(this).data('value')     }     $(this).children('.label').text(pdata.percent + '%');     pdata.canvas.attr({       'width': pdata.width,       'height': pdata.height,       'id': pdata.elid     });      pdata.ctx = document.getelementbyid(pdata.elid).getcontext("2d");     pdata.ctx.beginpath();     pdata.ctx.fillstyle = "#ff008d";     pdata.ctx.strokestyle = "#ffdbef";     pdata.ctx.globalalpha = 1;       (i = 0, k = 0, r = 0; < pdata.percent; i++, k++) {       if (k > 9) k = 0, r++;       pdata.ctx.restore();       pdata.ctx.rect((pdata.percentwidth * k), (pdata.percentheight * r), pdata.percentwidth, pdata.percentheight);       pdata.ctx.fill();       pdata.ctx.stroke();       pdata.ctx.save();     }   }); }); 

my question is: i've been able populate data tables correctly, need split second table more data points. so, example, instead of coloring pink 46% out of 100% want able split 4 percentage amounts different colors. sort of so:

data display example

let me know if doesn't make sense or if have better solution of avoiding canvas , using else, svg animation, etc.

thank in advance!