Difference between revisions of "Flot"

From ArmadeusWiki
Jump to: navigation, search
(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...)
(No difference)

Revision as of 21:52, 27 April 2009

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>
Now you can test it with your web browser at :
"http://<board IP>/basic.html"

Contributors : User:XavierH