sinan erdem

Note: As Irakli comments below, Charts and Graphs module has changed in time. Please refer to http://drupal.org/node/681660. Information below may not be correct for the latest version of the module.

Displaying data with charts and graphs is a nice way to visualize numeric data. Not everybody is good with numbers, while most of the people like to see a bar chart to see the change in several values.

On sahandafutbol.com, the users get points for their correct guesses on a match day. So, I thought displaying user’s points per match day with a bar chart would be really nice.

We could use a free charting API that can work with the data provided by our custom module. But at first, I searched for a contributed module which already offers the needed functionality. I must say that, charting is a wild area in Drupal world. There are some modules for charting; but their names, dependencies and the lack of solid documentation can easily confuse anybody. There are 3 different modules named as “Chart API”, “Charts” and “Chart and Graphs”… If I ever contribute a module about charting, I will name it as “Charts API and Graphs”, because there may be a secret naming convention for this area and I don’t want to break it :)

I tried each module and in the end, I decided to use Charts and Graphs in combination with Views Charts. Our custom module is fully integrated with Views so it is easy to display any kind of information with charts. The module supports 3 different libraries. I chose the Open Flash Chart 2 API. With this opportunity, I would also like to thank to the creators of the Open Flash Chart project.

How to install the modules and make it work:

1. Download Charts and Graphs and Views Charts, install as usual.

2. Since the core module comes with Open Flash Chart 2 file in its directory, there is no need to download it separately.

3. Download the SWFObject API module.

4. Download SWFObject library 2 from http://code.google.com/p/swfobject/

5. Place the swfobject.js and expressinstall.swf file into modules/swfobject_api/

After these steps, the module is ready to use.

Building a View:

1. Add a new View with any type you desire.

2. Add your arguments, filters, relationships etc. as usual.

(At this point, I recommend using Table style to preview the results.)

3. Add the numeric fields that will be placed on the graph.

(Unfortunately, the module doesn’t allow controlling how the values are displayed. For example if you add a suffix or prefix to a field, it is not displayed)

4. After you get your desired values on the table style, it is time to switch to “Charts” style. You can choose this setting from the “Basic settings” column.

• Fields to be used in Chart Series: which fields’s values will be shown on the graph? You may choose more than one field by pressing the CTRL button.
• Fields to be used as X axis labels: if the graph uses an X-Y axis (bar and line types), this field will constitute the labels of X axis.
• Min value of Y Axis: If it is left empty, the min. value of Y axis will be the minimum value of the data series. To properly use this option you have to make a minor change in the “Views Charts” module code, which is explained later on this page.

Important note:The resulting chart can only be seen on the resulting block or page display. You cannot preview it on the View page.

You can see a live example on the page: www.sahandafutbol.com/user/3 . It is in Turkish, but it is not hard to understand. The labels on the x-axis shows the match days. The blue bars show the points taken in a match day, while the red bars show the percentage of the correct guesses.

Some tips:

1. The Views Charts module has a small bug. You cannot use “Min value of Y Axis” option by default. But if you add this line to the charts_openflash.inc file which can be found in modules/charts_graphs/apis/charts_openflash:

$min_value = $canvas->y_min;

Just after these lines:

$obj->values = $val;
$max_value_arr = max($val);
$max_value = ($max_value < $max_value_arr) ? $max_value_arr : $max_value;
$min_value_arr = min($val);
$min_value = ($min_value > $min_value_arr) ? $min_value_arr : $min_value;

It works! :)

2. By default the Views Charts module comes with only 3 types of graphs: Pie chart, 3d bar and Bar chart. If you want to display a “line” chart, you have to add the following line after the line 83 of views_plugin_chart_graph file:

'line' => t('Line'),

After that, you can see a Line option on the Views page.

Conclusion:

Actually the Open Flash Chart project offers a lot more: adding style and color to charts, almost all kinds of charts known to us humans, saving as image etc. And there is good documentation on their page. If someone would take his/her time to adapt some of these options to the Drupal modules, it would be a fantastic contribution.

There is a nice article about Drupal charting solutions on: http://www.lullabot.com/articles/drupal-charting

I hope these instructions save someone's time. If anyone gets good results with other charting modules, please let me know. You can leave a comment here.