My Pie Chart from Chart.js is not working

March 12, 2022

I’m new to javascript and I’m trying to make a piechart in my website that get the input from the user and put it in a piechart. I did what I thought was correct but the chart does not come out

<!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>
      <form class="form">
          <div>
            <input type="text" id="text-box" class="time_spend" placeholder="How much time do you have?"/>
          </div>

          <div>
            <input type="text" id="text-box" class="break_time" placeholder="how many breaks do you want to have?" /><br>
          </div>

          <div>
            <input type="text" id="text-box" class="first_subjects" placeholder="What is the first thing you would like to achieve" />
          </div>
        
          <div>
            <input type="text" id="text-box" class="second_subjects" placeholder="What is the second thing you would like to achieve?"/>
          </div>
        
          <div >
            <input type="text" id="text-box" class="third_subjects" placeholder="What is the third thing you would like to achieve" />
          </div>   
      </form>

      
        <button type="button" class="button" onclick="buttonClicked()">Finished</button>
      


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

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

enter image description here enter image description here

and here are my javascript file. When I put the variable it doesn’t recognize the code that I have put in even tho I already have imported the Chart.js using CDN, that they provide on their website

    //when user click on the finished button
function buttonClicked() {
  let timeSpend = document.getElementsByClassName("time_spend");
  let breakTime = document.getElementsByClassName("break_time");
  let fSubject = document.getElementsByClassName("first_subjects");
  let sSubject = document.getElementsByClassName("second_subjects");
  let tSubject = document.getElementsByClassName("third_subjects");
}

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

let pieChart = new Chart(myChart), {
    type:'pie',
    data: {
        labels: ['Time spend', 'Break Time', 'First Subject', 'Second Subject', 'Third Subject'],
        datasets: [
            label: 'Plan',
            data: [
                timeSpend,
                breakTime,
                fSubject,
                sSubject,
                tSubject
            ]
        ],
    },
    options: {},
};

enter image description here

>Solution :

Issues with your code

Using classes to identify elements in a unique way.
Using getElementsByClassName to select single elements.
buttonClicked only select the input elements when clicked and does no further actions.
The input elements are not known outside your click handler function scope
The way you set the dataset array is wrong.

datasets: [
            label: 'Plan',
            data: [timeSpend, breakTime, fSubject, sSubject, tSubject]
          ]

You trying to draw the chart before the click.
You are trying to fill data with elements references and not their values.
I see no need for the form tag.

…

Patching your code

Still wont work for updating the chart

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 myChart = document.getElementById("myChart").getContext("2d");

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

<input type="text" id="text-box" class="time_spend" placeholder="How much time do you have?" />
<input type="text" id="text-box" class="break_time" placeholder="how many breaks do you want to have?" /><br>
<input type="text" id="text-box" class="first_subjects" placeholder="What is the first thing you would like to achieve" />
<input type="text" id="text-box" class="second_subjects" placeholder="What is the second thing you would like to achieve?" />
<input type="text" id="text-box" class="third_subjects" placeholder="What is the third thing you would like to achieve" />

<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>