Chartjs-Dynamic information in chart.js radar chart

by

1👍

✅

I added 4 number inputs as an interface to update values. I gave them values ranging from 0 to 3, adapt to your needs. I also added an update button, so that the update happens only when you click it.

If you want specifically drop-down inputs, just replace the number inputs with traditional <select> tags, with <options> matching possible values.

To perform the actual update on the chart you need to first overwrite the old data from the dataset, then call a rerendering of the char-canvas with radarChart.update(). Follow the inline code comments to get an idea of whats happening in code.

$(document).ready(function() {
  "use strict";

  // hold a radarChart reference for future updates
  var radarChart = new Chart(document.getElementById("radarChart"), {
    type: 'radar',
    data: {
      labels: ["Space", "Style", "Schedule", "Supplement"],
      datasets: [{
        label: "Cognizant Baseline",
        fill: false,
        backgroundColor: "rgba(179,181,198,0.2)",
        borderColor: "rgba(179,181,198,1)",
        pointBorderColor: "#fff",
        pointBackgroundColor: "rgba(179,181,198,1)",
        data: [1, 3, 1, 2]
      }, {
        label: "Assessment",
        fill: true,
        backgroundColor: "rgba(255,99,132,0.2)",
        borderColor: "rgba(255,99,132,1)",
        pointBorderColor: "#fff",
        pointBackgroundColor: "rgba(255,99,132,1)",
        data: ['spaceScore', 'styleScore', 'scheduleScore', 'supplementScore']
      }, {
        label: "Learner Centricity",
        fill: true,
        backgroundColor: "rgba(114, 205, 244,0.2)",
        borderColor: "rgba(114, 205, 244,1)",
        pointBorderColor: "#fff",
        pointBackgroundColor: "rgba(114, 205, 244,1)",
        data: [2, 2, 2, 1]
      }]
    },


    options: {
      title: {
        display: false,
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    }

  });

  // click handler of the update button
  $('#update').on('click', function() {
      getData();
  });

  function getData() {
    // get new user-selected values
    var spaceScore = document.getElementById('spaceScore').value;
    var styleScore = document.getElementById('styleScore').value;
    var scheduleScore = document.getElementById('scheduleScore').value;
    var supplementScore = document.getElementById('supplementScore').value;
    // update chart dataset with new values
    radarChart.data.datasets[0].data[0] = spaceScore;
    radarChart.data.datasets[0].data[1] = styleScore;
    radarChart.data.datasets[0].data[2] = scheduleScore;
    radarChart.data.datasets[0].data[3] = supplementScore;
    // redraw chart
    radarChart.update();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="inputs">
  <input id="spaceScore" type="number" min="0" max="3" value="1" />
  <input id="styleScore" type="number" min="0" max="3" value="3" />
  <input id="scheduleScore" type="number" min="0" max="3" value="1" />
  <input id="supplementScore" type="number" min="0" max="3" value="2" />
  <button id="update" type="button">Update</button>
</div>
<canvas id="radarChart" />

Leave a comment