I have a problem with a conflict between multiple event listeners in a Google Chart display. I have a Google Pie Chart with three event listeners, an onmuseover, an onmouseout and a ready event. The ready event allow saving the chart as a png image, while the onmouseout/onmouseover events change the background color of some divs when hovering the mouse over the chart’s slices. My problem is the following: the two onmouseover/onmouseout events work when alone, the ready event also works when alone but when all three of them are active the ready event works but the onmouseover/onmouseout do not! There is somewhere a conflict between these events and I can not figure out where. My code is below.
Also, is there a way I could sort the percentage values of the piechart slices so that the highest percentage to automatically change the background color of a div?
Thank you, Felix
google.charts.load('current', {'packages':['corechart']});
function drawChart() {
var SAIDFinal = parseFloat(sessionStorage.getItem('SAID_Result'));
var SIDDFinal = parseFloat(sessionStorage.getItem('SIDD_Result'));
var SIRDFinal = parseFloat(sessionStorage.getItem('SIRD_Result'));
var MODFinal = parseFloat(sessionStorage.getItem('MOD_Result'));
var MARDFinal = parseFloat(sessionStorage.getItem('MARD_Result'));
var data = google.visualization.arrayToDataTable([
['Diabet', 'Tipul'],
['SAID', SAIDFinal],
['SIDD', SIDDFinal],
['SIRD', SIRDFinal],
['MOD', MODFinal],
['MARD', MARDFinal],
]);
var options = {
pieSliceText: 'none',
pieHole: '0.3',
pieStartAngle: 270,
chartArea: {
left: '20',
top: '30',
right: '20',
bottom: '30',
width: '500',
height: '500',
},
pieSliceTextStyle: {
color: 'black'
},
slices: {
0: {color:'#ff0000' },
1: {color:'#d7c9bc' },
2: {color:'lightgreen'},
3: {color:'orange'},
4: {color:'magenta'},
/*textStyle: {color:'black'},
},
legend: {
position: 'labeled',
/*alignment: 'center' ,
orientation: 'vertical',*/
textStyle: { color: 'black', fontSize: '24'}
},
};
options.slices[data.getSortedRows([{column: 1, desc: true}])[0]].offset = 0.1;
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(piechart.innerHTML);
});
chart.draw(data, options);
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
if (data.getValue(e.row, 0) === 'SAID') {
document.getElementById('SAIDtype').style.backgroundColor = '#ff0000';
}
else if (data.getValue(e.row, 0) === 'SIDD') {
document.getElementById('SIDDtype').style.backgroundColor = '#d7c9bc';
}
else if (data.getValue(e.row, 0) === 'SIRD') {
document.getElementById('SIRDtype').style.backgroundColor = 'lightgreen';
}
else if (data.getValue(e.row, 0) === 'MOD') {
document.getElementById('MODtype').style.backgroundColor = 'orange';
}
else if (data.getValue(e.row, 0) === 'MARD') {
document.getElementById('MARDtype').style.backgroundColor = 'magenta';
}
});
google.visualization.events.addListener(chart, 'onmouseout', function(e) {
if (data.getValue(e.row, 0) === 'SAID') {
document.getElementById('SAIDtype').style.backgroundColor = '';
}
if (data.getValue(e.row, 0) === 'SIDD') {
document.getElementById('SIDDtype').style.backgroundColor = '';
}
if (data.getValue(e.row, 0) === 'SIRD') {
document.getElementById('SIRDtype').style.backgroundColor = '';
}
if (data.getValue(e.row, 0) === 'MOD') {
document.getElementById('MODtype').style.backgroundColor = '';
}
if (data.getValue(e.row, 0) === 'MARD') {
document.getElementById('MARDtype').style.backgroundColor = '';
}
});
}