This issue is about how a stacked column chart displays mouse-overs.
Put this data into a stacked (isStacked: true) column chart (google.visualization.ColumnChart).
Mouse-over the chart and notice what is being displayed especially the very top of the bars.
Especially notice Cindy and Gus.
You will notice that not all of the zero values will get a mouse-over pop-up. It seems like only the last zero.
I would like to understand the internal Google-chart rules covering this issue. enter code here
Is there a way to show all zeroes? Is there a way to control what gets a mouse-over?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Name', 'Apples', 'Berries', 'Cantaloupes', 'Dates', 'Eggs'],
['Alice' ,9,1,1,0,0],
['Ben' ,4,1,0,1,0],
['Cindy' ,4,0,0,0,1],
['Don' ,4,1,1,0,0],
['Eric' ,3,1,1,0,0],
['Fred' ,0,4,1,0,0],
['Gus' ,0,1,3,0,2],
]);
var options = {
chartArea: { backgroundColor: '#FFFFFF' }, width: 720, height: 300, backgroundColor: 'transparent',
enableInteractivity: 'true', hAxis: { textStyle: { fontSize: 12, color: '#000000' } }, vAxis: { slantedText: true, textStyle: { color: '#000000' }, gridlines: { count: 0 } },
legend: { position: 'top' }, bars: 'horizontal', isStacked: true,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart10'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var selecthandler = function (e) {
var newUrl = window.location + "&selection=chart10:" + data.getValue(chart.getSelection()[0].row, 0) + ":" + data.getColumnLabel(chart.getSelection()[0].column);
window.location.href = newUrl;
}
google.visualization.events.addListener(chart, 'select', selecthandler)
}
</script>
<script>
function goDashboard() {
window.location.href = window.location
}
</script>
</head>
<body bgcolor="#FFFFFF">
<table id="mainTable" width="80%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="5">
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="10">
<tr align="center" bgcolor="#D6EAF8" style="color:#000000; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:16px;">
<td>Stacked Column Test</td>
</tr>
<tr align="center">
<td colspan='1'><div id="chart10"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>