[Chartjs]-How can I build a double doughnut chart that spins when triggered

by

1👍

✅

Rotation around a centerpoint involves 2 context transforms

  • translate to the rotation point: context.translate(centerX,centerY);

  • rotate by a specified radian angle: context.rotate( 90 * Math.PI/180 );

Here’s code and a Demo: http://jsfiddle.net/m1erickson/rL5aX/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=20;

    var PI=Math.PI;
    var rotation=0;

    var arcs=[];
    arcs.push({cx:150,cy:150,radius:100,startAngle:-45,endAngle:45,color:"blue"});
    arcs.push({cx:150,cy:150,radius:100,startAngle:45,endAngle:135,color:"red"});
    arcs.push({cx:150,cy:150,radius:100,startAngle:135,endAngle:225,color:"gold"});
    arcs.push({cx:150,cy:150,radius:100,startAngle:225,endAngle:315,color:"green"});

    arcs.push({cx:150,cy:150,radius:75,startAngle:-43,endAngle:-2,color:"blue"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:0,endAngle:45,color:"blue"});


    arcs.push({cx:150,cy:150,radius:75,startAngle:47,endAngle:88,color:"red"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:90,endAngle:135,color:"red"});

    arcs.push({cx:150,cy:150,radius:75,startAngle:137,endAngle:180,color:"gold"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:182,endAngle:225,color:"gold"});

    arcs.push({cx:150,cy:150,radius:75,startAngle:227,endAngle:272,color:"green"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:275,endAngle:313,color:"green"});

    drawAll();

    function drawAll(){
        for(var i=0;i<arcs.length;i++){
            draw(arcs[i]);
        }
    }
    function draw(a){
        ctx.save();
        ctx.translate(a.cx,a.cy);
        ctx.rotate(rotation*PI/180);
        ctx.beginPath();
        ctx.arc(0,0,a.radius,a.startAngle*PI/180,a.endAngle*PI/180);
        ctx.strokeStyle=a.color;
        ctx.stroke();
        ctx.restore();
    }

    $("#rotate").click(function(){
        rotation+=90;
        drawAll();
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="rotate">Rotate</button>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[ Extra Credit Followup ]

Here’s some untested-probably-needs-tweaking code to determine if x,y is inside an arc

var arc1={
    cx:0,
    cy:0,
    innerRadius:50,
    outerRadius:70,
    startAngle:0,
    endAngle:Math.PI
}

function isPointInArc(x,y,arc){    
    var dx=x-arc.cx;
    var dy=y-arc.cy;
    var dxy=dx*dx+dy*dy;

    // test if x,y is between the inner and outer radii of the arc
    var rrOuter=arc.outerRadius*arc.outerRadius;
    var rrInner=arc.innerRadius*arc.innerRadius;
    if(dxy<rrInner || dxy>rrOuter){return(false);}

    // test if the angle of xy to centerpoint is inside the arc angle
    var angle=(Math.atan2(dy,dx)+PI2)%PI2;
    return(angle>=arc.startAngle && angle<=arc.endAngle);
}

Good luck with your project!

1👍

You can use CSS transforms (https://developer.mozilla.org/en-US/docs/Web/CSS/transform).

The idea is:

  1. Create CSS with a 90 degree transform
  2. On click of your chart, apply that CSS class (Call the CSS class rotate for example)

Example code:

CSS

rotate {
  transform:rotate(90deg);
}

JS

$("#chart").click(
  $(this).addClass("rotate");
);

Leave a comment