Formatting Google Charts axes

Question

Does anybody know how I can reformat my axes on Google Charts?

At the moment I'm listing bytes on my v-axis, but instead of it showing bytes I want it to display KB because sometimes the values go up to hundreds of thousands.

I've tried reading the configuration options (specifically vAxis.format) but it doesn't seem to support what I'm trying to do. Can I format my v-axis in this way or can I only show it in bytes?

Answer 1

Check out this fiddle I put together.

google.setOnLoadCallback(drawStuff);

function drawStuff() {

    var data = new google.visualization.arrayToDataTable([
        ['Move', 'Percentage'],
        ["King's pawn (e4)", 4400000000],
        ["Queen's pawn (d4)", 3100000000],
        ["Knight to King 3 (Nf3)", 1200000000],
        ["Queen's bishop pawn (c4)", 200000000],
        ['Other', 100000000]
    ]);

    var ranges = data.getColumnRange(1);

    var log1024 = Math.log(1024);

    var scaleSuffix = [
        "B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

    function byteFormatter(options) {}

    byteFormatter.prototype.formatValue = function (value) {
        var scale = Math.floor(Math.log(value) / log1024);
        var suffix = scaleSuffix[scale];
        var scaledValue = value / Math.pow(1024, scale);
        return Math.round(scaledValue * 100) / 100 + " " + suffix;
    };

    byteFormatter.prototype.format = function (dt, c) {
        var rows = dt.getNumberOfRows();
        for (var r = 0; r < rows; ++r) {
            var v = dt.getValue(r, c);
            var fv = this.formatValue(v);
            dt.setFormattedValue(r, c, fv);
        }
    };

    var formatter = new byteFormatter();

    formatter.format(data, 1);

    var max = ranges.max * 1;

    var options = {
        title: 'Chess opening moves',
        width: 900,
        legend: {
            position: 'none'
        },
        chart: {
            subtitle: 'popularity by percentage'
        },
        allowHtml: true,
        vAxis: {
            ticks: [{
                v: 0
            }, {
                v: max * 0.2,
                f: formatter.formatValue(max * 0.2)
            }, {
                v: max * 0.4,
                f: formatter.formatValue(max * 0.4)
            }, {
                v: max * 0.6,
                f: formatter.formatValue(max * 0.6)
            }, {
                v: max * 0.8,
                f: formatter.formatValue(max * 0.8)
            }, {
                v: max,
                f: formatter.formatValue(max)
            }]
        },
        axes: {
            x: {
                0: {
                    side: 'top',
                    label: 'White to move'
                } // Top x-axis.
            },
        },
        bar: {
            groupWidth: "90%"
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, options);
};

This solution works well if you do not dynamically change the data after the chart is drawn. If the data are changed afterwards (eg with a Control), this solution does not allow the auto-scaling of the vertical axis. If the underlying data are changed, the max value should be re-computed before calling again draw , to scale correctly the vertical axis.

I know this is an old question, and you've probably already moved on... I couldn't find anyone else doing anything similar, and ran into the same scenario.