canvas pie chart - 1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
        .wrap {
            width: 300px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table class="table-chart table table-boardered table-hover">
            <tbody>
                <tr>
                    <td>구분</td>
                    <td data-color="red">1월</td>
                    <td data-color="green">2월</td>
                    <td data-color="blue">3월</td>
                </tr>
                <tr>
                    <td>HTML</td>
                    <td>20</td>
                    <td>50</td>
                    <td>34</td>
                </tr>
                <tr>
                    <td>CSS</td>
                    <td>30</td>
                    <td>10</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>JavaScript</td>
                    <td>80</td>
                    <td>60</td>
                    <td>100</td>
                </tr>
            </tbody>
        </table>
        <canvas id="webclass" width="300" height="300"></canvas>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        var canvas = document.getElementById('webclass');
        var ctx = canvas.getContext("2d");
        var w = canvas.width;
        var h = canvas.height;
        var r = w / 2;
        var x = w / 2;
        var y = h / 2;

        function getarc(x,y,r,angle){
            return [x+Math.cos(angle)*r,y+Math.sin(angle)*r];
        }

        var titles = []; //new Array();
        var colors = [];
        $(function(){
            $ths = $(".table-chart > tbody > tr:first-child > td:first-child").siblings();
            for(var i=0; i < $ths.length; i++){
                titles[i] = $( $ths[i] ).text();
                colors[i] = $( $ths[i] ).attr("data-color");
            }
            $(".table-chart > tbody > tr").not(':first').mouseover(function(){
                    var subject = $(this).children("td:first-child").text();
                    var $tds = $(this).children("td").not(':first');
                    var data = [];
                    var total = 0;
                    for(var i=0; i<$tds.length; i++){
                        data[i] = parseInt( $($tds[i]).text(),10);
                        total += data[i];
                    }
                    ctx.clearRect(0,0,w,h);
                    var start = 0;
                    for(var i=0; i<data.length; i++){
                        var pcnt = data[i] / total;
                        var end = start + 2*Math.PI*pcnt;
                        ctx.beginPath();
                        ctx.fillStyle = colors[i];
                        ctx.moveTo(x,y);
                        ctx.arc(x,y,r,start,end);
                        ctx.moveTo(x,y)
                        ctx.fill();

                        // Label
                        var pos = getarc(x,y,r/1.7,start + 2*Math.PI*(pcnt/2));
                        ctx.fillStyle = 'white';
                        ctx.font = "15px Malgun Gothic";
                        ctx.textAlign = "center";
                        ctx.fillText(titles[i], pos[0], pos[1]);
                        ctx.fillText(data[i], pos[0], pos[1]+18);
                        start = end;
                    }
                }
            );
        });
    </script>
</body>
</html>