Flot plotting in Grails:

I came across the FLOT package (Ref: http://code.google.com/p/flot/ ) while reading Ajaxian (Ref: http://ajaxian.com/archives/plotting-in-jquery ). Flot uses the jQuerry package (Ref: http://jquery.com/ ) to do client side plotting. I wanted to see how this works when dropped into Grails. As expected the results are quite nice.

The set up is rather easy. Obtain the jquery.flot-0.1.js and jquery-1.2.1.min.js files (your versions will obviously change with the march of time) and place these in your web-app/js directory of your grails project.
You will need to reference these in your GSP page HEAD tag with something like:

  <g:javascript library="jquery-1.2.1.min"/>
<g:javascript library="jquery.flot-0.1"/>

At this point your are basically done. You can review the URL's at the top of this page for better information straight from the source. Basically, you will need to place into the BODY tag of your GSP something like the following:

 <div id="placeholder2" style="margin-left:100px;width:600px;height:300px;"></div>

<script id="source2" language="javascript" type="text/javascript">
 $(function () {
   var d1 = [];
   for (var i = 0; i < 14; i += 0.5)
   d1.push([i, Math.sin(i)]);

   var d2 = ${array};

   $.plot($("#placeholder2"), [ d1, d2 ]);
   });
</script>

Here is the only interesting aspect of all this. The line var d2 = ${array} is referencing a list from the controller:

  def jflotPlot = {
      def array = [[4, 6], [5, 7], [9, 2]]
     [array: array]
}

Likely your controller will get more interesting data. ;) This is just a really quick and dirty copy paste job of the examples from the above references into a Grails app. Flot can already at version 0.1 do more types and plots and zooming and other very slick features (see the demos at the flot site ). Integration with Grails is quick and easy.

enjoy
Doug