Google Ads Developer Blog: AdSense Management API and Chart Tools week: Thursday

Ads Developer Blog

The official blog for information about the AdWords, AdSense, DoubleClick and AdMob APIs and SDKs.

AdSense Management API and Chart Tools week: Thursday

Thursday, January 12, 2012

Thanks for joining us for Chart Tools week on the blog, where we're sharing ways to use Google Chart Tools. In the fourth and last part of this series, we’ll examine how to organize and manage multiple charts that share the same underlying data using dashboards and controls.Interaction with dataThe last request of the CEO is to be able to interact with the data: he wants to filter the line chart and the column chart by expressing a range of page views.What we need to do now is compose the 2 charts into a Dashboard object, following these steps:

combine the data retrieved from the AdSense Management API into one single table

create the charts

add 1 control, a Number Range Filter for ad requests

create a view on top of the data table

create a Dashboard object and feed it with the view

Create the DataTableTo create a Dashboard, we need the charts to share the same underlying data. For this reason, we will combine the requests for the line and the column chart into a single request:

start date:

2011-01-01

end date:

2011-12-31

dimensions:

MONTH

metrics:

PAGE_VIEWS, AD_REQUESTS, MATCHED_AD_REQUESTS, INDIVIDUAL_AD_IMPRESSIONS

filters:

(none)

The result will be similar to:
result = {
"kind": "adsense#report",
"totalMatchedRows": "9",
"headers": [ {...} ],
"rows": [
["2011-01", "28", "46", "41", "165"],
...
["2011-11", "2", "3", "3", "3"]
],
"totals": ["", "241", "278", "264", "825"],
"averages": ["", "26", "30", "29", "91"]
}
Now we can create our DataTable, adding columns for all the metrics:
var data = new google.visualization.arrayToDataTable(
[['Month', 'PAGE_VIEWS', 'AD_REQUESTS', 'MATCHED_AD_REQUESTS',
'INDIVIDUAL_AD_IMPRESSIONS']].concat(resp.rows));
Create the chartsThe next step is to create the wrappers:
var lineChartWrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
options: {'title': 'Ad requests trend - Year 2011'},
containerId: 'line_chart_div',
view: {'columns': [0, 2]}
});

var columnChartWrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
options: {'title': 'Performances per month - Year 2011'},
containerId: 'column_chart_div',
view: {'columns': [0, 1, 3, 4]}
});
There are two important differences between creating wrappers for a dashboard and wrappers for standalone charts:

For each chart in a dashboard, we use the view option to select which columns are relevant for the chart (remember, all the data for the two charts is in the same table now)

We don’t draw the charts now, we’ll draw the entire dashboard later

Time to create the control!Create the controlLet’s create the control wrapper for our number range filter for the ad requests:
var adRequestsSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'ad_requests_filter_div',
'options': {
'filterColumnLabel': 'Ad requests',
}
});
The option container_id specifies the element of the page where the filter will be drawn into, while filterColumnLabel tells the filter which column to target. Create the DataViewRemember that we need a DataView to convert our string field to numeric fields:
var view = new google.visualization.DataView(data);
view.setColumns([
0,
{calc:function(dataTable, rowNum) {return parseInt(dataTable.getValue(
rowNum, 1))}, type:'number', label:'Page views'},
{calc:function(dataTable, rowNum) {return parseInt(dataTable.getValue(
rowNum, 2))}, type:'number', label:'Ad requests'},
{calc:function(dataTable, rowNum) {return parseInt(dataTable.getValue(
rowNum, 3))}, type:'number', label:'Matched ad requests'},
{calc:function(dataTable, rowNum) {return parseInt(dataTable.getValue(
rowNum, 4))}, type:'number', label:'Individual ad impressions'},
]);
Create the dashboardCreating the Dashboard, binding the control to the charts and drawing the dashboard is as easy as the following:
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'))
.bind(adRequestsSlider, [lineChartWrapper, columnChartWrapper])
.draw(view);
dashboard_div is the element of the page that acts as container for the Dashboard:
<div id="dashboard_div">

<div id="ad_requests_filter_div"></div>

<div id="line_chart_div"></div>
<div id="column_chart_div"></div>
</div>
And it’s done! Our Dashboard is ready. Check the live example and the source code for today!Mission Accomplished!Well done -- our dashboard is ready and the CEO is happy with his new tool! Now you can relax and play foosball!If you want to know more about our APIs, check the documentation pages:

AdSense Management API

Google Chart Tools

And if you have any additional questions, don’t hesitate to engage with us in our forums:

AdSense API forum

Google Visualization API forum

You can also join us in one of our AdSense API Office Hours on Google+ Hangouts. Check the schedule for the upcoming Office Hours in our Google Ads Developer Blog.Lastly, a public service announcement: thanks Riccardo for your help!