FORUMS

Select any forum below to ask question

Home › Forums › Report Bugs › How to create pie chart in pie chart using canvasjs

How to create pie chart in pie chart using canvasjs

Viewing 2 posts - 1 through 2 (of 2 total)
  • June 29, 2017 at 10:28 am #15447

    sailaja

    Hi,

    I have requirement of pie chart in pie chart with exact occupancy (exactly same as below code).
    Please check the below html code.
    I could achieve it using below code.
    But i need labels with a line like in canvasjs pie chart.

    Please suggest something to achieve this.

    Thanks,
    Sailaja
    ***********************************************************************************************`

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=”utf-8″ />
    <title></title>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js”></script&gt;
    <script type=”text/javascript”>

    $(document).ready(function () {
    var ctx = $(‘#canvas’)[0].getContext(“2d”);

    //ctx.fillStyle = “#00A308”;//green
    ctx.fillStyle = “#800000”;//maroon
    ctx.beginPath();
    ctx.arc(150, 150, 100, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillText(25, 250, 50);
    ctx.fill();

    //drawWedge(0, 0, “red”, 150);

    var cx=150;
    var cy=150;
    var radius=90;
    for (var i = 0; i < 3; i++)
    {
    var startAngle=i*Math.PI/2;
    var endAngle=startAngle+Math.PI/2;
    ctx.beginPath();
    ctx.moveTo(cx,cy);
    ctx.arc(cx,cy,radius,startAngle,endAngle);
    ctx.closePath();
    //ctx.fillStyle=”#FF1C0A” ;//red
    ctx.fillStyle = “#0000FF”;//blue
    ctx.fillText(10, 50, 250);
    ctx.fill();
    }
    startAngle=0*Math.PI/2;
    endAngle=startAngle+Math.PI/5;
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(150, 150, 80, startAngle, endAngle);
    ctx.closePath();
    ctx.fillStyle = “#FFFF00”;//yellow
    ctx.fillText(“20%”, 280, 200);
    //ctx.Text(20, 280, 200);
    ctx.fill();
    });
    </script>
    </head>
    <body>
    <!–<div id=”canvas” style=”width:40%”></div>–>
    <canvas id=”canvas” width=”300″ height=”300″></canvas>

    </body>
    </html>
    *************************************************************************************************

    June 29, 2017 at 8:35 pm #15457

    Suyash Singh

    @sailaja,

    Given that the features you are looking for is already present in CanvasJS Charts, you can create using our library itself. Please, take a look at this documentation page for creating pie charts in few line of codes. You can also create doughnut charts and many other charts using our library.

    ___
    Suyash Singh
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.