- <!DOCTYPE html>
- <html lang="pl">
- <head>
- <meta charset="utf-8">
- <title>PD Szymon Sikorski</title>
- <script type="text/javascript">
- var colHeight = 2;
- function loadN(form)
- {
- var iloscDanych = parseInt(form.iloscDanych.value);
- var daneTD = document.getElementById("Podajliczbe");
- var etykietyTD = document.getElementById("Podajetykiete");
- Podajliczbe.innerHTML = "";
- Podajetykiete.innerHTML = "";
- for(var i = 0; i < iloscDanych; ++i)
- {
- Podajliczbe.innerHTML += "<b>Ilość samochodów "+(i+1)+": </b><input type='number' class='Cdane' name='dana"+i+"' value='"+(i+1)+"'><br>";
- Podajetykiete.innerHTML += "<input type='text' class='Cetykiety' name='etykieta"+i+"' value='etykieta "+(i+1)+"'><br>";
- }
- }
- function rysujTytulWykresu(canvas, context, tytul)
- {
- canvas.height = 60;
- context.font = "20pt Times New Roman";
- context.fillStyle = "black";
- context.fillText(tytul, 525, 50);
- }
- function rysujWykresKolowy(canvas, context, dane, kolory, etykiety, sumaDane)
- {
- var procenty = [];
- for (var i =0; i<dane.length; i++)
- {
- procenty[i]=dane[i]/sumaDane * 100+"%";
- }
- var r = 125;
- canvas.height = r * 3;
- var juzNarysowane = 0;
- var x = canvas.width / 2;
- var y = canvas.height / 2;
- context.font = "16px Times New Roman";
- for (var i = 0; i < dane.length; i++)
- {
- context.fillStyle = kolory[i % kolory.length];
- context.beginPath();
- context.moveTo(x, y);
- var wycinek = 2 * Math.PI * (dane[i] / sumaDane);
- context.arc(x, y, r, juzNarysowane, juzNarysowane + wycinek, false);
- context.lineTo(x, y);
- context.fill();
- context.stroke();
- context.beginPath();
- context.moveTo(x, y);
- context.arc(x, y, y/1.25,juzNarysowane, juzNarysowane + (wycinek/2), false);
- var koncowyKat = juzNarysowane + (wycinek/2);
- var setX = x+ + Math.cos(koncowyKat) * (r*1.25);
- var setY = y+ Math.sin(koncowyKat) * (r*1.25);
- context.font = "20px Arial";
- context.fillStyle = "black";
- context.fillText(procenty[i], setX - (etykiety[i].length * 3), setY + 10);
- juzNarysowane += wycinek;
- }
- }
- function maxDane(dane)
- {
- var max = dane[0];
- for(var i = 1; i < dane.length; ++i)
- {
- if(dane[i] > max) max = dane[i];
- }
- return max;
- }
- function minDane(dane)
- {
- var min = dane[0];
- for(var i = 1; i < dane.length; ++i)
- {
- if(dane[i] < min) min = dane[i];
- }
- return min;
- }
- function obliczWysokosc(dane, czySlupkowy)
- {
- max = Math.abs(maxDane(dane));
- min = Math.abs(minDane(dane));
- if(!czySlupkowy)
- {
- var height = Math.ceil((210 * (((max > min) ? max : min) / 100)) / 100) * 100;
- return ((height < 200) ? (210 + 25) : (height + 25) );
- }
- else
- {
- var height = ((max > min) ? max : min) * colHeight * 2;
- return (height < 200) ? 200 : height;
- }
- }
- function rysujWykresPunktowy(canvas, context, dane, kolory, etykiety, sumaDane, czyObliczycWymiary)
- {
- var pxSize = 10;
- if(czyObliczycWymiary)
- {
- canvas.height = obliczWysokosc(dane, false);
- }
- var x = canvas.width / (dane.length + 1);
- var y = canvas.height / 2;
- context.strokeStyle = "black";
- if(czyObliczycWymiary)
- {
- context.beginPath();
- context.moveTo(canvas.width * 0.03, 0);
- context.lineTo(canvas.width * 0.03, canvas.height);
- context.stroke();
- context.beginPath();
- context.moveTo(0, y);
- context.lineTo(canvas.width, y);
- context.stroke();
- }
- context.font = "10pt Times New Roman";
- for (var i = 0; i < dane.length; i++)
- {
- context.fillStyle = kolory[i % kolory.length];
- context.fillRect((x * (i+1) - (pxSize / 2)), (y - dane[i] - (pxSize / 2)), pxSize, pxSize);
- context.fillStyle = "black";
- context.fillText(etykiety[i], (x * (i+1) - (pxSize / 2)), (y - dane[i] - (pxSize / 1.5)));
- }
- }
- function rysujWykresXY(canvas, context, dane, kolory, etykiety, sumaDane)
- {
- canvas.height = obliczWysokosc(dane, false);
- var x = canvas.width / (dane.length + 1);
- var y = canvas.height / 2;
- context.strokeStyle = "black";
- context.beginPath();
- context.moveTo(canvas.width / 2, 0);
- context.lineTo(canvas.width / 2, canvas.height);
- context.stroke();
- context.beginPath();
- context.moveTo(0, y);
- context.lineTo(canvas.width, y);
- context.stroke();
- for (var i = 0; i < dane.length - 1; i++)
- {
- context.strokeStyle = kolory[i % kolory.length];
- context.beginPath();
- context.moveTo((x * (i+1)), (y - dane[i]));
- context.lineTo((x * (i+2)), (y - dane[i+1]));
- context.stroke();
- }
- rysujWykresPunktowy(canvas, context, dane, kolory, etykiety, sumaDane, false);
- }
- function rysujWykresSlupkowy(canvas, context, dane, kolory, etykiety, sumaDane)
- {
- var procenty = [];
- for (var i =0; i<dane.length; i++)
- {
- procenty[i]=dane[i]/sumaDane * 100+"%";
- }
- canvas.height = obliczWysokosc(dane, true);
- var x = canvas.width / (dane.length + 1);
- var y = canvas.height / 2;
- var colWidth = x / 2;
- context.strokeStyle = "black";
- for (var i=0;i<=20;i++){
- context.beginPath();
- context.moveTo(50, y-(i*50));
- context.lineTo(canvas.width-50, y-(i*50));
- context.stroke();
- context.font = "10pt Arial";
- context.fillText(0+(i*25), 10, y-(i*50));
- }
- context.font = "15pt Arial";
- for (var i = 0; i < dane.length; i++)
- {
- context.fillStyle = kolory[i % kolory.length];
- context.fillRect((x * (i+1)) - (colWidth / 2), y, colWidth, -(colHeight * dane[i]));
- context.fillStyle = "black";
- if(dane[i] >= 0)
- {
- context.fillText(procenty[i]+" "+etykiety[i], (x * (i+1) - (colWidth / 2)), y + 20);
- }
- else
- {
- context.fillText(procenty[i]+" "+etykiety[i], (x * (i+1) - (colWidth / 2)), y - 20);
- }
- }
- }
- function rysujLegende(canvas, context, kolory, etykiety)
- {
- var rectX = 15;
- var rectY = 15;
- var rectW = 15;
- var rectH = 15;
- canvas.height = (rectH + 20) * kolory.length + 30;
- context.font = "15pt Times New Roman";
- for(var i = 0; i < kolory.length; ++i)
- {
- context.fillStyle = kolory[i % kolory.length];
- context.fillRect(rectX, rectY, rectW, rectH);
- context.fillStyle = 'BLACK';
- context.strokeRect(rectX, rectY, rectW, rectH);;
- context.fillText(etykiety[i], (rectX + rectW + 10), (rectY + (rectH / 1.5)));
- rectY += rectH + 10;
- }
- }
- function draw(form)
- {
- var canvas = document.getElementById('image');
- var context = canvas.getContext('2d');
- canvas.width = screen.availWidth - 30;
- context.fillStyle = "rgb(255, 255, 255)";
- context.fillRect(0, 0, canvas.width, canvas.height);
- var tmpDane = document.getElementsByClassName("Cdane");
- var dane = [];
- var sumaDane = 0;
- for(var i = 0; i < tmpDane.length; ++i)
- {
- dane.push(parseFloat(tmpDane[i].value));
- sumaDane += dane[i];
- }
- var typWykresu = form.typ;
- var wybranyWykres = 0;
- for(var i = 0; i < typWykresu.length; ++i)
- {
- if(typWykresu[i].checked)
- {
- wybranyWykres = i;
- break;
- }
- }
- var tmpEtykiety = document.getElementsByClassName("Cetykiety");
- var etykiety = [];
- for(var i = 0; i < tmpEtykiety.length; ++i)
- {
- etykiety.push(tmpEtykiety[i].value);
- }
- var tmpKolor = new Array(3);
- tmpKolor[0] = [];
- tmpKolor[1] = [];
- tmpKolor[2] = [];
- var maxKolor = 256;
- for(var i = 0; i < maxKolor; ++i)
- {
- tmpKolor[0].push(i);
- tmpKolor[1].push(i);
- tmpKolor[2].push(i);
- }
- var kolory = [];
- for (var i = 0; i < dane.length; ++i)
- {
- var x = Math.floor(Math.random()*256);
- var red = tmpKolor[0][x];
- tmpKolor[0][x] = tmpKolor[0][maxKolor - 1];
- x = Math.floor(Math.random()*256);
- var green = tmpKolor[1][x];
- tmpKolor[1][x] = tmpKolor[1][maxKolor - 1];
- x = Math.floor(Math.random()*256);
- var blue = tmpKolor[2][x];
- tmpKolor[2][x] = tmpKolor[2][maxKolor - 1];
- kolory.push('rgb('+red+','+green+','+blue+')');
- --maxKolor;
- }
- switch(wybranyWykres)
- {
- case 0:
- {
- for(var i = 0; i < dane.length; ++i)
- {
- if(dane[i] < 0)
- {
- sumaDane = -1;
- break;
- }
- }
- if(sumaDane <= 0)
- {
- alert("Na wykresie kołowym dane nie mogą być ujemne i minimum jedna dana musi być różna od 0!");
- context.fillStyle = "rgb(255, 255, 255)";
- context.fillRect(0, 0, canvas.width, canvas.height);
- canvas.height = 0;
- canvas = document.getElementById('legend');
- context = canvas.getContext('2d');
- context.fillStyle = "rgb(255, 255, 255)";
- context.fillRect(0, 0, canvas.width, canvas.height);
- canvas.height = 0;
- canvas = document.getElementById('title');
- context = canvas.getContext('2d');
- context.fillStyle = "rgb(255, 255, 255)";
- context.fillRect(0, 0, canvas.width, canvas.height);
- canvas.height = 0;
- return;
- }
- rysujWykresKolowy(canvas, context, dane, kolory, etykiety, sumaDane);
- break;
- }
- case 1:
- {
- rysujWykresPunktowy(canvas, context, dane, kolory, etykiety, sumaDane, true);
- break;
- }
- case 2:
- {
- rysujWykresXY(canvas, context, dane, kolory, etykiety, sumaDane);
- break;
- }
- case 3:
- {
- rysujWykresSlupkowy(canvas, context, dane, kolory, etykiety, sumaDane);
- break;
- }
- default:
- return;
- }
- canvas = document.getElementById('title');
- context = canvas.getContext('2d');
- context.fillStyle = "rgb(255, 255, 255)";
- context.fillRect(0, 0, canvas.width, canvas.height);
- rysujTytulWykresu(canvas, context, form.tytul.value);
- canvas = document.getElementById('legend');
- context = canvas.getContext('2d');
- context.fillStyle = "rgb(255, 255, 255)";
- context.fillRect(0, 0, canvas.width, canvas.height);
- rysujLegende(canvas, context, kolory, etykiety);
- }
- </script>
- </head>
- <body>
- <form>
- <table align="center" width=60%>
- <tr><td><b>Podaj tytuł wykresu: </b></td><td><input type="text" name="tytul" value="Samochody"></td></tr>
- <tr>
- <td><b>Podaj ile chcesz dodać elementów: </b></td>
- <td><input type="number" name="iloscDanych" value="1" min="1"><br></td>
- <td><input type="button" name="akceptujIloscDanych" value="WYKONAJ" onclick="loadN(this.form);"></td>
- </tr>
- <tr>
- <td id="Podajliczbe"></td>
- <td id="Podajetykiete"></td>
- </tr>
- <tr>
- <td><br><b>Wybierz jaki chcesz wykres: </b> </td>
- <td>
- <br>
- <input type="radio" name="typ" value="0" checked>Kołowy</input><br>
- <input type="radio" name="typ" value="1">Punktowy</input><br>
- <input type="radio" name="typ" value="2">XY</input><br>
- <input type="radio" name="typ" value="3">Słupkowy</input><br>
- </td>
- <td><input type="button" name="a" value="NARYSUJ" onclick="draw(this.form);"></td>
- </tr>
- </table>
- </form>
- <center><canvas id="title" width="1200" height="0"></canvas></center>
- <center><canvas id="image" width="1200" height="0"></canvas></center>
- <center><canvas id="legend" width="1200" height="0"></canvas></center>
- </body>
- </html>