Difference between revisions of "Flot"
From ArmadeusWiki
(→Introduction) |
m |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 11: | Line 11: | ||
== Try it! on your computer == | == Try it! on your computer == | ||
| − | Download the sources at : http:// | + | 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! | 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 | + | == Make it works on APF boards == |
| − | To make | + | * 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/''). | |
| − | All plotting scripts (.js) are present on the root of the archive, copy | + | * Create plot file ''basic.html'' in ''/var/www/'' directory : |
| − | Create | + | |
<source lang="html4strict"> | <source lang="html4strict"> | ||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | ||
| Line 60: | Line 59: | ||
</html> | </html> | ||
</source> | </source> | ||
| − | Note | + | |
| + | {{Note| only these lines differ from the basic.html file of the archive | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<script language="javascript" type="text/javascript" src="./scripts/excanvas.pack.js"></script><![endif]--> | <script language="javascript" type="text/javascript" src="./scripts/excanvas.pack.js"></script><![endif]--> | ||
| Line 66: | Line 66: | ||
<script language="javascript" type="text/javascript" src="./scripts/jquery.flot.js"></script> | <script language="javascript" type="text/javascript" src="./scripts/jquery.flot.js"></script> | ||
</source> | </source> | ||
| + | }} | ||
| + | |||
Now you can test it with your web browser at : <source lang="text">"http://<board IP>/basic.html"</source> | Now you can test it with your web browser at : <source lang="text">"http://<board IP>/basic.html"</source> | ||
| − | Contributors | + | ==Contributors== |
| + | * [[User:XavierH]] | ||
| + | |||
| + | ==Links== | ||
| + | * [[boa|Boa webserver install page]] | ||
| + | |||
| + | [[Category:Web]] | ||
Latest revision as of 17:13, 1 November 2009
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 these lines differ 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"
