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
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,38 +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>Simple example. You don't need to specify much to get an
|
|
17
|
-
attractive look. Put in a placeholder, make sure you set its
|
|
18
|
-
dimensions (otherwise the plot library will barf) and call the
|
|
19
|
-
plot function with the data. The axes are automatically
|
|
20
|
-
scaled.</p>
|
|
21
|
-
|
|
22
|
-
<script type="text/javascript">
|
|
23
|
-
$(function () {
|
|
24
|
-
var d1 = [];
|
|
25
|
-
for (var i = 0; i < 14; i += 0.5)
|
|
26
|
-
d1.push([i, Math.sin(i)]);
|
|
27
|
-
|
|
28
|
-
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
|
|
29
|
-
|
|
30
|
-
// a null signifies separate line segments
|
|
31
|
-
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
|
|
32
|
-
|
|
33
|
-
$.plot($("#placeholder"), [ d1, d2, d3 ]);
|
|
34
|
-
});
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
</body>
|
|
38
|
-
</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 supports lines, points, filled areas, bars and any
|
|
17
|
-
combinations of these, in the same plot and even on the same data
|
|
18
|
-
series.</p>
|
|
19
|
-
|
|
20
|
-
<script type="text/javascript">
|
|
21
|
-
$(function () {
|
|
22
|
-
var d1 = [];
|
|
23
|
-
for (var i = 0; i < 14; i += 0.5)
|
|
24
|
-
d1.push([i, Math.sin(i)]);
|
|
25
|
-
|
|
26
|
-
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
|
|
27
|
-
|
|
28
|
-
var d3 = [];
|
|
29
|
-
for (var i = 0; i < 14; i += 0.5)
|
|
30
|
-
d3.push([i, Math.cos(i)]);
|
|
31
|
-
|
|
32
|
-
var d4 = [];
|
|
33
|
-
for (var i = 0; i < 14; i += 0.1)
|
|
34
|
-
d4.push([i, Math.sqrt(i * 10)]);
|
|
35
|
-
|
|
36
|
-
var d5 = [];
|
|
37
|
-
for (var i = 0; i < 14; i += 0.5)
|
|
38
|
-
d5.push([i, Math.sqrt(i)]);
|
|
39
|
-
|
|
40
|
-
var d6 = [];
|
|
41
|
-
for (var i = 0; i < 14; i += 0.5 + Math.random())
|
|
42
|
-
d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
|
|
43
|
-
|
|
44
|
-
$.plot($("#placeholder"), [
|
|
45
|
-
{
|
|
46
|
-
data: d1,
|
|
47
|
-
lines: { show: true, fill: true }
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
data: d2,
|
|
51
|
-
bars: { show: true }
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
data: d3,
|
|
55
|
-
points: { show: true }
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
data: d4,
|
|
59
|
-
lines: { show: true }
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
data: d5,
|
|
63
|
-
lines: { show: true },
|
|
64
|
-
points: { show: true }
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
data: d6,
|
|
68
|
-
lines: { show: true, steps: true }
|
|
69
|
-
}
|
|
70
|
-
]);
|
|
71
|
-
});
|
|
72
|
-
</script>
|
|
73
|
-
|
|
74
|
-
</body>
|
|
75
|
-
</html>
|
data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/hs-2004-27-a-large_web.jpg
DELETED
|
Binary file
|
|
@@ -1,45 +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
|
-
<script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script>
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<h1>Flot Examples</h1>
|
|
14
|
-
|
|
15
|
-
<div id="placeholder" style="width:400px;height:400px;"></div>
|
|
16
|
-
|
|
17
|
-
<p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
|
|
18
|
-
|
|
19
|
-
<p>With the image plugin, you can plot images. This is for example
|
|
20
|
-
useful for getting ticks on complex prerendered visualizations.
|
|
21
|
-
Instead of inputting data points, you put in the images and where
|
|
22
|
-
their two opposite corners are supposed to be in plot space.</p>
|
|
23
|
-
|
|
24
|
-
<p>Images represent a little further complication because you need
|
|
25
|
-
to make sure they are loaded before you can use them (Flot skips
|
|
26
|
-
incomplete images). The plugin comes with a couple of helpers
|
|
27
|
-
for doing that.</p>
|
|
28
|
-
|
|
29
|
-
<script type="text/javascript">
|
|
30
|
-
$(function () {
|
|
31
|
-
var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
|
|
32
|
-
var options = {
|
|
33
|
-
series: { images: { show: true } },
|
|
34
|
-
xaxis: { min: -8, max: 4 },
|
|
35
|
-
yaxis: { min: -8, max: 4 }
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
$.plot.image.loadDataImages(data, options, function () {
|
|
39
|
-
$.plot($("#placeholder"), data, options);
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
</script>
|
|
43
|
-
|
|
44
|
-
</body>
|
|
45
|
-
</html>
|
|
@@ -1,44 +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
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<h1>Flot Examples</h1>
|
|
10
|
-
|
|
11
|
-
<p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>, the Javascript charting library for jQuery:</p>
|
|
12
|
-
|
|
13
|
-
<ul>
|
|
14
|
-
<li><a href="basic.html">Basic example</a></li>
|
|
15
|
-
<li><a href="graph-types.html">Different graph types</a></li>
|
|
16
|
-
<li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
|
|
17
|
-
<li><a href="ajax.html">Updating graphs with AJAX</a> and <a href="realtime.html">real-time updates</a></li>
|
|
18
|
-
</ul>
|
|
19
|
-
|
|
20
|
-
<p>Being interactive:</p>
|
|
21
|
-
|
|
22
|
-
<ul>
|
|
23
|
-
<li><a href="turning-series.html">Turning series on/off</a></li>
|
|
24
|
-
<li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a> (both with selection plugin)</li>
|
|
25
|
-
<li><a href="interacting.html">Interacting with the data points</a></li>
|
|
26
|
-
<li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
|
|
27
|
-
<li><a href="resize.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
|
|
28
|
-
</ul>
|
|
29
|
-
|
|
30
|
-
<p>Various features:</p>
|
|
31
|
-
|
|
32
|
-
<ul>
|
|
33
|
-
<li><a href="symbols.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
|
|
34
|
-
<li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a> (with selection plugin)</li>
|
|
35
|
-
<li><a href="multiple-axes.html">Multiple axes</a> and <a href="interacting-axes.html">interacting with the axes</a></li>
|
|
36
|
-
<li><a href="thresholding.html">Thresholding the data</a> (with threshold plugin)</li>
|
|
37
|
-
<li><a href="stacking.html">Stacked charts</a> (with stacking plugin)</li>
|
|
38
|
-
<li><a href="percentiles.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
|
|
39
|
-
<li><a href="tracking.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
|
|
40
|
-
<li><a href="image.html">Plotting prerendered images</a> (with image plugin)</li>
|
|
41
|
-
<li><a href="pie.html">Pie charts</a> (with pie plugin)</li>
|
|
42
|
-
</ul>
|
|
43
|
-
</body>
|
|
44
|
-
</html>
|
data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/interacting-axes.html
DELETED
|
@@ -1,97 +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>With multiple axes, you sometimes need to interact with them. A
|
|
17
|
-
simple way to do this is to draw the plot, deduce the axis
|
|
18
|
-
placements and insert a couple of divs on top to catch events.
|
|
19
|
-
Try clicking an axis.</p>
|
|
20
|
-
|
|
21
|
-
<p id="click"></p>
|
|
22
|
-
|
|
23
|
-
<script type="text/javascript">
|
|
24
|
-
$(function () {
|
|
25
|
-
function generate(start, end, fn) {
|
|
26
|
-
var res = [];
|
|
27
|
-
for (var i = 0; i <= 100; ++i) {
|
|
28
|
-
var x = start + i / 100 * (end - start);
|
|
29
|
-
res.push([x, fn(x)]);
|
|
30
|
-
}
|
|
31
|
-
return res;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
var data = [
|
|
35
|
-
{ data: generate(0, 10, function (x) { return Math.sqrt(x)}), xaxis: 1, yaxis:1 },
|
|
36
|
-
{ data: generate(0, 10, function (x) { return Math.sin(x)}), xaxis: 1, yaxis:2 },
|
|
37
|
-
{ data: generate(0, 10, function (x) { return Math.cos(x)}), xaxis: 1, yaxis:3 },
|
|
38
|
-
{ data: generate(2, 10, function (x) { return Math.tan(x)}), xaxis: 2, yaxis: 4 }
|
|
39
|
-
];
|
|
40
|
-
|
|
41
|
-
var plot = $.plot($("#placeholder"),
|
|
42
|
-
data,
|
|
43
|
-
{
|
|
44
|
-
xaxes: [
|
|
45
|
-
{ position: 'bottom' },
|
|
46
|
-
{ position: 'top'}
|
|
47
|
-
],
|
|
48
|
-
yaxes: [
|
|
49
|
-
{ position: 'left' },
|
|
50
|
-
{ position: 'left' },
|
|
51
|
-
{ position: 'right' },
|
|
52
|
-
{ position: 'left' }
|
|
53
|
-
]
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
// now for each axis, create a div
|
|
57
|
-
|
|
58
|
-
function getBoundingBoxForAxis(plot, axis) {
|
|
59
|
-
var left = axis.box.left, top = axis.box.top,
|
|
60
|
-
right = left + axis.box.width, bottom = top + axis.box.height;
|
|
61
|
-
|
|
62
|
-
// some ticks may stick out, enlarge the box to encompass all ticks
|
|
63
|
-
var cls = axis.direction + axis.n + 'Axis';
|
|
64
|
-
plot.getPlaceholder().find('.' + cls + ' .tickLabel').each(function () {
|
|
65
|
-
var pos = $(this).position();
|
|
66
|
-
left = Math.min(pos.left, left);
|
|
67
|
-
top = Math.min(pos.top, top);
|
|
68
|
-
right = Math.max(Math.round(pos.left) + $(this).outerWidth(), right);
|
|
69
|
-
bottom = Math.max(Math.round(pos.top) + $(this).outerHeight(), bottom);
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
return { left: left, top: top, width: right - left, height: bottom - top };
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
$.each(plot.getAxes(), function (i, axis) {
|
|
76
|
-
if (!axis.show)
|
|
77
|
-
return;
|
|
78
|
-
|
|
79
|
-
var box = getBoundingBoxForAxis(plot, axis);
|
|
80
|
-
|
|
81
|
-
$('<div class="axisTarget" style="position:absolute;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>')
|
|
82
|
-
.data('axis.direction', axis.direction)
|
|
83
|
-
.data('axis.n', axis.n)
|
|
84
|
-
.css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" })
|
|
85
|
-
.appendTo(plot.getPlaceholder())
|
|
86
|
-
.hover(
|
|
87
|
-
function () { $(this).css({ opacity: 0.10 }) },
|
|
88
|
-
function () { $(this).css({ opacity: 0 }) }
|
|
89
|
-
)
|
|
90
|
-
.click(function () {
|
|
91
|
-
$("#click").text("You clicked the " + axis.direction + axis.n + "axis!")
|
|
92
|
-
});
|
|
93
|
-
});
|
|
94
|
-
});
|
|
95
|
-
</script>
|
|
96
|
-
</body>
|
|
97
|
-
</html>
|
|
@@ -1,93 +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>One of the goals of Flot is to support user interactions. Try
|
|
17
|
-
pointing and clicking on the points.</p>
|
|
18
|
-
|
|
19
|
-
<p id="hoverdata">Mouse hovers at
|
|
20
|
-
(<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>
|
|
21
|
-
|
|
22
|
-
<p>A tooltip is easy to build with a bit of jQuery code and the
|
|
23
|
-
data returned from the plot.</p>
|
|
24
|
-
|
|
25
|
-
<p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
|
|
26
|
-
|
|
27
|
-
<script type="text/javascript">
|
|
28
|
-
$(function () {
|
|
29
|
-
var sin = [], cos = [];
|
|
30
|
-
for (var i = 0; i < 14; i += 0.5) {
|
|
31
|
-
sin.push([i, Math.sin(i)]);
|
|
32
|
-
cos.push([i, Math.cos(i)]);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
var plot = $.plot($("#placeholder"),
|
|
36
|
-
[ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
|
|
37
|
-
series: {
|
|
38
|
-
lines: { show: true },
|
|
39
|
-
points: { show: true }
|
|
40
|
-
},
|
|
41
|
-
grid: { hoverable: true, clickable: true },
|
|
42
|
-
yaxis: { min: -1.2, max: 1.2 }
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
function showTooltip(x, y, contents) {
|
|
46
|
-
$('<div id="tooltip">' + contents + '</div>').css( {
|
|
47
|
-
position: 'absolute',
|
|
48
|
-
display: 'none',
|
|
49
|
-
top: y + 5,
|
|
50
|
-
left: x + 5,
|
|
51
|
-
border: '1px solid #fdd',
|
|
52
|
-
padding: '2px',
|
|
53
|
-
'background-color': '#fee',
|
|
54
|
-
opacity: 0.80
|
|
55
|
-
}).appendTo("body").fadeIn(200);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
var previousPoint = null;
|
|
59
|
-
$("#placeholder").bind("plothover", function (event, pos, item) {
|
|
60
|
-
$("#x").text(pos.x.toFixed(2));
|
|
61
|
-
$("#y").text(pos.y.toFixed(2));
|
|
62
|
-
|
|
63
|
-
if ($("#enableTooltip:checked").length > 0) {
|
|
64
|
-
if (item) {
|
|
65
|
-
if (previousPoint != item.dataIndex) {
|
|
66
|
-
previousPoint = item.dataIndex;
|
|
67
|
-
|
|
68
|
-
$("#tooltip").remove();
|
|
69
|
-
var x = item.datapoint[0].toFixed(2),
|
|
70
|
-
y = item.datapoint[1].toFixed(2);
|
|
71
|
-
|
|
72
|
-
showTooltip(item.pageX, item.pageY,
|
|
73
|
-
item.series.label + " of " + x + " = " + y);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
$("#tooltip").remove();
|
|
78
|
-
previousPoint = null;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
$("#placeholder").bind("plotclick", function (event, pos, item) {
|
|
84
|
-
if (item) {
|
|
85
|
-
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
|
|
86
|
-
plot.highlight(item.series, item.datapoint);
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
});
|
|
90
|
-
</script>
|
|
91
|
-
|
|
92
|
-
</body>
|
|
93
|
-
</html>
|