It's Chart Tools week here on the blog, and so we'll be showing you in a 4-part series how to easily generate charts for your AdSense reporting using Google Chart Tools . In today’s second post we’ll examine how to generate another type of chart: a column chart.
Column chart
The second item required by our CEO is a column chart . The column chart will show the number of page views, ad requests, matched ad requests and individual ad impressions for each month of the current year.
Our request becomes:
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)
Now 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"]
}
We create the DataTable object, adding the columns for our dimensions:
// Create the data table.
var data = new google.visualization.arrayToDataTable(
[['Month', 'PAGE_VIEWS', 'AD_REQUESTS', 'MATCHED_AD_REQUESTS',
'INDIVIDUAL_AD_IMPRESSIONS']].concat(result.rows));
Once again we use a DataView to convert the string values to numbers:
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, 4))}, type:'number', label:'Individual ad impressions'}
]);
And finally, let’s create a wrapper for the column chart and draw it:
var columnChartWrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: view,
options: {'title': 'Performances - Year 2011'},
containerId: 'vis_div'
});
columnChartWrapper.draw();
Another piece is done: a column chart of our performances that is also displaying tips when hovering over bars. Check the live example and the source code for today !
Time to play!
Eager to try to see what you can do combining these two powerful Google APIs?
You can start immediately by using our Google API Explorer and our Google Visualization PlayGround . You can use the Explorer to query our Management API, and then use the results inside the code on the Visualization PlayGround to generate a chart.
Stay tuned for our next post this week, where we’ll show you how to generate other two charts, a table chart and a geo chart.
If you have any questions related to the AdSense Management API, come to our forum ; alternatively, visit the Google Visualization API forum if you're looking for support on Chart Tools.
Silvano Luciani , AdSense API Team
