During Chart Tools Week, we showed you how to create a basic dashboard for AdSense reporting using the AdSense Management API and Google Chart Tools.
In this new two-part series, we’ll examine more advanced charting techniques that will improve the look and feel of our chart as well as enable user interactivity.
We’ll also show you how to use the Google Closure Library to ease some of the data manipulation tasks when writing a JavaScript application.
Our goal is to produce this Column Chart showing the earnings per day for the current month. We also want a zoom feature, with the following requirements:
Dive with us into the source code of our example chart to see how easy this task can be! You can find instructions on how to setup the example project to use Closure in the README file.
After the Google API JavaScript client has loaded, the OAuth 2.0 flow completes, and the user logs in, makeApiCall is called to start the generation of the chart.
makeApiCall
The first thing we do in makeApiCall is fetch our data from the AdSense Management API. We want DATE to be the dimension for our report, and EARNINGS, PAGE_VIEWS_RPM and AD_REQUEST_RPM as our metrics. To determine start date and end date, we can use the Google Closure Library as shown in the getRequestParams function. After that we are ready to send our request.
DATE
EARNINGS
PAGE_VIEWS_RPM
AD_REQUEST_RPM
start date
end date
getRequestParams
Once we have the data, the next step is to format it into a DataTable that will be consumed by our chart. The addTableHeaders function shows how to add the columns that we need for our chart. Two column declarations might catch your attention:
DataTable
addTableHeaders
dt.addColumn({'type': 'string', role: 'tooltip'});dt.addColumn({'type': 'boolean', role:'certainty'});
For these columns we are using DataTable Roles, an experimental feature of the Google Chart Tools that can be used to describe the purpose of the data in a column. Using the tooltip role we can edit the text to display when the user hovers over data points. Using the certainty role we can indicate whether a data point is certain or not, and have the column visualized in a different way accordingly.
tooltip
certainty
After defining the columns, we can add rows of data to our DataTable. To do this, we need to keep the following into account:
For the first point, we need to iterate through the values returned from the API. If a DATE is not present in the response, we add a row with value zero for all the metrics for that DATE to the table. To satisfy the second point, we need to check if the current day of the iteration is the current day of the month or a day in the future. If it is in the future, we need to flag the row as uncertain.
Remember that the rows part of the API response will be an array similar to:
"rows": [ ["2012-01-03", "28", "46", "41"], ... ["2011-11-07", "2", "3", "3"]]
The function addTableRows implements the data manipulation algorithm, using Closure to help out with dates formatting and days iteration.
addTableRows
The function formatRow shows how to create rows for our DataTable and add data for our tooltip and certainty columns. In the example, we have built the tooltips to show the full name of the day of the week for each data point, to help the user to better contextualize the value.
formatRow
At the end of day one, we have all the data ready to be visualized. Tomorrow we’ll see more on how to define our week and month views and implement the zooming functionalities.
In the meantime, don’t hesitate to ask your questions, leave your suggestions, and engage with us in our forums:
- Silvano Luciani, AdSense API Team
