Grails Flot Plugin

  • Tags : /
  • Latest : 0.2.3
  • Last Updated: 05 May 2011
  • Grails version : 1.1.1 > *
  • Authors : <a href="http://www.odelia-technologies.com">Bertrand Goetzmann</a>
4 votes
Dependency :
compile ":flot:0.2.3"

Documentation

Summary

Installation

To install this plugin type this command from your project's root folder:
grails install-plugin flot

Description

Provides integration with Flot JavaScript plotting library.

A demonstration of the plugin is online on my Grails web application GrailsBox here.

Documentation

Once installed, this plugin defines two tags: <flot:resources/> and <flot:plot/>.

<flot:resources/> tag

You must put this tag in the head section of the GSP page; as the Flot JavaScript library is based on jQuery, the plugin includes the jQuery 1.3.2 JavaScript file that comes with it. By default, the tag will generate a reference to that file. But, in order to use the plugin with the Grails jQuery plugin, you can ask the tag to not generate the reference to the internal jQuery JavaScript file, by using the attribute includeJQueryLib like this:

<g:javascript library="jquery"/><!-- here we use the Grails jQuery plugin -->
<flot:resources includeJQueryLib="false"/>
In the same way, you can choose to not include the excanvas JavaScript file for InternetExplorer, supplied with the plugin (for example, because you would like use your own excanvas file); for that, add the includeExCanvasLib attribute on the tag (since 0.2.2):
<flot:resources includeExCanvasLib="false"/>

Since the 0.2.1 version, you can also declare the use of some Flot 0.6 plugins, by using the plugins attribute with a value that is a Groovy list of Flot plugin names. For example, to use the image and pie Flot plugins, you must use the resources tag like this:

<flot:resources plugins="['image', 'pie']"/>
Note that at the time of this writting, the pie plugin (jquery.flot.pie.js) is not included in the Flot 0.6 distribution, but I added it in the Grails Plugin. Another point: becareful to the names used in the plugins attribute value, because there is no control to verify if the corresponding JavaScript file exists. The use of 'aplugin' name must correspond to a jquery.flot.aplugin.js file supplied by Flot. If the a "min" version for the Flot plugin aplugin exists, you can choose to use 'aplugin.min' instead of 'aplugin'.

<flot:plot/> tag

This tag permits to plot a Flot chart, and has the following attributes: id (required), style (must be used to set the chart's dimensions), data (required), and options. Here an example coming from the demonstration. Having defined the FlotController like this:

class FlotController {

def index = { [data: [[0, 10], [4, 5], null, [6, 2.5], [12, 10]]] }

}

here the index.gsp source code:

<html>
  <head>
    <title>Flot</title>
    <meta name="layout" content="main" />
    <flot:resources plugins="['pie']"/>
  </head>
  <body>
    <p>This page tests tags from the <a target="_blanck"
            href="http://grails.org/plugin/flot">Grails Flot plugin</a>.</p>

<g:javascript> var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

// a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

var d4 = ${data};

var data = [d1, d2, d3, { label: "server data", data: d4}];

var options = { lines: { show: true }, points: { show: true } };

// Data and option for the pie

var d5 = []; var series = Math.floor(Math.random()*10)+1; for( var i = 0; i < series; i++) { d5[i] = { label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 } }

var pieOptions = { series: { pie: { show: true } }, legend: { show: false } }; </g:javascript> <flot:plot id="placeholder" style="width: 600px; height: 300px;" data="data" options="options" /> <br/> <flot:plot id="placeholder1" style="width: 600px; height: 400px;" data="d5" options="pieOptions" /> </body> </html>

This page displays two charts, and the second chart is a pie: it's the reason why we have defined the pie Flot plugin in the resources's attribute plugins. As you can see, you can define data series through JavaScript code, and fetch data from the controller as for d4 data series. The example shows also what you can use for attributes data and options: they should reference JavaScript variables. The plot tag generates a div element and a jQuery.plot Javascript call; in the case in the example, we will have:

<div id='placeholder' style='width: 600px; height: 300px;'></div>
<script type='text/javascript'>jQuery(function () {jQuery.plot(jQuery("#placeholder"),data, options);});</script>
So you can have a closer look to the Flot documentation to see how you can define data and options!

Version History

  • 0.2.3 - This release supports Flot 0.7.
  • 0.2.2 - The resources tag takes now a new optional attribute, includeExCanvasLib.
  • 0.2.1 - Support for Flot plugins added; the Grails plugin contains also the pie Flot plugin.
  • 0.2 - This release works with Flot 0.6.
  • 0.1 - Initial release (Flot 0.5)