Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <link | |
| rel="stylesheet" | |
| href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" | |
| crossorigin="anonymous" | |
| /> | |
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" /> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <meta charset="UTF-8" /> | |
| <title>Fertilizer-Calculator</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, sans-serif; | |
| } | |
| body { | |
| background-color: #f4f4f4; | |
| } | |
| .convertSpalte { | |
| display: inline-block; | |
| margin: 1%; | |
| width: fit; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | |
| padding: 20px; | |
| box-sizing: border-box; | |
| } | |
| .spalte { | |
| display: inline-block; | |
| margin: 1%; | |
| width: 30%; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | |
| padding: 20px; | |
| box-sizing: border-box; | |
| } | |
| .sendButton { | |
| background-color: #4caf50; | |
| font-size: 15px; | |
| margin-bottom: 20px; | |
| font-weight: bold; | |
| color: white; | |
| padding: 10px; | |
| margin-top: 20px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| border-radius: 10px; | |
| border: none; | |
| display: flex; | |
| } | |
| .addButton { | |
| background-color: #d8d6d6; | |
| font-size: 12px; | |
| margin-bottom: 20px; | |
| padding: 10px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| border-radius: 10px; | |
| border: none; | |
| display: flex; | |
| } | |
| .center { | |
| margin: auto; | |
| width: 40%; | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .center label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| .center input[type="number"], | |
| .center select { | |
| width: 100%; | |
| padding: 10; | |
| border-radius: 5px; | |
| border: none; | |
| background-color: #f4f4f4; | |
| margin-bottom: 20px; | |
| font-size: 16px; | |
| } | |
| .center select { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-512.png") | |
| no-repeat; | |
| background-position: 95% center; | |
| background-size: 18px; | |
| cursor: pointer; | |
| } | |
| .center select:focus { | |
| outline: none; | |
| } | |
| .center input[type="submit"] { | |
| background-color: #4caf50; | |
| color: white; | |
| font-size: 16px; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-top: 20px; | |
| } | |
| .center input[type="submit"]:hover { | |
| background-color: #3e8e41; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| input[type="number"] { | |
| width: 100%; | |
| padding: 10px; | |
| border-radius: 5px; | |
| border: none; | |
| background-color: #f4f4f4; | |
| margin-bottom: 20px; | |
| font-size: 16px; | |
| } | |
| input[type="number"]:focus { | |
| outline: none; | |
| } | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| .headline { | |
| font-size: 24px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #4caf50; | |
| } | |
| .fertilizerDropdowns { | |
| margin-bottom: 20px; | |
| } | |
| .dropdownGrid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| } | |
| .details { | |
| font-size: 24px; | |
| margin: 20px; | |
| padding: 20px; | |
| background-color: #3e8e41; | |
| color: white; | |
| } | |
| .text { | |
| margin-left: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body onload="getFertilizer()"> | |
| <details> | |
| <summary class="details">Dünger-Berechnung</summary> | |
| <div class="text"> | |
| <p> | |
| Dieser Dünger- und Verbrauchsrechner soll jedem Aquarianer eine | |
| einfache Möglichkeit bieten den Tagesverbrauch seines Aquariums zu | |
| berechnen und darauf basierend eine Empfehlung für die tägliche | |
| Zugabemenge zu bekommen. <br /><br /> | |
| Diese Schritte sind für die Berechnung notwendig: | |
| <br /> | |
| </p> | |
| <ul> | |
| <li> | |
| Bringe deine Nährstoffe (NO3, PO4, K, Fe) auf einen optimalen | |
| Bereich (siehe z.B. JBL) | |
| </li> | |
| <li> | |
| Gebe entsprechend der Herstellerangabe des Düngers die Menge für 7 | |
| Tage hinzu! | |
| </li> | |
| <li> | |
| Messe die Konzentration der Nährstoffe eine kurze Zeit nach der | |
| Zugabe und notiere dir diese Werte! | |
| </li> | |
| <li> | |
| Messe erneut nach 7 Tagen die Konzentration der Nährstoffe und | |
| notiere dir ebenfalls diese Werte! | |
| </li> | |
| <li> | |
| Gebe die Messwerte in den Feldern ein und erhalte den Tagesverbrauch | |
| deiner Pflanzen im Aquarium! | |
| </li> | |
| <li> | |
| Hinweis: Solltest du einen Wasserwert nicht gemessen haben, dann | |
| trage dafür 0 in dem entsprechenden Feld ein. | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="spalte"> | |
| <p class="headline">1. Messung</p> | |
| <label for="nitrateIs1">Nitrat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="nitrateIs1" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="phosphateIs1">Phosphat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="phosphateIs1" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="potassiumIs1">Kalium</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="potassiumIs1" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="ironIs1">Eisen</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="ironIs1" | |
| placeholder="Wert in mg/L" | |
| /> | |
| </div> | |
| <div class="spalte"> | |
| <p class="headline">2. Messung</p> | |
| <label for="nitrateIs2">Nitrat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="nitrateIs2" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="phosphateIs2">Phosphat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="phosphateIs2" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="potassiumIs2">Kalium</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="potassiumIs2" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="ironIs2">Eisen</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="ironIs2" | |
| placeholder="Wert in mg/L" | |
| /> | |
| </div> | |
| <div class="spalte"> | |
| <label for="liter">Liter des Aquariums (netto):</label> | |
| <input type="number" id="liter" placeholder="Wert in Liter" /> | |
| <div id="dropdowns"> | |
| <label for="fertilizer1">Dünger:</label> | |
| <div class="dropdownGrid" id="dropdown-container"> | |
| <select class="fertilizerDropdowns" id="fertilizer1"></select> | |
| </div> | |
| <button type="button" class="addButton" onclick="addDropdown()"> | |
| Dünger hinzufügen | |
| </button> | |
| <button | |
| type="button" | |
| class="sendButton" | |
| id="sendCalculationRequest" | |
| onclick="sendCalculationRequest()" | |
| > | |
| Berechnen | |
| </button> | |
| </div> | |
| </div> | |
| <div id="chartDiv" style="display: none"> | |
| <canvas id="dunger-chart"></canvas> | |
| </div> | |
| <div id="errorDiv" style="display: none"></div> | |
| </details> | |
| <details> | |
| <summary class="details">Dünger-Konverter</summary> | |
| <div class="text"> | |
| <p> | |
| Dieser Dünger-Konverter soll jedem Aquarianer eine einfache | |
| Möglichkeit bieten die Nährstoffzugabe für die Größe seines eigenen | |
| Aquariums umzurechnen. <br /><br /> | |
| Diese Schritte sind für die Berechnung notwendig: | |
| <br /> | |
| </p> | |
| <ul> | |
| <li> | |
| Trage die Netto-Liter des Aquarium und die entsprechenden Dünger | |
| ein. | |
| </li> | |
| <li> | |
| Du erhälst das Ergebnis der Nährstoffe (in mg/l) für 1ml Dünger in | |
| der Liter-Menge des Aquariums. | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="convertSpalte"> | |
| <label for="liter">Liter des Aquariums (netto):</label> | |
| <input type="number" id="literConvert" placeholder="Wert in Liter" /> | |
| <div id="dropdownsConvert"> | |
| <label for="fertilizerConvert1">Dünger:</label> | |
| <div class="dropdownGrid" id="convert-dropdown-container"> | |
| <select | |
| class="fertilizerDropdowns" | |
| id="fertilizerConvert1" | |
| ></select> | |
| </div> | |
| <button | |
| type="button" | |
| class="addButton" | |
| onclick="addConvertDropdown()" | |
| > | |
| Dünger hinzufügen | |
| </button> | |
| </div> | |
| <button | |
| type="button" | |
| class="sendButton" | |
| id="sendCalculationRequest" | |
| onclick="sendConvertRequest()" | |
| > | |
| Berechnen | |
| </button> | |
| </div> | |
| <div class="convertSpalte"> | |
| <table class="w3-card"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Nitrat (mg/l)</th> | |
| <th>Phosphat (mg/l)</th> | |
| <th>Kalium (mg/l)</th> | |
| <th>Eisen (mg/l)</th> | |
| <th>Magnesium (mg/l)</th> | |
| <th>Menge in ml</th> | |
| </tr> | |
| </thead> | |
| <tbody id="data-output"> | |
| <!-- Placeholder --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </details> | |
| <details> | |
| <summary class="details">Verbrauchsrechner</summary> | |
| <div class="text"> | |
| <p> | |
| Dieser Verbrauchsrechner soll jedem Aquarianer eine einfache | |
| Möglichkeit bieten den Verbrauch der Nährstoffe im Aquarium zu berechnen. <br /><br /> | |
| Diese Schritte sind für die Berechnung notwendig: | |
| <br /> | |
| </p> | |
| <ul> | |
| <li> | |
| Bringe deine Nährstoffe (NO3, PO4, K, Fe) auf einen optimalen | |
| Bereich (siehe z.B. JBL) | |
| </li> | |
| <li> | |
| Gebe entsprechend der Herstellerangabe des Düngers die Menge für den Zeitraum (z.B. 3 Tage) | |
| Tage hinzu! | |
| </li> | |
| <li> | |
| Messe die Konzentration der Nährstoffe eine kurze Zeit nach der | |
| Zugabe und notiere dir diese Werte! | |
| </li> | |
| <li> | |
| Messe erneut nach deiner gewählten Zeit (z.B. 3 Tage) die Konzentration der Nährstoffe und | |
| notiere dir ebenfalls diese Werte! | |
| </li> | |
| <li> | |
| Gebe die Messwerte in den Feldern ein und erhalte den Tagesverbrauch | |
| deiner Pflanzen im Aquarium! | |
| </li> | |
| <li> | |
| Hinweis: Solltest du einen Wasserwert nicht gemessen haben, dann | |
| trage dafür 0 in dem entsprechenden Feld ein. | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="spalte" id="consumption1"> | |
| <p class="headline">1. Messung</p> | |
| <label for="nitrateIs1">Nitrat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="nitrateIs1Consumption" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="phosphateIs1">Phosphat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="phosphateIs1Consumption" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="potassiumIs1">Kalium</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="potassiumIs1Consumption" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="ironIs1">Eisen</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="ironIs1Consumption" | |
| placeholder="Wert in mg/L" | |
| /> | |
| </div> | |
| <div class="spalte"> | |
| <p class="headline">2. Messung</p> | |
| <label for="nitrateIs2">Nitrat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="nitrateIs2Consumption" | |
| name="nitrateIs2" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="phosphateIs2">Phosphat</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="phosphateIs2Consumption" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="potassiumIs2">Kalium</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="potassiumIs2Consumption" | |
| placeholder="Wert in mg/L" | |
| /><br /> | |
| <label for="ironIs2">Eisen</label> | |
| <input | |
| type="number" | |
| step="0.1" | |
| id="ironIs2Consumption" | |
| placeholder="Wert in mg/L" | |
| /> | |
| </div> | |
| <div class="spalte"> | |
| <label for="liter">Wie viele Tage lagen zwischen den zwei Messungen?</label> | |
| <input type="number" id="days" placeholder="7" /> | |
| <button | |
| type="button" | |
| class="sendButton" | |
| id="sendConsumptionRequest" | |
| onclick="sendConsumptionRequest()" | |
| > | |
| Berechnen | |
| </button> | |
| </div> | |
| <div id="chartDivConsumption" style="display: none"> | |
| <canvas id="consumption-chart"></canvas> | |
| </div> | |
| <div id="errorDiv" style="display: none"></div> | |
| </details> | |
| <script> | |
| function sendConsumptionRequest() { | |
| fetch( | |
| "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/consumption", | |
| { | |
| method: "POST", | |
| body: JSON.stringify({ | |
| nitrateIs1: | |
| parseFloat(document.getElementById("nitrateIs1Consumption").value) || 0, | |
| phosphateIs1: | |
| parseFloat(document.getElementById("phosphateIs1Consumption").value) || 0, | |
| potassiumIs1: | |
| parseFloat(document.getElementById("potassiumIs1Consumption").value) || 0, | |
| ironIs1: | |
| parseFloat(document.getElementById("ironIs1Consumption").value) || 0, | |
| nitrateIs2: | |
| parseFloat(document.getElementById("nitrateIs2Consumption").value) || 0, | |
| phosphateIs2: | |
| parseFloat(document.getElementById("phosphateIs2Consumption").value) || 0, | |
| potassiumIs2: | |
| parseFloat(document.getElementById("potassiumIs2Consumption").value) || 0, | |
| ironIs2: | |
| parseFloat(document.getElementById("ironIs2Consumption").value) || 0, | |
| days: document.getElementById("days").value || 7, | |
| }), | |
| headers: { | |
| "Content-type": "application/json; charset=UTF-8", | |
| }, | |
| } | |
| ) | |
| .then((response) => { | |
| return response.json(); | |
| }) | |
| .then((data) => { | |
| createConsumptionChart(data); | |
| }); | |
| } | |
| function sendConvertRequest() { | |
| var fertilizerInUse = []; | |
| var dropdownDiv = document.getElementById("convert-dropdown-container"); | |
| var dropdowns = dropdownDiv.querySelectorAll("select"); | |
| dropdowns.forEach((dropdown) => { | |
| fertilizerInUse.push(parseInt(dropdown.value)); | |
| }); | |
| fetch( | |
| "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/convert", | |
| { | |
| method: "POST", | |
| body: JSON.stringify({ | |
| liter: | |
| parseFloat(document.getElementById("literConvert").value) || 0, | |
| fertilizerInUse: fertilizerInUse, | |
| }), | |
| headers: { | |
| "Content-type": "application/json; charset=UTF-8", | |
| }, | |
| } | |
| ) | |
| .then((response) => { | |
| return response.json(); | |
| }) | |
| .then((data) => { | |
| createTable(data); | |
| }); | |
| } | |
| function createTable(data) { | |
| var placeholder = document.querySelector("#data-output"); | |
| var out = ""; | |
| for (let fertilizer of data) { | |
| out += ` | |
| <tr> | |
| <td>${fertilizer.name}</td> | |
| <td>${fertilizer.nitrate}</td> | |
| <td>${fertilizer.phosphate}</td> | |
| <td>${fertilizer.potassium}</td> | |
| <td>${fertilizer.iron}</td> | |
| <td>${fertilizer.magnesium}</td> | |
| <td>${fertilizer.dosage}</td> | |
| </tr> | |
| `; | |
| } | |
| placeholder.innerHTML = out; | |
| } | |
| function sendCalculationRequest() { | |
| var fertilizerInUse = []; | |
| var dropdownDiv = document.getElementById("dropdown-container"); | |
| var dropdowns = dropdownDiv.querySelectorAll("select"); | |
| dropdowns.forEach((dropdown) => { | |
| fertilizerInUse.push(parseInt(dropdown.value)); | |
| }); | |
| fetch( | |
| "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/calculation", | |
| { | |
| method: "POST", | |
| body: JSON.stringify({ | |
| liter: parseFloat(document.getElementById("liter").value) || 0, | |
| nitrateIs1: | |
| parseFloat(document.getElementById("nitrateIs1").value) || 0, | |
| phosphateIs1: | |
| parseFloat(document.getElementById("phosphateIs1").value) || 0, | |
| potassiumIs1: | |
| parseFloat(document.getElementById("potassiumIs1").value) || 0, | |
| ironIs1: | |
| parseFloat(document.getElementById("ironIs1").value) || 0, | |
| nitrateIs2: | |
| parseFloat(document.getElementById("nitrateIs2").value) || 0, | |
| phosphateIs2: | |
| parseFloat(document.getElementById("phosphateIs2").value) || 0, | |
| potassiumIs2: | |
| parseFloat(document.getElementById("potassiumIs2").value) || 0, | |
| ironIs2: | |
| parseFloat(document.getElementById("ironIs2").value) || 0, | |
| fertilizerInUse: fertilizerInUse, | |
| }), | |
| headers: { | |
| "Content-type": "application/json; charset=UTF-8", | |
| }, | |
| } | |
| ) | |
| .then((response) => { | |
| return response.json(); | |
| }) | |
| .then((data) => { | |
| createChart(data); | |
| }); | |
| } | |
| function addDropdown() { | |
| var dropdownContainer = document.getElementById("dropdown-container"); | |
| if (dropdownContainer.children.length < 4) { | |
| var newDropdown = document.createElement("select"); | |
| newDropdown.name = | |
| "fertilizer" + (dropdownContainer.children.length + 1); | |
| newDropdown.id = | |
| "fertilizer" + (dropdownContainer.children.length + 1); | |
| var options = document.getElementById("fertilizer1").innerHTML; | |
| newDropdown.innerHTML = options; | |
| newDropdown.classList.add("fertilizerDropdowns"); | |
| dropdownContainer.appendChild(newDropdown); | |
| } | |
| } | |
| function addConvertDropdown() { | |
| var dropdownContainer = document.getElementById( | |
| "convert-dropdown-container" | |
| ); | |
| if (dropdownContainer.children.length < 4) { | |
| var newDropdown = document.createElement("select"); | |
| newDropdown.name = | |
| "fertilizerConvert" + (dropdownContainer.children.length + 1); | |
| newDropdown.id = | |
| "fertilizerConvert" + (dropdownContainer.children.length + 1); | |
| var options = document.getElementById("fertilizerConvert1").innerHTML; | |
| newDropdown.innerHTML = options; | |
| newDropdown.classList.add("fertilizerDropdowns"); | |
| dropdownContainer.appendChild(newDropdown); | |
| } | |
| } | |
| function getFertilizer() { | |
| fetch( | |
| "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/getAllFertilizer" | |
| ) | |
| .then((response) => { | |
| return response.json(); | |
| }) | |
| .then((data) => { | |
| data.forEach((eintrag) => { | |
| const option = document.createElement("option"); | |
| option.value = eintrag.id; | |
| option.textContent = eintrag.name; | |
| fertilizer1.appendChild(option); | |
| }); | |
| data.forEach((eintrag) => { | |
| const option = document.createElement("option"); | |
| option.value = eintrag.id; | |
| option.textContent = eintrag.name; | |
| fertilizerConvert1.appendChild(option); | |
| }); | |
| }); | |
| } | |
| function createConsumptionChart(data) { | |
| if (document.getElementById("consumption-chart")) { | |
| document.getElementById("consumption-chart").destroy; | |
| } | |
| const response = data; | |
| if (!("Error" in data)) { | |
| document.getElementById("chartDivConsumption").style.display = "block"; | |
| var translate = { | |
| "Nitrat": data.nitrate, | |
| "Phosphat": data.phosphate, | |
| "Kalium": data.potassium, | |
| "Eisen": data.iron | |
| } | |
| const ctx = document.getElementById("consumption-chart").getContext("2d"); | |
| const chart = new Chart(ctx, { | |
| type: "bar", | |
| data: { | |
| labels: Object.keys(translate), | |
| datasets: [ | |
| { | |
| label: "mg/l", | |
| data: Object.values(translate), | |
| backgroundColor: [ | |
| "rgba(255, 99, 132, 0.2)", | |
| "rgba(54, 162, 235, 0.2)", | |
| "rgba(255, 206, 86, 0.2)", | |
| ], | |
| borderColor: [ | |
| "rgba(255, 99, 132, 1)", | |
| "rgba(54, 162, 235, 1)", | |
| "rgba(255, 206, 86, 1)", | |
| ], | |
| borderWidth: 1, | |
| }, | |
| ], | |
| }, | |
| options: { | |
| scales: { | |
| yAxes: [ | |
| { | |
| ticks: { | |
| beginAtZero: true, | |
| }, | |
| }, | |
| ], | |
| }, | |
| }, | |
| }); | |
| } | |
| } | |
| function createChart(data) { | |
| if (document.getElementById("dunger-chart")) { | |
| document.getElementById("dunger-chart").destroy; | |
| } | |
| const response = data; | |
| if (!("Error" in data)) { | |
| document.getElementById("chartDiv").style.display = "block"; | |
| const ctx = document.getElementById("dunger-chart").getContext("2d"); | |
| const chart = new Chart(ctx, { | |
| type: "bar", | |
| data: { | |
| labels: Object.keys(response), | |
| datasets: [ | |
| { | |
| label: "Menge in ml", | |
| data: Object.values(response), | |
| backgroundColor: [ | |
| "rgba(255, 99, 132, 0.2)", | |
| "rgba(54, 162, 235, 0.2)", | |
| "rgba(255, 206, 86, 0.2)", | |
| ], | |
| borderColor: [ | |
| "rgba(255, 99, 132, 1)", | |
| "rgba(54, 162, 235, 1)", | |
| "rgba(255, 206, 86, 1)", | |
| ], | |
| borderWidth: 1, | |
| }, | |
| ], | |
| }, | |
| options: { | |
| scales: { | |
| yAxes: [ | |
| { | |
| ticks: { | |
| beginAtZero: true, | |
| }, | |
| }, | |
| ], | |
| }, | |
| }, | |
| }); | |
| } else { | |
| if (data.Error === 0) { | |
| document.getElementById("errorDiv").style.display = "block"; | |
| var errDiv = document.getElementById("errorDiv"); | |
| var content = document.createTextNode(""); | |
| errDiv.innerHTML = | |
| "<p class='text'>Es konnte keine Kombination errechnet werden! Versuch doch einfach eine andere Dünger-Kombination.</p>"; | |
| } else { | |
| document.getElementById("errorDiv").style.display = "block"; | |
| var errDiv = document.getElementById("errorDiv"); | |
| errDiv.innerHTML = | |
| "<p class='text'>Es ist ein Fehler aufgetreten!</p>"; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |