From ed791745c733b3d5a88eeb570a03622a9ab2e5be Mon Sep 17 00:00:00 2001 From: David Schnur Date: Fri, 25 Jan 2013 23:29:32 -0500 Subject: [PATCH] Re-styled and cleaned up all the examples. --- examples/ajax/index.html | 304 +++--- examples/annotating/index.html | 154 +-- examples/axes-interacting/index.html | 167 +-- examples/axes-multiple/index.html | 130 ++- examples/axes-time-zones/index.html | 172 +-- examples/axes-time/index.html | 252 ++--- examples/basic-options/index.html | 132 +-- examples/basic-usage/index.html | 84 +- examples/categories/index.html | 97 +- examples/image/index.html | 106 +- examples/interacting/index.html | 220 ++-- examples/navigate/index.html | 263 +++-- examples/percentiles/index.html | 128 ++- examples/realtime/index.html | 194 ++-- examples/resize/index.html | 129 ++- examples/selection/index.html | 247 +++-- examples/series-errorbars/index.html | 222 ++-- examples/series-pie/index.html | 1500 +++++++++++++------------- examples/series-toggle/index.html | 211 ++-- examples/series-types/index.html | 157 +-- examples/stacking/index.html | 176 +-- examples/symbols/index.html | 117 +- examples/threshold/index.html | 122 ++- examples/tracking/index.html | 220 ++-- examples/visitors/index.html | 229 ++-- examples/zooming/index.html | 234 ++-- 26 files changed, 3281 insertions(+), 2686 deletions(-) diff --git a/examples/ajax/index.html b/examples/ajax/index.html index eb0ef9a..493b022 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -1,143 +1,165 @@ - + - - - 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.

- -

- -

- - - - + + + 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/index.html b/examples/annotating/index.html index 72c212b..41dcb95 100644 --- a/examples/annotating/index.html +++ b/examples/annotating/index.html @@ -1,75 +1,83 @@ - + - - - 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.

- - - - + + + 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 index 9995c26..dbd9ee6 100644 --- a/examples/axes-interacting/index.html +++ b/examples/axes-interacting/index.html @@ -1,79 +1,92 @@ - + - - - 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.

- -

- - - + + + 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 index fc4ba22..734550a 100644 --- a/examples/axes-multiple/index.html +++ b/examples/axes-multiple/index.html @@ -1,61 +1,73 @@ - + - - - 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 .

- - - + + + 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/axes-time-zones/index.html b/examples/axes-time-zones/index.html index 97c4bd9..7938cc1 100644 --- a/examples/axes-time-zones/index.html +++ b/examples/axes-time-zones/index.html @@ -1,74 +1,110 @@ - - - - - Flot Example - - - + + + + + Flot Examples: Time zones + + + + + + + - - - - -

Timezone Examples

- - - - -
UTC
Browser
Chicago
- - - - + var plot = $.plot("#placeholderLocal", [d], { + xaxis: { + mode: "time", + timezone: "browser" + } + }); + + var plot = $.plot("#placeholderChicago", [d], { + xaxis: { + mode: "time", + timezone: "America/Chicago" + } + }); + }); + + + + + + + +
+ +

UTC

+
+
+
+ +

Browser

+
+
+
+ +

Chicago

+
+
+
+ +
+ + + + diff --git a/examples/axes-time/index.html b/examples/axes-time/index.html index 0c66c37..f047a71 100644 --- a/examples/axes-time/index.html +++ b/examples/axes-time/index.html @@ -1,122 +1,134 @@ - + - - - 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.

- - - - + + + 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/basic-options/index.html b/examples/basic-options/index.html index a977431..c76b793 100644 --- a/examples/basic-options/index.html +++ b/examples/basic-options/index.html @@ -1,77 +1,87 @@ - + - Flot Examples - - - - - - + Flot Examples: Basic Options + + + + + + + - var d2 = []; - for (var i = 0; i < Math.PI * 2; i += 0.25) { - d2.push([ i, Math.cos( i ) ]); - } + - var d3 = []; - for (var i = 0; i < Math.PI * 2; i += 0.1) { - d3.push([ i, Math.tan( i ) ]); - } +
- $.plot( $("#placeholder"), [ - { label: "sin(x)", data: d1 }, - { label: "cos(x)", data: d2 }, - { label: "tan(x)", data: d3 } - ], { - series: { - lines: { show: true }, - points: { show: true } - }, - xaxis: { - ticks: [ - 0, [ Math.PI/2, "\u03c0/2" ], [ Math.PI, "\u03c0" ], - [ Math.PI * 3/2, "3\u03c0/2" ], [ Math.PI * 2, "2\u03c0" ] - ] - }, - yaxis: { - ticks: 10, - min: -2, - max: 2, - tickDecimals: 3 - }, - grid: { - backgroundColor: { colors: [ "#fff", "#eee" ] }, - borderWidth: { - top: 1, - right: 1, - bottom: 2, - left: 2 - } - } - }); -}); +
+
+
+ +

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 index b116d94..d751849 100644 --- a/examples/basic-usage/index.html +++ b/examples/basic-usage/index.html @@ -1,38 +1,50 @@ - + - - - 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.

- - - - + + + 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/categories/index.html b/examples/categories/index.html index 05d8e17..febaec7 100644 --- a/examples/categories/index.html +++ b/examples/categories/index.html @@ -1,40 +1,61 @@ - + - - - Flot Examples - - - - - - - -

Flot Examples

- -
- -

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

- - - - + + + Flot Examples: Categories + + + + + + + + + + + +
+ +
+
+
+ +

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

+ +
+ + + + + + + + + diff --git a/examples/image/index.html b/examples/image/index.html index 073ad43..deb9b3c 100644 --- a/examples/image/index.html +++ b/examples/image/index.html @@ -1,45 +1,65 @@ - + - - - 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.

- - - - + + + 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/interacting/index.html b/examples/interacting/index.html index 7db829d..2b29c36 100644 --- a/examples/interacting/index.html +++ b/examples/interacting/index.html @@ -1,98 +1,126 @@ - + - - - 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.

- -

- - - - + + + 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/navigate/index.html b/examples/navigate/index.html index c916ef2..c2dd51f 100644 --- a/examples/navigate/index.html +++ b/examples/navigate/index.html @@ -1,118 +1,149 @@ - + - - - 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.

- - - - - + + + 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/index.html b/examples/percentiles/index.html index 9f2ba3a..213be30 100644 --- a/examples/percentiles/index.html +++ b/examples/percentiles/index.html @@ -1,57 +1,75 @@ - + - - - 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.

- - - - + + + 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/realtime/index.html b/examples/realtime/index.html index 3b427e1..1ac8541 100644 --- a/examples/realtime/index.html +++ b/examples/realtime/index.html @@ -1,83 +1,115 @@ - + - - - 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

- - - - + + + 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/index.html b/examples/resize/index.html index d1e18c3..5a0baa5 100644 --- a/examples/resize/index.html +++ b/examples/resize/index.html @@ -1,61 +1,72 @@ - + - - - 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.

- - - - - + + + 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.

+ + +

Try resizing the window.

+ +
+ + + + diff --git a/examples/selection/index.html b/examples/selection/index.html index 1646f5a..c6d69ac 100644 --- a/examples/selection/index.html +++ b/examples/selection/index.html @@ -1,114 +1,137 @@ - + - - - 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.

- -

- - - - + + + 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 index ec177ae..ba7bc6f 100644 --- a/examples/series-errorbars/index.html +++ b/examples/series-errorbars/index.html @@ -1,94 +1,146 @@ - + - Flot Examples - - - - - - + Flot Examples: Error Bars + + + + + + + -

Flot Examples

- -
- -

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

- - + + +
+ +
+
+
+ +

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 index 4f8f16a..d429c98 100644 --- a/examples/series-pie/index.html +++ b/examples/series-pie/index.html @@ -1,767 +1,777 @@ - + - - - Flot Pie Examples - - - - - - + + + - - - -

Flot Pie Examples

- -

Default with Legend

-
- - -

Default without Legend

-
- - -

Graph2

-
- - -

Graph3

-
- - -

Graph4

-
- - -

Graph5

-
- - -

Graph6

-
- - -

Graph7

-
- - -

Graph8

-
- - -

Graph9

-
- - -

Donut

-
- - -

Interactive

-
- - -

Pie Options

-