diff --git a/examples/ajax.html b/examples/ajax.html deleted file mode 100644 index eb0ef9a..0000000 --- a/examples/ajax.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

Example of loading data dynamically with AJAX. Percentage change in GDP (source: Eurostat). Click the buttons below.

- -

The data is fetched over HTTP, in this case directly from text - files. Usually the URL would point to some web server handler - (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that - extracts it from a database and serializes it to JSON.

- -

- - - data - - -

- -

- - - data - - -

- -

- - - data - - -

- -

If you combine AJAX with setTimeout, you can poll the server - for new data.

- -

- -

- - - - - diff --git a/examples/data-eu-gdp-growth-1.json b/examples/ajax/data-eu-gdp-growth-1.json similarity index 100% rename from examples/data-eu-gdp-growth-1.json rename to examples/ajax/data-eu-gdp-growth-1.json diff --git a/examples/data-eu-gdp-growth-2.json b/examples/ajax/data-eu-gdp-growth-2.json similarity index 100% rename from examples/data-eu-gdp-growth-2.json rename to examples/ajax/data-eu-gdp-growth-2.json diff --git a/examples/data-eu-gdp-growth-3.json b/examples/ajax/data-eu-gdp-growth-3.json similarity index 100% rename from examples/data-eu-gdp-growth-3.json rename to examples/ajax/data-eu-gdp-growth-3.json diff --git a/examples/data-eu-gdp-growth-4.json b/examples/ajax/data-eu-gdp-growth-4.json similarity index 100% rename from examples/data-eu-gdp-growth-4.json rename to examples/ajax/data-eu-gdp-growth-4.json diff --git a/examples/data-eu-gdp-growth-5.json b/examples/ajax/data-eu-gdp-growth-5.json similarity index 100% rename from examples/data-eu-gdp-growth-5.json rename to examples/ajax/data-eu-gdp-growth-5.json diff --git a/examples/data-eu-gdp-growth.json b/examples/ajax/data-eu-gdp-growth.json similarity index 100% rename from examples/data-eu-gdp-growth.json rename to examples/ajax/data-eu-gdp-growth.json diff --git a/examples/data-japan-gdp-growth.json b/examples/ajax/data-japan-gdp-growth.json similarity index 100% rename from examples/data-japan-gdp-growth.json rename to examples/ajax/data-japan-gdp-growth.json diff --git a/examples/data-usa-gdp-growth.json b/examples/ajax/data-usa-gdp-growth.json similarity index 100% rename from examples/data-usa-gdp-growth.json rename to examples/ajax/data-usa-gdp-growth.json diff --git a/examples/ajax/index.html b/examples/ajax/index.html new file mode 100644 index 0000000..b2431c9 --- /dev/null +++ b/examples/ajax/index.html @@ -0,0 +1,169 @@ + + + + + Flot Examples: AJAX + + + + + + + + + + +
+ +
+
+
+ +

Example of loading data dynamically with AJAX. Percentage change in GDP (source: Eurostat). Click the buttons below:

+ +

The data is fetched over HTTP, in this case directly from text files. Usually the URL would point to some web server handler (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that extracts it from a database and serializes it to JSON.

+ +

+ + [ see data ] + +

+ +

+ + [ see data ] + +

+ +

+ + [ see data ] + +

+ +

If you combine AJAX with setTimeout, you can poll the server for new data.

+ +

+ +

+ +
+ + + + + diff --git a/examples/annotating.html b/examples/annotating.html deleted file mode 100644 index 72c212b..0000000 --- a/examples/annotating.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

Flot has support for simple background decorations such as - lines and rectangles. They can be useful for marking up certain - areas. You can easily add any HTML you need with standard DOM - manipulation, e.g. for labels. For drawing custom shapes there is - also direct access to the canvas.

- - - - - diff --git a/examples/annotating/index.html b/examples/annotating/index.html new file mode 100644 index 0000000..d8932c0 --- /dev/null +++ b/examples/annotating/index.html @@ -0,0 +1,87 @@ + + + + + Flot Examples: Adding Annotations + + + + + + + + + + +
+ +
+
+
+ +

Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.

+ +
+ + + + + diff --git a/examples/axes-interacting/index.html b/examples/axes-interacting/index.html new file mode 100644 index 0000000..a7977dd --- /dev/null +++ b/examples/axes-interacting/index.html @@ -0,0 +1,97 @@ + + + + + Flot Examples: Interacting with axes + + + + + + + + + + +
+ +
+
+
+ +

With multiple axes, you sometimes need to interact with them. A simple way to do this is to draw the plot, deduce the axis placements and insert a couple of divs on top to catch events.

+ +

Try clicking an axis.

+ +

+ +
+ + + + + diff --git a/examples/axes-multiple/index.html b/examples/axes-multiple/index.html new file mode 100644 index 0000000..824a722 --- /dev/null +++ b/examples/axes-multiple/index.html @@ -0,0 +1,77 @@ + + + + + Flot Examples: Multiple Axes + + + + + + + + + + + +
+ +
+
+
+ +

Multiple axis support showing the raw oil price in US $/barrel of crude oil vs. the exchange rate from US $ to €.

+ +

As illustrated, you can put in multiple axes if you need to. For each data series, simply specify the axis number. In the options, you can then configure where you want the extra axes to appear.

+ +

Position axis or .

+ +
+ + + + + diff --git a/examples/date.js b/examples/axes-time-zones/date.js similarity index 100% rename from examples/date.js rename to examples/axes-time-zones/date.js diff --git a/examples/axes-time-zones/index.html b/examples/axes-time-zones/index.html new file mode 100644 index 0000000..156cd6e --- /dev/null +++ b/examples/axes-time-zones/index.html @@ -0,0 +1,114 @@ + + + + + Flot Examples: Time zones + + + + + + + + + + + + +
+ +

UTC

+
+
+
+ +

Browser

+
+
+
+ +

Chicago

+
+
+
+ +
+ + + + + diff --git a/examples/tz/africa b/examples/axes-time-zones/tz/africa similarity index 100% rename from examples/tz/africa rename to examples/axes-time-zones/tz/africa diff --git a/examples/tz/antarctica b/examples/axes-time-zones/tz/antarctica similarity index 100% rename from examples/tz/antarctica rename to examples/axes-time-zones/tz/antarctica diff --git a/examples/tz/asia b/examples/axes-time-zones/tz/asia similarity index 100% rename from examples/tz/asia rename to examples/axes-time-zones/tz/asia diff --git a/examples/tz/australasia b/examples/axes-time-zones/tz/australasia similarity index 100% rename from examples/tz/australasia rename to examples/axes-time-zones/tz/australasia diff --git a/examples/tz/backward b/examples/axes-time-zones/tz/backward similarity index 100% rename from examples/tz/backward rename to examples/axes-time-zones/tz/backward diff --git a/examples/tz/etcetera b/examples/axes-time-zones/tz/etcetera similarity index 100% rename from examples/tz/etcetera rename to examples/axes-time-zones/tz/etcetera diff --git a/examples/tz/europe b/examples/axes-time-zones/tz/europe similarity index 100% rename from examples/tz/europe rename to examples/axes-time-zones/tz/europe diff --git a/examples/tz/factory b/examples/axes-time-zones/tz/factory similarity index 100% rename from examples/tz/factory rename to examples/axes-time-zones/tz/factory diff --git a/examples/tz/iso3166.tab b/examples/axes-time-zones/tz/iso3166.tab similarity index 100% rename from examples/tz/iso3166.tab rename to examples/axes-time-zones/tz/iso3166.tab diff --git a/examples/tz/leapseconds b/examples/axes-time-zones/tz/leapseconds similarity index 100% rename from examples/tz/leapseconds rename to examples/axes-time-zones/tz/leapseconds diff --git a/examples/tz/northamerica b/examples/axes-time-zones/tz/northamerica similarity index 100% rename from examples/tz/northamerica rename to examples/axes-time-zones/tz/northamerica diff --git a/examples/tz/pacificnew b/examples/axes-time-zones/tz/pacificnew similarity index 100% rename from examples/tz/pacificnew rename to examples/axes-time-zones/tz/pacificnew diff --git a/examples/tz/solar87 b/examples/axes-time-zones/tz/solar87 similarity index 100% rename from examples/tz/solar87 rename to examples/axes-time-zones/tz/solar87 diff --git a/examples/tz/solar88 b/examples/axes-time-zones/tz/solar88 similarity index 100% rename from examples/tz/solar88 rename to examples/axes-time-zones/tz/solar88 diff --git a/examples/tz/solar89 b/examples/axes-time-zones/tz/solar89 similarity index 100% rename from examples/tz/solar89 rename to examples/axes-time-zones/tz/solar89 diff --git a/examples/tz/southamerica b/examples/axes-time-zones/tz/southamerica similarity index 100% rename from examples/tz/southamerica rename to examples/axes-time-zones/tz/southamerica diff --git a/examples/tz/systemv b/examples/axes-time-zones/tz/systemv similarity index 100% rename from examples/tz/systemv rename to examples/axes-time-zones/tz/systemv diff --git a/examples/tz/yearistype.sh b/examples/axes-time-zones/tz/yearistype.sh similarity index 100% rename from examples/tz/yearistype.sh rename to examples/axes-time-zones/tz/yearistype.sh diff --git a/examples/tz/zone.tab b/examples/axes-time-zones/tz/zone.tab similarity index 100% rename from examples/tz/zone.tab rename to examples/axes-time-zones/tz/zone.tab diff --git a/examples/axes-time/index.html b/examples/axes-time/index.html new file mode 100644 index 0000000..4a9a41a --- /dev/null +++ b/examples/axes-time/index.html @@ -0,0 +1,137 @@ + + + + + Flot Examples: Time Axes + + + + + + + + + + + +
+ +
+
+
+ +

Monthly mean atmospheric CO2 in PPM at Mauna Loa, Hawaii (source: NOAA/ESRL).

+ +

If you tell Flot that an axis represents time, the data will be interpreted as timestamps and the ticks adjusted and formatted accordingly.

+ +

Zoom to: + +

+ +

Zoom to: + + +

+ +

The timestamps must be specified as Javascript timestamps, as milliseconds since January 1, 1970 00:00. This is like Unix timestamps, but in milliseconds instead of seconds (remember to multiply with 1000!).

+ +

As an extra caveat, the timestamps are interpreted according to UTC and, by default, displayed as such. You can set the axis "timezone" option to "browser" to display the timestamps in the user's timezone, or, if you use timezoneJS, you can specify a time zone.

+ +
+ + + + + diff --git a/examples/background.png b/examples/background.png new file mode 100644 index 0000000..47a4a4c Binary files /dev/null and b/examples/background.png differ diff --git a/examples/basic-options/index.html b/examples/basic-options/index.html new file mode 100644 index 0000000..50f7031 --- /dev/null +++ b/examples/basic-options/index.html @@ -0,0 +1,91 @@ + + + + + Flot Examples: Basic Options + + + + + + + + + + +
+ +
+
+
+ +

There are plenty of options you can set to control the precise looks of your plot. You can control the ticks on the axes, the legend, the graph type, etc.

+ +

Flot goes to great lengths to provide sensible defaults so that you don't have to customize much for a good-looking result.

+ +
+ + + + + diff --git a/examples/basic-usage/index.html b/examples/basic-usage/index.html new file mode 100644 index 0000000..1764707 --- /dev/null +++ b/examples/basic-usage/index.html @@ -0,0 +1,57 @@ + + + + + Flot Examples: Basic Usage + + + + + + + + + + +
+ +
+
+
+ +

You don't have to do much to get an attractive plot. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.

+ +

The axes are automatically scaled.

+ +
+ + + + + diff --git a/examples/basic.html b/examples/basic.html deleted file mode 100644 index b116d94..0000000 --- a/examples/basic.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

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.

- - - - - diff --git a/examples/categories.html b/examples/categories.html deleted file mode 100644 index 05d8e17..0000000 --- a/examples/categories.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

With the categories plugin you can plot categories/textual data - easily.

- - - - - diff --git a/examples/categories/index.html b/examples/categories/index.html new file mode 100644 index 0000000..b96e131 --- /dev/null +++ b/examples/categories/index.html @@ -0,0 +1,64 @@ + + + + + Flot Examples: Categories + + + + + + + + + + + +
+ +
+
+
+ +

With the categories plugin you can plot categories/textual data easily.

+ +
+ + + + + + + + + + diff --git a/examples/errorbars.html b/examples/errorbars.html deleted file mode 100644 index ec177ae..0000000 --- a/examples/errorbars.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - Flot Examples - - - - - - - - - -

Flot Examples

- -
- -

With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.

- - - - - diff --git a/examples/examples.css b/examples/examples.css new file mode 100644 index 0000000..ae4135f --- /dev/null +++ b/examples/examples.css @@ -0,0 +1,97 @@ +* { padding: 0; margin: 0; vertical-align: top; } + +body { + background: url(background.png) repeat-x; + font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif; +} + +a { color: #069; } +a:hover { color: #28b; } + +h2 { + margin-top: 15px; + font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif; +} + +h3 { + margin-left: 10px; + font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif; + color: #666; +} + +p { + margin-top: 10px; +} + +button { + font-size: 18px; + padding: 1px 7px; +} + +input { + font-size: 18px; +} + +input[type=checkbox] { + margin: 7px; +} + +#header { + position: relative; + width: 900px; + margin: auto; +} + +#header h2 { + margin-left: 10px; + vertical-align: middle; + font-size: 48px; + font-weight: bold; + text-decoration: none; + color: #000; +} + +#content { + width: 880px; + margin: 0 auto; + padding: 10px; +} + +#footer { + margin-top: 25px; + margin-bottom: 10px; + text-align: center; + font-size: 12px; + color: #999; +} + +.demo-container { + box-sizing: border-box; + width: 900px; + height: 500px; + padding: 20px 15px 15px 15px; + margin: 15px auto 30px auto; + border: 1px solid #ddd; + background: #fff; + background: linear-gradient(#f6f6f6 0, #fff 50px); + background: -o-linear-gradient(#f6f6f6 0, #fff 50px); + background: -ms-linear-gradient(#f6f6f6 0, #fff 50px); + background: -moz-linear-gradient(#f6f6f6 0, #fff 50px); + background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px); + box-shadow: 0 3px 10px rgba(0,0,0,0.15); + -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1); + -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1); + -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1); + -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); +} + +#placeholder, #overview { + width: 100%; + height: 100%; + font-size: 14px; + line-height: 14px; +} + +.legend table { + border-spacing: 5px; +} \ No newline at end of file diff --git a/examples/graph-types.html b/examples/graph-types.html deleted file mode 100644 index dd21a31..0000000 --- a/examples/graph-types.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

Flot supports lines, points, filled areas, bars and any - combinations of these, in the same plot and even on the same data - series.

- - - - - diff --git a/examples/image.html b/examples/image.html deleted file mode 100644 index 073ad43..0000000 --- a/examples/image.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

The Cat's Eye Nebula (picture from Hubble).

- -

With the image plugin, you can plot images. This is for example - useful for getting ticks on complex prerendered visualizations. - Instead of inputting data points, you put in the images and where - their two opposite corners are supposed to be in plot space.

- -

Images represent a little further complication because you need - to make sure they are loaded before you can use them (Flot skips - incomplete images). The plugin comes with a couple of helpers - for doing that.

- - - - - diff --git a/examples/hs-2004-27-a-large_web.jpg b/examples/image/hs-2004-27-a-large-web.jpg similarity index 100% rename from examples/hs-2004-27-a-large_web.jpg rename to examples/image/hs-2004-27-a-large-web.jpg diff --git a/examples/image/index.html b/examples/image/index.html new file mode 100644 index 0000000..50c2968 --- /dev/null +++ b/examples/image/index.html @@ -0,0 +1,69 @@ + + + + + Flot Examples: Image Plots + + + + + + + + + + + +
+ +
+
+
+ +

The Cat's Eye Nebula (picture from Hubble).

+ +

With the image plugin, you can plot static images against a set of axes. This is for useful for adding ticks to complex prerendered visualizations. Instead of inputting data points, you specify the images and where their two opposite corners are supposed to be in plot space.

+ +

Images represent a little further complication because you need to make sure they are loaded before you can use them (Flot skips incomplete images). The plugin comes with a couple of helpers for doing that.

+ +
+ + + + + diff --git a/examples/index.html b/examples/index.html index 7cfb77a..be2cce0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,45 +1,79 @@ - + - - - Flot Examples - - - -

Flot Examples

- -

Here are some examples for Flot, the Javascript charting library for jQuery:

- - - -

Being interactive:

- - - -

Various features:

- - - + + + Flot Examples + + + + + + + + + + +
+ +

Here are some examples for Flot, the Javascript charting library for jQuery:

+ +

Basic Usage

+ + + +

Interactivity

+ + + +

Additional Features

+ + + +
+ + + + diff --git a/examples/interacting-axes.html b/examples/interacting-axes.html deleted file mode 100644 index 9995c26..0000000 --- a/examples/interacting-axes.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

With multiple axes, you sometimes need to interact with them. A - simple way to do this is to draw the plot, deduce the axis - placements and insert a couple of divs on top to catch events. - Try clicking an axis.

- -

- - - - diff --git a/examples/interacting.html b/examples/interacting.html deleted file mode 100644 index 7db829d..0000000 --- a/examples/interacting.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

One of the goals of Flot is to support user interactions. Try - pointing and clicking on the points.

- -

- - - -

- -

A tooltip is easy to build with a bit of jQuery code and the - data returned from the plot.

- -

- - - - - diff --git a/examples/interacting/index.html b/examples/interacting/index.html new file mode 100644 index 0000000..2d61a8b --- /dev/null +++ b/examples/interacting/index.html @@ -0,0 +1,130 @@ + + + + + Flot Examples: Interactivity + + + + + + + + + + +
+ +
+
+
+ +

One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.

+ +

+ + + +

+ +

A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.

+ +

+ +
+ + + + + diff --git a/examples/layout.css b/examples/layout.css deleted file mode 100644 index 7ef7dd4..0000000 --- a/examples/layout.css +++ /dev/null @@ -1,6 +0,0 @@ -body { - font-family: sans-serif; - font-size: 16px; - margin: 50px; - max-width: 800px; -} diff --git a/examples/multiple-axes.html b/examples/multiple-axes.html deleted file mode 100644 index fc4ba22..0000000 --- a/examples/multiple-axes.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

Multiple axis support showing the raw oil price in US $/barrel of - crude oil vs. the exchange rate from US $ to €.

- -

As illustrated, you can put in multiple axes if you - need to. For each data series, simply specify the axis number. - In the options, you can then configure where you want the extra - axes to appear.

- -

Position axis or .

- - - - diff --git a/examples/navigate.html b/examples/navigate.html deleted file mode 100644 index c916ef2..0000000 --- a/examples/navigate.html +++ /dev/null @@ -1,118 +0,0 @@ - - - - - Flot Examples - - - - - - - - -

Flot Examples

- -
- -

- -

With the navigate plugin it is easy to add panning and zooming. - Drag to pan, double click to zoom (or use the mouse scrollwheel).

- -

The plugin fires events (useful for synchronizing several - plots) and adds a couple of public methods so you can easily build - a little user interface around it, like the little buttons at the - top right in the plot.

- - - - - - diff --git a/examples/arrow-down.gif b/examples/navigate/arrow-down.gif similarity index 100% rename from examples/arrow-down.gif rename to examples/navigate/arrow-down.gif diff --git a/examples/arrow-left.gif b/examples/navigate/arrow-left.gif similarity index 100% rename from examples/arrow-left.gif rename to examples/navigate/arrow-left.gif diff --git a/examples/arrow-right.gif b/examples/navigate/arrow-right.gif similarity index 100% rename from examples/arrow-right.gif rename to examples/navigate/arrow-right.gif diff --git a/examples/arrow-up.gif b/examples/navigate/arrow-up.gif similarity index 100% rename from examples/arrow-up.gif rename to examples/navigate/arrow-up.gif diff --git a/examples/navigate/index.html b/examples/navigate/index.html new file mode 100644 index 0000000..272dcad --- /dev/null +++ b/examples/navigate/index.html @@ -0,0 +1,153 @@ + + + + + Flot Examples: Navigation + + + + + + + + + + + + +
+ +
+
+
+ +

+ +

With the navigate plugin it is easy to add panning and zooming. Drag to pan, double click to zoom (or use the mouse scrollwheel).

+ +

The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.

+ +
+ + + + + diff --git a/examples/percentiles.html b/examples/percentiles.html deleted file mode 100644 index 9f2ba3a..0000000 --- a/examples/percentiles.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

Height in centimeters of individuals from the US (2003-2006) as function of - age in years (source: CDC). - The 15%-85%, 25%-75% and 50% percentiles are indicated.

- -

For each point of a filled curve, you can specify an arbitrary - bottom. As this example illustrates, this can be useful for - plotting percentiles. If you have the data sets available without - appropriate fill bottoms, you can use the fillbetween plugin to - compute the data point bottoms automatically.

- - - - - diff --git a/examples/percentiles/index.html b/examples/percentiles/index.html new file mode 100644 index 0000000..cac1101 --- /dev/null +++ b/examples/percentiles/index.html @@ -0,0 +1,79 @@ + + + + + Flot Examples: Percentiles + + + + + + + + + + + +
+ +
+
+
+ +

Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: CDC). The 15%-85%, 25%-75% and 50% percentiles are indicated.

+ +

For each point of a filled curve, you can specify an arbitrary bottom. As this example illustrates, this can be useful for plotting percentiles. If you have the data sets available without appropriate fill bottoms, you can use the fillbetween plugin to compute the data point bottoms automatically.

+ +
+ + + + + diff --git a/examples/pie.html b/examples/pie.html deleted file mode 100644 index 4f8f16a..0000000 --- a/examples/pie.html +++ /dev/null @@ -1,767 +0,0 @@ - - - - - Flot Pie Examples - - - - - - - - - -

Flot Pie Examples

- -

Default with Legend

-
- - -

Default without Legend

-
- - -

Graph2

-
- - -

Graph3

-
- - -

Graph4

-
- - -

Graph5

-
- - -

Graph6

-
- - -

Graph7

-
- - -

Graph8

-
- - -

Graph9

-
- - -

Donut

-
- - -

Interactive

-
- - -

Pie Options

- - -

Changes/Features

- - - - - - diff --git a/examples/realtime.html b/examples/realtime.html deleted file mode 100644 index 3b427e1..0000000 --- a/examples/realtime.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

You can update a chart periodically to get a real-time effect - by using a timer to insert the new data in the plot and redraw it.

- -

Time between updates: milliseconds

- - - - - diff --git a/examples/realtime/index.html b/examples/realtime/index.html new file mode 100644 index 0000000..e965106 --- /dev/null +++ b/examples/realtime/index.html @@ -0,0 +1,122 @@ + + + + + Flot Examples: Real-time updates + + + + + + + + + + +
+ +
+
+
+ +

You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.

+ +

Time between updates: milliseconds

+ +
+ + + + + diff --git a/examples/resize.html b/examples/resize.html deleted file mode 100644 index d1e18c3..0000000 --- a/examples/resize.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Flot Examples - - - - - - - - -

Flot Examples

- -
- -

- -

Sometimes it makes more sense to just let the plot take up the - available space. In that case, we need to redraw the plot each - time the placeholder changes its size. If you include the resize - plugin, this is handled automatically.

- -

Try resizing the window.

- - - - - - diff --git a/examples/resize/index.html b/examples/resize/index.html new file mode 100644 index 0000000..9b1884c --- /dev/null +++ b/examples/resize/index.html @@ -0,0 +1,76 @@ + + + + + Flot Examples: Resizing + + + + + + + + + + + + + +
+ +
+
+
+ +

+ +

Sometimes it makes more sense to just let the plot take up the available space. In that case, we need to redraw the plot each time the placeholder changes its size. If you include the resize plugin, this is handled automatically.

+ +

Drag the bottom and right sides of the plot to resize it.

+ +
+ + + + + diff --git a/examples/selection.html b/examples/selection.html deleted file mode 100644 index 1646f5a..0000000 --- a/examples/selection.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

1000 kg. CO2 emissions per year per capita for various countries (source: Wikipedia).

- -

Flot supports selections through the selection plugin. - You can enable rectangular selection - or one-dimensional selection if the user should only be able to - select on one axis. Try left-click and drag on the plot above - where selection on the x axis is enabled.

- -

You selected:

- -

The plot command returns a plot object you can use to control - the selection. Click the buttons below.

- -

-

- -

Selections are really useful for zooming. Just replot the - chart with min and max values for the axes set to the values - in the "plotselected" event triggered. Enable the checkbox - below and select a region again.

- -

- - - - - diff --git a/examples/selection/index.html b/examples/selection/index.html new file mode 100644 index 0000000..7f20c7c --- /dev/null +++ b/examples/selection/index.html @@ -0,0 +1,141 @@ + + + + + Flot Examples: Selection + + + + + + + + + + + +
+ +
+
+
+ +

1000 kg. CO2 emissions per year per capita for various countries (source: Wikipedia).

+ +

Flot supports selections through the selection plugin. You can enable rectangular selection or one-dimensional selection if the user should only be able to select on one axis. Try left-click and drag on the plot above where selection on the x axis is enabled.

+ +

You selected:

+ +

The plot command returns a plot object you can use to control the selection. Click the buttons below.

+ +

+ + +

+ +

Selections are really useful for zooming. Just replot the chart with min and max values for the axes set to the values in the "plotselected" event triggered. Enable the checkbox below and select a region again.

+ +

+ +
+ + + + + diff --git a/examples/series-errorbars/index.html b/examples/series-errorbars/index.html new file mode 100644 index 0000000..41dab7f --- /dev/null +++ b/examples/series-errorbars/index.html @@ -0,0 +1,150 @@ + + + + + Flot Examples: Error Bars + + + + + + + + + + + + +
+ +
+
+
+ +

With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.

+ +
+ + + + + diff --git a/examples/series-pie/index.html b/examples/series-pie/index.html new file mode 100644 index 0000000..dc9fb07 --- /dev/null +++ b/examples/series-pie/index.html @@ -0,0 +1,818 @@ + + + + + Flot Examples: Pie Charts + + + + + + + + + + + + +
+ +

+
+
+ +
+ +

+ +

Source Code

+
+ +
+ +

Pie Options

+ + + +

Changes/Features

+ + +
+ + + + + diff --git a/examples/series-toggle/index.html b/examples/series-toggle/index.html new file mode 100644 index 0000000..c96bcc0 --- /dev/null +++ b/examples/series-toggle/index.html @@ -0,0 +1,121 @@ + + + + + Flot Examples: Toggling Series + + + + + + + + + + +
+ +
+
+

+
+ +

This example shows military budgets for various countries in constant (2005) million US dollars (source: SIPRI).

+ +

Since all data is available client-side, it's pretty easy to make the plot interactive. Try turning countries on and off with the checkboxes next to the plot.

+ +
+ + + + + diff --git a/examples/series-types/index.html b/examples/series-types/index.html new file mode 100644 index 0000000..6041dfb --- /dev/null +++ b/examples/series-types/index.html @@ -0,0 +1,90 @@ + + + + + Flot Examples: Series Types + + + + + + + + + + +
+ +
+
+
+ +

Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series.

+ +
+ + + + + diff --git a/examples/setting-options.html b/examples/setting-options.html deleted file mode 100644 index a977431..0000000 --- a/examples/setting-options.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

There are plenty of options you can set to control the precise looks of - your plot. You can control the ticks on the axes, the legend, the graph - type, etc. The idea is that Flot goes to great lengths to provide sensible - defaults so that you don't have to customize much for a good result.

- - - - - diff --git a/examples/shared/jquery-ui/jquery-ui.min.css b/examples/shared/jquery-ui/jquery-ui.min.css new file mode 100644 index 0000000..08331c1 --- /dev/null +++ b/examples/shared/jquery-ui/jquery-ui.min.css @@ -0,0 +1,6 @@ +/*! jQuery UI - v1.10.0 - 2013-01-26 +* http://jqueryui.com +* Includes: jquery.ui.core.css, jquery.ui.resizable.css +* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */ + +.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px} \ No newline at end of file diff --git a/examples/shared/jquery-ui/jquery-ui.min.js b/examples/shared/jquery-ui/jquery-ui.min.js new file mode 100644 index 0000000..8902282 --- /dev/null +++ b/examples/shared/jquery-ui/jquery-ui.min.js @@ -0,0 +1,6 @@ +/*! jQuery UI - v1.10.0 - 2013-01-26 +* http://jqueryui.com +* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.resizable.js +* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */ + +(function(e,t){function i(t,n){var r,i,o,u=t.nodeName.toLowerCase();return"area"===u?(r=t.parentNode,i=r.name,!t.href||!i||r.nodeName.toLowerCase()!=="map"?!1:(o=e("img[usemap=#"+i+"]")[0],!!o&&s(o))):(/input|select|textarea|button|object/.test(u)?!t.disabled:"a"===u?t.href||n:n)&&s(t)}function s(t){return e.expr.filters.visible(t)&&!e(t).parents().addBack().filter(function(){return e.css(this,"visibility")==="hidden"}).length}var n=0,r=/^ui-id-\d+$/;e.ui=e.ui||{};if(e.ui.version)return;e.extend(e.ui,{version:"1.10.0",keyCode:{BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SPACE:32,TAB:9,UP:38}}),e.fn.extend({_focus:e.fn.focus,focus:function(t,n){return typeof t=="number"?this.each(function(){var r=this;setTimeout(function(){e(r).focus(),n&&n.call(r)},t)}):this._focus.apply(this,arguments)},scrollParent:function(){var t;return e.ui.ie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?t=this.parents().filter(function(){return/(relative|absolute|fixed)/.test(e.css(this,"position"))&&/(auto|scroll)/.test(e.css(this,"overflow")+e.css(this,"overflow-y")+e.css(this,"overflow-x"))}).eq(0):t=this.parents().filter(function(){return/(auto|scroll)/.test(e.css(this,"overflow")+e.css(this,"overflow-y")+e.css(this,"overflow-x"))}).eq(0),/fixed/.test(this.css("position"))||!t.length?e(document):t},zIndex:function(n){if(n!==t)return this.css("zIndex",n);if(this.length){var r=e(this[0]),i,s;while(r.length&&r[0]!==document){i=r.css("position");if(i==="absolute"||i==="relative"||i==="fixed"){s=parseInt(r.css("zIndex"),10);if(!isNaN(s)&&s!==0)return s}r=r.parent()}}return 0},uniqueId:function(){return this.each(function(){this.id||(this.id="ui-id-"+ ++n)})},removeUniqueId:function(){return this.each(function(){r.test(this.id)&&e(this).removeAttr("id")})}}),e.extend(e.expr[":"],{data:e.expr.createPseudo?e.expr.createPseudo(function(t){return function(n){return!!e.data(n,t)}}):function(t,n,r){return!!e.data(t,r[3])},focusable:function(t){return i(t,!isNaN(e.attr(t,"tabindex")))},tabbable:function(t){var n=e.attr(t,"tabindex"),r=isNaN(n);return(r||n>=0)&&i(t,!r)}}),e("").outerWidth(1).jquery||e.each(["Width","Height"],function(n,r){function u(t,n,r,s){return e.each(i,function(){n-=parseFloat(e.css(t,"padding"+this))||0,r&&(n-=parseFloat(e.css(t,"border"+this+"Width"))||0),s&&(n-=parseFloat(e.css(t,"margin"+this))||0)}),n}var i=r==="Width"?["Left","Right"]:["Top","Bottom"],s=r.toLowerCase(),o={innerWidth:e.fn.innerWidth,innerHeight:e.fn.innerHeight,outerWidth:e.fn.outerWidth,outerHeight:e.fn.outerHeight};e.fn["inner"+r]=function(n){return n===t?o["inner"+r].call(this):this.each(function(){e(this).css(s,u(this,n)+"px")})},e.fn["outer"+r]=function(t,n){return typeof t!="number"?o["outer"+r].call(this,t):this.each(function(){e(this).css(s,u(this,t,!0,n)+"px")})}}),e.fn.addBack||(e.fn.addBack=function(e){return this.add(e==null?this.prevObject:this.prevObject.filter(e))}),e("").data("a-b","a").removeData("a-b").data("a-b")&&(e.fn.removeData=function(t){return function(n){return arguments.length?t.call(this,e.camelCase(n)):t.call(this)}}(e.fn.removeData)),e.ui.ie=!!/msie [\w.]+/.exec(navigator.userAgent.toLowerCase()),e.support.selectstart="onselectstart"in document.createElement("div"),e.fn.extend({disableSelection:function(){return this.bind((e.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(e){e.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}}),e.extend(e.ui,{plugin:{add:function(t,n,r){var i,s=e.ui[t].prototype;for(i in r)s.plugins[i]=s.plugins[i]||[],s.plugins[i].push([n,r[i]])},call:function(e,t,n){var r,i=e.plugins[t];if(!i||!e.element[0].parentNode||e.element[0].parentNode.nodeType===11)return;for(r=0;r0?!0:(t[r]=1,i=t[r]>0,t[r]=0,i)}})})(jQuery);(function(e,t){var n=0,r=Array.prototype.slice,i=e.cleanData;e.cleanData=function(t){for(var n=0,r;(r=t[n])!=null;n++)try{e(r).triggerHandler("remove")}catch(s){}i(t)},e.widget=function(t,n,r){var i,s,o,u,a={},f=t.split(".")[0];t=t.split(".")[1],i=f+"-"+t,r||(r=n,n=e.Widget),e.expr[":"][i.toLowerCase()]=function(t){return!!e.data(t,i)},e[f]=e[f]||{},s=e[f][t],o=e[f][t]=function(e,t){if(!this._createWidget)return new o(e,t);arguments.length&&this._createWidget(e,t)},e.extend(o,s,{version:r.version,_proto:e.extend({},r),_childConstructors:[]}),u=new n,u.options=e.widget.extend({},u.options),e.each(r,function(t,r){if(!e.isFunction(r)){a[t]=r;return}a[t]=function(){var e=function(){return n.prototype[t].apply(this,arguments)},i=function(e){return n.prototype[t].apply(this,e)};return function(){var t=this._super,n=this._superApply,s;return this._super=e,this._superApply=i,s=r.apply(this,arguments),this._super=t,this._superApply=n,s}}()}),o.prototype=e.widget.extend(u,{widgetEventPrefix:s?u.widgetEventPrefix:t},a,{constructor:o,namespace:f,widgetName:t,widgetFullName:i}),s?(e.each(s._childConstructors,function(t,n){var r=n.prototype;e.widget(r.namespace+"."+r.widgetName,o,n._proto)}),delete s._childConstructors):n._childConstructors.push(o),e.widget.bridge(t,o)},e.widget.extend=function(n){var i=r.call(arguments,1),s=0,o=i.length,u,a;for(;s",options:{disabled:!1,create:null},_createWidget:function(t,r){r=e(r||this.defaultElement||this)[0],this.element=e(r),this.uuid=n++,this.eventNamespace="."+this.widgetName+this.uuid,this.options=e.widget.extend({},this.options,this._getCreateOptions(),t),this.bindings=e(),this.hoverable=e(),this.focusable=e(),r!==this&&(e.data(r,this.widgetFullName,this),this._on(!0,this.element,{remove:function(e){e.target===r&&this.destroy()}}),this.document=e(r.style?r.ownerDocument:r.document||r),this.window=e(this.document[0].defaultView||this.document[0].parentWindow)),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:e.noop,_getCreateEventData:e.noop,_create:e.noop,_init:e.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetName).removeData(this.widgetFullName).removeData(e.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled "+"ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:e.noop,widget:function(){return this.element},option:function(n,r){var i=n,s,o,u;if(arguments.length===0)return e.widget.extend({},this.options);if(typeof n=="string"){i={},s=n.split("."),n=s.shift();if(s.length){o=i[n]=e.widget.extend({},this.options[n]);for(u=0;u=this.options.distance},_mouseDelayMet:function(){return this.mouseDelayMet},_mouseStart:function(){},_mouseDrag:function(){},_mouseStop:function(){},_mouseCapture:function(){return!0}})})(jQuery);(function(e,t){function n(e){return parseInt(e,10)||0}function r(e){return!isNaN(parseInt(e,10))}e.widget("ui.resizable",e.ui.mouse,{version:"1.10.0",widgetEventPrefix:"resize",options:{alsoResize:!1,animate:!1,animateDuration:"slow",animateEasing:"swing",aspectRatio:!1,autoHide:!1,containment:!1,ghost:!1,grid:!1,handles:"e,s,se",helper:!1,maxHeight:null,maxWidth:null,minHeight:10,minWidth:10,zIndex:90,resize:null,start:null,stop:null},_create:function(){var t,n,r,i,s,o=this,u=this.options;this.element.addClass("ui-resizable"),e.extend(this,{_aspectRatio:!!u.aspectRatio,aspectRatio:u.aspectRatio,originalElement:this.element,_proportionallyResizeElements:[],_helper:u.helper||u.ghost||u.animate?u.helper||"ui-resizable-helper":null}),this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)&&(this.element.wrap(e("
").css({position:this.element.css("position"),width:this.element.outerWidth(),height:this.element.outerHeight(),top:this.element.css("top"),left:this.element.css("left")})),this.element=this.element.parent().data("ui-resizable",this.element.data("ui-resizable")),this.elementIsWrapper=!0,this.element.css({marginLeft:this.originalElement.css("marginLeft"),marginTop:this.originalElement.css("marginTop"),marginRight:this.originalElement.css("marginRight"),marginBottom:this.originalElement.css("marginBottom")}),this.originalElement.css({marginLeft:0,marginTop:0,marginRight:0,marginBottom:0}),this.originalResizeStyle=this.originalElement.css("resize"),this.originalElement.css("resize","none"),this._proportionallyResizeElements.push(this.originalElement.css({position:"static",zoom:1,display:"block"})),this.originalElement.css({margin:this.originalElement.css("margin")}),this._proportionallyResize()),this.handles=u.handles||(e(".ui-resizable-handle",this.element).length?{n:".ui-resizable-n",e:".ui-resizable-e",s:".ui-resizable-s",w:".ui-resizable-w",se:".ui-resizable-se",sw:".ui-resizable-sw",ne:".ui-resizable-ne",nw:".ui-resizable-nw"}:"e,s,se");if(this.handles.constructor===String){this.handles==="all"&&(this.handles="n,e,s,w,se,sw,ne,nw"),t=this.handles.split(","),this.handles={};for(n=0;n"),i.css({zIndex:u.zIndex}),"se"===r&&i.addClass("ui-icon ui-icon-gripsmall-diagonal-se"),this.handles[r]=".ui-resizable-"+r,this.element.append(i)}this._renderAxis=function(t){var n,r,i,s;t=t||this.element;for(n in this.handles){this.handles[n].constructor===String&&(this.handles[n]=e(this.handles[n],this.element).show()),this.elementIsWrapper&&this.originalElement[0].nodeName.match(/textarea|input|select|button/i)&&(r=e(this.handles[n],this.element),s=/sw|ne|nw|se|n|s/.test(n)?r.outerHeight():r.outerWidth(),i=["padding",/ne|nw|n/.test(n)?"Top":/se|sw|s/.test(n)?"Bottom":/^e$/.test(n)?"Right":"Left"].join(""),t.css(i,s),this._proportionallyResize());if(!e(this.handles[n]).length)continue}},this._renderAxis(this.element),this._handles=e(".ui-resizable-handle",this.element).disableSelection(),this._handles.mouseover(function(){o.resizing||(this.className&&(i=this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i)),o.axis=i&&i[1]?i[1]:"se")}),u.autoHide&&(this._handles.hide(),e(this.element).addClass("ui-resizable-autohide").mouseenter(function(){if(u.disabled)return;e(this).removeClass("ui-resizable-autohide"),o._handles.show()}).mouseleave(function(){if(u.disabled)return;o.resizing||(e(this).addClass("ui-resizable-autohide"),o._handles.hide())})),this._mouseInit()},_destroy:function(){this._mouseDestroy();var t,n=function(t){e(t).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing").removeData("resizable").removeData("ui-resizable").unbind(".resizable").find(".ui-resizable-handle").remove()};return this.elementIsWrapper&&(n(this.element),t=this.element,this.originalElement.css({position:t.css("position"),width:t.outerWidth(),height:t.outerHeight(),top:t.css("top"),left:t.css("left")}).insertAfter(t),t.remove()),this.originalElement.css("resize",this.originalResizeStyle),n(this.originalElement),this},_mouseCapture:function(t){var n,r,i=!1;for(n in this.handles){r=e(this.handles[n])[0];if(r===t.target||e.contains(r,t.target))i=!0}return!this.options.disabled&&i},_mouseStart:function(t){var r,i,s,o=this.options,u=this.element.position(),a=this.element;return this.resizing=!0,/absolute/.test(a.css("position"))?a.css({position:"absolute",top:a.css("top"),left:a.css("left")}):a.is(".ui-draggable")&&a.css({position:"absolute",top:u.top,left:u.left}),this._renderProxy(),r=n(this.helper.css("left")),i=n(this.helper.css("top")),o.containment&&(r+=e(o.containment).scrollLeft()||0,i+=e(o.containment).scrollTop()||0),this.offset=this.helper.offset(),this.position={left:r,top:i},this.size=this._helper?{width:a.outerWidth(),height:a.outerHeight()}:{width:a.width(),height:a.height()},this.originalSize=this._helper?{width:a.outerWidth(),height:a.outerHeight()}:{width:a.width(),height:a.height()},this.originalPosition={left:r,top:i},this.sizeDiff={width:a.outerWidth()-a.width(),height:a.outerHeight()-a.height()},this.originalMousePosition={left:t.pageX,top:t.pageY},this.aspectRatio=typeof o.aspectRatio=="number"?o.aspectRatio:this.originalSize.width/this.originalSize.height||1,s=e(".ui-resizable-"+this.axis).css("cursor"),e("body").css("cursor",s==="auto"?this.axis+"-resize":s),a.addClass("ui-resizable-resizing"),this._propagate("start",t),!0},_mouseDrag:function(t){var n,r=this.helper,i={},s=this.originalMousePosition,o=this.axis,u=this.position.top,a=this.position.left,f=this.size.width,l=this.size.height,c=t.pageX-s.left||0,h=t.pageY-s.top||0,p=this._change[o];if(!p)return!1;n=p.apply(this,[t,c,h]),this._updateVirtualBoundaries(t.shiftKey);if(this._aspectRatio||t.shiftKey)n=this._updateRatio(n,t);return n=this._respectSize(n,t),this._updateCache(n),this._propagate("resize",t),this.position.top!==u&&(i.top=this.position.top+"px"),this.position.left!==a&&(i.left=this.position.left+"px"),this.size.width!==f&&(i.width=this.size.width+"px"),this.size.height!==l&&(i.height=this.size.height+"px"),r.css(i),!this._helper&&this._proportionallyResizeElements.length&&this._proportionallyResize(),e.isEmptyObject(i)||this._trigger("resize",t,this.ui()),!1},_mouseStop:function(t){this.resizing=!1;var n,r,i,s,o,u,a,f=this.options,l=this;return this._helper&&(n=this._proportionallyResizeElements,r=n.length&&/textarea/i.test(n[0].nodeName),i=r&&e.ui.hasScroll(n[0],"left")?0:l.sizeDiff.height,s=r?0:l.sizeDiff.width,o={width:l.helper.width()-s,height:l.helper.height()-i},u=parseInt(l.element.css("left"),10)+(l.position.left-l.originalPosition.left)||null,a=parseInt(l.element.css("top"),10)+(l.position.top-l.originalPosition.top)||null,f.animate||this.element.css(e.extend(o,{top:a,left:u})),l.helper.height(l.size.height),l.helper.width(l.size.width),this._helper&&!f.animate&&this._proportionallyResize()),e("body").css("cursor","auto"),this.element.removeClass("ui-resizable-resizing"),this._propagate("stop",t),this._helper&&this.helper.remove(),!1},_updateVirtualBoundaries:function(e){var t,n,i,s,o,u=this.options;o={minWidth:r(u.minWidth)?u.minWidth:0,maxWidth:r(u.maxWidth)?u.maxWidth:Infinity,minHeight:r(u.minHeight)?u.minHeight:0,maxHeight:r(u.maxHeight)?u.maxHeight:Infinity};if(this._aspectRatio||e)t=o.minHeight*this.aspectRatio,i=o.minWidth/this.aspectRatio,n=o.maxHeight*this.aspectRatio,s=o.maxWidth/this.aspectRatio,t>o.minWidth&&(o.minWidth=t),i>o.minHeight&&(o.minHeight=i),ne.width,u=r(e.height)&&t.minHeight&&t.minHeight>e.height,a=this.originalPosition.left+this.originalSize.width,f=this.position.top+this.size.height,l=/sw|nw|w/.test(n),c=/nw|ne|n/.test(n);return o&&(e.width=t.minWidth),u&&(e.height=t.minHeight),i&&(e.width=t.maxWidth),s&&(e.height=t.maxHeight),o&&l&&(e.left=a-t.minWidth),i&&l&&(e.left=a-t.maxWidth),u&&c&&(e.top=f-t.minHeight),s&&c&&(e.top=f-t.maxHeight),!e.width&&!e.height&&!e.left&&e.top?e.top=null:!e.width&&!e.height&&!e.top&&e.left&&(e.left=null),e},_proportionallyResize:function(){if(!this._proportionallyResizeElements.length)return;var e,t,n,r,i,s=this.helper||this.element;for(e=0;e"),this.helper.addClass(this._helper).css({width:this.element.outerWidth()-1,height:this.element.outerHeight()-1,position:"absolute",left:this.elementOffset.left+"px",top:this.elementOffset.top+"px",zIndex:++n.zIndex}),this.helper.appendTo("body").disableSelection()):this.helper=this.element},_change:{e:function(e,t){return{width:this.originalSize.width+t}},w:function(e,t){var n=this.originalSize,r=this.originalPosition;return{left:r.left+t,width:n.width-t}},n:function(e,t,n){var r=this.originalSize,i=this.originalPosition;return{top:i.top+n,height:r.height-n}},s:function(e,t,n){return{height:this.originalSize.height+n}},se:function(t,n,r){return e.extend(this._change.s.apply(this,arguments),this._change.e.apply(this,[t,n,r]))},sw:function(t,n,r){return e.extend(this._change.s.apply(this,arguments),this._change.w.apply(this,[t,n,r]))},ne:function(t,n,r){return e.extend(this._change.n.apply(this,arguments),this._change.e.apply(this,[t,n,r]))},nw:function(t,n,r){return e.extend(this._change.n.apply(this,arguments),this._change.w.apply(this,[t,n,r]))}},_propagate:function(t,n){e.ui.plugin.call(this,t,[n,this.ui()]),t!=="resize"&&this._trigger(t,n,this.ui())},plugins:{},ui:function(){return{originalElement:this.originalElement,element:this.element,helper:this.helper,position:this.position,size:this.size,originalSize:this.originalSize,originalPosition:this.originalPosition}}}),e.ui.plugin.add("resizable","animate",{stop:function(t){var n=e(this).data("ui-resizable"),r=n.options,i=n._proportionallyResizeElements,s=i.length&&/textarea/i.test(i[0].nodeName),o=s&&e.ui.hasScroll(i[0],"left")?0:n.sizeDiff.height,u=s?0:n.sizeDiff.width,a={width:n.size.width-u,height:n.size.height-o},f=parseInt(n.element.css("left"),10)+(n.position.left-n.originalPosition.left)||null,l=parseInt(n.element.css("top"),10)+(n.position.top-n.originalPosition.top)||null;n.element.animate(e.extend(a,l&&f?{top:l,left:f}:{}),{duration:r.animateDuration,easing:r.animateEasing,step:function(){var r={width:parseInt(n.element.css("width"),10),height:parseInt(n.element.css("height"),10),top:parseInt(n.element.css("top"),10),left:parseInt(n.element.css("left"),10)};i&&i.length&&e(i[0]).css({width:r.width,height:r.height}),n._updateCache(r),n._propagate("resize",t)}})}}),e.ui.plugin.add("resizable","containment",{start:function(){var t,r,i,s,o,u,a,f=e(this).data("ui-resizable"),l=f.options,c=f.element,h=l.containment,p=h instanceof e?h.get(0):/parent/.test(h)?c.parent().get(0):h;if(!p)return;f.containerElement=e(p),/document/.test(h)||h===document?(f.containerOffset={left:0,top:0},f.containerPosition={left:0,top:0},f.parentData={element:e(document),left:0,top:0,width:e(document).width(),height:e(document).height()||document.body.parentNode.scrollHeight}):(t=e(p),r=[],e(["Top","Right","Left","Bottom"]).each(function(e,i){r[e]=n(t.css("padding"+i))}),f.containerOffset=t.offset(),f.containerPosition=t.position(),f.containerSize={height:t.innerHeight()-r[3],width:t.innerWidth()-r[1]},i=f.containerOffset,s=f.containerSize.height,o=f.containerSize.width,u=e.ui.hasScroll(p,"left")?p.scrollWidth:o,a=e.ui.hasScroll(p)?p.scrollHeight:s,f.parentData={element:p,left:i.left,top:i.top,width:u,height:a})},resize:function(t){var n,r,i,s,o=e(this).data("ui-resizable"),u=o.options,a=o.containerOffset,f=o.position,l=o._aspectRatio||t.shiftKey,c={top:0,left:0},h=o.containerElement;h[0]!==document&&/static/.test(h.css("position"))&&(c=a),f.left<(o._helper?a.left:0)&&(o.size.width=o.size.width+(o._helper?o.position.left-a.left:o.position.left-c.left),l&&(o.size.height=o.size.width/o.aspectRatio),o.position.left=u.helper?a.left:0),f.top<(o._helper?a.top:0)&&(o.size.height=o.size.height+(o._helper?o.position.top-a.top:o.position.top),l&&(o.size.width=o.size.height*o.aspectRatio),o.position.top=o._helper?a.top:0),o.offset.left=o.parentData.left+o.position.left,o.offset.top=o.parentData.top+o.position.top,n=Math.abs((o._helper?o.offset.left-c.left:o.offset.left-c.left)+o.sizeDiff.width),r=Math.abs((o._helper?o.offset.top-c.top:o.offset.top-a.top)+o.sizeDiff.height),i=o.containerElement.get(0)===o.element.parent().get(0),s=/relative|absolute/.test(o.containerElement.css("position")),i&&s&&(n-=o.parentData.left),n+o.size.width>=o.parentData.width&&(o.size.width=o.parentData.width-n,l&&(o.size.height=o.size.width/o.aspectRatio)),r+o.size.height>=o.parentData.height&&(o.size.height=o.parentData.height-r,l&&(o.size.width=o.size.height*o.aspectRatio))},stop:function(){var t=e(this).data("ui-resizable"),n=t.options,r=t.containerOffset,i=t.containerPosition,s=t.containerElement,o=e(t.helper),u=o.offset(),a=o.outerWidth()-t.sizeDiff.width,f=o.outerHeight()-t.sizeDiff.height;t._helper&&!n.animate&&/relative/.test(s.css("position"))&&e(this).css({left:u.left-i.left-r.left,width:a,height:f}),t._helper&&!n.animate&&/static/.test(s.css("position"))&&e(this).css({left:u.left-i.left-r.left,width:a,height:f})}}),e.ui.plugin.add("resizable","alsoResize",{start:function(){var t=e(this).data("ui-resizable"),n=t.options,r=function(t){e(t).each(function(){var t=e(this);t.data("ui-resizable-alsoresize",{width:parseInt(t.width(),10),height:parseInt(t.height(),10),left:parseInt(t.css("left"),10),top:parseInt(t.css("top"),10)})})};typeof n.alsoResize=="object"&&!n.alsoResize.parentNode?n.alsoResize.length?(n.alsoResize=n.alsoResize[0],r(n.alsoResize)):e.each(n.alsoResize,function(e){r(e)}):r(n.alsoResize)},resize:function(t,n){var r=e(this).data("ui-resizable"),i=r.options,s=r.originalSize,o=r.originalPosition,u={height:r.size.height-s.height||0,width:r.size.width-s.width||0,top:r.position.top-o.top||0,left:r.position.left-o.left||0},a=function(t,r){e(t).each(function(){var t=e(this),i=e(this).data("ui-resizable-alsoresize"),s={},o=r&&r.length?r:t.parents(n.originalElement[0]).length?["width","height"]:["width","height","top","left"];e.each(o,function(e,t){var n=(i[t]||0)+(u[t]||0);n&&n>=0&&(s[t]=n||null)}),t.css(s)})};typeof i.alsoResize=="object"&&!i.alsoResize.nodeType?e.each(i.alsoResize,function(e,t){a(e,t)}):a(i.alsoResize)},stop:function(){e(this).removeData("resizable-alsoresize")}}),e.ui.plugin.add("resizable","ghost",{start:function(){var t=e(this).data("ui-resizable"),n=t.options,r=t.size;t.ghost=t.originalElement.clone(),t.ghost.css({opacity:.25,display:"block",position:"relative",height:r.height,width:r.width,margin:0,left:0,top:0}).addClass("ui-resizable-ghost").addClass(typeof n.ghost=="string"?n.ghost:""),t.ghost.appendTo(t.helper)},resize:function(){var t=e(this).data("ui-resizable");t.ghost&&t.ghost.css({position:"relative",height:t.size.height,width:t.size.width})},stop:function(){var t=e(this).data("ui-resizable");t.ghost&&t.helper&&t.helper.get(0).removeChild(t.ghost.get(0))}}),e.ui.plugin.add("resizable","grid",{resize:function(){var t=e(this).data("ui-resizable"),n=t.options,r=t.size,i=t.originalSize,s=t.originalPosition,o=t.axis,u=typeof n.grid=="number"?[n.grid,n.grid]:n.grid,a=u[0]||1,f=u[1]||1,l=Math.round((r.width-i.width)/a)*a,c=Math.round((r.height-i.height)/f)*f,h=i.width+l,p=i.height+c,d=n.maxWidth&&n.maxWidthh,g=n.minHeight&&n.minHeight>p;n.grid=u,m&&(h+=a),g&&(p+=f),d&&(h-=a),v&&(p-=f),/^(se|s|e)$/.test(o)?(t.size.width=h,t.size.height=p):/^(ne)$/.test(o)?(t.size.width=h,t.size.height=p,t.position.top=s.top-c):/^(sw)$/.test(o)?(t.size.width=h,t.size.height=p,t.position.left=s.left-l):(t.size.width=h,t.size.height=p,t.position.top=s.top-c,t.position.left=s.left-l)}})})(jQuery); \ No newline at end of file diff --git a/examples/stacking.html b/examples/stacking.html deleted file mode 100644 index b7de391..0000000 --- a/examples/stacking.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

With the stack plugin, you can have Flot stack the - series. This is useful if you wish to display both a total and the - constituents it is made of. The only requirement is that you provide - the input sorted on x.

- -

- - -

- -

- - - -

- - - - - diff --git a/examples/stacking/index.html b/examples/stacking/index.html new file mode 100644 index 0000000..ba8ddda --- /dev/null +++ b/examples/stacking/index.html @@ -0,0 +1,107 @@ + + + + + Flot Examples: Stacking + + + + + + + + + + + +
+ +
+
+
+ +

With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of. The only requirement is that you provide the input sorted on x.

+ +

+ + +

+ +

+ + + +

+ +
+ + + + + diff --git a/examples/symbols.html b/examples/symbols.html deleted file mode 100644 index e71b1aa..0000000 --- a/examples/symbols.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

Various point types. Circles are built-in. For other - point types, you can define a little callback function to draw the - symbol; some common ones are available in the symbol plugin.

- - - - - diff --git a/examples/symbols/index.html b/examples/symbols/index.html new file mode 100644 index 0000000..a02e887 --- /dev/null +++ b/examples/symbols/index.html @@ -0,0 +1,76 @@ + + + + + Flot Examples: Symbols + + + + + + + + + + + +
+ +
+
+
+ +

Points can be marked in several ways, with circles being the built-in default. For other point types, you can define a callback function to draw the symbol. Some common symbols are available in the symbol plugin.

+ +
+ + + + + diff --git a/examples/threshold/index.html b/examples/threshold/index.html new file mode 100644 index 0000000..ce36d18 --- /dev/null +++ b/examples/threshold/index.html @@ -0,0 +1,76 @@ + + + + + Flot Examples: Thresholds + + + + + + + + + + + +
+ +
+
+
+ +

With the threshold plugin, you can apply a specific color to the part of a data series below a threshold. This is can be useful for highlighting negative values, e.g. when displaying net results or what's in stock.

+ +

+ + + +

+ +
+ + + + + diff --git a/examples/thresholding.html b/examples/thresholding.html deleted file mode 100644 index f10144a..0000000 --- a/examples/thresholding.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

With the threshold plugin, you can apply a specific color to - the part of a data series below a threshold. This is can be useful - for highlighting negative values, e.g. when displaying net results - or what's in stock.

- -

- - - -

- - - - - diff --git a/examples/time.html b/examples/time.html deleted file mode 100644 index 0c66c37..0000000 --- a/examples/time.html +++ /dev/null @@ -1,122 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

Monthly mean atmospheric CO2 in PPM at Mauna Loa, Hawaii (source: NOAA/ESRL).

- -

If you tell Flot that an axis represents time, the data will - be interpreted as timestamps and the ticks adjusted and - formatted accordingly.

- -

Zoom to: - - - - - -

- -

The timestamps must be specified as Javascript timestamps, as - milliseconds since January 1, 1970 00:00. This is like Unix - timestamps, but in milliseconds instead of seconds (remember to - multiply with 1000!).

- -

As an extra caveat, the timestamps are interpreted according to - UTC and, by default, displayed as such. You can set the axis - "timezone" option to "browser" to display the timestamps in the - user's timezone, or, if you use timezoneJS, you can specify a - time zone.

- - - - - diff --git a/examples/timezones.html b/examples/timezones.html deleted file mode 100644 index 97c4bd9..0000000 --- a/examples/timezones.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - Flot Example - - - - - - - - - -

Timezone Examples

- - - - -
UTC
Browser
Chicago
- - - - - diff --git a/examples/tracking.html b/examples/tracking.html deleted file mode 100644 index c116159..0000000 --- a/examples/tracking.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

You can add crosshairs that'll track the mouse position, either - on both axes or as here on only one.

- -

If you combine it with listening on hover events, you can use - it to track the intersection on the curves by interpolating - the data points (look at the legend).

- -

- - - - - diff --git a/examples/tracking/index.html b/examples/tracking/index.html new file mode 100644 index 0000000..289ab05 --- /dev/null +++ b/examples/tracking/index.html @@ -0,0 +1,135 @@ + + + + + Flot Examples: Tracking + + + + + + + + + + + +
+ +
+
+
+ +

You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.

+ +

If you combine it with listening on hover events, you can use it to track the intersection on the curves by interpolating the data points (look at the legend).

+ +

+ +
+ + + + + diff --git a/examples/turning-series.html b/examples/turning-series.html deleted file mode 100644 index bc6fd9f..0000000 --- a/examples/turning-series.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - Flot Examples - - - - - - -

Flot Examples

- -
- -

Here is an example with real data: military budgets for - various countries in constant (2005) million US dollars (source: SIPRI).

- -

Since all data is available client-side, it's pretty easy to - make the plot interactive. Try turning countries on/off with the - checkboxes below.

- -

Show:

- - - - - diff --git a/examples/visitors.html b/examples/visitors.html deleted file mode 100644 index 51ad059..0000000 --- a/examples/visitors.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - Flot Examples - - - - - - - - -

Flot Examples

- -
- -

Visitors per day to the Flot homepage. Weekends are colored. Try zooming. - The plot below shows an overview.

- -
- - - - - diff --git a/examples/visitors/index.html b/examples/visitors/index.html new file mode 100644 index 0000000..2efd58e --- /dev/null +++ b/examples/visitors/index.html @@ -0,0 +1,146 @@ + + + + + Flot Examples: Visitors + + + + + + + + + + + + +
+ +
+
+
+ +
+
+
+ +

This plot shows visitors per day to the Flot homepage, with weekends colored.

+ +

The smaller plot is linked to the main plot, so it acts as an overview. Try dragging a selection on either plot, and watch the behavior of the other.

+ +
+ + + + + diff --git a/examples/zooming.html b/examples/zooming.html deleted file mode 100644 index 9a4ef22..0000000 --- a/examples/zooming.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - Flot Examples - - - - - - - -

Flot Examples

- -
-
-
- -
-
- -

-
- -

The selection support makes it easy to - construct flexible zooming schemes. With a few lines of code, the - small overview plot to the right has been connected to the large - plot. Try selecting a rectangle on either of them.

- - - - - diff --git a/examples/zooming/index.html b/examples/zooming/index.html new file mode 100644 index 0000000..0c35b92 --- /dev/null +++ b/examples/zooming/index.html @@ -0,0 +1,144 @@ + + + + + Flot Examples: Selection and zooming + + + + + + + + + + + +
+ +
+
+
+
+ +

Selection support makes it easy to construct flexible zooming schemes. With a few lines of code, the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.

+ +
+ + + + +