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

by

2👍

✅

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()
});

0👍

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.

0👍

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

Leave a comment