columbus3 0.2.1 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.textile +62 -0
- data/bower_components/flot/.bower.json +19 -0
- data/bower_components/flot/.gitignore +3 -0
- data/bower_components/flot/.travis.yml +3 -0
- data/bower_components/flot/API.md +1498 -0
- data/bower_components/flot/CONTRIBUTING.md +98 -0
- data/bower_components/flot/FAQ.md +75 -0
- data/bower_components/flot/LICENSE.txt +22 -0
- data/bower_components/flot/Makefile +12 -0
- data/bower_components/flot/NEWS.md +1026 -0
- data/bower_components/flot/PLUGINS.md +143 -0
- data/bower_components/flot/README.md +110 -0
- data/bower_components/flot/component.json +8 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-1.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-2.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-3.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-4.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-5.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/data-japan-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/data-usa-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/index.html +173 -0
- data/bower_components/flot/examples/annotating/index.html +87 -0
- data/bower_components/flot/examples/axes-interacting/index.html +97 -0
- data/bower_components/flot/examples/axes-multiple/index.html +77 -0
- data/bower_components/flot/examples/axes-time-zones/date.js +893 -0
- data/bower_components/flot/examples/axes-time-zones/index.html +114 -0
- data/bower_components/flot/examples/axes-time-zones/tz/africa +1181 -0
- data/bower_components/flot/examples/axes-time-zones/tz/antarctica +413 -0
- data/bower_components/flot/examples/axes-time-zones/tz/asia +2717 -0
- data/bower_components/flot/examples/axes-time-zones/tz/australasia +1719 -0
- data/bower_components/flot/examples/axes-time-zones/tz/backward +117 -0
- data/bower_components/flot/examples/axes-time-zones/tz/etcetera +81 -0
- data/bower_components/flot/examples/axes-time-zones/tz/europe +2856 -0
- data/bower_components/flot/examples/axes-time-zones/tz/factory +10 -0
- data/bower_components/flot/examples/axes-time-zones/tz/iso3166.tab +276 -0
- data/bower_components/flot/examples/axes-time-zones/tz/leapseconds +100 -0
- data/bower_components/flot/examples/axes-time-zones/tz/northamerica +3235 -0
- data/bower_components/flot/examples/axes-time-zones/tz/pacificnew +28 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar87 +390 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar88 +390 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar89 +395 -0
- data/bower_components/flot/examples/axes-time-zones/tz/southamerica +1711 -0
- data/bower_components/flot/examples/axes-time-zones/tz/systemv +38 -0
- data/bower_components/flot/examples/axes-time-zones/tz/yearistype.sh +38 -0
- data/bower_components/flot/examples/axes-time-zones/tz/zone.tab +441 -0
- data/bower_components/flot/examples/axes-time/index.html +137 -0
- data/bower_components/flot/examples/background.png +0 -0
- data/bower_components/flot/examples/basic-options/index.html +91 -0
- data/bower_components/flot/examples/basic-usage/index.html +57 -0
- data/bower_components/flot/examples/canvas/index.html +75 -0
- data/bower_components/flot/examples/categories/index.html +64 -0
- data/bower_components/flot/examples/examples.css +97 -0
- data/bower_components/flot/examples/image/hs-2004-27-a-large-web.jpg +0 -0
- data/bower_components/flot/examples/image/index.html +69 -0
- data/bower_components/flot/examples/index.html +80 -0
- data/bower_components/flot/examples/interacting/index.html +118 -0
- data/bower_components/flot/examples/navigate/arrow-down.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-left.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-right.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-up.gif +0 -0
- data/bower_components/flot/examples/navigate/index.html +153 -0
- data/bower_components/flot/examples/percentiles/index.html +79 -0
- data/bower_components/flot/examples/realtime/index.html +122 -0
- data/bower_components/flot/examples/resize/index.html +76 -0
- data/bower_components/flot/examples/selection/index.html +152 -0
- data/bower_components/flot/examples/series-errorbars/index.html +150 -0
- data/bower_components/flot/examples/series-pie/index.html +818 -0
- data/bower_components/flot/examples/series-toggle/index.html +121 -0
- data/bower_components/flot/examples/series-types/index.html +90 -0
- data/bower_components/flot/examples/shared/jquery-ui/jquery-ui.min.css +6 -0
- data/bower_components/flot/examples/stacking/index.html +107 -0
- data/bower_components/flot/examples/symbols/index.html +76 -0
- data/bower_components/flot/examples/threshold/index.html +76 -0
- data/bower_components/flot/examples/tracking/index.html +135 -0
- data/bower_components/flot/examples/visitors/index.html +147 -0
- data/bower_components/flot/examples/zooming/index.html +144 -0
- data/bower_components/flot/excanvas.js +1428 -0
- data/bower_components/flot/excanvas.min.js +1 -0
- data/bower_components/flot/flot.jquery.json +27 -0
- data/bower_components/flot/jquery.colorhelpers.js +180 -0
- data/bower_components/flot/jquery.flot.canvas.js +345 -0
- data/bower_components/flot/jquery.flot.categories.js +190 -0
- data/bower_components/flot/jquery.flot.crosshair.js +176 -0
- data/bower_components/flot/jquery.flot.errorbars.js +353 -0
- data/bower_components/flot/jquery.flot.fillbetween.js +226 -0
- data/bower_components/flot/jquery.flot.image.js +241 -0
- data/bower_components/flot/jquery.flot.js +3168 -0
- data/bower_components/flot/jquery.flot.navigate.js +346 -0
- data/bower_components/flot/jquery.flot.pie.js +820 -0
- data/bower_components/flot/jquery.flot.resize.js +59 -0
- data/bower_components/flot/jquery.flot.selection.js +360 -0
- data/bower_components/flot/jquery.flot.stack.js +188 -0
- data/bower_components/flot/jquery.flot.symbol.js +71 -0
- data/bower_components/flot/jquery.flot.threshold.js +142 -0
- data/bower_components/flot/jquery.flot.time.js +432 -0
- data/bower_components/flot/jquery.js +9472 -0
- data/bower_components/flot/package.json +11 -0
- data/bower_components/jquery/.bower.json +38 -0
- data/bower_components/jquery/MIT-LICENSE.txt +21 -0
- data/bower_components/jquery/bower.json +28 -0
- data/bower_components/jquery/dist/jquery.js +9210 -0
- data/bower_components/jquery/dist/jquery.min.js +5 -0
- data/bower_components/jquery/dist/jquery.min.map +1 -0
- data/bower_components/jquery/src/ajax.js +786 -0
- data/bower_components/jquery/src/ajax/jsonp.js +89 -0
- data/bower_components/jquery/src/ajax/load.js +75 -0
- data/bower_components/jquery/src/ajax/parseJSON.js +13 -0
- data/bower_components/jquery/src/ajax/parseXML.js +28 -0
- data/bower_components/jquery/src/ajax/script.js +64 -0
- data/bower_components/jquery/src/ajax/var/nonce.js +5 -0
- data/bower_components/jquery/src/ajax/var/rquery.js +3 -0
- data/bower_components/jquery/src/ajax/xhr.js +136 -0
- data/bower_components/jquery/src/attributes.js +11 -0
- data/bower_components/jquery/src/attributes/attr.js +141 -0
- data/bower_components/jquery/src/attributes/classes.js +158 -0
- data/bower_components/jquery/src/attributes/prop.js +94 -0
- data/bower_components/jquery/src/attributes/support.js +35 -0
- data/bower_components/jquery/src/attributes/val.js +161 -0
- data/bower_components/jquery/src/callbacks.js +205 -0
- data/bower_components/jquery/src/core.js +502 -0
- data/bower_components/jquery/src/core/access.js +60 -0
- data/bower_components/jquery/src/core/init.js +123 -0
- data/bower_components/jquery/src/core/parseHTML.js +39 -0
- data/bower_components/jquery/src/core/ready.js +97 -0
- data/bower_components/jquery/src/core/var/rsingleTag.js +4 -0
- data/bower_components/jquery/src/css.js +450 -0
- data/bower_components/jquery/src/css/addGetHookIf.js +22 -0
- data/bower_components/jquery/src/css/curCSS.js +57 -0
- data/bower_components/jquery/src/css/defaultDisplay.js +70 -0
- data/bower_components/jquery/src/css/hiddenVisibleSelectors.js +15 -0
- data/bower_components/jquery/src/css/support.js +96 -0
- data/bower_components/jquery/src/css/swap.js +28 -0
- data/bower_components/jquery/src/css/var/cssExpand.js +3 -0
- data/bower_components/jquery/src/css/var/getStyles.js +12 -0
- data/bower_components/jquery/src/css/var/isHidden.js +13 -0
- data/bower_components/jquery/src/css/var/rmargin.js +3 -0
- data/bower_components/jquery/src/css/var/rnumnonpx.js +5 -0
- data/bower_components/jquery/src/data.js +178 -0
- data/bower_components/jquery/src/data/Data.js +181 -0
- data/bower_components/jquery/src/data/accepts.js +20 -0
- data/bower_components/jquery/src/data/var/data_priv.js +5 -0
- data/bower_components/jquery/src/data/var/data_user.js +5 -0
- data/bower_components/jquery/src/deferred.js +149 -0
- data/bower_components/jquery/src/deprecated.js +13 -0
- data/bower_components/jquery/src/dimensions.js +50 -0
- data/bower_components/jquery/src/effects.js +648 -0
- data/bower_components/jquery/src/effects/Tween.js +114 -0
- data/bower_components/jquery/src/effects/animatedSelector.js +13 -0
- data/bower_components/jquery/src/event.js +868 -0
- data/bower_components/jquery/src/event/ajax.js +13 -0
- data/bower_components/jquery/src/event/alias.js +39 -0
- data/bower_components/jquery/src/event/support.js +9 -0
- data/bower_components/jquery/src/exports/amd.js +24 -0
- data/bower_components/jquery/src/exports/global.js +32 -0
- data/bower_components/jquery/src/intro.js +44 -0
- data/bower_components/jquery/src/jquery.js +37 -0
- data/bower_components/jquery/src/manipulation.js +580 -0
- data/bower_components/jquery/src/manipulation/_evalUrl.js +18 -0
- data/bower_components/jquery/src/manipulation/support.js +32 -0
- data/bower_components/jquery/src/manipulation/var/rcheckableType.js +3 -0
- data/bower_components/jquery/src/offset.js +207 -0
- data/bower_components/jquery/src/outro.js +1 -0
- data/bower_components/jquery/src/queue.js +142 -0
- data/bower_components/jquery/src/queue/delay.js +22 -0
- data/bower_components/jquery/src/selector-native.js +172 -0
- data/bower_components/jquery/src/selector-sizzle.js +14 -0
- data/bower_components/jquery/src/selector.js +1 -0
- data/bower_components/jquery/src/serialize.js +111 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.js +2067 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.min.js +3 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.min.map +1 -0
- data/bower_components/jquery/src/traversing.js +199 -0
- data/bower_components/jquery/src/traversing/findFilter.js +100 -0
- data/bower_components/jquery/src/traversing/var/rneedsContext.js +6 -0
- data/bower_components/jquery/src/var/arr.js +3 -0
- data/bower_components/jquery/src/var/class2type.js +4 -0
- data/bower_components/jquery/src/var/concat.js +5 -0
- data/bower_components/jquery/src/var/hasOwn.js +5 -0
- data/bower_components/jquery/src/var/indexOf.js +5 -0
- data/bower_components/jquery/src/var/pnum.js +3 -0
- data/bower_components/jquery/src/var/push.js +5 -0
- data/bower_components/jquery/src/var/rnotwhite.js +3 -0
- data/bower_components/jquery/src/var/slice.js +5 -0
- data/bower_components/jquery/src/var/strundefined.js +3 -0
- data/bower_components/jquery/src/var/support.js +4 -0
- data/bower_components/jquery/src/var/toString.js +5 -0
- data/bower_components/jquery/src/wrap.js +79 -0
- data/columbus3.gemspec +1 -1
- data/exe/columbus3 +72 -7
- data/lib/columbus3.rb +2 -1
- data/lib/columbus3/metadata/sidecar.rb +10 -1
- data/lib/columbus3/renderer/flot_renderer.rb +66 -0
- data/lib/columbus3/renderer/{renderer.rb → leaflet_renderer.rb} +0 -0
- data/lib/columbus3/version.rb +1 -1
- data/lib/html/flot.html.erb +106 -0
- metadata +194 -5
- data/README.md +0 -41
@@ -0,0 +1,143 @@
|
|
1
|
+
## Writing plugins ##
|
2
|
+
|
3
|
+
All you need to do to make a new plugin is creating an init function
|
4
|
+
and a set of options (if needed), stuffing it into an object and
|
5
|
+
putting it in the $.plot.plugins array. For example:
|
6
|
+
|
7
|
+
```js
|
8
|
+
function myCoolPluginInit(plot) {
|
9
|
+
plot.coolstring = "Hello!";
|
10
|
+
};
|
11
|
+
|
12
|
+
$.plot.plugins.push({ init: myCoolPluginInit, options: { ... } });
|
13
|
+
|
14
|
+
// if $.plot is called, it will return a plot object with the
|
15
|
+
// attribute "coolstring"
|
16
|
+
```
|
17
|
+
|
18
|
+
Now, given that the plugin might run in many different places, it's
|
19
|
+
a good idea to avoid leaking names. The usual trick here is wrap the
|
20
|
+
above lines in an anonymous function which is called immediately, like
|
21
|
+
this: (function () { inner code ... })(). To make it even more robust
|
22
|
+
in case $ is not bound to jQuery but some other Javascript library, we
|
23
|
+
can write it as
|
24
|
+
|
25
|
+
```js
|
26
|
+
(function ($) {
|
27
|
+
// plugin definition
|
28
|
+
// ...
|
29
|
+
})(jQuery);
|
30
|
+
```
|
31
|
+
|
32
|
+
There's a complete example below, but you should also check out the
|
33
|
+
plugins bundled with Flot.
|
34
|
+
|
35
|
+
|
36
|
+
## Complete example ##
|
37
|
+
|
38
|
+
Here is a simple debug plugin which alerts each of the series in the
|
39
|
+
plot. It has a single option that control whether it is enabled and
|
40
|
+
how much info to output:
|
41
|
+
|
42
|
+
```js
|
43
|
+
(function ($) {
|
44
|
+
function init(plot) {
|
45
|
+
var debugLevel = 1;
|
46
|
+
|
47
|
+
function checkDebugEnabled(plot, options) {
|
48
|
+
if (options.debug) {
|
49
|
+
debugLevel = options.debug;
|
50
|
+
plot.hooks.processDatapoints.push(alertSeries);
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
function alertSeries(plot, series, datapoints) {
|
55
|
+
var msg = "series " + series.label;
|
56
|
+
if (debugLevel > 1) {
|
57
|
+
msg += " with " + series.data.length + " points";
|
58
|
+
alert(msg);
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
plot.hooks.processOptions.push(checkDebugEnabled);
|
63
|
+
}
|
64
|
+
|
65
|
+
var options = { debug: 0 };
|
66
|
+
|
67
|
+
$.plot.plugins.push({
|
68
|
+
init: init,
|
69
|
+
options: options,
|
70
|
+
name: "simpledebug",
|
71
|
+
version: "0.1"
|
72
|
+
});
|
73
|
+
})(jQuery);
|
74
|
+
```
|
75
|
+
|
76
|
+
We also define "name" and "version". It's not used by Flot, but might
|
77
|
+
be helpful for other plugins in resolving dependencies.
|
78
|
+
|
79
|
+
Put the above in a file named "jquery.flot.debug.js", include it in an
|
80
|
+
HTML page and then it can be used with:
|
81
|
+
|
82
|
+
```js
|
83
|
+
$.plot($("#placeholder"), [...], { debug: 2 });
|
84
|
+
```
|
85
|
+
|
86
|
+
This simple plugin illustrates a couple of points:
|
87
|
+
|
88
|
+
- It uses the anonymous function trick to avoid name pollution.
|
89
|
+
- It can be enabled/disabled through an option.
|
90
|
+
- Variables in the init function can be used to store plot-specific
|
91
|
+
state between the hooks.
|
92
|
+
|
93
|
+
The two last points are important because there may be multiple plots
|
94
|
+
on the same page, and you'd want to make sure they are not mixed up.
|
95
|
+
|
96
|
+
|
97
|
+
## Shutting down a plugin ##
|
98
|
+
|
99
|
+
Each plot object has a shutdown hook which is run when plot.shutdown()
|
100
|
+
is called. This usually mostly happens in case another plot is made on
|
101
|
+
top of an existing one.
|
102
|
+
|
103
|
+
The purpose of the hook is to give you a chance to unbind any event
|
104
|
+
handlers you've registered and remove any extra DOM things you've
|
105
|
+
inserted.
|
106
|
+
|
107
|
+
The problem with event handlers is that you can have registered a
|
108
|
+
handler which is run in some point in the future, e.g. with
|
109
|
+
setTimeout(). Meanwhile, the plot may have been shutdown and removed,
|
110
|
+
but because your event handler is still referencing it, it can't be
|
111
|
+
garbage collected yet, and worse, if your handler eventually runs, it
|
112
|
+
may overwrite stuff on a completely different plot.
|
113
|
+
|
114
|
+
|
115
|
+
## Some hints on the options ##
|
116
|
+
|
117
|
+
Plugins should always support appropriate options to enable/disable
|
118
|
+
them because the plugin user may have several plots on the same page
|
119
|
+
where only one should use the plugin. In most cases it's probably a
|
120
|
+
good idea if the plugin is turned off rather than on per default, just
|
121
|
+
like most of the powerful features in Flot.
|
122
|
+
|
123
|
+
If the plugin needs options that are specific to each series, like the
|
124
|
+
points or lines options in core Flot, you can put them in "series" in
|
125
|
+
the options object, e.g.
|
126
|
+
|
127
|
+
```js
|
128
|
+
var options = {
|
129
|
+
series: {
|
130
|
+
downsample: {
|
131
|
+
algorithm: null,
|
132
|
+
maxpoints: 1000
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}
|
136
|
+
```
|
137
|
+
|
138
|
+
Then they will be copied by Flot into each series, providing default
|
139
|
+
values in case none are specified.
|
140
|
+
|
141
|
+
Think hard and long about naming the options. These names are going to
|
142
|
+
be public API, and code is going to depend on them if the plugin is
|
143
|
+
successful.
|
@@ -0,0 +1,110 @@
|
|
1
|
+
# Flot [![Build status](https://travis-ci.org/flot/flot.png)](https://travis-ci.org/flot/flot)
|
2
|
+
|
3
|
+
## About ##
|
4
|
+
|
5
|
+
Flot is a Javascript plotting library for jQuery.
|
6
|
+
Read more at the website: <http://www.flotcharts.org/>
|
7
|
+
|
8
|
+
Take a look at the the examples in examples/index.html; they should give a good
|
9
|
+
impression of what Flot can do, and the source code of the examples is probably
|
10
|
+
the fastest way to learn how to use Flot.
|
11
|
+
|
12
|
+
|
13
|
+
## Installation ##
|
14
|
+
|
15
|
+
Just include the Javascript file after you've included jQuery.
|
16
|
+
|
17
|
+
Generally, all browsers that support the HTML5 canvas tag are
|
18
|
+
supported.
|
19
|
+
|
20
|
+
For support for Internet Explorer < 9, you can use [Excanvas]
|
21
|
+
[excanvas], a canvas emulator; this is used in the examples bundled
|
22
|
+
with Flot. You just include the excanvas script like this:
|
23
|
+
|
24
|
+
```html
|
25
|
+
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
|
26
|
+
```
|
27
|
+
|
28
|
+
If it's not working on your development IE 6.0, check that it has
|
29
|
+
support for VML which Excanvas is relying on. It appears that some
|
30
|
+
stripped down versions used for test environments on virtual machines
|
31
|
+
lack the VML support.
|
32
|
+
|
33
|
+
You can also try using [Flashcanvas][flashcanvas], which uses Flash to
|
34
|
+
do the emulation. Although Flash can be a bit slower to load than VML,
|
35
|
+
if you've got a lot of points, the Flash version can be much faster
|
36
|
+
overall. Flot contains some wrapper code for activating Excanvas which
|
37
|
+
Flashcanvas is compatible with.
|
38
|
+
|
39
|
+
You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive
|
40
|
+
charts because of performance improvements in event handling.
|
41
|
+
|
42
|
+
|
43
|
+
## Basic usage ##
|
44
|
+
|
45
|
+
Create a placeholder div to put the graph in:
|
46
|
+
|
47
|
+
```html
|
48
|
+
<div id="placeholder"></div>
|
49
|
+
```
|
50
|
+
|
51
|
+
You need to set the width and height of this div, otherwise the plot
|
52
|
+
library doesn't know how to scale the graph. You can do it inline like
|
53
|
+
this:
|
54
|
+
|
55
|
+
```html
|
56
|
+
<div id="placeholder" style="width:600px;height:300px"></div>
|
57
|
+
```
|
58
|
+
|
59
|
+
You can also do it with an external stylesheet. Make sure that the
|
60
|
+
placeholder isn't within something with a display:none CSS property -
|
61
|
+
in that case, Flot has trouble measuring label dimensions which
|
62
|
+
results in garbled looks and might have trouble measuring the
|
63
|
+
placeholder dimensions which is fatal (it'll throw an exception).
|
64
|
+
|
65
|
+
Then when the div is ready in the DOM, which is usually on document
|
66
|
+
ready, run the plot function:
|
67
|
+
|
68
|
+
```js
|
69
|
+
$.plot($("#placeholder"), data, options);
|
70
|
+
```
|
71
|
+
|
72
|
+
Here, data is an array of data series and options is an object with
|
73
|
+
settings if you want to customize the plot. Take a look at the
|
74
|
+
examples for some ideas of what to put in or look at the
|
75
|
+
[API reference](API.md). Here's a quick example that'll draw a line
|
76
|
+
from (0, 0) to (1, 1):
|
77
|
+
|
78
|
+
```js
|
79
|
+
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
|
80
|
+
```
|
81
|
+
|
82
|
+
The plot function immediately draws the chart and then returns a plot
|
83
|
+
object with a couple of methods.
|
84
|
+
|
85
|
+
|
86
|
+
## What's with the name? ##
|
87
|
+
|
88
|
+
First: it's pronounced with a short o, like "plot". Not like "flawed".
|
89
|
+
|
90
|
+
So "Flot" rhymes with "plot".
|
91
|
+
|
92
|
+
And if you look up "flot" in a Danish-to-English dictionary, some of
|
93
|
+
the words that come up are "good-looking", "attractive", "stylish",
|
94
|
+
"smart", "impressive", "extravagant". One of the main goals with Flot
|
95
|
+
is pretty looks.
|
96
|
+
|
97
|
+
|
98
|
+
## Notes about the examples ##
|
99
|
+
|
100
|
+
In order to have a useful, functional example of time-series plots using time
|
101
|
+
zones, date.js from [timezone-js][timezone-js] (released under the Apache 2.0
|
102
|
+
license) and the [Olson][olson] time zone database (released to the public
|
103
|
+
domain) have been included in the examples directory. They are used in
|
104
|
+
examples/axes-time-zones/index.html.
|
105
|
+
|
106
|
+
|
107
|
+
[excanvas]: http://code.google.com/p/explorercanvas/
|
108
|
+
[flashcanvas]: http://code.google.com/p/flashcanvas/
|
109
|
+
[timezone-js]: https://github.com/mde/timezone-js
|
110
|
+
[olson]: http://ftp.iana.org/time-zones
|
@@ -0,0 +1,173 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
5
|
+
<title>Flot Examples: AJAX</title>
|
6
|
+
<link href="../examples.css" rel="stylesheet" type="text/css">
|
7
|
+
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
8
|
+
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
9
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
10
|
+
<script type="text/javascript">
|
11
|
+
|
12
|
+
$(function() {
|
13
|
+
|
14
|
+
var options = {
|
15
|
+
lines: {
|
16
|
+
show: true
|
17
|
+
},
|
18
|
+
points: {
|
19
|
+
show: true
|
20
|
+
},
|
21
|
+
xaxis: {
|
22
|
+
tickDecimals: 0,
|
23
|
+
tickSize: 1
|
24
|
+
}
|
25
|
+
};
|
26
|
+
|
27
|
+
var data = [];
|
28
|
+
|
29
|
+
$.plot("#placeholder", data, options);
|
30
|
+
|
31
|
+
// Fetch one series, adding to what we already have
|
32
|
+
|
33
|
+
var alreadyFetched = {};
|
34
|
+
|
35
|
+
$("button.fetchSeries").click(function () {
|
36
|
+
|
37
|
+
var button = $(this);
|
38
|
+
|
39
|
+
// Find the URL in the link right next to us, then fetch the data
|
40
|
+
|
41
|
+
var dataurl = button.siblings("a").attr("href");
|
42
|
+
|
43
|
+
function onDataReceived(series) {
|
44
|
+
|
45
|
+
// Extract the first coordinate pair; jQuery has parsed it, so
|
46
|
+
// the data is now just an ordinary JavaScript object
|
47
|
+
|
48
|
+
var firstcoordinate = "(" + series.data[0][0] + ", " + series.data[0][1] + ")";
|
49
|
+
button.siblings("span").text("Fetched " + series.label + ", first point: " + firstcoordinate);
|
50
|
+
|
51
|
+
// Push the new data onto our existing data array
|
52
|
+
|
53
|
+
if (!alreadyFetched[series.label]) {
|
54
|
+
alreadyFetched[series.label] = true;
|
55
|
+
data.push(series);
|
56
|
+
}
|
57
|
+
|
58
|
+
$.plot("#placeholder", data, options);
|
59
|
+
}
|
60
|
+
|
61
|
+
$.ajax({
|
62
|
+
url: dataurl,
|
63
|
+
type: "GET",
|
64
|
+
dataType: "json",
|
65
|
+
success: onDataReceived
|
66
|
+
});
|
67
|
+
});
|
68
|
+
|
69
|
+
// Initiate a recurring data update
|
70
|
+
|
71
|
+
$("button.dataUpdate").click(function () {
|
72
|
+
|
73
|
+
data = [];
|
74
|
+
alreadyFetched = {};
|
75
|
+
|
76
|
+
$.plot("#placeholder", data, options);
|
77
|
+
|
78
|
+
var iteration = 0;
|
79
|
+
|
80
|
+
function fetchData() {
|
81
|
+
|
82
|
+
++iteration;
|
83
|
+
|
84
|
+
function onDataReceived(series) {
|
85
|
+
|
86
|
+
// Load all the data in one pass; if we only got partial
|
87
|
+
// data we could merge it with what we already have.
|
88
|
+
|
89
|
+
data = [ series ];
|
90
|
+
$.plot("#placeholder", data, options);
|
91
|
+
}
|
92
|
+
|
93
|
+
// Normally we call the same URL - a script connected to a
|
94
|
+
// database - but in this case we only have static example
|
95
|
+
// files, so we need to modify the URL.
|
96
|
+
|
97
|
+
$.ajax({
|
98
|
+
url: "data-eu-gdp-growth-" + iteration + ".json",
|
99
|
+
type: "GET",
|
100
|
+
dataType: "json",
|
101
|
+
success: onDataReceived
|
102
|
+
});
|
103
|
+
|
104
|
+
if (iteration < 5) {
|
105
|
+
setTimeout(fetchData, 1000);
|
106
|
+
} else {
|
107
|
+
data = [];
|
108
|
+
alreadyFetched = {};
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
setTimeout(fetchData, 1000);
|
113
|
+
});
|
114
|
+
|
115
|
+
// Load the first series by default, so we don't have an empty plot
|
116
|
+
|
117
|
+
$("button.fetchSeries:first").click();
|
118
|
+
|
119
|
+
// Add the Flot version string to the footer
|
120
|
+
|
121
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
122
|
+
});
|
123
|
+
|
124
|
+
</script>
|
125
|
+
</head>
|
126
|
+
<body>
|
127
|
+
|
128
|
+
<div id="header">
|
129
|
+
<h2>AJAX</h2>
|
130
|
+
</div>
|
131
|
+
|
132
|
+
<div id="content">
|
133
|
+
|
134
|
+
<div class="demo-container">
|
135
|
+
<div id="placeholder" class="demo-placeholder"></div>
|
136
|
+
</div>
|
137
|
+
|
138
|
+
<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below:</p>
|
139
|
+
|
140
|
+
<p>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.</p>
|
141
|
+
|
142
|
+
<p>
|
143
|
+
<button class="fetchSeries">First dataset</button>
|
144
|
+
[ <a href="data-eu-gdp-growth.json">see data</a> ]
|
145
|
+
<span></span>
|
146
|
+
</p>
|
147
|
+
|
148
|
+
<p>
|
149
|
+
<button class="fetchSeries">Second dataset</button>
|
150
|
+
[ <a href="data-japan-gdp-growth.json">see data</a> ]
|
151
|
+
<span></span>
|
152
|
+
</p>
|
153
|
+
|
154
|
+
<p>
|
155
|
+
<button class="fetchSeries">Third dataset</button>
|
156
|
+
[ <a href="data-usa-gdp-growth.json">see data</a> ]
|
157
|
+
<span></span>
|
158
|
+
</p>
|
159
|
+
|
160
|
+
<p>If you combine AJAX with setTimeout, you can poll the server for new data.</p>
|
161
|
+
|
162
|
+
<p>
|
163
|
+
<button class="dataUpdate">Poll for data</button>
|
164
|
+
</p>
|
165
|
+
|
166
|
+
</div>
|
167
|
+
|
168
|
+
<div id="footer">
|
169
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
170
|
+
</div>
|
171
|
+
|
172
|
+
</body>
|
173
|
+
</html>
|