API tools faq
paste
Advertisement
asimryu

line & pie chart using canvas

asimryu
Jun 30th, 2020
1,195
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.             <meta charset=utf-8>
  5.         <title>Interactive Line Graph & Pie Chart</title>
  6.                 <style>
  7.                     body {margin:20px;}
  8.                     table {width:500px;border-collapse: collapse;}
  9.                     table td, table th {border:1px solid #888;text-align:center;}
  10.                     table th {background-color:#ddd;}
  11.                 </style>
  12.     </head>
  13.     <body>
  14.         <table style="width:500px;">
  15.             <colgroup>
  16.                 <col width="16%">
  17.                 <col width="14%">
  18.                 <col width="14%">
  19.                 <col width="14%">
  20.                 <col width="14%">
  21.                 <col width="14%">
  22.                 <col width="14%">
  23.             </colgroup>
  24.             <tbody>
  25.             <tr id="row0" class="header">
  26.                 <th>부서</th>
  27.                 <th>1월</th>
  28.                 <th>2월</th>
  29.                 <th>3월</th>
  30.                 <th>4월</th>
  31.                 <th>5월</th>
  32.                 <th>6월</th>
  33.             </tr>
  34.             <tr id="row1" data-row="1" class="row">
  35.                 <td data-color="red">철강팀</td>
  36.                 <td>50</td>
  37.                 <td>40</td>
  38.                 <td>60</td>
  39.                 <td>10</td>
  40.                 <td>54</td>
  41.                 <td>65</td>
  42.             </tr>
  43.             <tr id="row2" data-row="2" class="row">
  44.                 <td data-color="green">섬유팀</td>
  45.                 <td>50</td>
  46.                 <td>60</td>
  47.                 <td>40</td>
  48.                 <td>90</td>
  49.                 <td>34</td>
  50.                 <td>70</td>
  51.             </tr>
  52.             <tr id="row3" data-row="3" class="row">
  53.                 <td data-color="blue">영업3팀</td>
  54.                 <td>20</td>
  55.                 <td>80</td>
  56.                 <td>90</td>
  57.                 <td>50</td>
  58.                 <td>64</td>
  59.                 <td>20</td>
  60.             </tr>
  61.             </tbody>
  62.         </table>
  63.         <p></p>
  64.     <canvas id="graph" width="500" height="300"></canvas>
  65.     <canvas id="pie" width="500" height="500"></canvas>
  66.     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
  67.     <script>
  68.       var graph, data;
  69.       var xPadding = 30;
  70.       var yPadding = 30;
  71.            
  72.             function getData(row){
  73.                 var cols = $("#row" + row).children("td");
  74.                 data = { values:[
  75.                     { X: "1월", Y: parseInt($(cols[1]).html()) },
  76.                     { X: "2월", Y: parseInt($(cols[2]).html()) },
  77.                     { X: "3월", Y: parseInt($(cols[3]).html()) },
  78.                     { X: "4월", Y: parseInt($(cols[4]).html()) },
  79.                     { X: "5월", Y: parseInt($(cols[5]).html()) },
  80.                     { X: "6월", Y: parseInt($(cols[6]).html()) },
  81.                 ]};
  82.             }
  83.       // Returns the max Y value in our data list
  84.       function getMaxY() {
  85.           var max = 0;
  86.          
  87.           for(var i = 0; i < data.values.length; i ++) {
  88.              if(data.values[i].Y > max) {
  89.                   max = data.values[i].Y;
  90.               }
  91.           }
  92.          
  93.           max += 10 - max % 10;
  94.           return max;
  95.       }
  96.      
  97.       // Return the x pixel for a graph point
  98.       function getXPixel(val) {
  99.           return ((graph.width() - xPadding) / data.values.length) * val + (xPadding * 1.5);
  100.       }
  101.      
  102.       // Return the y pixel for a graph point
  103.       function getYPixel(val) {
  104.           return graph.height() - (((graph.height() - yPadding) / getMaxY()) * val) - yPadding;
  105.       }
  106.  
  107.       function drawChart(row){
  108.                 getData(row);
  109.         graph = $('#graph');
  110.         var c = graph[0].getContext('2d');            
  111.         c.clearRect(0, 0, graph[0].width, graph[0].height)
  112.         c.lineWidth = 2;
  113.         c.strokeStyle = '#333';
  114.         c.font = 'italic 8pt sans-serif';
  115.         c.textAlign = "center";
  116.        
  117.         // Draw the axises
  118.         c.beginPath();
  119.         c.moveTo(xPadding, 0);
  120.         c.lineTo(xPadding, graph.height() - yPadding);
  121.         c.lineTo(graph.width(), graph.height() - yPadding);
  122.         c.stroke();
  123.        
  124.         // Draw the X value texts
  125.         for(var i = 0; i < data.values.length; i ++) {
  126.            c.fillText(data.values[i].X, getXPixel(i), graph.height() - yPadding + 20);
  127.        }
  128.        
  129.        // Draw the Y value texts
  130.        c.textAlign = "right"
  131.        c.textBaseline = "middle";
  132.        
  133.        for(var i = 0; i < getMaxY(); i += 10) {
  134.            c.fillText(i, xPadding - 10, getYPixel(i));
  135.        }
  136.        
  137.        c.strokeStyle = '#f00';
  138.        
  139.        // Draw the line graph
  140.        c.beginPath();
  141.        c.moveTo(getXPixel(0), getYPixel(data.values[0].Y));
  142.        for(var i = 1; i < data.values.length; i ++) {
  143.            c.lineTo(getXPixel(i), getYPixel(data.values[i].Y));
  144.        }
  145.        c.stroke();
  146.        
  147.        // Draw the dots
  148.        c.fillStyle = '#333';
  149.        
  150.        for(var i = 0; i < data.values.length; i ++) {  
  151.            c.beginPath();
  152.            c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
  153.            c.fill();
  154.        }
  155.         }
  156.            
  157.             drawChart(1);
  158.  
  159.             $("table tbody td").hover(
  160.                 function(){
  161.                     $(this).parent("tr").children("td").css("background-color","yellow");
  162.                     var datarow = $(this).parent("tr").attr("data-row");
  163.                     drawChart(parseInt(datarow));
  164.                 },
  165.                 function(){
  166.                     $(this).parent("tr").children("td").css("background-color","white");
  167.                 }
  168.             );
  169.  
  170.             $("#row0 th").click(function(){
  171.                 var idx = $(this).index();
  172.                 if( idx == 0 ) return;
  173.                 var month = $(this).text();
  174.                 var tds = $("table tr.row td:nth-of-type("+ (idx+1) +")");
  175.                 var tdvalues = [];
  176.                 for(var i=0; i<tds.length;i++) {
  177.                     var cdata = {};
  178.                     var team = $(tds[i]).parent("tr").children("td:eq(0)").text();
  179.                     var color = $(tds[i]).parent("tr").children("td:eq(0)").attr("data-color");
  180.                     cdata.team = team;
  181.                     cdata.color = color;
  182.                     cdata.sales = parseInt($(tds[i]).text(),10);
  183.                     tdvalues.push( cdata );
  184.                 }
  185.                 drawPie(tdvalues);
  186.             });
  187.  
  188.             function drawPie(tdvalues) {
  189.                 var cc = document.getElementById("pie");
  190.                 var cctx = cc.getContext("2d");
  191.                 var x = cc.width; //그래프 넓이
  192.                 var y = cc.height; //그래프 높이
  193.                 var xc = x / 2; //가로 가운데 점
  194.                 var yc = x / 2; //세로 가운데 점
  195.                 var r = xc; // 반지름=정사각형이므로 가운데 점과 같음.
  196.                 var start = 0; //파이 시작 좌표
  197.                 var end = 0; //파이 끝 좌표
  198.                 var pi = 2 * Math.PI;
  199.                 var total = 0; //합계
  200.                 var colors = [];
  201.                 var teams = [];
  202.                 for( var i=0; i<tdvalues.length; i++ ) {
  203.                     total += tdvalues[i].sales;
  204.                     colors.push(tdvalues[i].color);
  205.                     teams.push(tdvalues[i].team);
  206.                 }
  207.                 for( var i=0; i<tdvalues.length; i++ ) {
  208.                     cctx.beginPath();
  209.                     cctx.moveTo(xc,yc);
  210.                     var percent = tdvalues[i].sales / total;
  211.                     end = start + (pi * percent);
  212.                     cctx.fillStyle = colors[i];
  213.                     cctx.arc(xc, yc, r, start, end);
  214.                     cctx.moveTo(xc, yc);
  215.                     cctx.fill();
  216.                     var ac = start + ( pi * (percent/2) );
  217.                     var pos = getTitlePosition(xc, yc, r/2, ac);
  218.                     cctx.fillStyle = "white";
  219.                     cctx.font = "20px Arial";
  220.                     cctx.textAlign = "center";
  221.                     cctx.fillText(teams[i], pos[0], pos[1]);
  222.                     start = end;
  223.                 }
  224.             }
  225.  
  226.             function getTitlePosition(x, y, r, ac){
  227.                 var tx = x + Math.cos(ac) * r;
  228.                 var ty = y + Math.sin(ac) * r;
  229.                 return [tx, ty];
  230.             }
  231.  
  232.    </script>
  233.   </body>
  234. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!