From what I've found in my Googling, I'm guessing I'm not going to get an affirmative answer, but hey, maybe one of you guys knows something that's not common knowledge.
Basically, I'm custodian for a site that has a lot of Google material charts all over it. I've been asked to update one of these charts so that the on-hover tooltip shows the actual number, and a relative percentage value, but after probably about an hour of Googling I've not managed to find a solution thus far.
https://jsfiddle.net/r2p00t4r/3/ is a fiddle showing my most recent attempt, which was to a desperate attempt to follow the code for old-style Google charts (https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-tooltip-content)
// Usually coming from ajax
var response = [
{
"detail": ">= rated CCA", "total_tests": "265", "in_vehicle": "236", "result_good": "237", "result_good_recharge": "28", "result_charge_retest": "0", "result_replace": "0", "result_badcell": "0", "in_balance": "140"
},
{
"detail": "CCA within tolerance", "total_tests": "677", "in_vehicle": "561", "result_good": "543", "result_good_recharge": "133", "result_charge_retest": "0", "result_replace": "0", "result_badcell": "1", "in_balance": "292"
},
{
"detail": "< rated CCA", "total_tests": "1419", "in_vehicle": "1133", "result_good": "141", "result_good_recharge": "780", "result_charge_retest": "114", "result_replace": "264", "result_badcell": "120", "in_balance": "52"
}
];
google.charts.load('current', {'packages': ['corechart', 'bar']});
google.charts.setOnLoadCallback(function() {
var chart = new google.charts.Bar(window.document.getElementById('chart')),
data = new google.visualization.DataTable();
data.addColumn('string', 'Rated CCA');
data.addColumn('number', 'Total Tests');
data.addColumn('number', 'In vehicle');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Good');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Good, recharge');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Charge and retest');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Replace');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Bad cell');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'In balance');
data.addColumn({'type': 'string', 'role': 'tooltip'});
for(var i = 0; i < response.length; i++) {
var row = [
response[i].detail,
parseFloat(response[i].total_tests),
parseFloat(response[i].in_vehicle),
response[i].in_vehicle + ' (' + (Math.round((response[i].in_vehicle / response[i].total_tests) * 10000) / 100) + '%)',
parseFloat(response[i].result_good),
response[i].result_good + ' (' + (Math.round((response[i].result_good / response[i].total_tests) * 10000) / 100) + '%)',
parseFloat(response[i].result_good_recharge),
response[i].result_good_recharge + ' (' + (Math.round((response[i].result_good_recharge / response[i].total_tests) * 10000) / 100) + '%)',
parseFloat(response[i].result_charge_retest),
response[i].result_charge_retest + ' (' + (Math.round((response[i].result_charge_retest / response[i].total_tests) * 10000) / 100) + '%)',
parseFloat(response[i].result_replace),
response[i].result_replace + ' (' + (Math.round((response[i].result_replace / response[i].total_tests) * 10000) / 100) + '%)',
parseFloat(response[i].result_badcell),
response[i].result_badcell + ' (' + (Math.round((response[i].result_badcell / response[i].total_tests) * 10000) / 100) + '%)',
parseFloat(response[i].in_balance),
response[i].in_balance + ' (' + (Math.round((response[i].in_balance / response[i].total_tests) * 10000) / 100) + '%)'
];
data.addRow(row);
}
chart.draw(data, google.charts.Bar.convertOptions({
'backgroundColor': 'transparent',
'bars': 'horizontal',
'chart': {
'title': '',
'subtitle': '',
},
'chartArea': {
'backgroundColor': 'transparent'
},
'hAxis': {
'title': 'No. of tests',
'format': "#,###"
},
'vAxis': {
'title': ''
}
}));
});