Flot
Introduction
This introduction is extracted from the Flot official website : http://code.google.com/p/flot/ :
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.
The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin is known to work with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+. If you find a problem, please report it. Drawing is done with the canvas tag introduced by Safari and now available on all major browsers, except Internet Explorer where the excanvas Javascript emulation helper is used.
Try it!
Some examples are present at : http://people.iola.dk/olau/flot/examples/
Try it! on your computer
Download the sources at : http://flot.googlecode.com/files/ (April 2008 : flot-0.5.tar.bz).
Unpack all the archive in a folder of your choice (on you host). The "example" directory contain all previous examples (.html files), open a file with your webbrowser and enjoy!
Make this works on apf board
To make this work on the apf board, a web server must be previously installed (see boa documentation).
All plotting scripts (.js) are present on the root of the archive, copy it to your apf web script directory (ex : /var/www/scripts/). Create file plot "basic.html" in /var/www/ directory :
<!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>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="./scripts/excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./scripts/jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Simple example. You don't need to specify much to get an
attractive look. Put in a placeholder, make sure you set its
dimensions (otherwise the plot library will barf) and call the
plot function with the data. The axes are automatically
scaled.</p>
<script id="source" 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 = [[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]];
$.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>
</body>
</html>
Note : only this lines differs from the basic.html file of the archive.
<script language="javascript" type="text/javascript" src="./scripts/excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./scripts/jquery.flot.js"></script>
"http://<board IP>/basic.html"
Contributors : User:XavierH
