1 | # flot [![Build Status](https://travis-ci.org/flot/flot.svg?branch=master)](https://travis-ci.org/flot/flot) [![CircleCI](https://circleci.com/gh/flot/flot.svg?style=svg)](https://circleci.com/gh/flot/flot) [![Coverage Status](https://coveralls.io/repos/github/flot/flot/badge.svg?branch=master)](https://coveralls.io/github/flot/flot?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/flot/flot.svg)](https://greenkeeper.io/)
|
2 |
|
3 | ## About ##
|
4 |
|
5 | flot is a JavaScript plotting library for engineering and scientific
|
6 | applications derived from Flot: <http://www.flotcharts.org/>
|
7 |
|
8 | Take a look at the the examples in examples/index.html; they should give a good
|
9 | impression of what flot can do, and the source code of the examples is probably
|
10 | the fastest way to learn how to use flot.
|
11 |
|
12 |
|
13 | ## Installation ##
|
14 |
|
15 | Just include the JavaScript file after you've included jQuery.
|
16 |
|
17 | Generally, all modern browsers are supported.
|
18 |
|
19 | You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive
|
20 | charts because of performance improvements in event handling.
|
21 |
|
22 |
|
23 | ## Basic usage ##
|
24 |
|
25 | Create a placeholder div to put the graph in:
|
26 |
|
27 | ```html
|
28 | <div id="placeholder"></div>
|
29 | ```
|
30 |
|
31 | You need to set the width and height of this div, otherwise the plot
|
32 | library doesn't know how to scale the graph. You can do it inline like
|
33 | this:
|
34 |
|
35 | ```html
|
36 | <div id="placeholder" style="width:600px;height:300px"></div>
|
37 | ```
|
38 |
|
39 | You can also do it with an external stylesheet. Make sure that the
|
40 | placeholder isn't within something with a display:none CSS property -
|
41 | in that case, Flot has trouble measuring label dimensions which
|
42 | results in garbled looks and might have trouble measuring the
|
43 | placeholder dimensions which is fatal (it'll throw an exception).
|
44 |
|
45 | Then when the div is ready in the DOM, which is usually on document
|
46 | ready, run the plot function:
|
47 |
|
48 | ```js
|
49 | $.plot($("#placeholder"), data, options);
|
50 | ```
|
51 |
|
52 | Here, data is an array of data series and options is an object with
|
53 | settings if you want to customize the plot. Take a look at the
|
54 | examples for some ideas of what to put in or look at the
|
55 | [API reference](API.md). Here's a quick example that'll draw a line
|
56 | from (0, 0) to (1, 1):
|
57 |
|
58 | ```js
|
59 | $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
|
60 | ```
|
61 |
|
62 | The plot function immediately draws the chart and then returns a plot
|
63 | object with a couple of methods.
|
64 |
|
65 | ## Documentation and examples
|
66 |
|
67 | API Documentation is available here: [API reference](docs/API.md)
|
68 |
|
69 | About how the plugins work: [Plugins](docs/PLUGINS.md)
|
70 |
|
71 | High level overview on how interactions are handled internally: [Interactions](docs/interactions.md)
|
72 |
|
73 | Examples are included in the examples folder of this repository, but they can be tried out online as well: [Examples](https://rawgit.com/flot/flot/master/examples/index.html)
|
74 |
|
75 | ## CircleCI
|
76 |
|
77 | [CircleCI](https://circleci.com/) is used in this repo to run [dont-break](https://www.npmjs.com/package/dont-break),
|
78 | which checks if the current version of flot breaks unit tests on specified dependent projects. |
\ | No newline at end of file |