Google Embed API format data before calling .execu

问题:

I need to format the response I get from Analytics before showing it inside a Google Chart, I tried editing the response when the on("success"... method gets fired but I found that it gets called after the .execute().

Is there any way to edit the response after receiving it and before it populates the chart?

This is my function:

var dataChart5 = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'ids': 'ga:***', // My ID
      'start-date': '31daysAgo',
      'end-date': 'yesterday',
      'metrics': 'ga:users,ga:percentNewSessions,ga:sessions,ga:bounceRate,ga:avgSessionDuration,ga:pageviews,ga:pageviewsPerSession',
      'prettyPrint':'true',
    },
    chart: {
      'container': 'chart-5-container',
      'type': 'TABLE',
      'options': {
        'width': '100%',
        'title': 'test'
      }
    }
  });
dataChart5.on('success', function(response) {
    response.data.cols[0].label = "test1"; //here I edit the response
    console.log(response);
  });
dataChart5.execute();

Using the console.log(response); I can see that the record label gets modified but the chart gets populated before the edit.

回答1:

I think a have a workaround. It has problems, but might be useful. While handling the success event, call a function that will recursively walk through the child elements of $('#chart-5-container') and apply your formatting there.

One problem with that approach is that the positions of the elements won't be recalculated. Therefore, with different string sizes you might get overlapping strings. Moreover, it seems not to be affecting the tooltip.

I'm using this approach to translate to Portuguese.

function recursiveTranslate(e) {
    var key = e.html(),
        dict = {};

    dict['Date'] = 'Data';
    dict['Users'] = 'Visitantes';
    dict['Sessions'] = 'Visitas';
    dict['Pageviews'] = 'Visualizações';

    if (key in dict) {
        e.html(dict[key]);
    }

    for (var i = 0; i < e.children().length; i++) {
        recursiveTranslate($(e.children()[i]));
    }
}

Then I call recursiveTranslate inside the success event:

dataChart5.on('success', function h(obj) {
    recursiveTranslate($('#chart-5-container'));
});

It is not elegant and has a lot of issues. I would really like to get my hands on the proper solution.