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 data
The 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 DataTable
To 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 charts
The 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 control
Let’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 DataView
Remember 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 dashboard
Creating 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">
<!--Divs that will hold each control-->
<div id="ad_requests_filter_div"></div>
<!--Divs that will hold each chart-->
<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:
And if you have any additional questions, don’t hesitate to engage with us in our forums:
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!
- Silvano Luciani, AdSense API Team