Building reports and charts for a website can be tough. Trying to figure out what report or chart will be useful is kind of like predicting the future. Most of the time a client won’t know what report they need until they need it or their boss needs it. As site builders, we need to be quick when a request comes in for a new chart. Luckily, there are tools out there which we can use to build beautiful charts like Google Visualization API and Highcharts.
The Visualization API module allows you to create amazing looking charts and graphs in Drupal 7. The module is intended to be an API for Drupal, and right now has support for Google Visualization API and Highcharts (free for non-commercial use). Custom charting libraries can be added via Ctools plugin. The module also ships with a display plugin for Views, this means you can build “simple” charts by creating a view. Even though, the module is still in alpha, it works pretty well. If you need any more convincing, the Commerce Reporting module uses Visualization API for its charts and graphs.
In this tutorial, we’ll create charts using Views and the Google Visualization API. Google Visualization API is the easiest to get started with as there are no 3rd party libraries we have to download and install.
Currently Visualization API only supports line, column, pie and map chart types for Google Visualization API.
If you prefer drush, run the following command:
$ drush dl visualization ctools views
Devel ships with a useful module called Devel Generate. Using Devel Generate, you can create all sorts of dummy content like users, terms, content and more. For our charts to work in this tutorial, we’ll need to generate test content. If you’re following along, go and download the Devel module.
How To Generate Test Data
1. Download and install Devel and Devel Generate.
2. Go to Configuration -> Generate content (admin/config/development/generate/content).
3. Uncheck “Basic page” from “Content types” as we only want to generate Articles.
4. Add 50 to the “How many nodes would you like to generate?” field and add 50 to the “Maximum number of comments per node.” field.
5. Click on Generate to create the test content.
Now we can create a Views chart using data that we generated in the last section. We’ll create a chart that displays nodes with the most comments.
How To Create A Views Chart
1. Go to Structure -> Views (admin/structure/views) and click on the “Add new view” link.
2. Fill in the “Add new view” form with the values defined in Table 1.0.
Table 1-0. Create a new view
|View name||Comment Chart|
|Of Type||All (default)|
|Create a page||Checked|
|Page title||Comment Chart|
|Display format||Unformatted list of fields|
|Use a pager||Uncheck|
Once you have filled in the form click on the “Continue & edit” button at the bottom of the page.
3. Add the “Content: Comment count” field by clicking on the Add link in the Fields section. For this example, we need two fields, the title field and the comment count field.
4. We’ll add a filter so that we only get articles with comments. Click on the add link in the “Filter criteria” section. Search for “count” and you should find the “Content: Comment count” filter. In the “Configure filter criterion” section, select the “Is greater than” operator and add 0 to the value field.
5. Click on the “Unformatted list” link in the format section and select Visualization and click on Apply.
6. Click on the “Field settings” field-set and check the “Enable this field in the chart” checkbox under “COMMENT_COUNT” and set the sorting to Descending.
7. Click on the “X-axis settings” fieldset and select “Content: Title” from the “X-axis labels” drop-down list and click on Apply.
If you don’t select a label from the “X-axis labels” drop-down list you may get a “Not enough columns given to draw the requested chart.” error.
8. Save the view and then go to
/comment-chart and test the chart out. If everything has been setup properly, you should see a chart.
As you can see, it’s amazing how easy it is to create a chart with just Views. In the next part of this tutorial, we’ll look at using Highcharts with Visualization API and we’ll also learn how to create charts programmatically.
If you have any questions, please leave a comment.