Google Charts - Adding Tooltip to Colorized Column Chart

Question

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);
  }

asgallant asgallant · Accepted Answer · 2013-11-05T21:51:41

You just need to add a tooltip column for each data column, and populate the tooltip data along with the regular data:

function drawAccountsChart() {
    var data = new google.visualization.DataTable(),
        raw_data = [
            ['Parents', 80, 160],
            ['Students', 94, 128],
            ['Teachers', 78, 90],
            ['Admins', 68, 120],
            ['Staff', 97, 111]
        ],
        value,
        row = [null],
        formatter = new google.visualization.NumberFormat({
            suffix: '%',
            fractionDigits: 1
        }),
        options = {
            height:220,
            chartArea: { left:30, width: "70%", height: "70%" },
            backgroundColor: { fill:"transparent" },
            tooltop:{ textStyle: {fontSize: "12px",}},
            vAxis: {minValue: 0}
        },
        chart = new google.visualization.ColumnChart(document.getElementById('emailAccountsChart'));

    data.addColumn('string', 'Columns');
    for (var i = 0; i  < raw_data.length; ++i) {
        data.addColumn('number', raw_data[i][0]);
        data.addColumn({type:'string', role:'tooltip'});
        value = raw_data[i][1] / raw_data[i][2] * 100;
        row.push(value);
        row.push(formatter.formatValue(value) + ' (' + raw_data[i][1] + ' Users)');
    }
    data.addRow(row);

    chart.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawAccountsChart});

see example here: http://jsfiddle.net/asgallant/NGr5k/

Google Charts - Adding Tooltip to Colorized Column Chart

1 Answers