[Chartjs]-How do I take values from a radio button and display it using chart.js?

by

0👍

Your code does not include the getSelectedRadioValue function, hence I created one based on this excellent answer.

function getSelectedRadioValue(radioGroupName) {
  return document.querySelector("input[type='radio'][name=" + radioGroupName + "]:checked").value;
}

Further keep in mind that any existing chart needs to be destroyed each time before reusing the canvas by drawing a new chart.

if (chart) {
  chart.destroy();
}

Please take a look at your amended and runnable code below and see how it works.

var stats = {
  characters: [
    { name: 'Mario', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 },
    { name: 'Luigi', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 }
  ],
  bodies: [
    { name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Pipe Frame', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 }
  ],
  gliders: [
    { name: 'Super Glider', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Cloud Glider', miniTurbo: 1, acceleration: 0, speed: 0, handling: 0 }
  ],
  wheels: [
    { name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Roller', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 }
  ]
};

function getSelectedRadioValue(radioGroupName) {
  return document.querySelector("input[type='radio'][name=" + radioGroupName + "]:checked").value;
}

var chart;
document.getElementById('calculateBtn').addEventListener('click', function() {
  var character = stats.characters[getSelectedRadioValue('character')];
  var body = stats.bodies[getSelectedRadioValue('body')];
  var glider = stats.gliders[getSelectedRadioValue('glider')];
  var wheels = stats.wheels[getSelectedRadioValue('wheels')];

  var totalMiniTurbo = character.miniTurbo + body.miniTurbo + glider.miniTurbo + wheels.miniTurbo;
  var totalAcceleration = character.acceleration + body.acceleration + glider.acceleration + wheels.acceleration;
  var totalSpeed = character.speed + body.speed + glider.speed + wheels.speed;
  var totalHandling = character.handling + body.handling + glider.handling + wheels.handling;

  if (chart) {
    chart.destroy();
  }
  chart = new Chart('chartCanvas', {
    type: 'bar',
    data: {
      labels: ['Mini Turbo', 'Acceleration', 'Speed', 'Handling'],
      datasets: [{
        label: 'Total Stats',
        data: [totalMiniTurbo, totalAcceleration, totalSpeed, totalHandling],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 0.2)',}]
    }
  })
})
<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<h1>Mario Kart 8 Calculator</h1>
<div>
  <label for="character">Character:</label>
  <input type="radio" id="character0" name="character" value="0" checked>
  <label for="character0">Mario</label>
  <input type="radio" id="character1" name="character" value="1">
  <label for="character1">Luigi</label>
</div>
<div>
  <label for="body">Body:</label>
  <input type="radio" id="body0" name="body" value="0" checked>
  <label for="body0">Standard</label>
  <input type="radio" id="body1" name="body" value="1">
  <label for="body1">Pipe Frame</label>
</div>
<div>
  <label for="glider">Glider:</label>
  <input type="radio" id="glider0" name="glider" value="0" checked>
  <label for="glider0">Super Glider</label>
  <input type="radio" id="glider1" name="glider" value="1">
  <label for="glider1">Cloud Glider</label>
</div>
<div>
  <label for="wheels">Wheels:</label>
  <input type="radio" id="wheels0" name="wheels" value="0" checked>
  <label for="wheels0">Standard</label>
  <input type="radio" id="wheels1" name="wheels" value="1">
  <label for="wheels1">Roller</label>
</div>
<button id="calculateBtn">Calculate</button>
<canvas id="chartCanvas"></canvas>

Leave a comment