<p>Week average chart</p> <div id="avgC"></div> </section>
1 Definování proměnných a přiřazení popisků ke grafu
Tento kód definuje proměnné a přiřadí popisky ke grafu.
function calc() {
//define variables var d1km = document.getElementById("day1Km").value; var d2km = document.getElementById("day2Km").value; var d3km = document.getElementById("day3Km").value; var d4km = document.getElementById("day4Km").value; var d5km = document.getElementById("day5Km").value; var d6km = document.getElementById("day6Km").value; var d7km = document.getElementById("day7Km").value; var total = 0; var result = document.getElementById("result"); var avg; var avgResult = document.getElementById("avgResult");
//chart variables var c1 = document.getElementById("c1"); var c2 = document.getElementById("c2"); var c3 = document.getElementById("c3"); var c4 = document.getElementById("c4"); var c5 = document.getElementById("c5"); var c6 = document.getElementById("c6"); var c7 = document.getElementById("c7"); var avgC= document.getElementById("avgC"); //chart legend variables var p1 = document.getElementById("p1"); var p2 = document.getElementById("p2"); var p3 = document.getElementById("p3"); var p4 = document.getElementById("p4"); var p5 = document.getElementById("p5"); var p6 = document.getElementById("p6"); var p7 = document.getElementById("p7");
//input variables var legend1 = document.getElementById("day1").value; var legend2 = document.getElementById("day2").value; var legend3 = document.getElementById("day3").value; var legend4 = document.getElementById("day4").value; var legend5 = document.getElementById("day5").value; var legend6 = document.getElementById("day6").value; var legend7 = document.getElementById("day7").value;
//assign input field text to legend p1.innerHTML=legend1; p2.innerHTML=legend2; p3.innerHTML=legend3; p4.innerHTML=legend4; p5.innerHTML=legend5; p6.innerHTML=legend6; p7.innerHTML=legend7;
2 Nastavení šířky el. <div> v % podle hodnoty v textovém poli
// sum of km total = parseFloat(d1km) + parseFloat(d2km) + parseFloat(d3km) + parseFloat(d4km) + parseFloat(d5km) + parseFloat(d6km) + parseFloat(d7km);
//week average avg = Number(total / 7); avgC.style.width=parseFloat(avg)+"%"; avgC.style.background="#1abc9c";
4 Zobrazení výsledku
//show results result.innerHTML = "You ran " + "<b>" + total + "</b>" + " km this week."; avgResult.innerHTML = "You ran " + "<b>" + avg + "</b>" + " km on average day."; }