Facebook
From Tinct Lizard, 8 Months ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 91
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>PD Szymon Sikorski</title>
  6.     <script type="text/javascript">
  7.                 var colHeight = 2;
  8.                
  9.                 function loadN(form)
  10.                 {
  11.                         var iloscDanych = parseInt(form.iloscDanych.value);
  12.                         var daneTD = document.getElementById("Podajliczbe");
  13.                         var etykietyTD = document.getElementById("Podajetykiete");
  14.                
  15.                         Podajliczbe.innerHTML = "";
  16.                         Podajetykiete.innerHTML = "";
  17.                        
  18.                         for(var i = 0; i < iloscDanych; ++i)
  19.                         {
  20.                                 Podajliczbe.innerHTML += "<b>Ilo┼Ť─ç samochod├│w "+(i+1)+": </b><input type='number' class='Cdane' name='dana"+i+"' value='"+(i+1)+"'><br>";
  21.                                 Podajetykiete.innerHTML += "<input type='text' class='Cetykiety' name='etykieta"+i+"' value='etykieta "+(i+1)+"'><br>";
  22.                         }
  23.                 }
  24.                
  25.                 function rysujTytulWykresu(canvas, context, tytul)
  26.                 {
  27.                         canvas.height = 60;
  28.                         context.font = "20pt Times New Roman";
  29.                         context.fillStyle = "black";
  30.                         context.fillText(tytul, 525, 50);
  31.                 }
  32.        
  33.                 function rysujWykresKolowy(canvas, context, dane, kolory, etykiety, sumaDane)
  34.                 {
  35.             var procenty = [];
  36.             for (var i =0; i<dane.length; i++)
  37.             {
  38.                 procenty[i]=dane[i]/sumaDane * 100+"%";
  39.             }
  40.                         var r = 125;
  41.                         canvas.height = r * 3;
  42.                
  43.                         var juzNarysowane = 0;
  44.                        
  45.                         var x = canvas.width / 2;
  46.                         var y = canvas.height / 2;
  47.                        
  48.                         context.font = "16px Times New Roman";
  49.                         for (var i = 0; i < dane.length; i++)
  50.                         {
  51.                                 context.fillStyle = kolory[i % kolory.length];
  52.                                 context.beginPath();
  53.                                 context.moveTo(x, y);
  54.                                
  55.                                 var wycinek = 2 * Math.PI * (dane[i] / sumaDane);
  56.                                 context.arc(x, y, r, juzNarysowane, juzNarysowane + wycinek, false);
  57.                                 context.lineTo(x, y);
  58.                                 context.fill();
  59.                 context.stroke();
  60.                                
  61.                                 context.beginPath();
  62.                                 context.moveTo(x, y);
  63.                                 context.arc(x, y, y/1.25,juzNarysowane, juzNarysowane + (wycinek/2), false);
  64.                                
  65.                                 var koncowyKat = juzNarysowane + (wycinek/2);
  66.                                 var setX = x+ + Math.cos(koncowyKat) * (r*1.25);
  67.                                 var setY = y+ Math.sin(koncowyKat) * (r*1.25);
  68.                                
  69.                 context.font = "20px Arial";
  70.                                 context.fillStyle = "black";
  71.                                 context.fillText(procenty[i], setX - (etykiety[i].length * 3), setY + 10);
  72.                                
  73.                                 juzNarysowane += wycinek;
  74.                         }
  75.                 }
  76.                
  77.                 function maxDane(dane)
  78.                 {
  79.                         var max = dane[0];
  80.                         for(var i = 1; i < dane.length; ++i)
  81.                         {
  82.                                 if(dane[i] > max) max = dane[i];
  83.                         }
  84.                        
  85.                         return max;
  86.                 }
  87.                
  88.                 function minDane(dane)
  89.                 {
  90.                         var min = dane[0];
  91.                         for(var i = 1; i < dane.length; ++i)
  92.                         {
  93.                                 if(dane[i] < min) min = dane[i];
  94.                         }
  95.                        
  96.                         return min;
  97.                 }
  98.                                        
  99.                 function obliczWysokosc(dane, czySlupkowy)
  100.                 {
  101.                         max = Math.abs(maxDane(dane));
  102.                         min = Math.abs(minDane(dane));
  103.                        
  104.                         if(!czySlupkowy)
  105.                         {
  106.                                 var height = Math.ceil((210 * (((max > min) ? max : min) / 100)) / 100) * 100;
  107.                        
  108.                                 return ((height < 200) ? (210 + 25) : (height + 25) );
  109.                         }
  110.                         else
  111.                         {
  112.                                 var height = ((max > min) ? max : min) * colHeight * 2;
  113.                                 return (height < 200) ? 200 : height;
  114.                         }
  115.                 }
  116.                
  117.                 function rysujWykresPunktowy(canvas, context, dane, kolory, etykiety, sumaDane, czyObliczycWymiary)
  118.                 {              
  119.                         var pxSize = 10;
  120.                         if(czyObliczycWymiary)
  121.                         {
  122.                                 canvas.height = obliczWysokosc(dane, false);
  123.                         }
  124.                         var x = canvas.width / (dane.length + 1);
  125.                         var y = canvas.height / 2;
  126.  
  127.                         context.strokeStyle = "black";
  128.                        
  129.                         if(czyObliczycWymiary)
  130.                         {
  131.                                 context.beginPath();
  132.                                 context.moveTo(canvas.width * 0.03, 0);
  133.                                 context.lineTo(canvas.width * 0.03, canvas.height);
  134.                                 context.stroke();
  135.                                
  136.                                 context.beginPath();
  137.                                 context.moveTo(0, y);
  138.                                 context.lineTo(canvas.width, y);
  139.                                 context.stroke();
  140.                         }
  141.                        
  142.                         context.font = "10pt Times New Roman";
  143.                         for (var i = 0; i < dane.length; i++)
  144.                         {
  145.                                 context.fillStyle = kolory[i % kolory.length];
  146.                                 context.fillRect((x * (i+1) - (pxSize / 2)), (y - dane[i] - (pxSize / 2)), pxSize, pxSize);
  147.                                
  148.                                 context.fillStyle = "black";
  149.                                 context.fillText(etykiety[i], (x * (i+1) - (pxSize / 2)), (y - dane[i] - (pxSize / 1.5)));
  150.                         }
  151.                 }
  152.                
  153.                 function rysujWykresXY(canvas, context, dane, kolory, etykiety, sumaDane)
  154.                 {                      
  155.                         canvas.height = obliczWysokosc(dane, false);
  156.                
  157.                         var x = canvas.width / (dane.length + 1);
  158.                         var y = canvas.height / 2;
  159.                        
  160.                         context.strokeStyle = "black";
  161.                        
  162.                         context.beginPath();
  163.                         context.moveTo(canvas.width / 2, 0);
  164.                         context.lineTo(canvas.width / 2, canvas.height);
  165.                         context.stroke();
  166.                        
  167.                         context.beginPath();
  168.                         context.moveTo(0, y);
  169.                         context.lineTo(canvas.width, y);
  170.                         context.stroke();
  171.                        
  172.                         for (var i = 0; i < dane.length - 1; i++)
  173.                         {
  174.                                 context.strokeStyle = kolory[i % kolory.length];
  175.                                 context.beginPath();
  176.                                 context.moveTo((x * (i+1)), (y - dane[i]));
  177.                                
  178.                                 context.lineTo((x * (i+2)), (y - dane[i+1]));
  179.                                 context.stroke();
  180.                         }
  181.                        
  182.                         rysujWykresPunktowy(canvas, context, dane, kolory, etykiety, sumaDane, false);
  183.                 }
  184.                 function rysujWykresSlupkowy(canvas, context, dane, kolory, etykiety, sumaDane)
  185.         {
  186.               var procenty = [];
  187.             for (var i =0; i<dane.length; i++)
  188.             {
  189.                 procenty[i]=dane[i]/sumaDane * 100+"%";
  190.             }  
  191.                         canvas.height = obliczWysokosc(dane, true);
  192.                
  193.                         var x = canvas.width / (dane.length + 1);
  194.                         var y = canvas.height / 2;
  195.                        
  196.                         var colWidth = x / 2;
  197.                        
  198.                         context.strokeStyle = "black";
  199.                        
  200.             for (var i=0;i<=20;i++){
  201.                         context.beginPath();
  202.                         context.moveTo(50, y-(i*50));
  203.                         context.lineTo(canvas.width-50, y-(i*50));
  204.                         context.stroke();
  205.             context.font = "10pt Arial";
  206.             context.fillText(0+(i*25), 10, y-(i*50));
  207.             }
  208.                         context.font = "15pt Arial";
  209.                         for (var i = 0; i < dane.length; i++)
  210.                         {
  211.                                 context.fillStyle = kolory[i % kolory.length];
  212.                                 context.fillRect((x * (i+1)) - (colWidth / 2), y, colWidth, -(colHeight * dane[i]));
  213.                                        
  214.                                 context.fillStyle = "black";
  215.                                 if(dane[i] >= 0)
  216.                                 {
  217.                                         context.fillText(procenty[i]+" "+etykiety[i], (x * (i+1) - (colWidth / 2)), y + 20);
  218.                                 }
  219.                                 else
  220.                                 {
  221.                                         context.fillText(procenty[i]+" "+etykiety[i], (x * (i+1) - (colWidth / 2)), y - 20);
  222.                                 }
  223.                         }
  224.                 }
  225.                
  226.                 function rysujLegende(canvas, context, kolory, etykiety)
  227.                 {
  228.                         var rectX = 15;
  229.                         var rectY = 15;
  230.                         var rectW = 15;
  231.                         var rectH = 15;
  232.                        
  233.                         canvas.height = (rectH + 20) * kolory.length + 30;
  234.                        
  235.                         context.font = "15pt Times New Roman";
  236.                        
  237.                         for(var i = 0; i < kolory.length; ++i)
  238.                         {
  239.                                 context.fillStyle = kolory[i % kolory.length];
  240.                                 context.fillRect(rectX, rectY, rectW, rectH);
  241.                                 context.fillStyle = 'BLACK';
  242.                                 context.strokeRect(rectX, rectY, rectW, rectH);;
  243.                                 context.fillText(etykiety[i], (rectX + rectW + 10), (rectY + (rectH / 1.5)));
  244.                                
  245.                                 rectY += rectH + 10;
  246.                         }
  247.                 }
  248.        
  249.         function draw(form)
  250.                 {
  251.                         var canvas = document.getElementById('image');
  252.             var context = canvas.getContext('2d');
  253.                         canvas.width = screen.availWidth - 30;
  254.                         context.fillStyle = "rgb(255, 255, 255)";
  255.                         context.fillRect(0, 0, canvas.width, canvas.height);
  256.                        
  257.                         var tmpDane = document.getElementsByClassName("Cdane");
  258.                         var dane = [];
  259.                         var sumaDane = 0;
  260.                         for(var i = 0; i < tmpDane.length; ++i)
  261.                         {
  262.                                 dane.push(parseFloat(tmpDane[i].value));
  263.                                 sumaDane += dane[i];
  264.                         }
  265.                        
  266.                         var typWykresu = form.typ;
  267.  
  268.                         var wybranyWykres = 0;
  269.                         for(var i = 0; i < typWykresu.length; ++i)
  270.                         {
  271.                                 if(typWykresu[i].checked)
  272.                                 {
  273.                                         wybranyWykres = i;
  274.                                         break;
  275.                                 }
  276.                         }
  277.                        
  278.                         var tmpEtykiety = document.getElementsByClassName("Cetykiety");
  279.                         var etykiety = [];
  280.                         for(var i = 0; i < tmpEtykiety.length; ++i)
  281.                         {
  282.                                 etykiety.push(tmpEtykiety[i].value);
  283.                         }
  284.                        
  285.                         var tmpKolor = new Array(3);
  286.                         tmpKolor[0] = [];
  287.                         tmpKolor[1] = [];
  288.                         tmpKolor[2] = [];
  289.                         var maxKolor = 256;
  290.                         for(var i = 0; i < maxKolor; ++i)
  291.                         {
  292.                                 tmpKolor[0].push(i);
  293.                                 tmpKolor[1].push(i);
  294.                                 tmpKolor[2].push(i);
  295.                         }
  296.                        
  297.                         var kolory = [];
  298.                                        
  299.                         for (var i = 0; i < dane.length; ++i)
  300.                         {
  301.                                 var x = Math.floor(Math.random()*256);
  302.                                 var red = tmpKolor[0][x];
  303.                                 tmpKolor[0][x] = tmpKolor[0][maxKolor - 1];
  304.                                
  305.                                 x = Math.floor(Math.random()*256);
  306.                                 var green = tmpKolor[1][x];
  307.                                 tmpKolor[1][x] = tmpKolor[1][maxKolor - 1];
  308.                                
  309.                                 x = Math.floor(Math.random()*256);
  310.                                 var blue = tmpKolor[2][x];
  311.                                 tmpKolor[2][x] = tmpKolor[2][maxKolor - 1];
  312.                                  
  313.                                 kolory.push('rgb('+red+','+green+','+blue+')');
  314.                                  
  315.                                 --maxKolor;
  316.                         }
  317.                                        
  318.                         switch(wybranyWykres)
  319.                         {
  320.                                 case 0:
  321.                                 {
  322.                                         for(var i = 0; i < dane.length; ++i)
  323.                                         {
  324.                                                 if(dane[i] < 0)
  325.                                                 {
  326.                                                         sumaDane = -1;
  327.                                                         break;
  328.                                                 }
  329.                                                
  330.                                         }
  331.                                        
  332.                                         if(sumaDane <= 0)
  333.                                         {
  334.                                                 alert("Na wykresie ko┼éowym dane nie mog─ů by─ç ujemne i minimum jedna dana musi by─ç r├│┼╝na od 0!");
  335.                                                 context.fillStyle = "rgb(255, 255, 255)";
  336.                                                 context.fillRect(0, 0, canvas.width, canvas.height);
  337.                                                
  338.                                                 canvas.height = 0;
  339.                                        
  340.                                                 canvas = document.getElementById('legend');
  341.                                                 context = canvas.getContext('2d');
  342.                                                
  343.                                                 context.fillStyle = "rgb(255, 255, 255)";
  344.                                                 context.fillRect(0, 0, canvas.width, canvas.height);
  345.                                                
  346.                                                 canvas.height = 0;
  347.                                                
  348.                                                 canvas = document.getElementById('title');
  349.                                                 context = canvas.getContext('2d');
  350.                                                
  351.                                                 context.fillStyle = "rgb(255, 255, 255)";
  352.                                                 context.fillRect(0, 0, canvas.width, canvas.height);
  353.                                                
  354.                                                 canvas.height = 0;
  355.                                                
  356.                                                 return;
  357.                                         }
  358.                                        
  359.                                         rysujWykresKolowy(canvas, context, dane, kolory, etykiety, sumaDane);
  360.                                        
  361.                                         break;
  362.                                 }
  363.                                 case 1:
  364.                                 {
  365.                                         rysujWykresPunktowy(canvas, context, dane, kolory, etykiety, sumaDane, true);
  366.                                         break;
  367.                                 }
  368.                                
  369.                                 case 2:
  370.                                 {
  371.                                         rysujWykresXY(canvas, context, dane, kolory, etykiety, sumaDane);
  372.                                         break;
  373.                                 }
  374.                                
  375.                                 case 3:
  376.                                 {
  377.                                         rysujWykresSlupkowy(canvas, context, dane, kolory, etykiety, sumaDane);
  378.                                         break;
  379.                                 }
  380.                                
  381.                                 default:
  382.                                         return;
  383.                         }
  384.                        
  385.                         canvas = document.getElementById('title');
  386.                         context = canvas.getContext('2d');
  387.                        
  388.                         context.fillStyle = "rgb(255, 255, 255)";
  389.                         context.fillRect(0, 0, canvas.width, canvas.height);
  390.                        
  391.                         rysujTytulWykresu(canvas, context, form.tytul.value);
  392.                        
  393.                         canvas = document.getElementById('legend');
  394.                         context = canvas.getContext('2d');
  395.                        
  396.                         context.fillStyle = "rgb(255, 255, 255)";
  397.                         context.fillRect(0, 0, canvas.width, canvas.height);
  398.                        
  399.                         rysujLegende(canvas, context, kolory, etykiety);
  400.         }
  401.     </script>
  402. </head>
  403. <body>
  404. <form>
  405. <table align="center" width=60%>
  406. <tr><td><b>Podaj tytuł wykresu: </b></td><td><input type="text" name="tytul" value="Samochody"></td></tr>
  407. <tr>
  408.     <td><b>Podaj ile chcesz doda─ç element├│w: </b></td>
  409.     <td><input type="number" name="iloscDanych" value="1" min="1"><br></td>
  410.     <td><input type="button" name="akceptujIloscDanych" value="WYKONAJ" onclick="loadN(this.form);"></td>
  411. </tr>
  412. <tr>
  413.         <td id="Podajliczbe"></td>
  414.         <td id="Podajetykiete"></td>
  415. </tr>
  416.  
  417. <tr>
  418. <td><br><b>Wybierz jaki chcesz wykres: </b> </td>
  419. <td>
  420.     <br>
  421. <input type="radio" name="typ" value="0" checked>Kołowy</input><br>
  422. <input type="radio" name="typ" value="1">Punktowy</input><br>
  423. <input type="radio" name="typ" value="2">XY</input><br>
  424. <input type="radio" name="typ" value="3">Słupkowy</input><br>
  425. </td>
  426. <td><input type="button" name="a" value="NARYSUJ" onclick="draw(this.form);"></td>
  427. </tr>
  428. </table>
  429. </form>
  430.     <center><canvas id="title" width="1200" height="0"></canvas></center>
  431.     <center><canvas id="image" width="1200" height="0"></canvas></center>
  432.         <center><canvas id="legend" width="1200" height="0"></canvas></center>
  433. </body>
  434. </html>
  435.