CODEWITHSUNDEEP
javascripthtmlchart.js
Philip.H
Philip.H

Reputation: 15

Can't find the way to calculate and output it

I'm trying to get the percentage from the "timeSpend" and "breakTime" and store in fSubject,sSubject, tSubject and store it in dataset: date[], so that it can output it but it just gives the value of "timeSpend" and "breakTime" not fSubject,sSubject, tSubject. Also the colour is not working I don't know why enter image description here

    let timeSpend = document.querySelector("#time_spend");
let breakTime = document.querySelector("#break_time");
let fSubject = document.querySelector("#first_subjects");
let sSubject = document.querySelector("#second_subjects");
let tSubject = document.querySelector("#third_subjects");
let mostCon = document.querySelector("#first_percentage");
let secCon = document.querySelector("#second_percentage");
let thirdCon = document.queryCommandValue("#third_percentage");

let fSubjectV = (mostCon/100) * (timeSpend + breakTime); 
let sSubjectV = (secCon/100)* (timeSpend + breakTime);
let tSubjectV = (thirdCon/100)* (timeSpend + breakTime);

let myChart = document.getElementById("myChart").getContext("2d");

document.querySelector("button").addEventListener("click", () => {
    let pieChart = new Chart(myChart, {
        type: "pie",
        data: {
            labels: [
                "Time spend",
                "Break Time",
                fSubject.value,
                sSubject.value,
                tSubject.value,
            ],
            datasets: [
                {
                    label: "Plan",
                    data: [
                        timeSpend.value,
                        breakTime.value,
                        mostCon.value,
                        secCon.value,
                        thirdCon.value,
                    ],
                },
            ],
        },
        options: {},
    });
});

HTML where I make an input and get the input from

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    
    <link rel="stylesheet" href="CSS/main-style.css" />

    <title>Student Planner</title>
  </head>
  <body>
    <header>
      <div class="title">
        <h1>THE STUDENT PLANNER</h1>
      </div>
      <div class="sub_header">
        <h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
        <h3>LET'S PLAN YOUR SESSION</h3>
      </div>
    </header>

    <main>
        <input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
        <input type="number" id="break_time" class="text-box"  placeholder="how many breaks do you want to have?" /><br>
        <input type="text" id="first_subjects" class="subjects-box"  placeholder="Most confident subject?" /><input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
        <input type="text" id="second_subjects"  class="subjects-box"  placeholder="Second confident subject?" /><input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
        <input type="text" id="third_subjects" class="subjects-box"  placeholder="Third subject?" /> <input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
        <br>
        
        <button type="button" class="button">Finished</button>
        
        <div class="container">
            <canvas id="myChart"></canvas>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
      <script src="JS/main.js"></script>
      
    </main>

    <footer>
      <p>&copy; DK_CODE</p>
      <p>12/3/2022</p>
    </footer>
  </body>
</html>

Upvotes: 1

Views: 68

Answers (1)

Abhijeet Vadera
Abhijeet Vadera

Reputation: 570

you need to initialize all variables into the function of button click, instead of the outside that function.

what happening in your case is, all variables are loading only once when main.js is loading and at that time your input field's values will be blank. so, your all variables will be loaded with blank values, that's why the chart is blank.

Check below code:

document.querySelector("button").addEventListener("click", () => {
  let timeSpend = document.querySelector("#time_spend").value;
  let breakTime = document.querySelector("#break_time").value;
  let fSubject = document.querySelector("#first_subjects").value;
  let sSubject = document.querySelector("#second_subjects").value;
  let tSubject = document.querySelector("#third_subjects").value;
  let mostCon = document.querySelector("#first_percentage").value;
  let secCon = document.querySelector("#second_percentage").value;
  let thirdCon = document.querySelector("#third_percentage").value;

  let fSubjectV = (mostCon / 100) * (timeSpend + breakTime);
  let sSubjectV = (secCon / 100) * (timeSpend + breakTime);
  let tSubjectV = (thirdCon / 100) * (timeSpend + breakTime);

  const canvasEle = document.createElement("canvas");
  canvasEle.id = "myChart";
  let myChart = canvasEle.getContext("2d");
  const firstEle = document.getElementsByClassName("container")[0].children[0];
  if (firstEle) {
    document
      .getElementsByClassName("container")[0]
      .replaceChild(canvasEle, firstEle);
  } else {
    document.getElementsByClassName("container")[0].appendChilde(canvasEle);
  }

  let pieChart = new Chart(myChart, {
    type: "pie",
    data: {
      labels: ["Time spend", "Break Time", fSubject, sSubject, tSubject],
      datasets: [
        {
          label: "Plan",
          data: [timeSpend, breakTime, mostCon, secCon, thirdCon],
          backgroundColor: ["black", "red", "orange", "green", "blue"]
        }
      ]
    },
    options: {}
  });
});
.container{
  height:500px;
  width:500px;
}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

  <link rel="stylesheet" href="CSS/main-style.css" />

  <title>Student Planner</title>
</head>

<body>
  <header>
    <div class="title">
      <h1>THE STUDENT PLANNER</h1>
    </div>
    <div class="sub_header">
      <h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
      <h3>LET'S PLAN YOUR SESSION</h3>
    </div>
  </header>

  <main>
    <input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
    <input type="number" id="break_time" class="text-box" placeholder="how many breaks do you want to have?" />
    <br>
    
    <input type="text" id="first_subjects" class="subjects-box" placeholder="Most confident subject?" />
    <input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
    
    
    <input type="text" id="second_subjects" class="subjects-box" placeholder="Second confident subject?" />
    <input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
    
    
    <input type="text" id="third_subjects" class="subjects-box" placeholder="Third subject?" /> 
    <input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
    <br>

    <button type="button" class="button">Finished</button>

    <div class="container">
      <canvas id="myChart"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <script src="JS/main.js"></script>

  </main>

  <footer>
    <p>&copy; DK_CODE</p>
    <p>12/3/2022</p>
  </footer>
</body>

</html>

Upvotes: 1

Related Questions