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

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:

<%
   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

• Pie Core Chart: <gvisualization:pieCoreChart/>
• Bar Core Chart: <gvisualization:barCoreChart/>
• Column Core Chart: <gvisualization:columnCoreChart/>
• Area Core Chart: <gvisualization:areaCoreChart/>
• Line Core Chart: <gvisualization:lineCoreChart/>
• Scatter Core Chart: <gvisualization:scatterCoreChart/>
• Gauge: <gvisualization:gauge/>
• Table: <gvisualization:table/>
• Map: <gvisualization:map/>
• Annotated Time Line: <gvisualization:annotatedTimeLine/>
• Organizational Chart: <gvisualization:orgChart/>
• Intensity Map: <gvisualization:intensityMap/>
• Geo Map: <gvisualization:geoMap/>
• Motion Chart: <gvisualization:motionChart/>

Deprecated Charts:

• Pie Chart: <gvisualization:pieChart/>
• Bar Chart: <gvisualization:barChart/>
• Column Chart: <gvisualization:columnChart/>
• Area Chart: <gvisualization:areaChart/>
• Line Chart: <gvisualization:lineChart/>
• Scatter Chart: <gvisualization:scatterChart/>

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.

<%
   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:

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:

<%
   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>