Set Custom Header Row Values in a Table Chart?

607 views
Skip to first unread message

WhoSoLovesUs

unread,
Sep 25, 2013, 1:44:18 PM9/25/13
to google-visua...@googlegroups.com
Hi, I'm using Google SuperProxy to get a dataSourceUrl from our GA data (starts as a Query URI), and using it for a table chart

One issue I'm having is that the GA query makes the dimension and metric names the header rows values, e.g.:

ga:dimension1   |   ga:avgEventValue   |   ga:visitsWithEvent

        data             |            data                  |               data

Can I edit this in the charts code to replace them with my own column header values? My chart code looks like this so far (from the SuperProxy demo):

<html>
<head>
  <title>Pie!</title>

  <!--Load the AJAX API-->
  <script type="text/javascript"
    src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
  </script>

  <script type="text/javascript">
    google.setOnLoadCallback(drawVisualization);

    function drawVisualization() {

      var countryWrapper = new google.visualization.ChartWrapper({
        // Example Country Share Query
         "containerId": "pageviews",
         "dataSourceUrl": "https://my.appspot.com/url",
         "chartType": "Table",
         "options": {
            "showRowNumber" : false,
            "width": 630,
         }
       });

      countryWrapper.draw();

    }
  </script>
</head>
<body>
  <div id="pageviews" style="margin:auto;width:630px;"></div>
</body>
</html>

Thank You :)

I may need to ask this in the SP forum

asgallant

unread,
Sep 25, 2013, 2:49:03 PM9/25/13
to google-visua...@googlegroups.com
When loading the data in a ChartWrapper like that (using the "dataSourceUrl" parameter), you don't have access to the DataTable used by the chart, so you can't change the column headers.  If you switch to using a Query object, then changing them is easy:

function drawVisualization () {
    var query = new google.visualization.Query('https://my.appspot.com/url');
    // use the #setQuery method if you want to write a select statement
    query.send(function (response) {
        var data = response.getDataTable();
        
        // change column 0's label to "Dimension 1"
        data.setColumnLabel(0, 'Dimension 1');
        
        var countryWrapper = new google.visualization.ChartWrapper({
            // Example Country Share Query
            containerId: "pageviews",
            dataTable: data,
            chartType: "Table",
            options: {
                showRowNumber : false,
                width: 630
            }
        });
        
        countryWrapper.draw();
    });

WhoSoLovesUs

unread,
Sep 25, 2013, 4:39:03 PM9/25/13
to google-visua...@googlegroups.com
Thank You :)

I also have a related question if you would be interested: How to change date format - Data Table from GA Query (SuperProxy) URL?
Reply all
Reply to author
Forward
0 new messages