Google Charts - custom tooltip value for Pie Chart

Question

I am trying to present formatted data for the tooltip value of a Pie Chart. My data consists of a name and size (size is number of bytes).

The default tooltip does not let me use a custom formatter for the size value. If I use string I lose the Percentage value and Name of legend in the tooltip. Is there a way to do this?

I want to maintain the Legend Color, Name and Percentage, but have the value formatted to a more readable form

Current Wrong

Desired

var entries = [{name: 'Test1', size: 1234}, {name: 'Test2', size: 324563425}, {name: 'Test3', size: 321453452345}, {name: 'Test4', size: 789078}]

var drawChart = function(entries, elementId) {

    var options = {
        width: "100%",
        height: 148,
        fontSize: 8,
        tooltip: { textStyle: { bold: true, color: '#000000', fontSize: 13 }, showColorCode: true, isHtml: true, ignoreBounds: true, text: 'both', trigger: 'selection' },
        legend: { position: 'right', textStyle: { fontSize: 10 } },
        chartArea: { left: 5, top: 10, right: 5, bottom: 10, height: "148", width: "100%" },
        sliceVisibilityThreshold: 0,
        pieSliceText: 'none',
        //pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById(elementId));

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Name');
    data.addColumn('number', 'Size');
    data.addColumn({ type: 'string', role: 'tooltip' });

    data.addRows(entries.length);
    var i = 0;
    $.each(entries, function () {

        data.setCell(i, 0, this.name);                    
        data.setCell(i, 1, this.size);
        // How to make this display correctly?
        // If it stays like this i lose percentage and legend name from tooltip
        data.setCell(i, 2, formatBytes(this.size)); 

        i++;
    });

    chart.draw(data, options);
}

var formatBytes = function (bytes, precision) {
    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
    if (typeof precision === 'undefined') precision = 1;
    var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
        number = Math.floor(Math.log(bytes) / Math.log(1024));
    return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number];
};

WhiteHat WhiteHat · Accepted Answer · 2017-08-22T11:58:11

provide the formatted value in the last argument of setCell

the tooltip will show the formatted value by default

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart([{name: 'Test1', size: 1234}, {name: 'Test2', size: 324563425}, {name: 'Test3', size: 321453452345}, {name: 'Test4', size: 789078}], 'chart_div');
  },
  packages: ['corechart']
});

var drawChart = function(entries, elementId) {
    var options = {
        width: "100%",
        height: 148,
        fontSize: 8,
        tooltip: { textStyle: { bold: true, color: '#000000', fontSize: 13 }, showColorCode: true, isHtml: true, ignoreBounds: true, text: 'both', trigger: 'selection' },
        legend: { position: 'right', textStyle: { fontSize: 10 } },
        chartArea: { left: 5, top: 10, right: 5, bottom: 10, height: "148", width: "100%" },
        sliceVisibilityThreshold: 0,
        pieSliceText: 'none',
        //pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById(elementId));

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Name');
    data.addColumn('number', 'Size');

    data.addRows(entries.length);
    var i = 0;
    $.each(entries, function () {

        data.setCell(i, 0, this.name);                    
        data.setCell(i, 1, this.size, formatBytes(this.size, 1));

        i++;
    });

    chart.draw(data, options);
}

var formatBytes = function(bytes, precision) {
    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
    if (typeof precision === 'undefined') precision = 1;
    var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
        number = Math.floor(Math.log(bytes) / Math.log(1024));
    return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number];
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts - custom tooltip value for Pie Chart

1 Answers