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>
"http://<board IP>/basic.html"