Chart.js #6177 test02

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.6177.js"></script>
<div id="chartjs-radar">
  <canvas id="canvas"></canvas>
</div>

CSS

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

#chartjs-radar {
  width: 300px;
  height: 300px;
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}

JavaScript

window.chartColors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(231,233,237)'
};

window.randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}

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

var now = moment();
var dataTime1 = moment("2016-12-18T14:58:54.026Z");
var dataTime2 = moment("2017-01-18T20:58:54.026Z");
var dataTime3 = moment("2017-02-15T08:58:54.026Z");
var label1 =moment.duration(dataTime1.diff(now)).humanize(true);
var label2 =moment.duration(dataTime2.diff(now)).humanize(true);
var label3 =moment.duration(dataTime3.diff(now)).humanize(true);

var color = Chart.helpers.color;
var config = {
  type: 'radar',
  data: {
    labels: [
      "Happiness", "Loneliness", "Health","Managing at Home", "Finances", "Work"],
    datasets: [{
      label: label1,
      backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
      borderColor: window.chartColors.red,
      pointBackgroundColor: window.chartColors.red,
      data: [8,1,5,2,4],
      notes: ["I am pretty happy","I am isolated","none","none"]
    }, {
      label: label2,
      backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
      borderColor: window.chartColors.blue,
      pointBackgroundColor: window.chartColors.blue,
      data: [10,3,4,3,5,8,7],
      notes: ["Joined social club","none","none","none","none","Was late one day","Just broke up"]
    },{
      label: label3,
      backgroundColor: color(window.chartColors.purple).alpha(0.2).rgbString(),
      borderColor: window.chartColors.purple,
      pointBackgroundColor: window.chartColors.purple,
      data: [0,0,1,0,0,1,0,1,2,6],
      notes: ["none","none","none","none","Won at bingo","none","none","Leg week", "Fed the poor", "Positive Mental Attitude"]
   ...