ChartJS radar

by johannpickard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

var data = {
    labels: ["Patrolling time", "Observations", "Routes on time", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        }

    ]
};
var ctx = document.getElementById("myChart");
var options = {
				tooltips: {
        	mode: 'label'
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    };
var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});
Chart.helpers.bindEvents(myRadarChart, ['mousedown'], function(evt) {
	var lastMousePosition = [evt.x, evt.y];
  console.log('mousedown');
  var lastActive = myRadarChart.lastActive;
	if (Array.isArray(lastActive) && lastActive.length) {
  	lastActive = lastActive[0];
    console.log(lastActive);
  	var moveHandler = function (evt) {
  			var index = lastActive._index;
      	var dataset = lastActive._datasetIndex;
        console.log('mouse move');
      	if (evt.y < lastMousePosition[1]) {
      		myRadarChart.data.datasets[dataset].data[index] = myRadarChart.data.datasets[dataset].data[index] + 1;
      	  myRadarChart.update(1, false);
      	} else if (evt.y > lastMousePosition[1]) {
        	myRadarChart.data.datasets[dataset].data[index] = myRadarChart.data.datasets[dataset].data[index] - 1;
          myRadarChart.update(1, false);
        }
      lastMousePosition = [evt.x, evt.y];
  	};
    var outHandler = function () {
      console.log('unbinding');
      Chart.helpers.unbindEvents(myRadarChart, {'mousemove': moveHandler});
     ...