From af26aaa53d073a7b2d25caee93e1cb5ceb2e099c Mon Sep 17 00:00:00 2001 From: Igor Sfiligoi Date: Fri, 23 Oct 2009 09:07:01 -0400 Subject: flot-0.6 --- examples/ajax.html | 143 ++++++++++++++++++++++++++++++++++++ examples/annotating.html | 75 +++++++++++++++++++ examples/arrow-down.gif | Bin 0 -> 916 bytes examples/arrow-left.gif | Bin 0 -> 891 bytes examples/arrow-right.gif | Bin 0 -> 897 bytes examples/arrow-up.gif | Bin 0 -> 916 bytes examples/data-eu-gdp-growth-1.json | 4 + examples/data-eu-gdp-growth-2.json | 4 + examples/data-eu-gdp-growth-3.json | 4 + examples/data-eu-gdp-growth-4.json | 4 + examples/data-eu-gdp-growth-5.json | 4 + examples/data-eu-gdp-growth.json | 4 + examples/data-japan-gdp-growth.json | 4 + examples/data-usa-gdp-growth.json | 4 + examples/dual-axis.html | 3 +- examples/hs-2004-27-a-large_web.jpg | Bin 0 -> 34489 bytes examples/image.html | 45 ++++++++++++ examples/index.html | 29 ++++++-- examples/interacting.html | 13 ++-- examples/layout.css | 1 + examples/navigate.html | 118 +++++++++++++++++++++++++++++ examples/selection.html | 19 +++-- examples/setting-options.html | 6 +- examples/stacking.html | 77 +++++++++++++++++++ examples/thresholding.html | 14 ++-- examples/time.html | 28 ++++--- examples/tracking.html | 23 +++--- examples/turning-series.html | 4 +- examples/visitors.html | 11 ++- examples/zooming.html | 15 ++-- 30 files changed, 596 insertions(+), 60 deletions(-) create mode 100644 examples/ajax.html create mode 100644 examples/annotating.html create mode 100644 examples/arrow-down.gif create mode 100644 examples/arrow-left.gif create mode 100644 examples/arrow-right.gif create mode 100644 examples/arrow-up.gif create mode 100644 examples/data-eu-gdp-growth-1.json create mode 100644 examples/data-eu-gdp-growth-2.json create mode 100644 examples/data-eu-gdp-growth-3.json create mode 100644 examples/data-eu-gdp-growth-4.json create mode 100644 examples/data-eu-gdp-growth-5.json create mode 100644 examples/data-eu-gdp-growth.json create mode 100644 examples/data-japan-gdp-growth.json create mode 100644 examples/data-usa-gdp-growth.json create mode 100644 examples/hs-2004-27-a-large_web.jpg create mode 100644 examples/image.html create mode 100644 examples/navigate.html create mode 100644 examples/stacking.html (limited to 'examples') diff --git a/examples/ajax.html b/examples/ajax.html new file mode 100644 index 0000000..385a834 --- /dev/null +++ b/examples/ajax.html @@ -0,0 +1,143 @@ + + + + + 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/annotating.html b/examples/annotating.html new file mode 100644 index 0000000..9d99ea4 --- /dev/null +++ b/examples/annotating.html @@ -0,0 +1,75 @@ + + + + + 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/arrow-down.gif b/examples/arrow-down.gif new file mode 100644 index 0000000..e239d11 Binary files /dev/null and b/examples/arrow-down.gif differ diff --git a/examples/arrow-left.gif b/examples/arrow-left.gif new file mode 100644 index 0000000..93ffd5a Binary files /dev/null and b/examples/arrow-left.gif differ diff --git a/examples/arrow-right.gif b/examples/arrow-right.gif new file mode 100644 index 0000000..5fd0530 Binary files /dev/null and b/examples/arrow-right.gif differ diff --git a/examples/arrow-up.gif b/examples/arrow-up.gif new file mode 100644 index 0000000..7d19626 Binary files /dev/null and b/examples/arrow-up.gif differ diff --git a/examples/data-eu-gdp-growth-1.json b/examples/data-eu-gdp-growth-1.json new file mode 100644 index 0000000..4372bf5 --- /dev/null +++ b/examples/data-eu-gdp-growth-1.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9]] +} diff --git a/examples/data-eu-gdp-growth-2.json b/examples/data-eu-gdp-growth-2.json new file mode 100644 index 0000000..6199882 --- /dev/null +++ b/examples/data-eu-gdp-growth-2.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2]] +} diff --git a/examples/data-eu-gdp-growth-3.json b/examples/data-eu-gdp-growth-3.json new file mode 100644 index 0000000..607f178 --- /dev/null +++ b/examples/data-eu-gdp-growth-3.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5]] +} diff --git a/examples/data-eu-gdp-growth-4.json b/examples/data-eu-gdp-growth-4.json new file mode 100644 index 0000000..df60fa9 --- /dev/null +++ b/examples/data-eu-gdp-growth-4.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]] +} diff --git a/examples/data-eu-gdp-growth-5.json b/examples/data-eu-gdp-growth-5.json new file mode 100644 index 0000000..e722bcc --- /dev/null +++ b/examples/data-eu-gdp-growth-5.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] +} diff --git a/examples/data-eu-gdp-growth.json b/examples/data-eu-gdp-growth.json new file mode 100644 index 0000000..e722bcc --- /dev/null +++ b/examples/data-eu-gdp-growth.json @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] +} diff --git a/examples/data-japan-gdp-growth.json b/examples/data-japan-gdp-growth.json new file mode 100644 index 0000000..09aae77 --- /dev/null +++ b/examples/data-japan-gdp-growth.json @@ -0,0 +1,4 @@ +{ + label: 'Japan', + data: [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]] +} diff --git a/examples/data-usa-gdp-growth.json b/examples/data-usa-gdp-growth.json new file mode 100644 index 0000000..33fd4d3 --- /dev/null +++ b/examples/data-usa-gdp-growth.json @@ -0,0 +1,4 @@ +{ + label: 'USA', + data: [[1999, 4.4], [2000, 3.7], [2001, 0.8], [2002, 1.6], [2003, 2.5], [2004, 3.6], [2005, 2.9], [2006, 2.8], [2007, 2.0], [2008, 1.1]] +} diff --git a/examples/dual-axis.html b/examples/dual-axis.html index 03a94e6..093505d 100644 --- a/examples/dual-axis.html +++ b/examples/dual-axis.html @@ -28,7 +28,8 @@ $(function () { $.plot($("#placeholder"), [ { data: oilprices, label: "Oil price ($)" }, { data: exchangerates, label: "USD/EUR exchange rate", yaxis: 2 }], - { xaxis: { mode: 'time' }, + { + xaxis: { mode: 'time' }, yaxis: { min: 0 }, y2axis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"€" }}, legend: { position: 'sw' } }); diff --git a/examples/hs-2004-27-a-large_web.jpg b/examples/hs-2004-27-a-large_web.jpg new file mode 100644 index 0000000..a1d5c05 Binary files /dev/null and b/examples/hs-2004-27-a-large_web.jpg differ diff --git a/examples/image.html b/examples/image.html new file mode 100644 index 0000000..57189d2 --- /dev/null +++ b/examples/image.html @@ -0,0 +1,45 @@ + + + + + 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/index.html b/examples/index.html index 3f116ed..789f941 100644 --- a/examples/index.html +++ b/examples/index.html @@ -11,16 +11,33 @@

Flot Examples

-

Here are some examples for Flot:

+

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

+ +

Being interactive:

+ + + +

Some more esoteric features:

+ + diff --git a/examples/interacting.html b/examples/interacting.html index 5cb59d0..fbf0390 100644 --- a/examples/interacting.html +++ b/examples/interacting.html @@ -33,12 +33,13 @@ $(function () { } var plot = $.plot($("#placeholder"), - [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], - { lines: { show: true }, - points: { show: true }, - selection: { mode: "xy" }, - grid: { hoverable: true, clickable: true }, - yaxis: { min: -1.2, max: 1.2 } + [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], { + series: { + lines: { show: true }, + points: { show: true } + }, + grid: { hoverable: true, clickable: true }, + yaxis: { min: -1.2, max: 1.2 } }); function showTooltip(x, y, contents) { diff --git a/examples/layout.css b/examples/layout.css index 7a23dd9..7ef7dd4 100644 --- a/examples/layout.css +++ b/examples/layout.css @@ -2,4 +2,5 @@ body { font-family: sans-serif; font-size: 16px; margin: 50px; + max-width: 800px; } diff --git a/examples/navigate.html b/examples/navigate.html new file mode 100644 index 0000000..78eff55 --- /dev/null +++ b/examples/navigate.html @@ -0,0 +1,118 @@ + + + + + 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/selection.html b/examples/selection.html index 56cb3db..8b67a2b 100644 --- a/examples/selection.html +++ b/examples/selection.html @@ -7,6 +7,7 @@ +

Flot Examples

@@ -15,23 +16,23 @@

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

-

Flot supports selections. You can enable - rectangular selection +

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-clicking and drag on the plot above + 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. Try clicking the buttons below.

+

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. Try enabling the checkbox + in the "plotselected" event triggered. Enable the checkbox below and select a region again.

Zoom to selection.

@@ -70,8 +71,10 @@ $(function () { ]; var options = { - lines: { show: true }, - points: { show: true }, + series: { + lines: { show: true }, + points: { show: true } + }, legend: { noColumns: 2 }, xaxis: { tickDecimals: 0 }, yaxis: { min: 0 }, diff --git a/examples/setting-options.html b/examples/setting-options.html index b0570b2..6eb6ee9 100644 --- a/examples/setting-options.html +++ b/examples/setting-options.html @@ -42,8 +42,10 @@ $(function () { { label: "cos(x)", data: d2}, { label: "tan(x)", data: d3} ], { - lines: { show: true }, - points: { show: true }, + 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"]] }, diff --git a/examples/stacking.html b/examples/stacking.html new file mode 100644 index 0000000..62e0c7b --- /dev/null +++ b/examples/stacking.html @@ -0,0 +1,77 @@ + + + + + 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/thresholding.html b/examples/thresholding.html index 7d29294..10b5b2a 100644 --- a/examples/thresholding.html +++ b/examples/thresholding.html @@ -7,15 +7,17 @@ +

Flot Examples

-

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.

+

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.

@@ -29,7 +31,7 @@ $(function () { for (var i = 0; i <= 60; i += 1) d1.push([i, parseInt(Math.random() * 30 - 10)]); - function doPlot(t) { + function plotWithOptions(t) { $.plot($("#placeholder"), [ { data: d1, color: "rgb(30, 180, 20)", @@ -38,12 +40,12 @@ $(function () { } ]); } - doPlot(0); + plotWithOptions(0); $(".controls input").click(function (e) { e.preventDefault(); var t = parseFloat($(this).val().replace('Threshold at ', '')); - doPlot(t); + plotWithOptions(t); }); }); diff --git a/examples/time.html b/examples/time.html index d1dd4e3..5f43b88 100644 --- a/examples/time.html +++ b/examples/time.html @@ -34,7 +34,7 @@ to the timestamps or simply pretend that the data was produced in UTC instead of your local time zone.

- diff --git a/examples/tracking.html b/examples/tracking.html index 722f960..a0ad77d 100644 --- a/examples/tracking.html +++ b/examples/tracking.html @@ -7,6 +7,7 @@ +

Flot Examples

@@ -18,11 +19,12 @@

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.

+ the data points (look at the legend).

+

Flot Examples

@@ -18,7 +19,7 @@
- +

Flot Examples

@@ -26,7 +27,7 @@ the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.

-