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
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>
|