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: 189

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

Related posts about JavaScript

Related posts about charts