Chart.js #5963 test02

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.5963.js"></script>
<script src="https://www.chartjs.org/samples/master/utils.js"></script>
<div style="width:100%">
  <canvas id="canvas"></canvas>
</div>

JavaScript

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};

var color = Chart.helpers.color;
var config = {
  type: 'radar',
  data: {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [{
      label: 'Skip first dataset',
      borderColor: window.chartColors.red,
      backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
      pointBackgroundColor: window.chartColors.red,
      data: [
        NaN,
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }, {
      label: 'Skip mid dataset',
      borderColor: window.chartColors.blue,
      backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
      pointBackgroundColor: window.chartColors.blue,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        NaN,
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }, {
      label: 'Skip last dataset',
      borderColor: window.chartColors.green,
      backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
      pointBackgroundColor: window.chartColors.green,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        NaN
      ]
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Chart.js Radar Chart - Skip Points'
    },
    elements: {
      line: {
        tension: 0.0,
      }
    },
    scale: {
      beginAtZero: true,
    }
  }
};


window.myRadar = new Chart(document.getElementById('canvas'), config);

document.getElementById('randomizeData').addEventListener('click', function() {
 ...