How do you use user input as data values in chart.js?

Question

I'm creating a mood tracker that allows people to input the number of days they feel a certain mood. The HTML form accepts the numbers from 0-7, and accordingly I want the pie chart to dynamically shift to reflect that value. When I tried inserting the value in the data array, the whole chart disappears instead. I can't seem to figure out what the issue is, this is my code for reference:

``div class="form-container" style="float: left; margin-left: 170px; margin-top: 13px; text-align: center;">
            <form>

                

<!---Mood Chart--->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container" style=" float: right; margin-right: 150px;position: relative; height: 42vh; width: 42vw; margin-top: 8px">
<canvas id="myChart" width="100px" height="100px"></canvas>
<script>

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: [],
        datasets: [{
            label: '# of Votes',
            data: [angryValue.value, sadValue.value, happyValue.value, anxiousValue.value, tiredValue.value, motivatedValue.value],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
        }
    }
});

function updateChart(){
    angryValue = Number(document.getElementById('angry').value);
    sadValue = Number(document.getElementById('sad').value);
    happyValue = Number(document.getElementById('happy').value);
    anxiousValue = Number(document.getElementById('anxious').value);
    motivatedValue = Number(document.getElementById('motivated').value);
    tiredValue = Number(document.getElementById('tired').value);

    data.push({
        angry: angryValue,
        sad: sadValue,
        happy: happyValue,
        anxious: anxiousValue,
        motivated: motivatedValue,
        tired: tiredValue
    });

    chart.render();
}

var moodBtn = document.getElementById('mood-btn');
moodBtn.addEventListener('click', updateChart);


</script>
</div>``

Answer 1

Maybe this is more what you want?

const moods=['Angry', 'Sad', 'Happy', 'Anxious', 'Motivated', 'Tired'];
const ctx = document.getElementById('myChart');


const cont=document.querySelector(".form-container");
cont.innerHTML=moods.map((M,i)=>{
  let m=M.toLowerCase(); 
  return `<input type="text" name="${m}" placeholder="${M}" value="${i+2}"> ${M}`;
}).join("<br>");
const inps=[...document.querySelectorAll("input")];
cont.addEventListener("input",ev=>{
 myChart.data.datasets[0].data= inps.map(el=>+el.value);
 myChart.update()
});

const myChart = new Chart( ctx, {
  type: 'pie',
  data: {
    labels: moods,
    datasets: [{
      label: '# of Votes',
      data: inps.map(el=>+el.value),
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {}
  }
});

.form-container,.chart-container  {margin: 8px; display:inline-block;}
#myChart { width:200px; height:200px;}
.form-container input {width:30px}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="form-container"></div>
<div class="chart-container"><canvas id="myChart"></canvas></div>

I replaced some of your lengthy HTML markup by some generated code, based on the moods array. I also skipped the buttons and triggered the update() event by listening to input events on the container wrapping all input elements:

cont.addEventListener("input",ev=>{
 myChart.data.datasets[0].data= inps.map(el=>+el.value);
 myChart.update()
});

Answer 2

<div class="form-container" style="float: left; margin-left: 170px; margin-top: 13px; text-align: center;">
            <form>

                <!---Happy--->
                <div class="mood">
                    <input type="string" name="happy" id="happy" placeholder="Happy" value="1" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Angry--->
                <div class="mood">
                    <input type="string" name="angry" id="angry" placeholder="Angry" value="3" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Sad--->
                <div class="mood">
                    <input type="string" name="sad" id="sad" placeholder="Sad" value="5" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Motivated--->
                <div class="mood">
                    <input type="string" name="motivated" id="motivated" placeholder="Motivated & Productive" value="6"required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Tired--->
                <div class="mood">
                    <input type="string" name="tired" id="tired" placeholder="Tired or Burnt out" value="0" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Anxious--->
                <div class="mood">
                    <input type="string" name="anxious" id="anxious" placeholder="Anxious & Stressed" value="7" required>
                    <button class="mood-btn" >Enter</button>
                </div>
            </form>
        </div>



<!---Mood Chart--->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container" style=" float: right; margin-right: 150px;position: relative; height: 42vh; width: 42vw; margin-top: 8px">
<canvas id="myChart" width="100px" height="100px"></canvas>
<script>
let chartData =[]
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Angry', 'Sad', 'Happy', 'Anxious', 'Motivated', 'Tired'],
        datasets: [{
            label: '# of Votes',
            data: chartData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
        }
    }
});

function removeData(chart) {
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

function addData(chart, data) {
    
    chart.data.datasets.forEach((dataset) => {
               
        dataset.data = [...data]
    });
    chart.update();
}

function updateChart(event){
    
    event.preventDefault()
    angryValue = Number(document.getElementById('angry').value);
    sadValue = Number(document.getElementById('sad').value);
    happyValue = Number(document.getElementById('happy').value);
    anxiousValue = Number(document.getElementById('anxious').value);
    motivatedValue = Number(document.getElementById('motivated').value);
    tiredValue = Number(document.getElementById('tired').value);
    
    chartData = [
        angryValue,
        sadValue,
        happyValue,
        anxiousValue,
        motivatedValue,
        tiredValue
]
    removeData(myChart)
    addData(myChart, chartData)
    
}

var moodBtn = document.querySelectorAll('.mood-btn');
moodBtn.forEach(btn => {
    btn.addEventListener('click', updateChart, false)
})
</script>
</div>

Answer 3

Inside the updateChart() function, there is no variable named data. So, it looks like you're pushing some data to the uninitialized variable.

Isn't the data supposed to be pushed inside the config of chart.js? You might want to create a separate variable for storing the data so that you can push the data on the fly from other functions and just swap out the data for chart.js.