[Chartjs]-Can't find the way to calculate and output it

by

1👍

✅

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>

Leave a comment