Google Visualization Table Chart - changing column names

Question

How would I go about changing the column names in the Google Table Chart? The columns names appear as the metrics given (ga:users | ga:sessions | ga:bounceRate) in the query. I need to have them displayed as: users | sessions | bounceRate. Do I have to create a new view? Or do some sort of getcolumnLabel and change it?

<head>
    <title>Google Charts</title>

    <script>

    (function(w,d,s,g,js,fs){
        g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
        js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
        js.src='https://apis.google.com/js/platform.js';
        fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
    }(window,document,'script'));
    </script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script>

    gapi.analytics.ready(function() {
    var ACCESS_TOKEN = 'XXX'; // obtained from your service account

    gapi.analytics.auth.authorize({
        serverAuth: {
        access_token: ACCESS_TOKEN
        }
    });

    var data = new gapi.analytics.report.Data({
    query:  {
    ids: 'ga:XXX',
    metrics: 'ga:users,ga:sessions,ga:bounceRate',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
    output: 'dataTable'
        }
    });
    data.execute();

    data.on('success', function(response) {
    var data = new google.visualization.DataTable(response.dataTable);
    var formatter = new google.visualization.NumberFormat({fractionDigits: 0});
    formatter.format(data, 0);
    formatter.format(data, 1);
    var formatter = new google.visualization.NumberFormat({fractionDigits: 0, suffix: '%'});
    formatter.format(data, 2);
    var table = new google.visualization.Table(document.getElementById('test'));
    table.draw(data);
        });    
    });

    // Load the Visualization API and the chart package.
    google.load('visualization', '1', {'packages':['table']});
    });

    </script>

</head>

<body>             
                <div>
                    <div id="embed-api-auth-container"></div>
                    <div id="test"></div>     
                </div>    
</body>
</html>

By the way, in the future when you ask questions, please make sure you don't have syntax errors in your code samples. You have some extra closing braces that I had to track down and fix before I could run it. Also, make sure everything is properly indented so it's easier to read at a glance. — Philip Walton

Philip Walton Philip Walton · Accepted Answer · 2014-12-20T17:52:58

The column headers are just the values in the dataTable instance, which you're already using in your success callback.

To rename them, just do something like this:

response.dataTable.cols[0].label = 'Users';
response.dataTable.cols[1].label = 'Sessions';
response.dataTable.cols[2].label = 'Bounce Rate';

Also, you may or may not realize that you have a potential race condition in your code. You're loading the Embed API and then doing a query request, and you're also loading the Google Visualization library like so:

google.load('visualization', '1', {'packages':['table']});

While it's unlikely that the Embed API will load and run the query prior to loading the gviz library, it's definitely possible, and if that happens you'll get an error.

Google Visualization Table Chart - changing column names

1 Answers