alchemy 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/app/assets/stylesheets/alchemy/components/_chosen.scss +1 -1
- data/app/assets/stylesheets/alchemy/components/_normalize.scss +262 -314
- data/app/assets/stylesheets/alchemy/components/buttons/_buttons.scss +49 -12
- data/app/assets/stylesheets/alchemy/components/buttons/_buttons_vars.scss +2 -1
- data/app/assets/stylesheets/alchemy/components/forms/_forms.scss +35 -19
- data/app/assets/stylesheets/alchemy/components/forms/_forms_responsive.scss +11 -5
- data/app/assets/stylesheets/alchemy/components/header/_header.scss +2 -0
- data/app/assets/stylesheets/alchemy/components/login/_login.scss +5 -1
- data/app/assets/stylesheets/alchemy/partials/_colors.scss +6 -6
- data/app/assets/stylesheets/alchemy/partials/_vars.scss +1 -1
- data/app/helpers/alchemy/layout_helper.rb +16 -0
- data/lib/alchemy.rb +1 -5
- data/lib/alchemy/engine.rb +8 -0
- data/lib/alchemy/version.rb +1 -1
- data/vendor/assets/javascripts/alchemy/handlebars.js +2201 -0
- metadata +5 -48
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/API.txt +0 -1201
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/FAQ.txt +0 -76
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/LICENSE.txt +0 -22
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/Makefile +0 -9
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/NEWS.txt +0 -508
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/PLUGINS.txt +0 -137
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/README.txt +0 -90
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/ajax.html +0 -143
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/annotating.html +0 -75
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-down.gif +0 -0
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-left.gif +0 -0
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-right.gif +0 -0
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-up.gif +0 -0
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/basic.html +0 -38
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-1.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-2.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-3.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-4.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-5.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-japan-gdp-growth.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-usa-gdp-growth.json +0 -4
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/graph-types.html +0 -75
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/hs-2004-27-a-large_web.jpg +0 -0
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/image.html +0 -45
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/index.html +0 -44
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/interacting-axes.html +0 -97
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/interacting.html +0 -93
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/layout.css +0 -6
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/multiple-axes.html +0 -60
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/navigate.html +0 -118
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/percentiles.html +0 -57
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/pie.html +0 -756
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/realtime.html +0 -83
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/resize.html +0 -61
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/selection.html +0 -114
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/setting-options.html +0 -61
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/stacking.html +0 -77
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/symbols.html +0 -49
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/thresholding.html +0 -54
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/time.html +0 -71
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/tracking.html +0 -95
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/turning-series.html +0 -98
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/visitors.html +0 -90
- data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/zooming.html +0 -98
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
Writing plugins
|
|
2
|
-
---------------
|
|
3
|
-
|
|
4
|
-
All you need to do to make a new plugin is creating an init function
|
|
5
|
-
and a set of options (if needed), stuffing it into an object and
|
|
6
|
-
putting it in the $.plot.plugins array. For example:
|
|
7
|
-
|
|
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
|
-
Now, given that the plugin might run in many different places, it's
|
|
18
|
-
a good idea to avoid leaking names. The usual trick here is wrap the
|
|
19
|
-
above lines in an anonymous function which is called immediately, like
|
|
20
|
-
this: (function () { inner code ... })(). To make it even more robust
|
|
21
|
-
in case $ is not bound to jQuery but some other Javascript library, we
|
|
22
|
-
can write it as
|
|
23
|
-
|
|
24
|
-
(function ($) {
|
|
25
|
-
// plugin definition
|
|
26
|
-
// ...
|
|
27
|
-
})(jQuery);
|
|
28
|
-
|
|
29
|
-
There's a complete example below, but you should also check out the
|
|
30
|
-
plugins bundled with Flot.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
Complete example
|
|
34
|
-
----------------
|
|
35
|
-
|
|
36
|
-
Here is a simple debug plugin which alerts each of the series in the
|
|
37
|
-
plot. It has a single option that control whether it is enabled and
|
|
38
|
-
how much info to output:
|
|
39
|
-
|
|
40
|
-
(function ($) {
|
|
41
|
-
function init(plot) {
|
|
42
|
-
var debugLevel = 1;
|
|
43
|
-
|
|
44
|
-
function checkDebugEnabled(plot, options) {
|
|
45
|
-
if (options.debug) {
|
|
46
|
-
debugLevel = options.debug;
|
|
47
|
-
|
|
48
|
-
plot.hooks.processDatapoints.push(alertSeries);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function alertSeries(plot, series, datapoints) {
|
|
53
|
-
var msg = "series " + series.label;
|
|
54
|
-
if (debugLevel > 1)
|
|
55
|
-
msg += " with " + series.data.length + " points";
|
|
56
|
-
alert(msg);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
plot.hooks.processOptions.push(checkDebugEnabled);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
var options = { debug: 0 };
|
|
63
|
-
|
|
64
|
-
$.plot.plugins.push({
|
|
65
|
-
init: init,
|
|
66
|
-
options: options,
|
|
67
|
-
name: "simpledebug",
|
|
68
|
-
version: "0.1"
|
|
69
|
-
});
|
|
70
|
-
})(jQuery);
|
|
71
|
-
|
|
72
|
-
We also define "name" and "version". It's not used by Flot, but might
|
|
73
|
-
be helpful for other plugins in resolving dependencies.
|
|
74
|
-
|
|
75
|
-
Put the above in a file named "jquery.flot.debug.js", include it in an
|
|
76
|
-
HTML page and then it can be used with:
|
|
77
|
-
|
|
78
|
-
$.plot($("#placeholder"), [...], { debug: 2 });
|
|
79
|
-
|
|
80
|
-
This simple plugin illustrates a couple of points:
|
|
81
|
-
|
|
82
|
-
- It uses the anonymous function trick to avoid name pollution.
|
|
83
|
-
- It can be enabled/disabled through an option.
|
|
84
|
-
- Variables in the init function can be used to store plot-specific
|
|
85
|
-
state between the hooks.
|
|
86
|
-
|
|
87
|
-
The two last points are important because there may be multiple plots
|
|
88
|
-
on the same page, and you'd want to make sure they are not mixed up.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
Shutting down a plugin
|
|
92
|
-
----------------------
|
|
93
|
-
|
|
94
|
-
Each plot object has a shutdown hook which is run when plot.shutdown()
|
|
95
|
-
is called. This usually mostly happens in case another plot is made on
|
|
96
|
-
top of an existing one.
|
|
97
|
-
|
|
98
|
-
The purpose of the hook is to give you a chance to unbind any event
|
|
99
|
-
handlers you've registered and remove any extra DOM things you've
|
|
100
|
-
inserted.
|
|
101
|
-
|
|
102
|
-
The problem with event handlers is that you can have registered a
|
|
103
|
-
handler which is run in some point in the future, e.g. with
|
|
104
|
-
setTimeout(). Meanwhile, the plot may have been shutdown and removed,
|
|
105
|
-
but because your event handler is still referencing it, it can't be
|
|
106
|
-
garbage collected yet, and worse, if your handler eventually runs, it
|
|
107
|
-
may overwrite stuff on a completely different plot.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
Some hints on the options
|
|
111
|
-
-------------------------
|
|
112
|
-
|
|
113
|
-
Plugins should always support appropriate options to enable/disable
|
|
114
|
-
them because the plugin user may have several plots on the same page
|
|
115
|
-
where only one should use the plugin. In most cases it's probably a
|
|
116
|
-
good idea if the plugin is turned off rather than on per default, just
|
|
117
|
-
like most of the powerful features in Flot.
|
|
118
|
-
|
|
119
|
-
If the plugin needs options that are specific to each series, like the
|
|
120
|
-
points or lines options in core Flot, you can put them in "series" in
|
|
121
|
-
the options object, e.g.
|
|
122
|
-
|
|
123
|
-
var options = {
|
|
124
|
-
series: {
|
|
125
|
-
downsample: {
|
|
126
|
-
algorithm: null,
|
|
127
|
-
maxpoints: 1000
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
Then they will be copied by Flot into each series, providing default
|
|
133
|
-
values in case none are specified.
|
|
134
|
-
|
|
135
|
-
Think hard and long about naming the options. These names are going to
|
|
136
|
-
be public API, and code is going to depend on them if the plugin is
|
|
137
|
-
successful.
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
About
|
|
2
|
-
-----
|
|
3
|
-
|
|
4
|
-
Flot is a Javascript plotting library for jQuery. Read more at the
|
|
5
|
-
website:
|
|
6
|
-
|
|
7
|
-
http://code.google.com/p/flot/
|
|
8
|
-
|
|
9
|
-
Take a look at the examples linked from above, they should give a good
|
|
10
|
-
impression of what Flot can do and the source code of the examples is
|
|
11
|
-
probably the fastest way to learn how to use Flot.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
Installation
|
|
15
|
-
------------
|
|
16
|
-
|
|
17
|
-
Just include the Javascript file after you've included jQuery.
|
|
18
|
-
|
|
19
|
-
Generally, all browsers that support the HTML5 canvas tag are
|
|
20
|
-
supported.
|
|
21
|
-
|
|
22
|
-
For support for Internet Explorer < 9, you can use Excanvas, a canvas
|
|
23
|
-
emulator; this is used in the examples bundled with Flot. You just
|
|
24
|
-
include the excanvas script like this:
|
|
25
|
-
|
|
26
|
-
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
|
|
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 (see
|
|
34
|
-
http://code.google.com/p/flashcanvas/), which uses Flash to do the
|
|
35
|
-
emulation. Although Flash can be a bit slower to load than VML, if
|
|
36
|
-
you've got a lot of points, the Flash version can be much faster
|
|
37
|
-
overall. Flot contains some wrapper code for activating Excanvas which
|
|
38
|
-
Flashcanvas is compatible with.
|
|
39
|
-
|
|
40
|
-
You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive
|
|
41
|
-
charts because of performance improvements in event handling.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
Basic usage
|
|
45
|
-
-----------
|
|
46
|
-
|
|
47
|
-
Create a placeholder div to put the graph in:
|
|
48
|
-
|
|
49
|
-
<div id="placeholder"></div>
|
|
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
|
-
<div id="placeholder" style="width:600px;height:300px"></div>
|
|
56
|
-
|
|
57
|
-
You can also do it with an external stylesheet. Make sure that the
|
|
58
|
-
placeholder isn't within something with a display:none CSS property -
|
|
59
|
-
in that case, Flot has trouble measuring label dimensions which
|
|
60
|
-
results in garbled looks and might have trouble measuring the
|
|
61
|
-
placeholder dimensions which is fatal (it'll throw an exception).
|
|
62
|
-
|
|
63
|
-
Then when the div is ready in the DOM, which is usually on document
|
|
64
|
-
ready, run the plot function:
|
|
65
|
-
|
|
66
|
-
$.plot($("#placeholder"), data, options);
|
|
67
|
-
|
|
68
|
-
Here, data is an array of data series and options is an object with
|
|
69
|
-
settings if you want to customize the plot. Take a look at the
|
|
70
|
-
examples for some ideas of what to put in or look at the reference
|
|
71
|
-
in the file "API.txt". Here's a quick example that'll draw a line from
|
|
72
|
-
(0, 0) to (1, 1):
|
|
73
|
-
|
|
74
|
-
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
|
|
75
|
-
|
|
76
|
-
The plot function immediately draws the chart and then returns a plot
|
|
77
|
-
object with a couple of methods.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
What's with the name?
|
|
81
|
-
---------------------
|
|
82
|
-
|
|
83
|
-
First: it's pronounced with a short o, like "plot". Not like "flawed".
|
|
84
|
-
|
|
85
|
-
So "Flot" rhymes with "plot".
|
|
86
|
-
|
|
87
|
-
And if you look up "flot" in a Danish-to-English dictionary, some up
|
|
88
|
-
the words that come up are "good-looking", "attractive", "stylish",
|
|
89
|
-
"smart", "impressive", "extravagant". One of the main goals with Flot
|
|
90
|
-
is pretty looks.
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
-
<title>Flot Examples</title>
|
|
6
|
-
<link href="layout.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
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<h1>Flot Examples</h1>
|
|
13
|
-
|
|
14
|
-
<div id="placeholder" style="width:600px;height:300px;"></div>
|
|
15
|
-
|
|
16
|
-
<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>
|
|
17
|
-
|
|
18
|
-
<p>The data is fetched over HTTP, in this case directly from text
|
|
19
|
-
files. Usually the URL would point to some web server handler
|
|
20
|
-
(e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that
|
|
21
|
-
extracts it from a database and serializes it to JSON.</p>
|
|
22
|
-
|
|
23
|
-
<p>
|
|
24
|
-
<input class="fetchSeries" type="button" value="First dataset"> -
|
|
25
|
-
<a href="data-eu-gdp-growth.json">data</a> -
|
|
26
|
-
<span></span>
|
|
27
|
-
</p>
|
|
28
|
-
|
|
29
|
-
<p>
|
|
30
|
-
<input class="fetchSeries" type="button" value="Second dataset"> -
|
|
31
|
-
<a href="data-japan-gdp-growth.json">data</a> -
|
|
32
|
-
<span></span>
|
|
33
|
-
</p>
|
|
34
|
-
|
|
35
|
-
<p>
|
|
36
|
-
<input class="fetchSeries" type="button" value="Third dataset"> -
|
|
37
|
-
<a href="data-usa-gdp-growth.json">data</a> -
|
|
38
|
-
<span></span>
|
|
39
|
-
</p>
|
|
40
|
-
|
|
41
|
-
<p>If you combine AJAX with setTimeout, you can poll the server
|
|
42
|
-
for new data.</p>
|
|
43
|
-
|
|
44
|
-
<p>
|
|
45
|
-
<input class="dataUpdate" type="button" value="Poll for data">
|
|
46
|
-
</p>
|
|
47
|
-
|
|
48
|
-
<script type="text/javascript">
|
|
49
|
-
$(function () {
|
|
50
|
-
var options = {
|
|
51
|
-
lines: { show: true },
|
|
52
|
-
points: { show: true },
|
|
53
|
-
xaxis: { tickDecimals: 0, tickSize: 1 }
|
|
54
|
-
};
|
|
55
|
-
var data = [];
|
|
56
|
-
var placeholder = $("#placeholder");
|
|
57
|
-
|
|
58
|
-
$.plot(placeholder, data, options);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
// fetch one series, adding to what we got
|
|
62
|
-
var alreadyFetched = {};
|
|
63
|
-
|
|
64
|
-
$("input.fetchSeries").click(function () {
|
|
65
|
-
var button = $(this);
|
|
66
|
-
|
|
67
|
-
// find the URL in the link right next to us
|
|
68
|
-
var dataurl = button.siblings('a').attr('href');
|
|
69
|
-
|
|
70
|
-
// then fetch the data with jQuery
|
|
71
|
-
function onDataReceived(series) {
|
|
72
|
-
// extract the first coordinate pair so you can see that
|
|
73
|
-
// data is now an ordinary Javascript object
|
|
74
|
-
var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';
|
|
75
|
-
|
|
76
|
-
button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);
|
|
77
|
-
|
|
78
|
-
// let's add it to our current data
|
|
79
|
-
if (!alreadyFetched[series.label]) {
|
|
80
|
-
alreadyFetched[series.label] = true;
|
|
81
|
-
data.push(series);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// and plot all we got
|
|
85
|
-
$.plot(placeholder, data, options);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
$.ajax({
|
|
89
|
-
url: dataurl,
|
|
90
|
-
method: 'GET',
|
|
91
|
-
dataType: 'json',
|
|
92
|
-
success: onDataReceived
|
|
93
|
-
});
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
// initiate a recurring data update
|
|
98
|
-
$("input.dataUpdate").click(function () {
|
|
99
|
-
// reset data
|
|
100
|
-
data = [];
|
|
101
|
-
alreadyFetched = {};
|
|
102
|
-
|
|
103
|
-
$.plot(placeholder, data, options);
|
|
104
|
-
|
|
105
|
-
var iteration = 0;
|
|
106
|
-
|
|
107
|
-
function fetchData() {
|
|
108
|
-
++iteration;
|
|
109
|
-
|
|
110
|
-
function onDataReceived(series) {
|
|
111
|
-
// we get all the data in one go, if we only got partial
|
|
112
|
-
// data, we could merge it with what we already got
|
|
113
|
-
data = [ series ];
|
|
114
|
-
|
|
115
|
-
$.plot($("#placeholder"), data, options);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
$.ajax({
|
|
119
|
-
// usually, we'll just call the same URL, a script
|
|
120
|
-
// connected to a database, but in this case we only
|
|
121
|
-
// have static example files so we need to modify the
|
|
122
|
-
// URL
|
|
123
|
-
url: "data-eu-gdp-growth-" + iteration + ".json",
|
|
124
|
-
method: 'GET',
|
|
125
|
-
dataType: 'json',
|
|
126
|
-
success: onDataReceived
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
if (iteration < 5)
|
|
130
|
-
setTimeout(fetchData, 1000);
|
|
131
|
-
else {
|
|
132
|
-
data = [];
|
|
133
|
-
alreadyFetched = {};
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
setTimeout(fetchData, 1000);
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
</script>
|
|
141
|
-
|
|
142
|
-
</body>
|
|
143
|
-
</html>
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
-
<title>Flot Examples</title>
|
|
6
|
-
<link href="layout.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
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<h1>Flot Examples</h1>
|
|
13
|
-
|
|
14
|
-
<div id="placeholder" style="width:600px;height:300px;"></div>
|
|
15
|
-
|
|
16
|
-
<p>Flot has support for simple background decorations such as
|
|
17
|
-
lines and rectangles. They can be useful for marking up certain
|
|
18
|
-
areas. You can easily add any HTML you need with standard DOM
|
|
19
|
-
manipulation, e.g. for labels. For drawing custom shapes there is
|
|
20
|
-
also direct access to the canvas.</p>
|
|
21
|
-
|
|
22
|
-
<script type="text/javascript">
|
|
23
|
-
$(function () {
|
|
24
|
-
// generate a dataset
|
|
25
|
-
var d1 = [];
|
|
26
|
-
for (var i = 0; i < 20; ++i)
|
|
27
|
-
d1.push([i, Math.sin(i)]);
|
|
28
|
-
|
|
29
|
-
var data = [{ data: d1, label: "Pressure", color: "#333" }];
|
|
30
|
-
|
|
31
|
-
// setup background areas
|
|
32
|
-
var markings = [
|
|
33
|
-
{ color: '#f6f6f6', yaxis: { from: 1 } },
|
|
34
|
-
{ color: '#f6f6f6', yaxis: { to: -1 } },
|
|
35
|
-
{ color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
|
|
36
|
-
{ color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
|
|
37
|
-
];
|
|
38
|
-
|
|
39
|
-
var placeholder = $("#placeholder");
|
|
40
|
-
|
|
41
|
-
// plot it
|
|
42
|
-
var plot = $.plot(placeholder, data, {
|
|
43
|
-
bars: { show: true, barWidth: 0.5, fill: 0.9 },
|
|
44
|
-
xaxis: { ticks: [], autoscaleMargin: 0.02 },
|
|
45
|
-
yaxis: { min: -2, max: 2 },
|
|
46
|
-
grid: { markings: markings }
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
// add labels
|
|
50
|
-
var o;
|
|
51
|
-
|
|
52
|
-
o = plot.pointOffset({ x: 2, y: -1.2});
|
|
53
|
-
// we just append it to the placeholder which Flot already uses
|
|
54
|
-
// for positioning
|
|
55
|
-
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');
|
|
56
|
-
|
|
57
|
-
o = plot.pointOffset({ x: 8, y: -1.2});
|
|
58
|
-
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');
|
|
59
|
-
|
|
60
|
-
// draw a little arrow on top of the last label to demonstrate
|
|
61
|
-
// canvas drawing
|
|
62
|
-
var ctx = plot.getCanvas().getContext("2d");
|
|
63
|
-
ctx.beginPath();
|
|
64
|
-
o.left += 4;
|
|
65
|
-
ctx.moveTo(o.left, o.top);
|
|
66
|
-
ctx.lineTo(o.left, o.top - 10);
|
|
67
|
-
ctx.lineTo(o.left + 10, o.top - 5);
|
|
68
|
-
ctx.lineTo(o.left, o.top);
|
|
69
|
-
ctx.fillStyle = "#000";
|
|
70
|
-
ctx.fill();
|
|
71
|
-
});
|
|
72
|
-
</script>
|
|
73
|
-
|
|
74
|
-
</body>
|
|
75
|
-
</html>
|