Using Chart.js onClick function, can you execute code from an undefined or null result?

airider74 :

I'm trying to execute a function by clicking on a Chart.js area that returns an element is undefined. Basically when a user clicks anywhere other than the chart data columns.

Researching the Javascript MDN this looks possible but I can't get the function to execute.

The console.log(xValue) states "TypeError: element is undefined".

Here's the code I'm trying

var red = <?=json_encode($count1[0]);?>;
var yellow = <?=json_encode($count2[0]);?>;
var green = <?=json_encode($count3[0]);?>;
var blue = <?=json_encode($count4[0]);?>;
var grey = <?=json_encode($count5[0]);?>;

var dept = <?=json_encode($row['dept']);?>;


var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
        datasets: [{
            data: [red, yellow, green, blue, grey],
            backgroundColor: [
                'rgba(255, 0, 0, 0.4)',
                'rgba(255, 216, 0, 0.4)',
                'rgba(0, 255, 0, 0.4)',
                'rgba(0, 0, 255, 0.4)',
                'rgba(160, 160, 160, 0.4)'
            ],
            borderColor: [
                'rgba(255, 0, 0, 1)',
                'rgba(255, 216, 0, 1)',
                'rgba(0, 255, 0, 1)',
                'rgba(0, 0, 255, 1)',
                'rgba(160, 160, 160, 1)'

            ],
            borderWidth: 1
        }]

    },
    options: {
    onClick: function(c, i) {
        element = i[0];
        var xValue = this.data.labels[element._index]; 
        var yValue = this.data.datasets[0].data[element._index];
        console.log(xValue);
        console.log(yValue);
        if(xValue == 'Red'){document.bred.submit();}
        if(xValue == 'Yellow'){document.byellow.submit();}
        if(xValue == 'Green'){document.bgreen.submit();}
        if(xValue == 'Blue'){document.bwatch.submit();}
        if(xValue == 'Grey'){document.bretired.submit();}
        if(xValue === undefined){document.ball.submit();} //want to run a form post here as well
    },
        title: {
            display: true,
            fontSize: 24,
            text: dept + ' Dept Risk Summary',
            fontColor: '#000000'
        },
        legend: {
            display: false,
        },
        scales: {
                xAxes: [{
                        display: true,
                        gridLines: {color: '#000000'},
//                      scaleLabel: {
//                      display: true,
//                      labelString: '',
//                      fontColor: '#000000',
//                      fontSize:10
//                          },
                        ticks: {
                            fontColor: "black",
                            fontSize: 16
                            }
                        }],
                yAxes: [{
                        display: true,
                        gridLines: {color: '#000000'},
//                      scaleLabel: {
//                      display: true,
//                      labelString: '',
//                      fontColor: '#000000',
//                      fontSize:10
//                          },
                        ticks: {
                            beginAtZero: true,
                            fontColor: "black",
                            fontSize: 16,
                            stepSize: 1
                            }
                        }],
        }
    }
});

I've tried:

xValue === null
!xValue
typeof xValue === undefined

As well.

timclutton :

The problem is caused by this:

element = i[0];
var xValue = this.data.labels[element._index]; 
var yValue = this.data.datasets[0].data[element._index];

When clicking outside of a bar element, i[0] equals undefined and this causes setting of xValue and yValue to 'fail' (an error is shown in the console).

So, the code should be testing earlier for undefined and it should be testing element, not xValue:

element = i[0];
if (element === undefined) {
    document.ball.submit();
    return;
}
var xValue = this.data.labels[element._index]; 
var yValue = this.data.datasets[0].data[element._index];