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.
Getting Started
Before we begin, go download and install Visualization API, Chaos tool suite (ctools) and Views module.
If you prefer drush, run the following command:
$ drush dl visualization ctools views
Test Data
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.
Views Chart
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
| Option | Value |
|---|---|
| View name | Comment Chart |
| Machine name | comment_chart |
| Show | Content (default) |
| Of Type | All (default) |
| Create a page | Checked |
| Page title | Comment Chart |
| Path | 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.
Its very worth tutorial 🙂 Keep posting good work.
I have my eye on building a dashboard using this module. Anyone know how to style the graphs so I can fit them side by side on one page or is this a matter of playing with the css?
You should be able to place the graphs side by side if you’re planning on using Panels for your dashboard.
Check out the Commerce Reporting (http://drupal.org/project/commerce_reports) module for some inspiration. 🙂
Thanks very much, I’ll take a look at this – it looks to be just what I am looking for. I do use panels normally but thought I’d actually use blocks for once in this case! Thanks again.
Ivan – Thank you for your great tutorial. I wanted some direction on what I need to do if I want individual users to fill out a form to be used to create the graphics and then display the graphics in a view that sorts by user. I assume that I need to collect the data on a single form using fields to collect the data. Please let me know if there are other things that need to be taken into consideration.
This can be achieved in a few ways. You could create a views page with a few exposed filters. This will allow users to simply filter content used in the chart.
Or, build a custom user interface. This will require proper development.
Hi, is it possible to set a horizontal line on the chart? For example i have data for user weight for every day, and i have a target weight. I would like to show the weight data on y axis and the date on x axis and the target weight on y axis.
The integration between GVA and Views is fairly basic. If you want anything beyond the general chart types, then you’ll have to write custom code.
Ok, i will do that. Thank you 🙂