alchemy 1.0.2 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- 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>
|