radiant-race_results-extension 1.4.3 → 1.4.5
Sign up to get free protection for your applications and to get access to all the features.
- data/app/controllers/admin/race_instances_controller.rb +1 -1
- data/app/controllers/race_instances_controller.rb +7 -1
- data/app/controllers/race_performances_controller.rb +8 -0
- data/app/models/race.rb +7 -0
- data/app/models/race_checkpoint.rb +27 -1
- data/app/models/race_checkpoint_time.rb +33 -5
- data/app/models/race_instance.rb +38 -9
- data/app/models/race_performance.rb +81 -3
- data/app/views/admin/races/_form.html.haml +1 -2
- data/app/views/race_clubs/show.html.haml +3 -3
- data/app/views/race_instances/_results_header.html.haml +10 -0
- data/app/views/race_instances/_splits_header.html.haml +9 -0
- data/app/views/race_instances/show.html.haml +17 -8
- data/app/views/race_instances/splits.html.haml +19 -14
- data/app/views/race_performances/_performance.html.haml +12 -2
- data/app/views/race_performances/_splits.html.haml +30 -8
- data/app/views/race_performances/show.html.haml +18 -76
- data/app/views/races/show.html.haml +2 -1
- data/config/locales/en.yml +20 -0
- data/config/routes.rb +1 -1
- data/db/migrate/20111103150827_mapping_routes.rb +22 -0
- data/db/migrate/20111115150827_finish_checkpoint.rb +8 -0
- data/lib/race_tags.rb +3 -3
- data/lib/radiant-race_results-extension.rb +1 -1
- data/public/images/race_results/sorts.png +0 -0
- data/public/javascripts/flot/API.txt +1201 -0
- data/public/javascripts/flot/FAQ.txt +76 -0
- data/public/javascripts/flot/LICENSE.txt +22 -0
- data/public/javascripts/flot/Makefile +9 -0
- data/public/javascripts/flot/NEWS.txt +508 -0
- data/public/javascripts/flot/PLUGINS.txt +137 -0
- data/public/javascripts/flot/README.txt +90 -0
- data/public/javascripts/flot/examples/ajax.html +143 -0
- data/public/javascripts/flot/examples/annotating.html +75 -0
- data/public/javascripts/flot/examples/arrow-down.gif +0 -0
- data/public/javascripts/flot/examples/arrow-left.gif +0 -0
- data/public/javascripts/flot/examples/arrow-right.gif +0 -0
- data/public/javascripts/flot/examples/arrow-up.gif +0 -0
- data/public/javascripts/flot/examples/basic.html +38 -0
- data/public/javascripts/flot/examples/data-eu-gdp-growth-1.json +4 -0
- data/public/javascripts/flot/examples/data-eu-gdp-growth-2.json +4 -0
- data/public/javascripts/flot/examples/data-eu-gdp-growth-3.json +4 -0
- data/public/javascripts/flot/examples/data-eu-gdp-growth-4.json +4 -0
- data/public/javascripts/flot/examples/data-eu-gdp-growth-5.json +4 -0
- data/public/javascripts/flot/examples/data-eu-gdp-growth.json +4 -0
- data/public/javascripts/flot/examples/data-japan-gdp-growth.json +4 -0
- data/public/javascripts/flot/examples/data-usa-gdp-growth.json +4 -0
- data/public/javascripts/flot/examples/graph-types.html +75 -0
- data/public/javascripts/flot/examples/hs-2004-27-a-large_web.jpg +0 -0
- data/public/javascripts/flot/examples/image.html +45 -0
- data/public/javascripts/flot/examples/index.html +44 -0
- data/public/javascripts/flot/examples/interacting-axes.html +97 -0
- data/public/javascripts/flot/examples/interacting.html +93 -0
- data/public/javascripts/flot/examples/layout.css +6 -0
- data/public/javascripts/flot/examples/multiple-axes.html +60 -0
- data/public/javascripts/flot/examples/navigate.html +118 -0
- data/public/javascripts/flot/examples/percentiles.html +57 -0
- data/public/javascripts/flot/examples/pie.html +756 -0
- data/public/javascripts/flot/examples/realtime.html +83 -0
- data/public/javascripts/flot/examples/resize.html +61 -0
- data/public/javascripts/flot/examples/selection.html +114 -0
- data/public/javascripts/flot/examples/setting-options.html +61 -0
- data/public/javascripts/flot/examples/stacking.html +77 -0
- data/public/javascripts/flot/examples/symbols.html +49 -0
- data/public/javascripts/flot/examples/thresholding.html +54 -0
- data/public/javascripts/flot/examples/time.html +71 -0
- data/public/javascripts/flot/examples/tracking.html +95 -0
- data/public/javascripts/flot/examples/turning-series.html +98 -0
- data/public/javascripts/flot/examples/visitors.html +90 -0
- data/public/javascripts/flot/examples/zooming.html +98 -0
- data/public/javascripts/flot/excanvas.js +1427 -0
- data/public/javascripts/flot/excanvas.min.js +1 -0
- data/public/javascripts/flot/jquery.colorhelpers.js +179 -0
- data/public/javascripts/flot/jquery.colorhelpers.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.crosshair.js +167 -0
- data/public/javascripts/flot/jquery.flot.crosshair.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.fillbetween.js +183 -0
- data/public/javascripts/flot/jquery.flot.fillbetween.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.image.js +238 -0
- data/public/javascripts/flot/jquery.flot.image.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.js +2599 -0
- data/public/javascripts/flot/jquery.flot.min.js +6 -0
- data/public/javascripts/flot/jquery.flot.navigate.js +336 -0
- data/public/javascripts/flot/jquery.flot.navigate.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.pie.js +750 -0
- data/public/javascripts/flot/jquery.flot.pie.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.resize.js +60 -0
- data/public/javascripts/flot/jquery.flot.resize.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.selection.js +344 -0
- data/public/javascripts/flot/jquery.flot.selection.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.stack.js +184 -0
- data/public/javascripts/flot/jquery.flot.stack.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.symbol.js +70 -0
- data/public/javascripts/flot/jquery.flot.symbol.min.js +1 -0
- data/public/javascripts/flot/jquery.flot.threshold.js +103 -0
- data/public/javascripts/flot/jquery.flot.threshold.min.js +1 -0
- data/public/javascripts/flot/jquery.js +8316 -0
- data/public/javascripts/flot/jquery.min.js +23 -0
- data/public/javascripts/jquery.qtip.js +2675 -0
- data/public/javascripts/jquery.sparkline.js +1271 -0
- data/public/javascripts/races.js +245 -0
- data/public/stylesheets/sass/admin/races.sass +65 -70
- data/public/stylesheets/sass/jquery.flot.sass +416 -0
- data/public/stylesheets/sass/race_results.sass +38 -2
- data/radiant-race_results-extension.gemspec +1 -1
- metadata +95 -11
- data/public/javascripts/tablesorter.js +0 -3
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,38 @@
|
|
|
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>
|
|
@@ -0,0 +1,75 @@
|
|
|
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>
|
|
Binary file
|
|
@@ -0,0 +1,45 @@
|
|
|
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>
|
|
@@ -0,0 +1,44 @@
|
|
|
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>
|
|
@@ -0,0 +1,97 @@
|
|
|
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>
|
|
@@ -0,0 +1,93 @@
|
|
|
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>
|