目次

Version 2, last updated by Richard Dallaway at Jun 21 07:10 UTC

Flot is a pure Javascript plotting library. You’ll find excellent documentation and example graphs via the Flot Google code project.

Overview

The Flot widget in Lift provides Scala wrappers around the Flot concepts, allowing you to produce Flot graphs from your Lift app.

The data representation is a list of pairs of double. However, Flot allows you to annotate the data with a range of attributes such as colour and line style. To support this, the data is wrapped in FlotSerie class and you’ll want to override the data: List[(Double,Double)] field.

Flot allows allows you annotate your whole data set. This is controlled by extending from FlotOptions.

Flot.render produces your graph, and is typically the value you use in a bind.

An example

Initialize the Flot widget in Boot.scala:

import net.liftweb.widgets.flot._
Flot.init

Create a view to contain your graph:

<lift:surround with="default" at="content">
  <h2>Plot of the sine function</h2>
  <div id="graph_area" style="width:600px;height:400px;"></div>
  <lift:MyReports.sine></lift:MyReports.sine>
</lift:surround>

Write your snippet:

import scala.xml.NodeSeq
import net.liftweb.util.Helpers._
import net.liftweb.http.js.JsCmds._
import net.liftweb.widgets.flot._

class MyReports {

  def sine(xhtml: NodeSeq) = {
    val data_values: List[(Double,Double)] = for (i <- List.range (0, 140, 5))
        yield (i / 10.0, Math.sin(i / 10.0) ) 

    val data_to_plot = new FlotSerie() {
        override val data = data_values
    } 

    Flot.render ( "graph_area", List(data_to_plot), new FlotOptions {}, Flot.script(xhtml))
  }
}

This produces:

Example Flot graph

Running the Lift Flot examples

The Lift source contains a set of Flot examples. To run the examples:

  • checkout the lift source
  • cd liftweb/examples/flotDemo
  • mvn jetty:run

…and take a look at localhost:8080. The source of these examples are a useful starting point for your own charts.

Using Flot plugins

Flot has a set of plugins which are available as additional JavaScript files. To use these plugins from Lift you need to include the additional JavaScript file in your project. Here’s an example of how to do this for the Flot Stack plugin.

Include the relevant file in your project. Here I’m using toserve: src/main/resources/toserve/flot/jquery.flot.stack.js

In Boot.scala:

import net.liftweb.http.ResourceServer
ResourceServer.allow({
  case "flot" :: "jquery.flot.stack.js" :: Nil => true
})

In the view include the Javascript (don’t put this in <head> because the plugin is sensitive to the order of inclusion: that is, the main flot javascript needs to be loaded first):


 <script language="javascript" type="text/javascript" src="/classpath/flot/jquery.flot.stack.js" />

You can then use the options of the Stack Flot plugin. E.g.,


val options:FlotOptions = new FlotOptions () {
  override val series = Full( Map( 
       "stack"-> JsTrue,  
        "bars" -> JsObj( "show"->true, "barWidth"-> 45000000)  ) )
       
  override val xaxis = Full( new FlotAxisOptions() {
       override val mode = Full("time")
  })
      
  override val legend = Full( new FlotLegendOptions() {
       override val container = Full("legend_area")                            
   })
         
 }

…or whatever options you want to set.