Search code examples
javascriptcanvashtml5-canvascanvasjs

can we customize canvasjs donut chart to other from?

How can I customize this canvasjs donut in the first image to the other one in the second image?

enter image description here

enter image description here

This is the code for the first chart :

window.onload = function() {
    chart = new CanvasJS.Chart("chartContainer2", {
        title: {
            text: "Title",
            verticalAlign: "top",
            horizontalAlign: "left"
        },
        data: [{
            type: "doughnut",
            startAngle: 20,
            dataPoints: [{
                y: 30,
                label: "one"
            }, {
                y: 30,
                label: "tow"
            }, {
                y: 50,
                label: " three "
            }]
        }]
    }), chart.render()
};
Solution

  • You will have to customize the source code to achieve the chart you desire.

    CanvasJS has a Creative Commons+Attribution License for non-commercial use. But this license does not allow any modifications to the source code. So you will have to buy a commercial license. I don't have their commercial license so I can't help with your desired modifications.

    Since you will have to custom modify CanvasJS anyway, it might be easier to create your own custom code ;-)

    Here's some example starting code that calculates and draws the arcs for a donut chart. Adding text labels plus some lineTo connectors should be easy.

    And a Demo: http://jsfiddle.net/m1erickson/UFPQz/

    enter image description here

    <!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");

    function DonutChart(cx,cy,radius,arcWidth,values,colors){

        // save incoming chart definition
        this.cx=cx;
        this.cy=cy,
        this.radius=radius;
        this.arcWidth=arcWidth
        this.colors=colors;
        this.arcRadians=[];

        // put spacing between each arc in the chart
        this.leadPadding=Math.PI/45; // 3 degrees lead padding on arcs

        // parallel arrays holding starting/ending angles of each arc
        this.startRadians=[];
        this.endRadians=[];

        // calc sum of all values
        var total=0;
        for(var i=0;i<values.length;i++){ total+=values[i]; }

        // calc starting & ending radian angles for each arc
        var PI2=Math.PI*2;
        var accumRadians=0;
        var starting=0;
        var ending=0;
        for(var i=0;i<values.length;i++){
            starting=ending+this.leadPadding;
            ending=starting+PI2*values[i]/total-this.leadPadding;
            this.startRadians.push(starting);
            this.endRadians.push(ending);
        }


    };
    // draw all the arcs for this chart
    DonutChart.prototype.drawArcs=function(){
        ctx.save();
        for(var i=0;i<this.startRadians.length;i++){
            ctx.beginPath();
            ctx.arc(this.cx,this.cy,this.radius,this.startRadians[i],this.endRadians[i]);
            ctx.lineWidth=this.arcWidth;
            ctx.strokeStyle=this.colors[i];
            ctx.stroke();
        }
        ctx.restore();
    }


    // TEST: draw the arcs for an example donut chart

    var arcs=new DonutChart(150,150,100,10,[250,360,280,250],['red','green','blue','gold']);

    arcs.drawArcs();


}); // end $(function(){});
</script>
</head>
<body>
    <h4>Example arcs for a donut chart</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>