Prototyping onClick event in charts.js

by thiago_sandes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 300px; height: 300px">
  <canvas id="myChart"></canvas>
</div>

<div id="chart" class="noselect">
  <canvas id="myChart2" height="100%" width="100%"></canvas>
</div>
<div id="chartjs-legend" class="noselect"></div>

CSS

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html,
body {
  height:100%;
  margin: 0;
}
body {
  font-family:sans-serif;
  font-size:12px;
  font-weight:normal;
}

ol,
ul {
  list-style: none;
  margin:0;
  padding:0;
  text-align:center;
}
li {
  display: inline-table;
}

#chart {
  position:relative;
  height: 50vh;
  width: 50vh;
  top:15%;
  right: 25%;
  
  margin:auto;
}
#chartjs-legend {
  position:absolute;
  width: 100%;
  top: 150%;
  right: 25%;
}
#chartjs-legend li {
  cursor:pointer;
  margin: 10px 4px;
}
#chartjs-legend li span {
  position:relative;
  padding: 6px 20px;
  border-radius:13px;
  color:white;
  z-index:2;
}

JavaScript

var data = {
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

$(document).ready(
  function() {
    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");
    var myNewChart = new Chart(ctx, {
      type: 'pie',
      data: data
    });

    canvas.onclick = function(evt) {
      var activePoints = myNewChart.getElementsAtEvent(evt);
      if (activePoints[0]) {
        var chartData = activePoints[0]['_chart'].config.data;
        var idx = activePoints[0]['_index'];

        var label = chartData.labels[idx];
        var value = chartData.datasets[0].data[idx];

        var url = "http://example.com/?label=" + label + "&value=" + value;
        console.log(url);
        alert(url);
      }
    };
  }
);













function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}




















var data = {
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    borderWidth: 1
  }]
};

var options = {
  animation: {
    animateRotate: true,
    animateScale: true
  },
  cutoutPercentage: 85,
  legend: false,
  legendCallback: function(chart) {
    var text = [];
    text.push('<ul class="' + chart.id + '-legend">');
    for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
      text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
      if (chart.data.labels[i]) {
        text.push(chart.data.labels[i]);
      }
     ...