Please note this javadoc have been put together based on documentation found here: http://people.iola.dk/olau/flot/API.txt
Building
Dependencies:
Maven 2+
Setup workspace:
git clone git://github.com/dunse/FlotJF.git
Build FlotJF
cd FlotJF
mvn package
This will create the compiled jar under target directory.
Usage
Dependencies:
FlotJF is dependent on GSON which can be found here. (JAR file is found inside google-gson-X.X-release.zip)
Flot is required to draw the graphs. Download Flot from here and unzip into WebContent/javascripts/.
Setup:
Copy FlotJF/target/FlotJF-*.jar into WEB-INF/lib/ of your web project.
Make sure GSON .jar has been included in WEB-INF/lib/. (See dependencies)
Make sure jquery.flot.js can be found in WebContent/javascripts/flot/
Example
Create a file called flotjfexample.html in WebContent/ directory with content:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FlotJF Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lte IE 8]><script src="javascripts/flot/excanvas.min.js" type="text/javascript" charset="UTF-8"></script><![endif]-->
<script src="javascripts/flot/jquery.flot.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="placeholder" style="width:95%;height:400px;" ></div>
<script type="text/javascript">
<!--
// setup plot
var options = [];
var data = [];
$.ajaxSetup({async:false});
$.post('GetGraphOptions',{},
function(response) {
options = response
} )
$.post('GetGraph',{},
function(response) {
data = response
} )
var plot = $.plot($("#placeholder"), data, options);
plot.setupGrid();
plot.draw();
$.ajaxSetup({async:true});
//-->
</script>
</body>
</html>
Create a file called GetGraph.java in src/ directory with content:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import flotjf.Chart;
import flotjf.data.PlotData;
/**
* Servlet implementation class GetGraph
*/
@WebServlet("/GetGraph")
public class GetGraph extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
PlotData sinPlot = new PlotData("sin(x)", null);
int i = 0;
while( i++ < 100 ) {
sinPlot.addPoint(i, Math.sin(i));
}
Chart chart = new Chart();
chart.addElements(sinPlot);
out.println(chart.printChart());
out.close();
}
}
Create a file called GetGraphOptions.java in src/ directory with content:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import flotjf.Chart;
import flotjf.options.Axis;
/**
* Servlet implementation class GetGraphOptions
*/
@WebServlet("/GetGraphOptions")
public class GetGraphOptions extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
Chart chart = new Chart();
Axis yAxis = new Axis();
chart.addYAxis(yAxis);
Axis xAxis = new Axis();
chart.addXAxis(xAxis);
out.println(chart.printChartOptions());
out.close();
}
}
Deploy the code to an application server and verify the output of http://hostname/ContextRoot/flotjfexample.html as: