Google Charts - Format number

format, google-visualization, numbers

Solution

The formatter for the Visualization API cannot convert numbers into shorthand metrics (eg "5000" into "5k"). If you want that effect, you have two options:

specify the `vAxis.ticks` option to create custom labels for each axis value

vAxis: {
    ticks: [{v: 1500000, f: '1500k'}, {v: 1570000, f: '1570k'}, {v: 1640000, f: '1640k'}, {v: 1710000, f: '1710k'}, {v: 1780000, f: '1780k'}]
}

use a DataView to reduce the size of the data passed to the chart

var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        return {v: dt.getValue(row, 1) / 1000, f: dt.getFormattedValue(row, 1)};
    }
}]);
chart.draw(view, {
    vAxis: {
        format: '#k'
    }
});

[edit: here's a full example chart that formats the axis and data in B, KB, MB, GB, as appropriate]

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'File Name');
    data.addColumn('number', 'File Size');
    data.addRows([
        ['foo.exe', 45000000],
        ['bar.zip', 600000000],
        ['baz.iso', 1700000000]
    ]);

    // custom format data values
    for (var i = 0; i < data.getNumberOfRows(); i++) {
            val = cli.getVAxisValue(bb.top);
            // sometimes, the axis value falls 1/2 way though the pixel height of the gridline,
            // so we need to add in 1/2 the height
            // this assumes that all axis values will be integers
            if (val != parseInt(val)) {
                val = cli.getVAxisValue(bb.top + bb.height / 2);
            }

            // convert from base-10 counting to 2^10 counting
            for (var n = 0; val >= 1000; n++) {
                val /= 1000;
            }
            formattedVal = val;
            val *= Math.pow(1024, n);

            switch (n) {
                case 0:
                    suffix = 'B';
                    break;
                case 1:
                    suffix = 'KB';
                    break;
                case 2:
                    suffix = 'MB';
                    break;
                case 3:
                    suffix = 'GB';
                    break;
                default:
                    // format to GB
                    while (n > 3) {
                        formattedVal *= 1024;
                        n--;
                    }
                    suffix = 'GB'
            }

            ticks.push({v: val, f: formattedVal + suffix});
    }

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var options = {
        height: 400,
        width: 600
    };

    // get the axis values and reformat them
    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        var bb, val, suffix, ticks = [], cli = chart.getChartLayoutInterface();
        for (var i = 0; bb = cli.getBoundingBox('vAxis#0#gridline#' + i); i++) {
            val = cli.getVAxisValue(bb.top);
            // sometimes, the axis value falls 1/2 way though the pixel height of the gridline,
            // so we need to add in 1/2 the height
            // this assumes that all axis values will be integers
            if (val != parseInt(val)) {
                val = cli.getVAxisValue(bb.top + bb.height / 2);
            }
            // using 1000 here to keep the axis neat
            // this messes a bit with the scale of the chart, so you might want to change it
            for (var n = 0, formattedVal = val; formattedVal >= 1000; n++) {
                formattedVal /= 1000;
            }
            switch (n) {
                case 0:
                    suffix = 'B';
                    break;
                case 1:
                    suffix = 'KB';
                    break;
                case 2:
                    suffix = 'MB';
                    break;
                case 3:
                    suffix = 'GB';
                    break;
                default:
                    // format to GB
                    while (n > 3) {
                        formattedVal *= 1000;
                        n--;
                    }
                    suffix = 'GB'
            }
            ticks.push({v: val, f: formattedVal + suffix});
        }
        options.vAxis = options.vAxis || {};
        options.vAxis.ticks = ticks;
        chart.draw(data, options);
    });

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

See working example: http://jsfiddle.net/asgallant/M58Wt/

Problem

Original source