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