Untitled

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <script type="text/javascript">
            function draw(form) {
                var canvas = document.getElementById('image2');
                canvas.width = 1000;
                canvas.height = 1000;
                var context = canvas.getContext('2d');

                var dane = [];
                var tmpDane = document.getElementsByClassName("dane");
                var daneY = [];
                var tmpDaneY = document.getElementsByClassName("daneY");
                var suma = 0;
				var minX = -100;
				var minY = 100;
				var maxX = -100;
				var maxY = 100;

                for (var i = 0; i < tmpDane.length; ++i)
                {
                    dane.push(parseFloat(tmpDane[i].value));
                    daneY.push(parseFloat(tmpDaneY[i].value));
                    suma += Math.abs(dane[i]);
					if(tmpDane[i].value > maxX) {
						maxX = tmpDane[i].value;
					} else if(tmpDane[i].value < minX) {
						minX = tmpDane[i].value;
					}

					if(tmpDaneY[i].value > maxY) {
						maxY = tmpDaneY[i].value;
					} else if (tmpDaneY[i].value < minY) {
						minY = tmpDaneY[i].value;
					}
                }

				for(var i = 0; i < dane.length-1; i++) {
					for(var j = 1; j < dane.length; j++) {
						if(dane[j-1] > dane[j]) {
							var p = dane[j];
							dane[j] = dane[j-1];
							dane[j-1] = p;
							p = daneY[j];
							daneY[j] = daneY[j-1];
							daneY[j-1] = p;
						}
					}

				}

                var color = [];

                context.font = "12pt Times New Roman";
                for (let i = 0; i < dane.length; i++) {
                    var r = Math.floor(Math.random() * 899999) + 100000;
                    color.push(r);
                    context.fillStyle = '#' + r;
                    context.fillRect(10, (20 * i) + 10, 10, 10);
                    context.fillStyle = "black";
                    context.fillText(dane[i] + " - " + daneY[i] + " - " + Math.abs(parseInt((dane[i] / suma) * 100)) + "%", 30, (20 * i) + 20);
                }

                var title = form.title.value;

                context.fillText(title, canvas.width / 2, 20);

                var typ = form.typ.value;

                wykPun(canvas, context, dane, suma, color, daneY, true);
            }

            function ilosc(form)
            {
                var iloscDanych = parseInt(form.iloscDanych.value);
                var daneTD = document.getElementById("daneTD");
                var etykietyTD = document.getElementById("etykietyTD");

                daneTD.innerHTML = "";
                etykietyTD.innerHTML = "";

                for (var i = 0; i < iloscDanych; ++i)
                {
                    daneTD.innerHTML += "x " +(i + 1) + ": <input type='number' class='dane' name='dana" + i + "' value='" + (i + 1) + "'><br>";
                    etykietyTD.innerHTML += "y " + (i + 1) + ": <input type='number' class='daneY' name='d" + i + "' value='" + (i + 1) + "'><br>";
                }
            }

            function wykPun(canvas, context, dane, suma, color, daneY, linia) {
                var osX = 200;
                var przX = 0;
                var osY = canvas.height/2;
                var dlu = canvas.width - 100;
                var max = 0;


                for(let i = 0; i < daneY.length; i++) {
                    if(Math.abs(daneY[i]) > max) {
                        max = Math.abs(daneY[i]);
                    }
                }

                context.beginPath();
                context.moveTo(osX, osY);
                context.lineTo(osX + dlu, osY);
                context.stroke();

                context.beginPath();
                context.moveTo(osX, osY - dlu);
                context.lineTo(osX, osY + 2 * dlu);
                context.stroke();

                osX += 10;

                context.font = "10pt Times New Roman";

                var szerok = ((canvas.width - osX) / dane.length) / 2;
                var bylo = false;
                var p2 = 0;
                var przX2 = 0;

                for (let i = 0; i < dane.length; i++) {
                    var p = daneY[i]*osY/(max+1);

                    context.beginPath();
                    context.fillStyle = '#' + color[i];
                    context.fillRect(osX + przX,osY - p, 10, 10);

                    if(linia) {
                        if(bylo === false) {
                            przX2 = przX;
                            p2 = p;
                            bylo = true;
                        } else {
                            context.strokeStyle = '#' + color[i-1];
                            context.moveTo(osX + przX2+5,osY - p2+5)
                            context.lineTo(osX + przX+5,osY - p+5);
                            context.stroke();
                            przX2 = przX;
                            p2 = p;
                        }
                    }

                    context.fillStyle = 'black';
                    context.fillText(dane[i], osX + przX, osY + 20);

                    przX += ((canvas.width - osX - 10) / dane.length) / 2;
                    przX += szerok;
                }
            }
        </script>
    </head>
    <body>
        <form>
            <table>
                <tr>
                    <td colspan="4">
                <center>
                    Tytuł:<br>
                    <input type='text' name ='title' value='tytul'><br><br>
                </center>

                </td>
                </tr>
                <tr>
                    <td>
                        Ilosc danych<br>
                        <input type="number" name="iloscDanych" value="1" min="1"><br><br>
                        <input type="button" name="akceptujIloscDanych" value="Zmien" onclick="ilosc(this.form);">
                        <input type="button" name="a" value="Rysuj" onclick="draw(this.form);">
                    </td>
                    <td id="daneTD"> x: <input type='number' class='dane' name='dana0' value='0'><br> </td>
                    <td id="etykietyTD"> y: <input type='number' class='daneY' name='d0' value='1'><br> </td>
                    <td id='typ'>
                        XY: <input checked type='radio' name='typ' value='xy'><br>
                    </td>
                </tr>
            </table>
            <canvas id="image2">
            </canvas>
        </form>
    </body>
</html>