Google Charts - Adding Tooltip to Colorized Column Chart
Posted
by
David K
on Stack Overflow
See other posts from Stack Overflow
or by David K
Published on 2013-11-05T21:26:53Z
Indexed on
2013/11/05
21:53 UTC
Read the original article
Hit count: 232
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);
}
© Stack Overflow or respective owner