From 7385ff9506ea6db4c07150ee1b56e436cf384918 Mon Sep 17 00:00:00 2001 From: Frank Wuerthwein Date: Thu, 25 Sep 2008 06:12:15 -0400 Subject: flot-0.5 --- examples/basic.html | 38 +++++++++++++++ examples/dual-axis.html | 38 +++++++++++++++ examples/graph-types.html | 67 ++++++++++++++++++++++++++ examples/index.html | 26 ++++++++++ examples/interacting.html | 92 ++++++++++++++++++++++++++++++++++++ examples/layout.css | 5 ++ examples/selection.html | 107 ++++++++++++++++++++++++++++++++++++++++++ examples/setting-options.html | 63 +++++++++++++++++++++++++ examples/time.html | 67 ++++++++++++++++++++++++++ examples/turning-series.html | 96 +++++++++++++++++++++++++++++++++++++ examples/visitors.html | 87 ++++++++++++++++++++++++++++++++++ examples/zooming.html | 91 +++++++++++++++++++++++++++++++++++ 12 files changed, 777 insertions(+) create mode 100644 examples/basic.html create mode 100644 examples/dual-axis.html create mode 100644 examples/graph-types.html create mode 100644 examples/index.html create mode 100644 examples/interacting.html create mode 100644 examples/layout.css create mode 100644 examples/selection.html create mode 100644 examples/setting-options.html create mode 100644 examples/time.html create mode 100644 examples/turning-series.html create mode 100644 examples/visitors.html create mode 100644 examples/zooming.html (limited to 'examples') diff --git a/examples/basic.html b/examples/basic.html new file mode 100644 index 0000000..afd7ac1 --- /dev/null +++ b/examples/basic.html @@ -0,0 +1,38 @@ + + + + + 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/dual-axis.html b/examples/dual-axis.html new file mode 100644 index 0000000..d97fa8a --- /dev/null +++ b/examples/dual-axis.html @@ -0,0 +1,38 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +

Dual axis support showing the raw oil price in US $/barrel of + crude oil (left axis) vs. the exchange rate from US $ to € (right + axis).

+ +

As illustrated, you can put in secondary y and x axes if you + need to. For each data series, simply specify the axis number.

+ + + + diff --git a/examples/graph-types.html b/examples/graph-types.html new file mode 100644 index 0000000..64aa0e9 --- /dev/null +++ b/examples/graph-types.html @@ -0,0 +1,67 @@ + + + + + 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/index.html b/examples/index.html new file mode 100644 index 0000000..36ae0a1 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,26 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +

Here are some examples for Flot:

+ +

+ + diff --git a/examples/interacting.html b/examples/interacting.html new file mode 100644 index 0000000..b5c8003 --- /dev/null +++ b/examples/interacting.html @@ -0,0 +1,92 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +

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

+ +

Mouse hovers at + (0, 0).

+ +

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

+ +

Enable tooltip

+ + + + + diff --git a/examples/layout.css b/examples/layout.css new file mode 100644 index 0000000..7a23dd9 --- /dev/null +++ b/examples/layout.css @@ -0,0 +1,5 @@ +body { + font-family: sans-serif; + font-size: 16px; + margin: 50px; +} diff --git a/examples/selection.html b/examples/selection.html new file mode 100644 index 0000000..4a745d7 --- /dev/null +++ b/examples/selection.html @@ -0,0 +1,107 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +

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

+ +

Flot supports selections. You can enable + rectangular selection + or one-dimensional selection if the user should only be able to + select on one axis. Try left-clicking 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. Try clicking 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. Try enabling the checkbox + below and select a region again.

+ +

Zoom to selection.

+ + + + + diff --git a/examples/setting-options.html b/examples/setting-options.html new file mode 100644 index 0000000..31dd798 --- /dev/null +++ b/examples/setting-options.html @@ -0,0 +1,63 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +

There are plenty of options you can set to control the precise + looks of your plot. You can control the axes, the legend, the + default graph type, the look of grid, etc.

+ +

The idea is that Flot goes to great lengths to provide sensible + defaults which you can then customize as needed for your + particular application. If you've found a use case where the + defaults can be improved, please don't hesitate to give your + feedback.

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

Flot Examples

+ +

Monthly mean atmospheric CO₂ 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 to avoid having the graph shift with each visitor's local + time zone. So you might have to add your local time zone offset + to the timestamps or simply pretend that the data was produced + in UTC instead of your local time zone.

+ + + + + diff --git a/examples/turning-series.html b/examples/turning-series.html new file mode 100644 index 0000000..83fb134 --- /dev/null +++ b/examples/turning-series.html @@ -0,0 +1,96 @@ + + + + + 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 new file mode 100644 index 0000000..919f903 --- /dev/null +++ b/examples/visitors.html @@ -0,0 +1,87 @@ + + + + + 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/zooming.html b/examples/zooming.html new file mode 100644 index 0000000..0f3284b --- /dev/null +++ b/examples/zooming.html @@ -0,0 +1,91 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +

The selection support makes + pretty advanced zooming schemes possible. 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.

+ + + + + -- cgit v1.2.3