Retrieving time data for individual dimension

[Benjamin Descazal]

Hi,

Inspired by this article (https://developers.google.com/analytics/resources/articles/gdataDataOverTime),
I try to create a columns graph over time segmented by medium (one series for each dimension ga:medium)

Example :

Here is my code :

var chart = new gadash.Chart(
{

'type': 'ColumnChart',
'divContainer': 'trend-visits-by-medium',
'query': {

'ids': TABLE_ID,
'start-date': '2012-01-01',
'end-date': '2012-01-31',
'metrics': 'ga:visits',
'dimensions': 'ga:medium,ga:week',
'sort': '-ga:medium,ga:week',
'filters': 'ga:medium==email,ga:medium==organic',
'max-results':10

},
'chartOptions': {

isStacked:'true',
height:180,
width:300,

}}).render();


I don't find how to get multiple series. If I render a table, I get only one data series (visits) :

But I should have something like this to handle correctly the data to render the right graph :

Can you help on this ?

Thank you very much.

[Shan Aminzadeh]

Hi Benjamin,

GADash will create a DataTable from the Analytics API without any advanced manipulation and then pass that DataTable directly to the chart configuration you set. Unfortunately, sometimes GADash is not 'smart enough' to format the data we extract from Analytics API and create a DataTable that makes logical sense for the chart you specified, in this case a Column chart with two series.

Currently, the default callback after the response is returned from Google Analytics is like so:

gadash.Chart.prototype.defaultOnSuccess = function(resp) {
  var dataTable = gadash.util.getDataTable(resp, this.config.type); // creates DataTable from Analytics resp
  var chart = gadash.util.getChart(this.config.divContainer, this.config.type); //initializes Chart
  gadash.util.draw(chart, dataTable, this.config.chartOptions);  // renders chart with DataTable
}; 

You need to write a custom callback that will override this callback and take the JSON response that GADash returns from the Analytics API and use it to create a DataTable that is formatted correctly for the Column Chart with two series then pass in that DataTable when rendering the chart. To make sure the DataTable is formatted correctly, you can refer to the Column Chart docs here:

https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#Data_Format

You can add a custom callback function by setting the 'onSuccess' parameter in your chart config like so:

var chart = new gadash.Chart({

'type': 'ColumnChart',

'divContainer': 'trend-visits-by-medium',

'query': {

'ids': TABLE_ID,

'start-date': '2012-01-01',

'end-date': '2012-01-31',

'metrics': 'ga:visits',

'dimensions': 'ga:medium,ga:week',

'sort': '-ga:medium,ga:week',

'filters': 'ga:medium==email,ga:medium==organic',

'max-results':10 },

'chartOptions': {

isStacked:'true',

height:180,

width:300 },

'onSuccess': customCallback

).render();

Where your customCallback() would look something like this:

var customCallback = function(response) {

var dataTable = [method that takes the response param and creates your custom dataTable]

var chart = gadash.util.getChart(this.config.divContainer, this.config.type); //initializes Chart

gadash.util.draw(chart, dataTable, this.config.chartOptions);  // renders chart with DataTable

}

For more info on custom callbacks, you can can refer to the GADash docs parameter reference: 

http://analytics-api-samples.googlecode.com/svn/trunk/src/reporting/javascript/ez-ga-dash/docs/user-documentation.html

For more info on creating DataTable, you can refer to the Google Charts docs: 

https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews

For more info on the structure of the JSON response Analytics API returns, you can refer here:

https://developers.google.com/analytics/devguides/reporting/core/v3/reference#data_response

Hope this help. Let me know if you need some clarification

- Shan