Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

Google Visualization Plugin

Author: Benjamin Muschko (benjamin.muschko@gmail.com)

Overview

The plugin provides a taglib for the interactive charts of the Google Visualization API.

Features

  • Supports the following visualizations: Annotated Time Line, Area Chart, Bar Chart, Column Chart, Gauge, Geo Map, Intensity Map, Line Chart, Map, Motion Chart, Organizational Chart, Pie Chart, Scatter Chart, and Table. See the gallery for more information.
  • Implements redesigned charts (Area, Bar, Column, Line, Pie, and Scatter Charts) from the Core Chart package as well as the deprecated versions.
  • Provides implementations for table formatters TableArrowFormat, TableBarFormat, TableColorFormat, TableDateFormat, TableNumberFormat and TablePatternFormat.
  • Visualization event handling.

Installation

Code Block
grails install-plugin google-visualization

Usage

  1. The page you want to use the visualization in has to import the Google visualization API JavaScript library.
    Code Block
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    
  2. All visualizations in the taglib use the namespace gvisualization.
  3. Apart from the configuration options specific to a visualization (see visualization specifications) there are multiple attributes that you have to set for your visualization.
  • name (optional) - JavaScript variable name for visualization object (defaults to "visualization").
  • elementId (required) - HTML div ID used to render visualization.
  • language (optional) - Forces localized version of visualization. The language property is a two-letter ISO 639-1 language code.
  • columns (required) - List of column data types and names to be displayed in the visualization.
  • data (required) - List of data to be displayed for columns.

Example:

Code Block
<%
   def myDailyActivitiesColumns = [['string', 'Task'], ['number', 'Hours per Day']]
   def myDailyActivitiesData = [['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7]]
%>

<gvisualization:pieCoreChart elementId="piechart" title="My Daily Activities" width="${450}" height="${300}" columns="${myDailyActivitiesColumns}" data="${myDailyActivitiesData}" />
<div id="piechart"></div>

Available Visualizations

Deprecated Charts:

Events

If you want to register an event handler for your visualization you can by adding an event attribute. The value you give that attribute is the name of the JavaScript function. Please check the visualization documentation for available event names.

Code Block
<%
   def employeeColumns = [['string', 'Name'], ['string', 'Salary'], ['boolean', 'Full Time Employee']]
   def employeeData = [['Mike', '$10,000', true], ['Jim', '$8,000', false], ['Alice', '$12,500', true], ['Bob', '$7,000', true]]   
%>

<script type="text/javascript">
   function selectHandler(e) {
      alert('A table row was selected');
   }
</script>

<gvisualization:table elementId="table" width="${400}" height="${130}" columns="${employeeColumns}" data="${employeeData}" select="selectHandler" />
<div id="table"></div>

Formatters

You can apply formatters to the Table visualization by using the "formatters" taglib attribute. The value you have to pass in is a list of class implementing the org.grails.plugins.google.visualization.formatter.Formatter interface. The implementations you can apply are the following:

Code Block
org.grails.plugins.google.visualization.formatter.PatternFormatter
org.grails.plugins.google.visualization.formatter.NumberFormatter
org.grails.plugins.google.visualization.formatter.DateFormatter
org.grails.plugins.google.visualization.formatter.ColorRange
org.grails.plugins.google.visualization.formatter.ColorFormatter
org.grails.plugins.google.visualization.formatter.BarFormatter
org.grails.plugins.google.visualization.formatter.ArrowFormatter

Example:

Code Block
<%
   def departmentRevenueColumns = [['string', 'Department'], ['number', 'Revenues']]
   def departmentRevenueData = [['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100]]
   def barFormatter = new BarFormatter(1)
   barFormatter.width = 120
   def barFormatters = [barFormatter]
%>

<gvisualization:table elementId="barformat_div" allowHtml="${true}" showRowNumber="${true}" columns="${departmentRevenueColumns}" data="${departmentRevenueData}" formatters="${barFormatters}"/>
<div id="barformat_div"></div>