Last updated June 26, 2010. Created by javier_ on August 6, 2009.
Edited by patrickfrickel, shumushin. Log in to edit this page.
Visualize is a graphing tool that uses the jQuery Visualize plugin integrated into Views.
Usually non-visual users can't get relevant information from graph, because in most cases images are used and people with screen readers can't see what's there.
Visualize provides accessible data visualization making use of the Canvas element of HTML 5, it use JavaScript to scrape data from an HTML table and generate charts.
Installation
In order to use Visualize you need to download the JavaScript plugin separately and place it in jquery_plugin folder inside Visualize module.
- Download and enable this module at Administer › Site building › Modules.
- Download jQuery Visualize Plugin from http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_char...
- Place the content of the ZIP file inside /visualize/jquery_plugin folder. The plugin will be in this path: /visualize/jquery_plugin/visualize.jQuery.js
Once you have downloaded and installed the module and downloaded an placed the jQuery plugin in the correct folder you are ready to start creating graphs.
Using Visualize
Visualize can be used as a View style plugin or standalone calling it directly, below are two examples of how it can be use in each case.
As style plugin
You need to create a View and choose "jQuery Visualize" as style in the basic settings.
After this you will see a screen with the options for this graphic, the first part of the options are the default table settings (fields, grouping, sort) and bellow that are the options for the graph itself.
There you can choose the char type (it can be Bar, Line, Area , Pie), also you can hide the table and display only the graph, set the width and the height, choose the title, and some other specific options described in the same page.
When you are adding the fields to the View, the first column will be used as label and the other as values.
Here you can see an implementation using Views.
Standalone
If you want to use Visualize without Views, then you can use the function visualize_prepare_for_graph() which will add all the necessary JS and CSS files and then include the JavaScript call for generating the graph.
Example:
<table id="sales">
<caption>2009 Individual Sales by Category</caption>
<thead>
<tr>
<th></th>
<th>food</th>
<th>auto</th>
<th>household</th>
<th>furniture</th>
<th>kitchen</th>
<th>bath</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mary</th>
<td>150</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th>Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
</tbody>
</table>
<?php
visualize_prepare_for_graph();
drupal_add_js('$("#sales").visualize()', 'inline', 'footer');
?>
Comments
Display "Defaults" uses fields but there are none defined for it
Display "Defaults" uses fields but there are none defined for it or all are excluded.
?
what do I here?