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.
- 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
|
@@ -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>
|
data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/setting-options.html
DELETED
|
@@ -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>
|