Annular Diagrams with Canvas

Generates coloured segments with texts in a ring. The color gradient can be specified with a kernel function.

by rplantiko

HTML

<canvas id="example"/>

JavaScript

// See http://ruediger-plantiko.blogspot.ch/2013/04/ringdiagramme-mit-canvas.html
// for a description (in German language)

  AnnularDiagram('example').draw();
        
      function AnnularDiagram(id) {
        var canvas = document.getElementById(id);
        canvas.width = 400;
        canvas.height = 400;
        var ctx = canvas.getContext('2d');
        var r1 = 100,
            r2 = 130,
            rm = (r1+r2)/2,
            ox = 200,
            oy = 200;
            
        return {
          draw:draw
          };
         
         function draw() {
          
           circle(r1);
           circle(r2);
           ctx.stroke();

           annularRegion({ startAngle:240, 
                           endAngle:300, 
                           color:{r:255,g:255,b:0,alpha_max:1},
                           sat:sat4,
                           segments:200
                           });
                           
           annularRegion({ startAngle:30, 
                           endAngle:90, 
                           color:{r:255,g:0,b:0,alpha_max:1},
                           sat:sat1,
                           segments:200
                           });
                           
           annularRegion({ startAngle:160, 
                           endAngle:210, 
                           color:{r:0,g:0,b:255,alpha_max:1},
                           sat:sat1minus,
                           segments:200
                           });
                           
                           
           textArc({ text:"ABC",
                     centerAngle:270,
                     spanAngle:30,
                     color:"red",
                     r:rm,
                     font:"bold 11pt Arial"});       
                     
           textArc({ text:"DEF",
                     centerAngle:60,
                     spanAngle:30,
                     color:"black",
                     r:rm,
                     font:"bold 11pt Arial",
 ...