<canvas id="overall_status_chart" width="20" height="20"></canvas>

<script>
  var ctx = document.getElementById("overall_status_chart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Failure", "Unstable", "Success"],
        datasets: [{
          data: ["{{ overall_status['FAILURE'] }}", "{{ overall_status['UNSTABLE'] }}", "{{ overall_status['SUCCESS'] }}"],
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

<canvas id="overall_status_chart" width="20" height="20"></canvas>

<script>
  var ctx = document.getElementById("overall_status_chart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Failure", "Unstable", "Success"],
        datasets: [{
          data: ["{{ overall_status['FAILURE'] }}", "{{ overall_status['UNSTABLE'] }}", "{{ overall_status['SUCCESS'] }}"],
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

document.getElementById("overall_status_chart").onclick = function(evt)
{
  var activePoints = myChart.getElementsAtEvent(evt);
  if(activePoints.length > 0)
    {
      //get the internal index of slice in pie chart
      var clickedElementindex = activePoints[0]["_index"];

      //get specific label by index
      var label = myChart.data.labels[clickedElementindex];
      var uppercase_label = label.toUpperCase();
      window.location = "{{ url_for('jobs.index', query={'last_build.status': 'LABEL'}) }}".replace("LABEL", uppercase_label);
    }
}
</script>

Allow to click on pie chart
Allow to click on pie chart

This will move users to jobs page filtered according to
chosen part of the pie chart.
