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.
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,83 +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>You can update a chart periodically to get a real-time effect
17
- by using a timer to insert the new data in the plot and redraw it.</p>
18
-
19
- <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
20
-
21
- <script type="text/javascript">
22
- $(function () {
23
- // we use an inline data source in the example, usually data would
24
- // be fetched from a server
25
- var data = [], totalPoints = 300;
26
- function getRandomData() {
27
- if (data.length > 0)
28
- data = data.slice(1);
29
-
30
- // do a random walk
31
- while (data.length < totalPoints) {
32
- var prev = data.length > 0 ? data[data.length - 1] : 50;
33
- var y = prev + Math.random() * 10 - 5;
34
- if (y < 0)
35
- y = 0;
36
- if (y > 100)
37
- y = 100;
38
- data.push(y);
39
- }
40
-
41
- // zip the generated y values with the x values
42
- var res = [];
43
- for (var i = 0; i < data.length; ++i)
44
- res.push([i, data[i]])
45
- return res;
46
- }
47
-
48
- // setup control widget
49
- var updateInterval = 30;
50
- $("#updateInterval").val(updateInterval).change(function () {
51
- var v = $(this).val();
52
- if (v && !isNaN(+v)) {
53
- updateInterval = +v;
54
- if (updateInterval < 1)
55
- updateInterval = 1;
56
- if (updateInterval > 2000)
57
- updateInterval = 2000;
58
- $(this).val("" + updateInterval);
59
- }
60
- });
61
-
62
- // setup plot
63
- var options = {
64
- series: { shadowSize: 0 }, // drawing is faster without shadows
65
- yaxis: { min: 0, max: 100 },
66
- xaxis: { show: false }
67
- };
68
- var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
69
-
70
- function update() {
71
- plot.setData([ getRandomData() ]);
72
- // since the axes don't change, we don't need to call plot.setupGrid()
73
- plot.draw();
74
-
75
- setTimeout(update, updateInterval);
76
- }
77
-
78
- update();
79
- });
80
- </script>
81
-
82
- </body>
83
- </html>
@@ -1,61 +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.resize.js"></script>
11
- <style type="text/css">
12
- html, body {
13
- height: 100%; /* make the percentage height on placeholder work */
14
- }
15
- .message {
16
- padding-left: 50px;
17
- font-size: smaller;
18
- }
19
- </style>
20
- </head>
21
- <body>
22
- <h1>Flot Examples</h1>
23
-
24
- <div id="placeholder" style="width:80%;height:40%;"></div>
25
-
26
- <p class="message"></p>
27
-
28
- <p>Sometimes it makes more sense to just let the plot take up the
29
- available space. In that case, we need to redraw the plot each
30
- time the placeholder changes its size. If you include the resize
31
- plugin, this is handled automatically.</p>
32
-
33
- <p>Try resizing the window.</p>
34
-
35
-
36
- <script type="text/javascript">
37
- $(function () {
38
- var d1 = [];
39
- for (var i = 0; i < 14; i += 0.5)
40
- d1.push([i, Math.sin(i)]);
41
-
42
- var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
43
- var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
44
-
45
- var placeholder = $("#placeholder");
46
-
47
- var plot = $.plot(placeholder, [d1, d2, d3]);
48
-
49
- // the plugin includes a jQuery plugin for adding resize events to
50
- // any element, let's just add a callback so we can display the
51
- // placeholder size
52
- placeholder.resize(function () {
53
- $(".message").text("Placeholder is now "
54
- + $(this).width() + "x" + $(this).height()
55
- + " pixels");
56
- });
57
- });
58
- </script>
59
-
60
- </body>
61
- </html>
@@ -1,114 +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.selection.js"></script>
11
- </head>
12
- <body>
13
- <h1>Flot Examples</h1>
14
-
15
- <div id="placeholder" style="width:600px;height:300px"></div>
16
-
17
- <p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
18
-
19
- <p>Flot supports selections through the selection plugin.
20
- You can enable rectangular selection
21
- or one-dimensional selection if the user should only be able to
22
- select on one axis. Try left-click and drag on the plot above
23
- where selection on the x axis is enabled.</p>
24
-
25
- <p>You selected: <span id="selection"></span></p>
26
-
27
- <p>The plot command returns a plot object you can use to control
28
- the selection. Click the buttons below.</p>
29
-
30
- <p><input id="clearSelection" type="button" value="Clear selection" />
31
- <input id="setSelection" type="button" value="Select year 1994" /></p>
32
-
33
- <p>Selections are really useful for zooming. Just replot the
34
- chart with min and max values for the axes set to the values
35
- in the "plotselected" event triggered. Enable the checkbox
36
- below and select a region again.</p>
37
-
38
- <p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p>
39
-
40
- <script type="text/javascript">
41
- $(function () {
42
- var data = [
43
- {
44
- label: "United States",
45
- data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
46
- },
47
- {
48
- label: "Russia",
49
- data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
50
- },
51
- {
52
- label: "United Kingdom",
53
- data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
54
- },
55
- {
56
- label: "Germany",
57
- data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
58
- },
59
- {
60
- label: "Denmark",
61
- data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
62
- },
63
- {
64
- label: "Sweden",
65
- data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
66
- },
67
- {
68
- label: "Norway",
69
- data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
70
- }
71
- ];
72
-
73
- var options = {
74
- series: {
75
- lines: { show: true },
76
- points: { show: true }
77
- },
78
- legend: { noColumns: 2 },
79
- xaxis: { tickDecimals: 0 },
80
- yaxis: { min: 0 },
81
- selection: { mode: "x" }
82
- };
83
-
84
- var placeholder = $("#placeholder");
85
-
86
- placeholder.bind("plotselected", function (event, ranges) {
87
- $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
88
-
89
- var zoom = $("#zoom").attr("checked");
90
- if (zoom)
91
- plot = $.plot(placeholder, data,
92
- $.extend(true, {}, options, {
93
- xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
94
- }));
95
- });
96
-
97
- placeholder.bind("plotunselected", function (event) {
98
- $("#selection").text("");
99
- });
100
-
101
- var plot = $.plot(placeholder, data, options);
102
-
103
- $("#clearSelection").click(function () {
104
- plot.clearSelection();
105
- });
106
-
107
- $("#setSelection").click(function () {
108
- plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
109
- });
110
- });
111
- </script>
112
-
113
- </body>
114
- </html>
@@ -1,61 +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>There are plenty of options you can set to control the precise
17
- looks of your plot. You can control the ticks on the axes, the
18
- legend, the graph type, etc. The idea is that Flot goes to great
19
- lengths to provide sensible defaults so that you don't have to
20
- customize much for a good result.</p>
21
-
22
- <script type="text/javascript">
23
- $(function () {
24
- var d1 = [];
25
- for (var i = 0; i < Math.PI * 2; i += 0.25)
26
- d1.push([i, Math.sin(i)]);
27
-
28
- var d2 = [];
29
- for (var i = 0; i < Math.PI * 2; i += 0.25)
30
- d2.push([i, Math.cos(i)]);
31
-
32
- var d3 = [];
33
- for (var i = 0; i < Math.PI * 2; i += 0.1)
34
- d3.push([i, Math.tan(i)]);
35
-
36
- $.plot($("#placeholder"), [
37
- { label: "sin(x)", data: d1},
38
- { label: "cos(x)", data: d2},
39
- { label: "tan(x)", data: d3}
40
- ], {
41
- series: {
42
- lines: { show: true },
43
- points: { show: true }
44
- },
45
- xaxis: {
46
- ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
47
- },
48
- yaxis: {
49
- ticks: 10,
50
- min: -2,
51
- max: 2
52
- },
53
- grid: {
54
- backgroundColor: { colors: ["#fff", "#eee"] }
55
- }
56
- });
57
- });
58
- </script>
59
-
60
- </body>
61
- </html>
@@ -1,77 +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.stack.js"></script>
11
- </head>
12
- <body>
13
- <h1>Flot Examples</h1>
14
-
15
- <div id="placeholder" style="width:600px;height:300px;"></div>
16
-
17
- <p>With the stack plugin, you can have Flot stack the
18
- series. This is useful if you wish to display both a total and the
19
- constituents it is made of. The only requirement is that you provide
20
- the input sorted on x.</p>
21
-
22
- <p class="stackControls">
23
- <input type="button" value="With stacking">
24
- <input type="button" value="Without stacking">
25
- </p>
26
-
27
- <p class="graphControls">
28
- <input type="button" value="Bars">
29
- <input type="button" value="Lines">
30
- <input type="button" value="Lines with steps">
31
- </p>
32
-
33
- <script id="source">
34
- $(function () {
35
- var d1 = [];
36
- for (var i = 0; i <= 10; i += 1)
37
- d1.push([i, parseInt(Math.random() * 30)]);
38
-
39
- var d2 = [];
40
- for (var i = 0; i <= 10; i += 1)
41
- d2.push([i, parseInt(Math.random() * 30)]);
42
-
43
- var d3 = [];
44
- for (var i = 0; i <= 10; i += 1)
45
- d3.push([i, parseInt(Math.random() * 30)]);
46
-
47
- var stack = 0, bars = true, lines = false, steps = false;
48
-
49
- function plotWithOptions() {
50
- $.plot($("#placeholder"), [ d1, d2, d3 ], {
51
- series: {
52
- stack: stack,
53
- lines: { show: lines, fill: true, steps: steps },
54
- bars: { show: bars, barWidth: 0.6 }
55
- }
56
- });
57
- }
58
-
59
- plotWithOptions();
60
-
61
- $(".stackControls input").click(function (e) {
62
- e.preventDefault();
63
- stack = $(this).val() == "With stacking" ? true : null;
64
- plotWithOptions();
65
- });
66
- $(".graphControls input").click(function (e) {
67
- e.preventDefault();
68
- bars = $(this).val().indexOf("Bars") != -1;
69
- lines = $(this).val().indexOf("Lines") != -1;
70
- steps = $(this).val().indexOf("steps") != -1;
71
- plotWithOptions();
72
- });
73
- });
74
- </script>
75
-
76
- </body>
77
- </html>
@@ -1,49 +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.symbol.js"></script>
11
- </head>
12
- <body>
13
- <h1>Flot Examples</h1>
14
-
15
- <div id="placeholder" style="width:600px;height:300px"></div>
16
-
17
- <p>Various point types. Circles are built-in. For other
18
- point types, you can define a little callback function to draw the
19
- symbol; some common ones are available in the symbol plugin.</p>
20
-
21
- <script type="text/javascript">
22
- $(function () {
23
- function generate(offset, amplitude) {
24
- var res = [];
25
- var start = 0, end = 10;
26
- for (var i = 0; i <= 50; ++i) {
27
- var x = start + i / 50 * (end - start);
28
- res.push([x, amplitude * Math.sin(x + offset)]);
29
- }
30
- return res;
31
- }
32
-
33
- var data = [
34
- { data: generate(2, 1.8), points: { symbol: "circle" } },
35
- { data: generate(3, 1.5), points: { symbol: "square" } },
36
- { data: generate(4, 0.9), points: { symbol: "diamond" } },
37
- { data: generate(6, 1.4), points: { symbol: "triangle" } },
38
- { data: generate(7, 1.1), points: { symbol: "cross" } }
39
- ];
40
-
41
- $.plot($("#placeholder"), data, {
42
- series: { points: { show: true, radius: 3 } },
43
- grid: { hoverable: true }
44
- });
45
- });
46
- </script>
47
-
48
- </body>
49
- </html>