Monday 27 February 2012

Flotr2JFExamplesWeb - How to use Flotr2JF with Flotr2

Flotr2JFExamplesWeb is a web project built to illustrate how to use Flotr2JF together with Flotr2. Flotr2 is a branch of Flotr, which is a replacement for Plotr.
Behind the scenes it is very similar interface to Flot, which is why FlotJF was used as a base when creating Flotr2JF and Flotr2JFExamplesWeb.

This is a follow-up article from FlotJFExamplesWeb - How to use FlotJF with Flot.
In the previous article we go through every example one by one and explain the source code. This article assumes you already read this previous article and will only discuss differences between the two.

First, check out the running version here: http://flotr2jfexamplesweb.appspot.com/







Screenshots
ExampleGraph1.java ExampleGraph2.java ExampleGraph3.java
ExampleGraph4.java ExampleGraph5.java ExampleGraph6.java




Getting FlotJFExamplesWeb

The best way is to build it from source and import it to IDE of choice. See instructions under Building: https://github.com/dunse/Flotr2JFExamplesWeb/blob/master/README.md

To just checkout the running examples, download https://github.com/downloads/dunse/Flotr2JFExamplesWeb/Flotr2JFExampleWeb-0.2-SNAPSHOT.war and deploy it to application server of choice.
After deployment open http://hostname/context-root/ (For Tomcat the default would be http://localhost:8080/Flotr2JFExampleWeb-0.2-SNAPSHOT/)







The Application

The application is quite simple. There is a static landing page (index.html) which has links to all the examples. These examples are displayed using example.jsp which we will take a look at first.



example.jsp

First change is the included plotting library, which in this case is Flotr2 on Line 16:
<script src="javascripts/flotr2/flotr2.js" type="text/javascript" charset="UTF-8"></script>


The code to draw the graph is only one function Flotr.draw().
    } )
    
    function update() {
     Flotr.draw(document.getElementById('placeholder'), getGraph(), options);




ExampleGraph1.java

ExampleGraph1 will return a simple graph with one data series based on sin().

This code is identical to FlotJFExamplesWeb so please read FlotJFExamplesWeb - How to use FlotJF with Flot for more information.


ExampleGraph2.java

ExampleGraph2 will return a simple graph with two data series based on sin() and cos()+5 using two y axis.

Flotr2 handles y axes slightly different, so we had to change our GetOptions() method to use the method addY2Axis() on line 18:
  chart.addY2Axis(yAxisRight);


ExampleGraph3.java

ExampleGraph3 will return a multi-type graph with three data series representing line, dot and bar series.

This code is identical to FlotJFExamplesWeb so please refer to FlotJFExamplesWeb - How to use FlotJF with Flot for more information.


ExampleGraph4.java

ExampleGraph4 is a bit more advanced where we use the poll parameter to update the graph every 3 seconds.

Since Flotr2 doesn't autoscale the x axis when using time mode we had to compensate for this by adding line 21:
  xAxis.setTimeFormat("%H:%M:%S");


ExampleGraph5.java

ExampleGraph5 shows the use of colour and opacity gradient.

In this example we put in some additional options available in Flotr2. First we specify the Title which is printed above the plotting area.
Then we specify the y axis title and rotate this 90 degrees. Important is to disable HtmlText as done on line 13 or the text rotation will not be possible.
 chart.setTitle("This is the Graph Title");
 chart.setHtmlText(false);

 Axis yAxis = new Axis();
 yAxis.setTitle("Y Title");
 yAxis.setTitleAngle(90);
 chart.addYAxis(yAxis);

 Axis xAxis = new Axis();
 xAxis.setTitle("X Title");
 chart.addXAxis(xAxis);


ExampleGraph6.java

ExampleGraph6 shows the use of tooltips (Based on Example 3).

To enable a simple tooltip in Flotr2 is much simpler than in Flot. In the Java code we just call useMouse() to enable tooltip on the graph. This is a helper method in Flotr2JF which enables the following mouse options: track, trackAll and relative.
 
 // Enable interaction with grid. (In this case for tooltip)
 chart.useMouse()