Issues with your code

Question

0

52

Vistas

My Pie Chart from Chart.js is not working

I'm new to javascript and I'm trying to make a piechart that get the input from the user.

I did what I thought was correct but the chart does not come out.

When I put the variable it doesn't recognize the code that I have put in even though I already have imported the Chart.js using CDN, that they provide on their website.

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: {},
  };

<form class="form">

    <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?" />

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

</form>

<button type="button" class="button" onclick="buttonClicked()">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>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-03T12:58:54.566Z

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