maglev-webtools 0.2.1 → 1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.rdoc +38 -29
- data/bin/webtools +22 -1
- data/lib/web_tools/code_browser.rb +156 -0
- data/lib/web_tools/debugger.rb +96 -199
- data/lib/web_tools/info.rb +1 -3
- data/lib/web_tools/method_list.rb +67 -0
- data/lib/web_tools/middleware/debugger.rb +10 -16
- data/lib/web_tools/object_log.rb +24 -0
- data/lib/web_tools/session_list.rb +119 -0
- data/lib/web_tools/shared_page_cache.rb +30 -0
- data/lib/web_tools/stat_process.rb +24 -0
- data/lib/web_tools/statistics.rb +14 -0
- data/lib/web_tools/support/app_model.rb +66 -101
- data/lib/web_tools/support/code_browser.rb +88 -86
- data/lib/web_tools/support/debugger.rb +303 -0
- data/lib/web_tools/support/error_log.rb +33 -0
- data/lib/web_tools/support/ruby.rb +60 -121
- data/lib/web_tools/support/service_helper.rb +38 -10
- data/lib/web_tools/support/smalltalk_extensions.rb +12 -0
- data/lib/web_tools/tool.rb +48 -0
- data/lib/web_tools/ui.rb +14 -53
- data/lib/web_tools/version_report.rb +29 -0
- data/lib/web_tools/workspace.rb +77 -0
- data/lib/web_tools.rb +14 -4
- data/public/CodeBrowser.html +51 -0
- data/public/CodeMirror/LICENSE +19 -0
- data/public/CodeMirror/css/codemirror.css +67 -0
- data/public/CodeMirror/css/default.css +18 -0
- data/public/CodeMirror/js/codemirror.js +2131 -0
- data/public/CodeMirror/js/ruby.js +195 -0
- data/public/CodeMirror/js/smalltalk.js +139 -0
- data/public/Debugger.html +28 -0
- data/public/MethodList.html +20 -0
- data/public/ObjectLog.html +20 -0
- data/public/SessionList.html +31 -0
- data/public/SharedPageCache.html +78 -0
- data/public/Statistics.html +64 -0
- data/public/VersionReport.html +50 -0
- data/public/Workspace.html +39 -0
- data/public/css/CodeBrowser.css +24 -0
- data/public/css/Debugger.css +32 -0
- data/public/css/MethodList.css +8 -0
- data/public/css/ObjectLog.css +5 -0
- data/public/css/SessionList.css +9 -0
- data/public/css/Statistics.css +24 -0
- data/public/{stylesheets → css}/base/images/ui-anim_basic_16x16.gif +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_flat_0_aaaaaa_40x100.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_flat_75_ffffff_40x100.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_glass_55_fbf9ee_1x400.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_glass_75_dadada_1x400.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_glass_75_e6e6e6_1x400.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_glass_95_fef1ec_1x400.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-icons_222222_256x240.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-icons_2e83ff_256x240.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-icons_454545_256x240.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-icons_888888_256x240.png +0 -0
- data/public/{stylesheets → css}/base/images/ui-icons_cd0a0a_256x240.png +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.accordion.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.all.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.autocomplete.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.base.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.button.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.core.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.datepicker.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.dialog.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.progressbar.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.resizable.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.selectable.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.slider.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.tabs.css +0 -0
- data/public/{stylesheets → css}/base/jquery.ui.theme.css +0 -0
- data/public/css/editor.css +25 -0
- data/public/css/jjmenu.css +33 -0
- data/public/css/menuitem.gif +0 -0
- data/public/css/more.gif +0 -0
- data/public/{stylesheets → css}/reset.css +1 -1
- data/public/css/smoothness/images/ui-anim_basic_16x16.gif +0 -0
- data/public/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png +0 -0
- data/public/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png +0 -0
- data/public/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png +0 -0
- data/public/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
- data/public/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png +0 -0
- data/public/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png +0 -0
- data/public/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png +0 -0
- data/public/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png +0 -0
- data/public/css/smoothness/images/ui-icons_222222_256x240.png +0 -0
- data/public/css/smoothness/images/ui-icons_2e83ff_256x240.png +0 -0
- data/public/css/smoothness/images/ui-icons_454545_256x240.png +0 -0
- data/public/css/smoothness/images/ui-icons_888888_256x240.png +0 -0
- data/public/css/smoothness/images/ui-icons_cd0a0a_256x240.png +0 -0
- data/public/css/smoothness/jquery-ui.css +489 -0
- data/public/css/ui-lightness/images/ui-anim_basic_16x16.gif +0 -0
- data/public/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png +0 -0
- data/public/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png +0 -0
- data/public/css/ui-lightness/images/ui-icons_222222_256x240.png +0 -0
- data/public/css/ui-lightness/images/ui-icons_228ef1_256x240.png +0 -0
- data/public/css/ui-lightness/images/ui-icons_ef8c08_256x240.png +0 -0
- data/public/css/ui-lightness/images/ui-icons_ffd27a_256x240.png +0 -0
- data/public/css/ui-lightness/images/ui-icons_ffffff_256x240.png +0 -0
- data/public/css/ui-lightness/jquery-ui.css +489 -0
- data/public/css/webtools.css +65 -0
- data/public/favicon.ico +0 -0
- data/public/flot/API.txt +1201 -0
- data/public/flot/FAQ.txt +76 -0
- data/public/flot/LICENSE.txt +22 -0
- data/public/flot/Makefile +9 -0
- data/public/flot/NEWS.txt +508 -0
- data/public/flot/PLUGINS.txt +137 -0
- data/public/flot/README.txt +90 -0
- data/public/flot/examples/ajax.html +143 -0
- data/public/flot/examples/annotating.html +75 -0
- data/public/flot/examples/arrow-down.gif +0 -0
- data/public/flot/examples/arrow-left.gif +0 -0
- data/public/flot/examples/arrow-right.gif +0 -0
- data/public/flot/examples/arrow-up.gif +0 -0
- data/public/flot/examples/basic.html +38 -0
- data/public/flot/examples/data-eu-gdp-growth-1.json +4 -0
- data/public/flot/examples/data-eu-gdp-growth-2.json +4 -0
- data/public/flot/examples/data-eu-gdp-growth-3.json +4 -0
- data/public/flot/examples/data-eu-gdp-growth-4.json +4 -0
- data/public/flot/examples/data-eu-gdp-growth-5.json +4 -0
- data/public/flot/examples/data-eu-gdp-growth.json +4 -0
- data/public/flot/examples/data-japan-gdp-growth.json +4 -0
- data/public/flot/examples/data-usa-gdp-growth.json +4 -0
- data/public/flot/examples/graph-types.html +75 -0
- data/public/flot/examples/hs-2004-27-a-large_web.jpg +0 -0
- data/public/flot/examples/image.html +45 -0
- data/public/flot/examples/index.html +44 -0
- data/public/flot/examples/interacting-axes.html +97 -0
- data/public/flot/examples/interacting.html +93 -0
- data/public/flot/examples/layout.css +6 -0
- data/public/flot/examples/multiple-axes.html +60 -0
- data/public/flot/examples/navigate.html +118 -0
- data/public/flot/examples/percentiles.html +57 -0
- data/public/flot/examples/pie.html +756 -0
- data/public/flot/examples/realtime.html +83 -0
- data/public/flot/examples/resize.html +61 -0
- data/public/flot/examples/selection.html +114 -0
- data/public/flot/examples/setting-options.html +61 -0
- data/public/flot/examples/stacking.html +77 -0
- data/public/flot/examples/symbols.html +49 -0
- data/public/flot/examples/thresholding.html +54 -0
- data/public/flot/examples/time.html +71 -0
- data/public/flot/examples/tracking.html +95 -0
- data/public/flot/examples/turning-series.html +98 -0
- data/public/flot/examples/visitors.html +90 -0
- data/public/flot/examples/zooming.html +98 -0
- data/public/flot/excanvas.js +1427 -0
- data/public/flot/excanvas.min.js +1 -0
- data/public/flot/jquery.colorhelpers.js +179 -0
- data/public/flot/jquery.colorhelpers.min.js +1 -0
- data/public/flot/jquery.flot.crosshair.js +167 -0
- data/public/flot/jquery.flot.crosshair.min.js +1 -0
- data/public/flot/jquery.flot.fillbetween.js +183 -0
- data/public/flot/jquery.flot.fillbetween.min.js +1 -0
- data/public/flot/jquery.flot.image.js +238 -0
- data/public/flot/jquery.flot.image.min.js +1 -0
- data/public/flot/jquery.flot.js +2599 -0
- data/public/flot/jquery.flot.min.js +6 -0
- data/public/flot/jquery.flot.navigate.js +336 -0
- data/public/flot/jquery.flot.navigate.min.js +1 -0
- data/public/flot/jquery.flot.pie.js +750 -0
- data/public/flot/jquery.flot.pie.min.js +1 -0
- data/public/flot/jquery.flot.resize.js +60 -0
- data/public/flot/jquery.flot.resize.min.js +1 -0
- data/public/flot/jquery.flot.selection.js +344 -0
- data/public/flot/jquery.flot.selection.min.js +1 -0
- data/public/flot/jquery.flot.stack.js +184 -0
- data/public/flot/jquery.flot.stack.min.js +1 -0
- data/public/flot/jquery.flot.symbol.js +70 -0
- data/public/flot/jquery.flot.symbol.min.js +1 -0
- data/public/flot/jquery.flot.threshold.js +103 -0
- data/public/flot/jquery.flot.threshold.min.js +1 -0
- data/public/flot/jquery.js +8316 -0
- data/public/flot/jquery.min.js +23 -0
- data/public/genPacking.pl +30 -0
- data/public/index.html +28 -0
- data/public/install.tpz +66 -0
- data/public/installAndRun.tpz +5 -0
- data/public/jsTree/jquery.jstree.js +3510 -0
- data/public/jsTree/themes/default/d.gif +0 -0
- data/public/jsTree/themes/default/d.png +0 -0
- data/public/jsTree/themes/default/style.css +73 -0
- data/public/jsTree/themes/default/throbber.gif +0 -0
- data/public/readMe.txt +9 -0
- data/public/scripts/CodeBrowser.js +645 -0
- data/public/scripts/Debugger.js +134 -0
- data/public/scripts/MethodList.js +72 -0
- data/public/scripts/ObjectLog.js +59 -0
- data/public/scripts/SessionList.js +164 -0
- data/public/scripts/Statistics.js +266 -0
- data/public/scripts/editor.js +430 -0
- data/public/scripts/jjmenu.js +375 -0
- data/public/scripts/jquery-ui.js +1012 -0
- data/public/scripts/jquery.js +154 -0
- data/public/scripts/webtools.js +374 -0
- data/public/src/CodeBrowser.gs +416 -0
- data/public/src/Debugger.gs +132 -0
- data/public/src/MethodList.gs +130 -0
- data/public/src/ObjectLog.gs +73 -0
- data/public/src/Server.gs +544 -0
- data/public/src/SessionList.gs +172 -0
- data/public/src/SharedPageCache.gs +66 -0
- data/public/src/StatProcess.gs +280 -0
- data/public/src/StatProcessType.gs +242 -0
- data/public/src/StatStatistic.gs +381 -0
- data/public/src/Statistics.gs +222 -0
- data/public/src/Statmonitor.gs +490 -0
- data/public/src/Tool.gs +86 -0
- data/public/src/VersionReport.gs +52 -0
- data/public/src/Workspace.gs +163 -0
- data/views/debugger.rhtml +6 -9
- metadata +344 -243
- data/lib/web_tools/#debugger.rb# +0 -212
- data/lib/web_tools/browser.rb +0 -45
- data/public/images/favicon.ico +0 -0
- data/public/javascript/CodeMirror/LICENSE +0 -23
- data/public/javascript/CodeMirror/css/Smalltalk.css +0 -34
- data/public/javascript/CodeMirror/js/codemirror.js +0 -582
- data/public/javascript/CodeMirror/js/editor.js +0 -1671
- data/public/javascript/CodeMirror/js/highlight.js +0 -68
- data/public/javascript/CodeMirror/js/parseSmalltalk.js +0 -126
- data/public/javascript/CodeMirror/js/parsedummy.js +0 -32
- data/public/javascript/CodeMirror/js/select.js +0 -699
- data/public/javascript/CodeMirror/js/stringstream.js +0 -159
- data/public/javascript/CodeMirror/js/tokenize.js +0 -57
- data/public/javascript/CodeMirror/js/undo.js +0 -413
- data/public/javascript/CodeMirror/js/util.js +0 -133
- data/public/javascript/CodeMirror/testSmalltalkParser.html +0 -116
- data/public/javascript/ace/ace-uncompressed.js +0 -17299
- data/public/javascript/ace/ace.js +0 -1
- data/public/javascript/ace/keybinding-emacs.js +0 -1
- data/public/javascript/ace/keybinding-vim.js +0 -1
- data/public/javascript/ace/mode-c_cpp.js +0 -1
- data/public/javascript/ace/mode-clojure.js +0 -1
- data/public/javascript/ace/mode-coffee.js +0 -1
- data/public/javascript/ace/mode-csharp.js +0 -1
- data/public/javascript/ace/mode-css.js +0 -1
- data/public/javascript/ace/mode-groovy.js +0 -1
- data/public/javascript/ace/mode-html.js +0 -1
- data/public/javascript/ace/mode-java.js +0 -1
- data/public/javascript/ace/mode-javascript.js +0 -1
- data/public/javascript/ace/mode-json.js +0 -1
- data/public/javascript/ace/mode-lua.js +0 -1
- data/public/javascript/ace/mode-markdown.js +0 -1
- data/public/javascript/ace/mode-ocaml.js +0 -1
- data/public/javascript/ace/mode-perl.js +0 -1
- data/public/javascript/ace/mode-php.js +0 -1
- data/public/javascript/ace/mode-python.js +0 -1
- data/public/javascript/ace/mode-ruby.js +0 -1
- data/public/javascript/ace/mode-scad.js +0 -1
- data/public/javascript/ace/mode-scala.js +0 -1
- data/public/javascript/ace/mode-scss.js +0 -1
- data/public/javascript/ace/mode-svg.js +0 -1
- data/public/javascript/ace/mode-textile.js +0 -1
- data/public/javascript/ace/mode-xml.js +0 -1
- data/public/javascript/ace/theme-clouds.js +0 -1
- data/public/javascript/ace/theme-clouds_midnight.js +0 -1
- data/public/javascript/ace/theme-cobalt.js +0 -1
- data/public/javascript/ace/theme-crimson_editor.js +0 -1
- data/public/javascript/ace/theme-dawn.js +0 -1
- data/public/javascript/ace/theme-eclipse.js +0 -1
- data/public/javascript/ace/theme-idle_fingers.js +0 -1
- data/public/javascript/ace/theme-kr_theme.js +0 -1
- data/public/javascript/ace/theme-merbivore.js +0 -1
- data/public/javascript/ace/theme-merbivore_soft.js +0 -1
- data/public/javascript/ace/theme-mono_industrial.js +0 -1
- data/public/javascript/ace/theme-monokai.js +0 -1
- data/public/javascript/ace/theme-pastel_on_dark.js +0 -1
- data/public/javascript/ace/theme-solarized_dark.js +0 -1
- data/public/javascript/ace/theme-solarized_light.js +0 -1
- data/public/javascript/ace/theme-textmate.js +0 -1
- data/public/javascript/ace/theme-twilight.js +0 -1
- data/public/javascript/ace/theme-vibrant_ink.js +0 -1
- data/public/javascript/ace/worker-coffee.js +0 -1
- data/public/javascript/ace/worker-css.js +0 -1
- data/public/javascript/ace/worker-javascript.js +0 -1
- data/public/javascript/webtools/browser.js +0 -260
- data/public/javascript/webtools/debugger.coffee +0 -286
- data/public/javascript/webtools/debugger.js +0 -366
- data/public/javascript/webtools/sessions.coffee +0 -17
- data/public/javascript/webtools/sessions.js +0 -27
- data/public/javascript/webtools/version.coffee +0 -14
- data/public/javascript/webtools/version.js +0 -20
- data/public/stylesheets/jquery.contextMenu.css +0 -62
- data/public/stylesheets/webtools.css +0 -53
- data/public/test.html +0 -47
|
@@ -0,0 +1,83 @@
|
|
|
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>
|
|
@@ -0,0 +1,61 @@
|
|
|
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>
|
|
@@ -0,0 +1,114 @@
|
|
|
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>
|
|
@@ -0,0 +1,61 @@
|
|
|
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>
|
|
@@ -0,0 +1,77 @@
|
|
|
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>
|
|
@@ -0,0 +1,49 @@
|
|
|
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>
|