Google Charts - Adding Tooltip to Colorized Column Chart
- by David K
I created a column chart with google charts that has a different color assigned to each column using the following posting: Assign different color to each bar in a google chart
But now I'm trying to figure out how to customize the tooltips for each column to also include the number of users in addition to the percent, so "raw_data[i][1]"
I would like it to look like "70% (80 Users)"
I understand that there is "data.addColumn({type:'number',role:'tooltip'});" but I'm having trouble understanding how to implement it for this use-case.
function drawAccountsChart() {
var data = new google.visualization.DataTable();
var raw_data = [
['Parents', 80, 160],
['Students', 94, 128],
['Teachers', 78, 90],
['Admins', 68, 120],
['Staff', 97, 111]
];
data.addColumn('string', 'Columns');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(1);
for (var i = 0; i < raw_data.length; ++i) {
data.setValue(0, i+1, raw_data[i][1]/raw_data[i][2]*100);
}
var options = {
height:220,
chartArea: { left:30, width: "70%", height: "70%" },
backgroundColor: { fill:"transparent" },
tooltop:{ textStyle: {fontSize: "12px",}},
vAxis: {minValue: 0}
};
var formatter = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 1
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
var chart = new google.visualization.ColumnChart(document.getElementById('emailAccountsChart'));
chart.draw(data, options);
}
