Flot
From ArmadeusWiki
Contents
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+.[...]"""
Try it!
Some examples are present at : http://people.iola.dk/olau/flot/examples/
Try it! on your computer
Download the sources at : http://code.google.com/p/flot/downloads/list (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 it works on APF boards
- To make it work on the APF boards, a web server must be previously installed (see boa documentation).
- All plotting scripts (.js) are present on the root of the archive, copy them to your APF web script directory (ex : /var/www/scripts/).
- Create plot file 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"
