canvas line chart sample

<html>
 <head>
    <meta charset="utf-8">
    <style>
        #data {margin-bottom:20px;}
        #data ul {padding:0;margin:0;clear:both;list-style:none;}
        #data ul li {float:left;width:100px;height:30px;text-align:center;border-bottom:1px solid #888;line-height:30px;}
        #data ul.data-header li {background-color:#ddd;border-top:1px solid #888;}
        #canvasbox {width:300px;height:150px;padding:10px;border:1px solid #000;margin-top:50px;}
    </style>
 </head>
 <body>
    <h1>웹디자인 및 개발 평가전 점수 통계</h1>
    <div id="data">
        <ul class="data-header">
            <li>이름</li>
            <li>7월</li>
            <li>8월</li>
            <li>9월</li>
            <li>10월</li>
        </ul>
        <ul class="data-row" data-color="#0000ff">
            <li class="data-name">홍길동</li>
            <li class="data-month">0</li>
            <li class="data-month">90</li>
            <li class="data-month">65</li>
            <li class="data-month">88</li>
        </ul>
        <ul class="data-row" data-color="#ff0000">
            <li class="data-name">김개똥</li>
            <li class="data-month">66</li>
            <li class="data-month">96</li>
            <li class="data-month">57</li>
            <li class="data-month">95</li>
        </ul>
    </div>
    <div id="canvasbox"><canvas id="mycanvas" width="300" height="150"></canvas></div>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        var canvas = document.getElementById("mycanvas");
        var canvasWidth = 300;
        var canvasHeight = 150;
        var valueLimit = 100;
        var rows = $("#data .data-row");
        if(rows.length && canvas.getContext) {
            for(var i=0;i<rows.length;i++){
                var x = 0;
                var lineColor = $(rows[i]).attr("data-color");
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.strokeStyle = lineColor;
                var monthData = $(rows[i]).children("li.data-month");
                var xWidth = parseInt(canvasWidth / (monthData.length - 1));
                for(var j=0;j<monthData.length;j++){
                    var tmpData = parseInt( $(monthData[j]).html() );
                    var tmpY = parseInt( (tmpData*canvasHeight)/valueLimit );
                    var y = canvasHeight - tmpY;
                    if(j==0){
                        ctx.moveTo(x, y);
                    } else {
                        ctx.lineTo(x, y);
                        ctx.stroke();
                    }
                    if(j == (monthData.length -1)){
                        ctx.fillText(tmpData, x-15, y);
                    } else {
                        ctx.fillText(tmpData, x, y);
                    }
                    x = x + xWidth;
                }
            }
        }
    </script>
 </body>
</html>