Welcome back to Chart Tuning! In this second half of the series we will show you how to define the different views for our chart and implement the zooming functionalities.
Before diving into the code explanation, check out the live example and the source code of the example chart if you haven’t yet.
Defining week and month view
Now that all our data is in place, we can get the visualization started . First we create a ChartWrapper getChartWrapper
The function setMonthView
how to set the view window of the chart so that the values on the X axis (the dates) goes from 0 to the last day of the current month how to add the required text to points on the X axis how to visualize the subset of columns that we want in the month view.
The function setWeekView
Handling events
Google charts can fire events for which you can listen. Events can be triggered by user actions: for example a user clicks on a chart. This comes in handy for our zooming functionality, as we need to intercept a user clicking a column in the chart.
To listen for these clicks, we add an event listener on the chart, and call the setWeekView function when the select event occurs.
Job done!
And that’s it, our chart is ready!
Have you noticed the graceful transition of the chart when using the zoom functionality? Transition animations are one of the latest additions to the Google Chart Tools, and you can experiment with different transition behaviors to properly tune your chart!
Some more thoughts on the User Experience
The zooming effect is nice to see, and when we’re in week view, we can use it to scroll the chart without changing a single line of code: if we click on one of the columns, the view centers on the selected point.
Thinking about the user experience, we have to consider that it might not be clear for our user that the zooming effect is activated when clicking on one column, or that they can still scroll the chart by clicking the other columns.
We can provide a better user experience by adding a button to toggle between week and month view; when in week view, we can add two arrow buttons to allow the user to scroll to the previous or the following week.
Why don’t you try to modify the source code to implement this feature request? We will add our solutions to the example chart source code on February 21, and then discuss possible solutions and other improvement ideas during the AdSense Management API Office Hours scheduled for that day.
For any questions or suggestions, don’t hesitate to engage with us in our forums:
Update : our solution has been added to the AdSense API showcase project.
Silvano Luciani , AdSense API Team
