Flot - Revision history

JulienB at 16:13, 1 November 2009

2009-11-01T16:13:17Z

JulienB at 08:11, 28 April 2009

2009-04-28T08:11:42Z

JulienB: /* Make this works on apf board */

2009-04-28T08:08:24Z

‎Make this works on apf board

XavierH: /* Try it! on your computer */

2009-04-27T21:36:45Z

‎Try it! on your computer

XavierH: /* Introduction */

2009-04-27T21:35:30Z

‎Introduction

XavierH: New page: == 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 grap...

2009-04-27T20:52:51Z

New page: == 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 grap...

New page

== 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 :
<source lang="html4strict">
<!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>

<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>
</source>
Note : only this lines differs from the basic.html file of the archive.
<source lang="html4strict">
<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>
</source>
Now you can test it with your web browser at : <source lang="text">"http://<board IP>/basic.html"</source>

Contributors : [[User:XavierH]]

← Older revision		Revision as of 08:11, 28 April 2009
Line 70:		Line 70:
	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 : [[User:XavierH]]	+	==Contributors==
		+	* [[User:XavierH]]
		+
		+	==Links==
		+	* [[boa\|Boa webserver install page]]
		+
		+	[[Category:Web]]

@@ Line 60: / Line 60: @@
 </source>
-{{Note| only this lines differs from the basic.html file of the archive
+{{Note| only these lines differ from the basic.html file of the archive
 <source lang="html4strict">
 <script language="javascript" type="text/javascript" src="./scripts/excanvas.pack.js"></script><![endif]-->

@@ Line 15: / Line 15: @@
 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 ==
+== Make it works on APF boards ==
-To make this work on the apf board, a web server must be previously installed (see [[boa]] documentation).
+* 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 it to your apf web script directory (ex : /var/www/scripts/).
+* Create plot file ''basic.html'' in ''/var/www/'' directory :
-Create file plot "basic.html" in /var/www/ directory :
 <source lang="html4strict">
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
@@ Line 60: / Line 59: @@
 </html>
 </source>
-Note : only this lines differs from the basic.html file of the archive.
 <source lang="html4strict">
 <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>
 </source>
 Now you can test it with your web browser at : <source lang="text">"http://<board IP>/basic.html"</source>
 Contributors : [[User:XavierH]]

@@ Line 11: / Line 11: @@
 == Try it! on your computer ==
-Download the sources at : http://flot.googlecode.com/files/ (April 2008 : flot-0.5.tar.bz).
+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!

@@ Line 1: / Line 1: @@
 == Introduction ==
 This introduction is extracted from the Flot official website : http://code.google.com/p/flot/ :
+<source lang="text">
-Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.
+"""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+.[...]"""
-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.
+</source>
 == Try it! ==