Correct Way to Use Google Reporting API Headers for Visualization Data Table Headers

Question

Technologies: Google Reporting API V4 and Google Visualization API, combining PHP and Javascript. There are specific reasons we are not able to install and use the Google Client library.

The problem: the Visualization Api is giving me "invalid type Integer" when that is what the type the Google Reporting API is returning. I know that type integer is not supported in the Visualization API,

https://developers.google.com/chart/interactive/docs/reference#DataTable_addColumn

So the question is what is the correct approach to dynamically use the Reporting API headers to construct chart table headers? Do we need to map the data types every time?

In a nutshell: I query for Analytics data and get the following header structure:

            [columnHeader] => Array
                (
                    [dimensions] => Array
                        (
                            [0] => ga:date
                        )

                    [metricHeader] => Array
                        (
                            [metricHeaderEntries] => Array
                                (
                                    [0] => Array
                                        (
                                            [name] => ga:users
                                            [type] => INTEGER
                                        )

                                    [1] => Array
                                        (
                                            [name] => ga:sessions
                                            [type] => INTEGER
                                        )

                                )

                        )

                )

When I attempt to create columns,

...
$mtype = $headers['metricHeader']['metricHeaderEntries'][0]['type'];
...
$column_object = "{'type':'$mtype','label':'$mname'}";
// produces {'type':'INTEGER','label':'ga:users'}
...
data.addColumn($column_object);

(Firefox) console logs "Invalid type, INTEGER, for column "Users."

I can "cheat" here by hard coding 'number' for type:

$column_object = "{'type':'number','label':'$mname'}";

Which works fine but I shouldn't have to (or am missing something) and presents some challenges in making metrics and dimensions dynamic. "Users" is indeed a number/integer. Can't help feeling it's something I overlooked that would easily map the columns from the data.

SdSurfer SdSurfer · Accepted Answer · 2019-03-18T17:04:04

Sans responses, after much research and experimentation, thought I might post an outline of my solution (and offer it up for criticism/feedback.)

Keep in mind this is a chart "selector" between multiple chart types and multiple dimensions/metrics selections, a hard-coded one-off won't work. It has to be dynamic and perform all transformations for all chart types to work.

Analytics returns headers of types STRING, INTEGER, PERCENT, TIME, CURRENCY, FLOAT, which indeed need to be mapped to Visualization-compatible types of string, number, boolean, date, datetime, and timeofday. The server-side processing returns the raw JSON encoded Analytics data in the event other apps may consume it, and any mods to the data are performed in Javascript with a leg up from jQuery.

The problem I encountered is we "need to know" the original data type of a given column for proper formatting on chart output. This is further complicated by the header dimensions member not having a "type". For example, Analytics returns a dimension of "date" as a string "20190305" that needs to be converted to a proper Javascript Date object for chart output but in our case needs to display as a string "03/05/2019."

On receipt of Analytics data, I run a function to add the original data types from Analytics to all header columns as custom fields. These are not touched by the charts so it does not affect functionality. I then map the G.A. types to the Visualization types so they properly output the chart, and refer to my "custom types members" which contain the original data type for formatting in the chart.

The original types are referenced to properly format data using the hAxis options for the hAxis display, and Visualization [Date|Number]Formatter (s) for column data (tooltip values, etc.)

Effectively

percent -> type number, but formats as percent with %.
float -> type number, formats as decimal.
currency -> type number, formats as $currency.
date -> type Date(), formats as MM/DD/YYY
time -> type Date(), formats various (generally HH:MM:SS for our purposes)
string obviously string

Hope this is helpful for anyone diving into G.A./Visualization integration.

Correct Way to Use Google Reporting API Headers for Visualization Data Table Headers

1 Answers