usage

How to use

---

Installation

For Grails 3.x

compile "org.grails.plugins:grails-google-visualization:2.0"

For Grails 2.x

compile ":google-visualization:1.0.1"

Basic usage

• The page you want to use the visualization in has to import the Google visualization API JavaScript library. You can do so by using the taglib <gvisualization:apiImport/> or by importing it using the HTML script tag.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

• All visualizations in the taglib use the namespace gvisualization.
• 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").
• version (optional) - API version for visualization object (defaults to "1").
• elementId (required) - HTML div ID used to render visualization.
• dynamicLoading (optional) - Renders visualization over [dynamic loading](http://code.google.com/apis/ajax/documentation/#Dynamic] - required when rendered in AJAX response (defaults to false).
• 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.

• To express objects you use the Map notation inside an EL expression. Eg:

legend="${[position: 'top', alignment: 'center']}"

• If your data requires the usage of the cell object you can import and populate the class org.grails.plugins.google.visualization.data.Cell.

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 acting as callback handler. Please check the visualization specification for available event names.

The variable name of the visualization JavaScript object by default is "visualization", the name of the google.visualization.DataTable object is "visualization_data". You can always change the names by setting the taglib attribute "name".

###Example:

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

###Important note!! Since the Table visualization has both a "page" config option and a "page" event, to use the latest the taglib attribute is called "page-event".

Formatters

You can apply formatters to all visualizations using the "formatters" taglib attribute as the underlying implementation is a google.visualization.DataTable.

However, using formatters makes the most sense for the Table visualization.

A full set of examples can be found on this GSP page.The value you have to pass in is a list of classes 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:

<%@ page import="org.grails.plugins.google.visualization.formatter.BarFormatter" %>
<%
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>