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.
The goal
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:
The chart is initially shown in a month view: standard columns are shown for the days of the current month up to the current day. For the current and future days we draw the columns with a different visualization style, to visually outline the uncertainty of the data measurement. On the X axis we show 4 or 5 titles, for day 1, 8, 15, 22 and 29 (except for non leap year February). The title is the day of the month. By clicking one of the columns, the user can zoom the chart to a week view. In the week view we show the values over the week centered on the day selected by the user: 7 columns are visualized, and for each data point we show the title on the X axis. We also add two other columns to the data visualization in order to supply more detailed information:
Finally, we add to the visualization a Zoom Out button to allow the user to go back to the month view. The Zoom Out button will disappear when the user zooms all the way out.
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.
Getting to the goal: fetching the data
After the Google API JavaScript client has loaded , the OAuth 2.0 flow completes, and the user logs in, 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 send our request .
Formatting the data: using roles
Once we have the data, the next step is to format it into a 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.
Formatting the data: the content
After defining the columns , we can add rows of data to our DataTable. To do this, we need to keep the following into account:
The AdSense Management API will return a result for a day only if there is a nonzero value for that day. In other words, if one day we had zero views, the API will not return a result for that day. This also means that we will not get results for days in the future. We want to make the certainty of a data point visible, so that we have a different visualization for measures that are certain and measures that are in progress or not started.
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
The function formatRow 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.
Enough for today!
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
