Versions Compared


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

Google Visualization Plugin

Author: Benjamin Muschko (


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


  • 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.


Code Block
grails install-plugin google-visualization


  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=""></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.


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:


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');

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


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 interface. The implementations you can apply are the following:

Code Block


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>