alchemy 1.0.2 → 1.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. data/app/assets/stylesheets/alchemy/components/_chosen.scss +1 -1
  2. data/app/assets/stylesheets/alchemy/components/_normalize.scss +262 -314
  3. data/app/assets/stylesheets/alchemy/components/buttons/_buttons.scss +49 -12
  4. data/app/assets/stylesheets/alchemy/components/buttons/_buttons_vars.scss +2 -1
  5. data/app/assets/stylesheets/alchemy/components/forms/_forms.scss +35 -19
  6. data/app/assets/stylesheets/alchemy/components/forms/_forms_responsive.scss +11 -5
  7. data/app/assets/stylesheets/alchemy/components/header/_header.scss +2 -0
  8. data/app/assets/stylesheets/alchemy/components/login/_login.scss +5 -1
  9. data/app/assets/stylesheets/alchemy/partials/_colors.scss +6 -6
  10. data/app/assets/stylesheets/alchemy/partials/_vars.scss +1 -1
  11. data/app/helpers/alchemy/layout_helper.rb +16 -0
  12. data/lib/alchemy.rb +1 -5
  13. data/lib/alchemy/engine.rb +8 -0
  14. data/lib/alchemy/version.rb +1 -1
  15. data/vendor/assets/javascripts/alchemy/handlebars.js +2201 -0
  16. metadata +5 -48
  17. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/API.txt +0 -1201
  18. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/FAQ.txt +0 -76
  19. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/LICENSE.txt +0 -22
  20. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/Makefile +0 -9
  21. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/NEWS.txt +0 -508
  22. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/PLUGINS.txt +0 -137
  23. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/README.txt +0 -90
  24. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/ajax.html +0 -143
  25. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/annotating.html +0 -75
  26. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-down.gif +0 -0
  27. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-left.gif +0 -0
  28. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-right.gif +0 -0
  29. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/arrow-up.gif +0 -0
  30. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/basic.html +0 -38
  31. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-1.json +0 -4
  32. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-2.json +0 -4
  33. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-3.json +0 -4
  34. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-4.json +0 -4
  35. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth-5.json +0 -4
  36. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-eu-gdp-growth.json +0 -4
  37. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-japan-gdp-growth.json +0 -4
  38. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/data-usa-gdp-growth.json +0 -4
  39. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/graph-types.html +0 -75
  40. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/hs-2004-27-a-large_web.jpg +0 -0
  41. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/image.html +0 -45
  42. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/index.html +0 -44
  43. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/interacting-axes.html +0 -97
  44. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/interacting.html +0 -93
  45. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/layout.css +0 -6
  46. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/multiple-axes.html +0 -60
  47. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/navigate.html +0 -118
  48. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/percentiles.html +0 -57
  49. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/pie.html +0 -756
  50. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/realtime.html +0 -83
  51. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/resize.html +0 -61
  52. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/selection.html +0 -114
  53. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/setting-options.html +0 -61
  54. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/stacking.html +0 -77
  55. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/symbols.html +0 -49
  56. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/thresholding.html +0 -54
  57. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/time.html +0 -71
  58. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/tracking.html +0 -95
  59. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/turning-series.html +0 -98
  60. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/visitors.html +0 -90
  61. data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/zooming.html +0 -98
@@ -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,4 +0,0 @@
1
- {
2
- "label": "Europe (EU27)",
3
- "data": [[1999, 3.0], [2000, 3.9]]
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "label": "Europe (EU27)",
3
- "data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2]]
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "label": "Europe (EU27)",
3
- "data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5]]
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "label": "Europe (EU27)",
3
- "data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "label": "Europe (EU27)",
3
- "data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "label": "Europe (EU27)",
3
- "data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "label": "Japan",
3
- "data": [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]]
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "label": "USA",
3
- "data": [[1999, 4.4], [2000, 3.7], [2001, 0.8], [2002, 1.6], [2003, 2.5], [2004, 3.6], [2005, 2.9], [2006, 2.8], [2007, 2.0], [2008, 1.1]]
4
- }
@@ -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>
@@ -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>
@@ -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>