root / hci / trunk / eneraptor-web-app / web-app / js / flot / README.txt @ 70
History | View | Annotate | Download (2.67 KB)
1 | 11 | alexbesir | About |
---|---|---|---|
2 | ----- |
||
3 | |||
4 | Flot is a Javascript plotting library for jQuery. Read more at the |
||
5 | website: |
||
6 | |||
7 | http://code.google.com/p/flot/ |
||
8 | |||
9 | Take a look at the examples linked from above, they should give a good |
||
10 | impression of what Flot can do and the source code of the examples is |
||
11 | probably the fastest way to learn how to use Flot. |
||
12 | |||
13 | |||
14 | Installation |
||
15 | ------------ |
||
16 | |||
17 | Just include the Javascript file after you've included jQuery. |
||
18 | |||
19 | Note that you need to get a version of Excanvas (e.g. the one bundled |
||
20 | with Flot) which is canvas emulation on Internet Explorer. You can |
||
21 | include the excanvas script like this: |
||
22 | |||
23 | <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]--> |
||
24 | |||
25 | If it's not working on your development IE 6.0, check that it has |
||
26 | support for VML which excanvas is relying on. It appears that some |
||
27 | stripped down versions used for test environments on virtual machines |
||
28 | lack the VML support. |
||
29 | |||
30 | Also note that you need at least jQuery 1.2.6 (but at least jQuery |
||
31 | 1.3.2 is recommended for interactive charts because of performance |
||
32 | improvements in event handling). |
||
33 | |||
34 | |||
35 | Basic usage |
||
36 | ----------- |
||
37 | |||
38 | Create a placeholder div to put the graph in: |
||
39 | |||
40 | <div id="placeholder"></div> |
||
41 | |||
42 | You need to set the width and height of this div, otherwise the plot |
||
43 | library doesn't know how to scale the graph. You can do it inline like |
||
44 | this: |
||
45 | |||
46 | <div id="placeholder" style="width:600px;height:300px"></div> |
||
47 | |||
48 | You can also do it with an external stylesheet. Make sure that the |
||
49 | placeholder isn't within something with a display:none CSS property - |
||
50 | in that case, Flot has trouble measuring label dimensions which |
||
51 | results in garbled looks and might have trouble measuring the |
||
52 | placeholder dimensions which is fatal (it'll throw an exception). |
||
53 | |||
54 | Then when the div is ready in the DOM, which is usually on document |
||
55 | ready, run the plot function: |
||
56 | |||
57 | $.plot($("#placeholder"), data, options); |
||
58 | |||
59 | Here, data is an array of data series and options is an object with |
||
60 | settings if you want to customize the plot. Take a look at the |
||
61 | examples for some ideas of what to put in or look at the reference |
||
62 | in the file "API.txt". Here's a quick example that'll draw a line from |
||
63 | (0, 0) to (1, 1): |
||
64 | |||
65 | $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } }); |
||
66 | |||
67 | The plot function immediately draws the chart and then returns a plot |
||
68 | object with a couple of methods. |
||
69 | |||
70 | |||
71 | What's with the name? |
||
72 | --------------------- |
||
73 | |||
74 | First: it's pronounced with a short o, like "plot". Not like "flawed". |
||
75 | |||
76 | So "Flot" rhymes with "plot". |
||
77 | |||
78 | And if you look up "flot" in a Danish-to-English dictionary, some up |
||
79 | the words that come up are "good-looking", "attractive", "stylish", |
||
80 | "smart", "impressive", "extravagant". One of the main goals with Flot |
||
81 | is pretty looks. |