columbus3 0.2.1 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.textile +62 -0
- data/bower_components/flot/.bower.json +19 -0
- data/bower_components/flot/.gitignore +3 -0
- data/bower_components/flot/.travis.yml +3 -0
- data/bower_components/flot/API.md +1498 -0
- data/bower_components/flot/CONTRIBUTING.md +98 -0
- data/bower_components/flot/FAQ.md +75 -0
- data/bower_components/flot/LICENSE.txt +22 -0
- data/bower_components/flot/Makefile +12 -0
- data/bower_components/flot/NEWS.md +1026 -0
- data/bower_components/flot/PLUGINS.md +143 -0
- data/bower_components/flot/README.md +110 -0
- data/bower_components/flot/component.json +8 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-1.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-2.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-3.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-4.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-5.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/data-japan-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/data-usa-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/index.html +173 -0
- data/bower_components/flot/examples/annotating/index.html +87 -0
- data/bower_components/flot/examples/axes-interacting/index.html +97 -0
- data/bower_components/flot/examples/axes-multiple/index.html +77 -0
- data/bower_components/flot/examples/axes-time-zones/date.js +893 -0
- data/bower_components/flot/examples/axes-time-zones/index.html +114 -0
- data/bower_components/flot/examples/axes-time-zones/tz/africa +1181 -0
- data/bower_components/flot/examples/axes-time-zones/tz/antarctica +413 -0
- data/bower_components/flot/examples/axes-time-zones/tz/asia +2717 -0
- data/bower_components/flot/examples/axes-time-zones/tz/australasia +1719 -0
- data/bower_components/flot/examples/axes-time-zones/tz/backward +117 -0
- data/bower_components/flot/examples/axes-time-zones/tz/etcetera +81 -0
- data/bower_components/flot/examples/axes-time-zones/tz/europe +2856 -0
- data/bower_components/flot/examples/axes-time-zones/tz/factory +10 -0
- data/bower_components/flot/examples/axes-time-zones/tz/iso3166.tab +276 -0
- data/bower_components/flot/examples/axes-time-zones/tz/leapseconds +100 -0
- data/bower_components/flot/examples/axes-time-zones/tz/northamerica +3235 -0
- data/bower_components/flot/examples/axes-time-zones/tz/pacificnew +28 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar87 +390 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar88 +390 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar89 +395 -0
- data/bower_components/flot/examples/axes-time-zones/tz/southamerica +1711 -0
- data/bower_components/flot/examples/axes-time-zones/tz/systemv +38 -0
- data/bower_components/flot/examples/axes-time-zones/tz/yearistype.sh +38 -0
- data/bower_components/flot/examples/axes-time-zones/tz/zone.tab +441 -0
- data/bower_components/flot/examples/axes-time/index.html +137 -0
- data/bower_components/flot/examples/background.png +0 -0
- data/bower_components/flot/examples/basic-options/index.html +91 -0
- data/bower_components/flot/examples/basic-usage/index.html +57 -0
- data/bower_components/flot/examples/canvas/index.html +75 -0
- data/bower_components/flot/examples/categories/index.html +64 -0
- data/bower_components/flot/examples/examples.css +97 -0
- data/bower_components/flot/examples/image/hs-2004-27-a-large-web.jpg +0 -0
- data/bower_components/flot/examples/image/index.html +69 -0
- data/bower_components/flot/examples/index.html +80 -0
- data/bower_components/flot/examples/interacting/index.html +118 -0
- data/bower_components/flot/examples/navigate/arrow-down.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-left.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-right.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-up.gif +0 -0
- data/bower_components/flot/examples/navigate/index.html +153 -0
- data/bower_components/flot/examples/percentiles/index.html +79 -0
- data/bower_components/flot/examples/realtime/index.html +122 -0
- data/bower_components/flot/examples/resize/index.html +76 -0
- data/bower_components/flot/examples/selection/index.html +152 -0
- data/bower_components/flot/examples/series-errorbars/index.html +150 -0
- data/bower_components/flot/examples/series-pie/index.html +818 -0
- data/bower_components/flot/examples/series-toggle/index.html +121 -0
- data/bower_components/flot/examples/series-types/index.html +90 -0
- data/bower_components/flot/examples/shared/jquery-ui/jquery-ui.min.css +6 -0
- data/bower_components/flot/examples/stacking/index.html +107 -0
- data/bower_components/flot/examples/symbols/index.html +76 -0
- data/bower_components/flot/examples/threshold/index.html +76 -0
- data/bower_components/flot/examples/tracking/index.html +135 -0
- data/bower_components/flot/examples/visitors/index.html +147 -0
- data/bower_components/flot/examples/zooming/index.html +144 -0
- data/bower_components/flot/excanvas.js +1428 -0
- data/bower_components/flot/excanvas.min.js +1 -0
- data/bower_components/flot/flot.jquery.json +27 -0
- data/bower_components/flot/jquery.colorhelpers.js +180 -0
- data/bower_components/flot/jquery.flot.canvas.js +345 -0
- data/bower_components/flot/jquery.flot.categories.js +190 -0
- data/bower_components/flot/jquery.flot.crosshair.js +176 -0
- data/bower_components/flot/jquery.flot.errorbars.js +353 -0
- data/bower_components/flot/jquery.flot.fillbetween.js +226 -0
- data/bower_components/flot/jquery.flot.image.js +241 -0
- data/bower_components/flot/jquery.flot.js +3168 -0
- data/bower_components/flot/jquery.flot.navigate.js +346 -0
- data/bower_components/flot/jquery.flot.pie.js +820 -0
- data/bower_components/flot/jquery.flot.resize.js +59 -0
- data/bower_components/flot/jquery.flot.selection.js +360 -0
- data/bower_components/flot/jquery.flot.stack.js +188 -0
- data/bower_components/flot/jquery.flot.symbol.js +71 -0
- data/bower_components/flot/jquery.flot.threshold.js +142 -0
- data/bower_components/flot/jquery.flot.time.js +432 -0
- data/bower_components/flot/jquery.js +9472 -0
- data/bower_components/flot/package.json +11 -0
- data/bower_components/jquery/.bower.json +38 -0
- data/bower_components/jquery/MIT-LICENSE.txt +21 -0
- data/bower_components/jquery/bower.json +28 -0
- data/bower_components/jquery/dist/jquery.js +9210 -0
- data/bower_components/jquery/dist/jquery.min.js +5 -0
- data/bower_components/jquery/dist/jquery.min.map +1 -0
- data/bower_components/jquery/src/ajax.js +786 -0
- data/bower_components/jquery/src/ajax/jsonp.js +89 -0
- data/bower_components/jquery/src/ajax/load.js +75 -0
- data/bower_components/jquery/src/ajax/parseJSON.js +13 -0
- data/bower_components/jquery/src/ajax/parseXML.js +28 -0
- data/bower_components/jquery/src/ajax/script.js +64 -0
- data/bower_components/jquery/src/ajax/var/nonce.js +5 -0
- data/bower_components/jquery/src/ajax/var/rquery.js +3 -0
- data/bower_components/jquery/src/ajax/xhr.js +136 -0
- data/bower_components/jquery/src/attributes.js +11 -0
- data/bower_components/jquery/src/attributes/attr.js +141 -0
- data/bower_components/jquery/src/attributes/classes.js +158 -0
- data/bower_components/jquery/src/attributes/prop.js +94 -0
- data/bower_components/jquery/src/attributes/support.js +35 -0
- data/bower_components/jquery/src/attributes/val.js +161 -0
- data/bower_components/jquery/src/callbacks.js +205 -0
- data/bower_components/jquery/src/core.js +502 -0
- data/bower_components/jquery/src/core/access.js +60 -0
- data/bower_components/jquery/src/core/init.js +123 -0
- data/bower_components/jquery/src/core/parseHTML.js +39 -0
- data/bower_components/jquery/src/core/ready.js +97 -0
- data/bower_components/jquery/src/core/var/rsingleTag.js +4 -0
- data/bower_components/jquery/src/css.js +450 -0
- data/bower_components/jquery/src/css/addGetHookIf.js +22 -0
- data/bower_components/jquery/src/css/curCSS.js +57 -0
- data/bower_components/jquery/src/css/defaultDisplay.js +70 -0
- data/bower_components/jquery/src/css/hiddenVisibleSelectors.js +15 -0
- data/bower_components/jquery/src/css/support.js +96 -0
- data/bower_components/jquery/src/css/swap.js +28 -0
- data/bower_components/jquery/src/css/var/cssExpand.js +3 -0
- data/bower_components/jquery/src/css/var/getStyles.js +12 -0
- data/bower_components/jquery/src/css/var/isHidden.js +13 -0
- data/bower_components/jquery/src/css/var/rmargin.js +3 -0
- data/bower_components/jquery/src/css/var/rnumnonpx.js +5 -0
- data/bower_components/jquery/src/data.js +178 -0
- data/bower_components/jquery/src/data/Data.js +181 -0
- data/bower_components/jquery/src/data/accepts.js +20 -0
- data/bower_components/jquery/src/data/var/data_priv.js +5 -0
- data/bower_components/jquery/src/data/var/data_user.js +5 -0
- data/bower_components/jquery/src/deferred.js +149 -0
- data/bower_components/jquery/src/deprecated.js +13 -0
- data/bower_components/jquery/src/dimensions.js +50 -0
- data/bower_components/jquery/src/effects.js +648 -0
- data/bower_components/jquery/src/effects/Tween.js +114 -0
- data/bower_components/jquery/src/effects/animatedSelector.js +13 -0
- data/bower_components/jquery/src/event.js +868 -0
- data/bower_components/jquery/src/event/ajax.js +13 -0
- data/bower_components/jquery/src/event/alias.js +39 -0
- data/bower_components/jquery/src/event/support.js +9 -0
- data/bower_components/jquery/src/exports/amd.js +24 -0
- data/bower_components/jquery/src/exports/global.js +32 -0
- data/bower_components/jquery/src/intro.js +44 -0
- data/bower_components/jquery/src/jquery.js +37 -0
- data/bower_components/jquery/src/manipulation.js +580 -0
- data/bower_components/jquery/src/manipulation/_evalUrl.js +18 -0
- data/bower_components/jquery/src/manipulation/support.js +32 -0
- data/bower_components/jquery/src/manipulation/var/rcheckableType.js +3 -0
- data/bower_components/jquery/src/offset.js +207 -0
- data/bower_components/jquery/src/outro.js +1 -0
- data/bower_components/jquery/src/queue.js +142 -0
- data/bower_components/jquery/src/queue/delay.js +22 -0
- data/bower_components/jquery/src/selector-native.js +172 -0
- data/bower_components/jquery/src/selector-sizzle.js +14 -0
- data/bower_components/jquery/src/selector.js +1 -0
- data/bower_components/jquery/src/serialize.js +111 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.js +2067 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.min.js +3 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.min.map +1 -0
- data/bower_components/jquery/src/traversing.js +199 -0
- data/bower_components/jquery/src/traversing/findFilter.js +100 -0
- data/bower_components/jquery/src/traversing/var/rneedsContext.js +6 -0
- data/bower_components/jquery/src/var/arr.js +3 -0
- data/bower_components/jquery/src/var/class2type.js +4 -0
- data/bower_components/jquery/src/var/concat.js +5 -0
- data/bower_components/jquery/src/var/hasOwn.js +5 -0
- data/bower_components/jquery/src/var/indexOf.js +5 -0
- data/bower_components/jquery/src/var/pnum.js +3 -0
- data/bower_components/jquery/src/var/push.js +5 -0
- data/bower_components/jquery/src/var/rnotwhite.js +3 -0
- data/bower_components/jquery/src/var/slice.js +5 -0
- data/bower_components/jquery/src/var/strundefined.js +3 -0
- data/bower_components/jquery/src/var/support.js +4 -0
- data/bower_components/jquery/src/var/toString.js +5 -0
- data/bower_components/jquery/src/wrap.js +79 -0
- data/columbus3.gemspec +1 -1
- data/exe/columbus3 +72 -7
- data/lib/columbus3.rb +2 -1
- data/lib/columbus3/metadata/sidecar.rb +10 -1
- data/lib/columbus3/renderer/flot_renderer.rb +66 -0
- data/lib/columbus3/renderer/{renderer.rb → leaflet_renderer.rb} +0 -0
- data/lib/columbus3/version.rb +1 -1
- data/lib/html/flot.html.erb +106 -0
- metadata +194 -5
- data/README.md +0 -41
|
Binary file
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<title>Flot Examples: Image Plots</title>
|
|
6
|
+
<link href="../examples.css" rel="stylesheet" type="text/css">
|
|
7
|
+
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
|
8
|
+
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
|
9
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
|
10
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.image.js"></script>
|
|
11
|
+
<script type="text/javascript">
|
|
12
|
+
|
|
13
|
+
$(function() {
|
|
14
|
+
|
|
15
|
+
var data = [[["hs-2004-27-a-large-web.jpg", -10, -10, 10, 10]]];
|
|
16
|
+
|
|
17
|
+
var options = {
|
|
18
|
+
series: {
|
|
19
|
+
images: {
|
|
20
|
+
show: true
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
xaxis: {
|
|
24
|
+
min: -8,
|
|
25
|
+
max: 4
|
|
26
|
+
},
|
|
27
|
+
yaxis: {
|
|
28
|
+
min: -8,
|
|
29
|
+
max: 4
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
$.plot.image.loadDataImages(data, options, function () {
|
|
34
|
+
$.plot("#placeholder", data, options);
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
// Add the Flot version string to the footer
|
|
38
|
+
|
|
39
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
</script>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
|
|
46
|
+
<div id="header">
|
|
47
|
+
<h2>Image Plots</h2>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div id="content">
|
|
51
|
+
|
|
52
|
+
<div class="demo-container" style="width:600px;height:600px;">
|
|
53
|
+
<div id="placeholder" class="demo-placeholder"></div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
|
|
57
|
+
|
|
58
|
+
<p>With the image plugin, you can plot static images against a set of axes. This is for useful for adding ticks to complex prerendered visualizations. Instead of inputting data points, you specify the images and where their two opposite corners are supposed to be in plot space.</p>
|
|
59
|
+
|
|
60
|
+
<p>Images represent a little further complication because you need to make sure they are loaded before you can use them (Flot skips incomplete images). The plugin comes with a couple of helpers for doing that.</p>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div id="footer">
|
|
65
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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="examples.css" rel="stylesheet" type="text/css">
|
|
7
|
+
<style>
|
|
8
|
+
|
|
9
|
+
h3 {
|
|
10
|
+
margin-top: 30px;
|
|
11
|
+
margin-bottom: 5px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
</style>
|
|
15
|
+
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
|
|
16
|
+
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
|
|
17
|
+
<script type="text/javascript">
|
|
18
|
+
|
|
19
|
+
$(function() {
|
|
20
|
+
|
|
21
|
+
// Add the Flot version string to the footer
|
|
22
|
+
|
|
23
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
</script>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
|
|
30
|
+
<div id="header">
|
|
31
|
+
<h2>Flot Examples</h2>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div id="content">
|
|
35
|
+
|
|
36
|
+
<p>Here are some examples for <a href="http://www.flotcharts.org">Flot</a>, the Javascript charting library for jQuery:</p>
|
|
37
|
+
|
|
38
|
+
<h3>Basic Usage</h3>
|
|
39
|
+
|
|
40
|
+
<ul>
|
|
41
|
+
<li><a href="basic-usage/index.html">Basic example</a></li>
|
|
42
|
+
<li><a href="series-types/index.html">Different graph types</a> and <a href="categories/index.html">simple categories/textual data</a></li>
|
|
43
|
+
<li><a href="basic-options/index.html">Setting various options</a> and <a href="annotating/index.html">annotating a chart</a></li>
|
|
44
|
+
<li><a href="ajax/index.html">Updating graphs with AJAX</a> and <a href="realtime/index.html">real-time updates</a></li>
|
|
45
|
+
</ul>
|
|
46
|
+
|
|
47
|
+
<h3>Interactivity</h3>
|
|
48
|
+
|
|
49
|
+
<ul>
|
|
50
|
+
<li><a href="series-toggle/index.html">Turning series on/off</a></li>
|
|
51
|
+
<li><a href="selection/index.html">Rectangular selection support and zooming</a> and <a href="zooming/index.html">zooming with overview</a> (both with selection plugin)</li>
|
|
52
|
+
<li><a href="interacting/index.html">Interacting with the data points</a></li>
|
|
53
|
+
<li><a href="navigate/index.html">Panning and zooming</a> (with navigation plugin)</li>
|
|
54
|
+
<li><a href="resize/index.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
|
|
55
|
+
</ul>
|
|
56
|
+
|
|
57
|
+
<h3>Additional Features</h3>
|
|
58
|
+
|
|
59
|
+
<ul>
|
|
60
|
+
<li><a href="symbols/index.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
|
|
61
|
+
<li><a href="axes-time/index.html">Plotting time series</a>, <a href="visitors/index.html">visitors per day with zooming and weekends</a> (with selection plugin) and <a href="axes-time-zones/index.html">time zone support</a></li>
|
|
62
|
+
<li><a href="axes-multiple/index.html">Multiple axes</a> and <a href="axes-interacting/index.html">interacting with the axes</a></li>
|
|
63
|
+
<li><a href="threshold/index.html">Thresholding the data</a> (with threshold plugin)</li>
|
|
64
|
+
<li><a href="stacking/index.html">Stacked charts</a> (with stacking plugin)</li>
|
|
65
|
+
<li><a href="percentiles/index.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
|
|
66
|
+
<li><a href="tracking/index.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
|
|
67
|
+
<li><a href="image/index.html">Plotting prerendered images</a> (with image plugin)</li>
|
|
68
|
+
<li><a href="series-errorbars/index.html">Plotting error bars</a> (with errorbars plugin)</li>
|
|
69
|
+
<li><a href="series-pie/index.html">Pie charts</a> (with pie plugin)</li>
|
|
70
|
+
<li><a href="canvas/index.html">Rendering text with canvas instead of HTML</a> (with canvas plugin)</li>
|
|
71
|
+
</ul>
|
|
72
|
+
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div id="footer">
|
|
76
|
+
Copyright © 2007 - 2013 IOLA and Ole Laursen
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<title>Flot Examples: Interactivity</title>
|
|
6
|
+
<link href="../examples.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 type="text/javascript">
|
|
11
|
+
|
|
12
|
+
$(function() {
|
|
13
|
+
|
|
14
|
+
var sin = [],
|
|
15
|
+
cos = [];
|
|
16
|
+
|
|
17
|
+
for (var i = 0; i < 14; i += 0.5) {
|
|
18
|
+
sin.push([i, Math.sin(i)]);
|
|
19
|
+
cos.push([i, Math.cos(i)]);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
var plot = $.plot("#placeholder", [
|
|
23
|
+
{ data: sin, label: "sin(x)"},
|
|
24
|
+
{ data: cos, label: "cos(x)"}
|
|
25
|
+
], {
|
|
26
|
+
series: {
|
|
27
|
+
lines: {
|
|
28
|
+
show: true
|
|
29
|
+
},
|
|
30
|
+
points: {
|
|
31
|
+
show: true
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
grid: {
|
|
35
|
+
hoverable: true,
|
|
36
|
+
clickable: true
|
|
37
|
+
},
|
|
38
|
+
yaxis: {
|
|
39
|
+
min: -1.2,
|
|
40
|
+
max: 1.2
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
$("<div id='tooltip'></div>").css({
|
|
45
|
+
position: "absolute",
|
|
46
|
+
display: "none",
|
|
47
|
+
border: "1px solid #fdd",
|
|
48
|
+
padding: "2px",
|
|
49
|
+
"background-color": "#fee",
|
|
50
|
+
opacity: 0.80
|
|
51
|
+
}).appendTo("body");
|
|
52
|
+
|
|
53
|
+
$("#placeholder").bind("plothover", function (event, pos, item) {
|
|
54
|
+
|
|
55
|
+
if ($("#enablePosition:checked").length > 0) {
|
|
56
|
+
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
|
|
57
|
+
$("#hoverdata").text(str);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if ($("#enableTooltip:checked").length > 0) {
|
|
61
|
+
if (item) {
|
|
62
|
+
var x = item.datapoint[0].toFixed(2),
|
|
63
|
+
y = item.datapoint[1].toFixed(2);
|
|
64
|
+
|
|
65
|
+
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
|
|
66
|
+
.css({top: item.pageY+5, left: item.pageX+5})
|
|
67
|
+
.fadeIn(200);
|
|
68
|
+
} else {
|
|
69
|
+
$("#tooltip").hide();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
$("#placeholder").bind("plotclick", function (event, pos, item) {
|
|
75
|
+
if (item) {
|
|
76
|
+
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
|
|
77
|
+
plot.highlight(item.series, item.datapoint);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
// Add the Flot version string to the footer
|
|
82
|
+
|
|
83
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
</script>
|
|
87
|
+
</head>
|
|
88
|
+
<body>
|
|
89
|
+
<div id="header">
|
|
90
|
+
<h2>Interactivity</h2>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div id="content">
|
|
94
|
+
|
|
95
|
+
<div class="demo-container">
|
|
96
|
+
<div id="placeholder" class="demo-placeholder"></div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<p>One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.</p>
|
|
100
|
+
|
|
101
|
+
<p>
|
|
102
|
+
<label><input id="enablePosition" type="checkbox" checked="checked"></input>Show mouse position</label>
|
|
103
|
+
<span id="hoverdata"></span>
|
|
104
|
+
<span id="clickdata"></span>
|
|
105
|
+
</p>
|
|
106
|
+
|
|
107
|
+
<p>A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.</p>
|
|
108
|
+
|
|
109
|
+
<p><label><input id="enableTooltip" type="checkbox" checked="checked"></input>Enable tooltip</label></p>
|
|
110
|
+
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div id="footer">
|
|
114
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<title>Flot Examples: Navigation</title>
|
|
6
|
+
<link href="../examples.css" rel="stylesheet" type="text/css">
|
|
7
|
+
<style type="text/css">
|
|
8
|
+
|
|
9
|
+
#placeholder .button {
|
|
10
|
+
position: absolute;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
#placeholder div.button {
|
|
15
|
+
font-size: smaller;
|
|
16
|
+
color: #999;
|
|
17
|
+
background-color: #eee;
|
|
18
|
+
padding: 2px;
|
|
19
|
+
}
|
|
20
|
+
.message {
|
|
21
|
+
padding-left: 50px;
|
|
22
|
+
font-size: smaller;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
</style>
|
|
26
|
+
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
|
27
|
+
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
|
28
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
|
29
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
|
|
30
|
+
<script type="text/javascript">
|
|
31
|
+
|
|
32
|
+
$(function() {
|
|
33
|
+
|
|
34
|
+
// generate data set from a parametric function with a fractal look
|
|
35
|
+
|
|
36
|
+
function sumf(f, t, m) {
|
|
37
|
+
var res = 0;
|
|
38
|
+
for (var i = 1; i < m; ++i) {
|
|
39
|
+
res += f(i * i * t) / (i * i);
|
|
40
|
+
}
|
|
41
|
+
return res;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
var d1 = [];
|
|
45
|
+
for (var t = 0; t <= 2 * Math.PI; t += 0.01) {
|
|
46
|
+
d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
var data = [ d1 ],
|
|
50
|
+
placeholder = $("#placeholder");
|
|
51
|
+
|
|
52
|
+
var plot = $.plot(placeholder, data, {
|
|
53
|
+
series: {
|
|
54
|
+
lines: {
|
|
55
|
+
show: true
|
|
56
|
+
},
|
|
57
|
+
shadowSize: 0
|
|
58
|
+
},
|
|
59
|
+
xaxis: {
|
|
60
|
+
zoomRange: [0.1, 10],
|
|
61
|
+
panRange: [-10, 10]
|
|
62
|
+
},
|
|
63
|
+
yaxis: {
|
|
64
|
+
zoomRange: [0.1, 10],
|
|
65
|
+
panRange: [-10, 10]
|
|
66
|
+
},
|
|
67
|
+
zoom: {
|
|
68
|
+
interactive: true
|
|
69
|
+
},
|
|
70
|
+
pan: {
|
|
71
|
+
interactive: true
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
// show pan/zoom messages to illustrate events
|
|
76
|
+
|
|
77
|
+
placeholder.bind("plotpan", function (event, plot) {
|
|
78
|
+
var axes = plot.getAxes();
|
|
79
|
+
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
|
|
80
|
+
+ " – " + axes.xaxis.max.toFixed(2)
|
|
81
|
+
+ " and y: " + axes.yaxis.min.toFixed(2)
|
|
82
|
+
+ " – " + axes.yaxis.max.toFixed(2));
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
placeholder.bind("plotzoom", function (event, plot) {
|
|
86
|
+
var axes = plot.getAxes();
|
|
87
|
+
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
|
|
88
|
+
+ " – " + axes.xaxis.max.toFixed(2)
|
|
89
|
+
+ " and y: " + axes.yaxis.min.toFixed(2)
|
|
90
|
+
+ " – " + axes.yaxis.max.toFixed(2));
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
// add zoom out button
|
|
94
|
+
|
|
95
|
+
$("<div class='button' style='right:20px;top:20px'>zoom out</div>")
|
|
96
|
+
.appendTo(placeholder)
|
|
97
|
+
.click(function (event) {
|
|
98
|
+
event.preventDefault();
|
|
99
|
+
plot.zoomOut();
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
// and add panning buttons
|
|
103
|
+
|
|
104
|
+
// little helper for taking the repetitive work out of placing
|
|
105
|
+
// panning arrows
|
|
106
|
+
|
|
107
|
+
function addArrow(dir, right, top, offset) {
|
|
108
|
+
$("<img class='button' src='arrow-" + dir + ".gif' style='right:" + right + "px;top:" + top + "px'>")
|
|
109
|
+
.appendTo(placeholder)
|
|
110
|
+
.click(function (e) {
|
|
111
|
+
e.preventDefault();
|
|
112
|
+
plot.pan(offset);
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
addArrow("left", 55, 60, { left: -100 });
|
|
117
|
+
addArrow("right", 25, 60, { left: 100 });
|
|
118
|
+
addArrow("up", 40, 45, { top: -100 });
|
|
119
|
+
addArrow("down", 40, 75, { top: 100 });
|
|
120
|
+
|
|
121
|
+
// Add the Flot version string to the footer
|
|
122
|
+
|
|
123
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
</script>
|
|
127
|
+
</head>
|
|
128
|
+
<body>
|
|
129
|
+
|
|
130
|
+
<div id="header">
|
|
131
|
+
<h2>Navigation</h2>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div id="content">
|
|
135
|
+
|
|
136
|
+
<div class="demo-container">
|
|
137
|
+
<div id="placeholder" class="demo-placeholder"></div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<p class="message"></p>
|
|
141
|
+
|
|
142
|
+
<p>With the navigate plugin it is easy to add panning and zooming. Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
|
|
143
|
+
|
|
144
|
+
<p>The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.</p>
|
|
145
|
+
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<div id="footer">
|
|
149
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
</body>
|
|
153
|
+
</html>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<title>Flot Examples: Percentiles</title>
|
|
6
|
+
<link href="../examples.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.fillbetween.js"></script>
|
|
11
|
+
<script type="text/javascript">
|
|
12
|
+
|
|
13
|
+
$(function() {
|
|
14
|
+
|
|
15
|
+
var males = {"15%": [[2, 88.0], [3, 93.3], [4, 102.0], [5, 108.5], [6, 115.7], [7, 115.6], [8, 124.6], [9, 130.3], [10, 134.3], [11, 141.4], [12, 146.5], [13, 151.7], [14, 159.9], [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0]], "90%": [[2, 96.8], [3, 105.2], [4, 113.9], [5, 120.8], [6, 127.0], [7, 133.1], [8, 139.1], [9, 143.9], [10, 151.3], [11, 161.1], [12, 164.8], [13, 173.5], [14, 179.0], [15, 182.0], [16, 186.9], [17, 185.2], [18, 186.3], [19, 186.6]], "25%": [[2, 89.2], [3, 94.9], [4, 104.4], [5, 111.4], [6, 117.5], [7, 120.2], [8, 127.1], [9, 132.9], [10, 136.8], [11, 144.4], [12, 149.5], [13, 154.1], [14, 163.1], [15, 169.2], [16, 170.4], [17, 171.2], [18, 172.4], [19, 170.8]], "10%": [[2, 86.9], [3, 92.6], [4, 99.9], [5, 107.0], [6, 114.0], [7, 113.5], [8, 123.6], [9, 129.2], [10, 133.0], [11, 140.6], [12, 145.2], [13, 149.7], [14, 158.4], [15, 163.5], [16, 166.9], [17, 167.5], [18, 167.1], [19, 165.3]], "mean": [[2, 91.9], [3, 98.5], [4, 107.1], [5, 114.4], [6, 120.6], [7, 124.7], [8, 131.1], [9, 136.8], [10, 142.3], [11, 150.0], [12, 154.7], [13, 161.9], [14, 168.7], [15, 173.6], [16, 175.9], [17, 176.6], [18, 176.8], [19, 176.7]], "75%": [[2, 94.5], [3, 102.1], [4, 110.8], [5, 117.9], [6, 124.0], [7, 129.3], [8, 134.6], [9, 141.4], [10, 147.0], [11, 156.1], [12, 160.3], [13, 168.3], [14, 174.7], [15, 178.0], [16, 180.2], [17, 181.7], [18, 181.3], [19, 182.5]], "85%": [[2, 96.2], [3, 103.8], [4, 111.8], [5, 119.6], [6, 125.6], [7, 131.5], [8, 138.0], [9, 143.3], [10, 149.3], [11, 159.8], [12, 162.5], [13, 171.3], [14, 177.5], [15, 180.2], [16, 183.8], [17, 183.4], [18, 183.5], [19, 185.5]], "50%": [[2, 91.9], [3, 98.2], [4, 106.8], [5, 114.6], [6, 120.8], [7, 125.2], [8, 130.3], [9, 137.1], [10, 141.5], [11, 149.4], [12, 153.9], [13, 162.2], [14, 169.0], [15, 174.8], [16, 176.0], [17, 176.8], [18, 176.4], [19, 177.4]]};
|
|
16
|
+
|
|
17
|
+
var females = {"15%": [[2, 84.8], [3, 93.7], [4, 100.6], [5, 105.8], [6, 113.3], [7, 119.3], [8, 124.3], [9, 131.4], [10, 136.9], [11, 143.8], [12, 149.4], [13, 151.2], [14, 152.3], [15, 155.9], [16, 154.7], [17, 157.0], [18, 156.1], [19, 155.4]], "90%": [[2, 95.6], [3, 104.1], [4, 111.9], [5, 119.6], [6, 127.6], [7, 133.1], [8, 138.7], [9, 147.1], [10, 152.8], [11, 161.3], [12, 166.6], [13, 167.9], [14, 169.3], [15, 170.1], [16, 172.4], [17, 169.2], [18, 171.1], [19, 172.4]], "25%": [[2, 87.2], [3, 95.9], [4, 101.9], [5, 107.4], [6, 114.8], [7, 121.4], [8, 126.8], [9, 133.4], [10, 138.6], [11, 146.2], [12, 152.0], [13, 153.8], [14, 155.7], [15, 158.4], [16, 157.0], [17, 158.5], [18, 158.4], [19, 158.1]], "10%": [[2, 84.0], [3, 91.9], [4, 99.2], [5, 105.2], [6, 112.7], [7, 118.0], [8, 123.3], [9, 130.2], [10, 135.0], [11, 141.1], [12, 148.3], [13, 150.0], [14, 150.7], [15, 154.3], [16, 153.6], [17, 155.6], [18, 154.7], [19, 153.1]], "mean": [[2, 90.2], [3, 98.3], [4, 105.2], [5, 112.2], [6, 119.0], [7, 125.8], [8, 131.3], [9, 138.6], [10, 144.2], [11, 151.3], [12, 156.7], [13, 158.6], [14, 160.5], [15, 162.1], [16, 162.9], [17, 162.2], [18, 163.0], [19, 163.1]], "75%": [[2, 93.2], [3, 101.5], [4, 107.9], [5, 116.6], [6, 122.8], [7, 129.3], [8, 135.2], [9, 143.7], [10, 148.7], [11, 156.9], [12, 160.8], [13, 163.0], [14, 165.0], [15, 165.8], [16, 168.7], [17, 166.2], [18, 167.6], [19, 168.0]], "85%": [[2, 94.5], [3, 102.8], [4, 110.4], [5, 119.0], [6, 125.7], [7, 131.5], [8, 137.9], [9, 146.0], [10, 151.3], [11, 159.9], [12, 164.0], [13, 166.5], [14, 167.5], [15, 168.5], [16, 171.5], [17, 168.0], [18, 169.8], [19, 170.3]], "50%": [[2, 90.2], [3, 98.1], [4, 105.2], [5, 111.7], [6, 118.2], [7, 125.6], [8, 130.5], [9, 138.3], [10, 143.7], [11, 151.4], [12, 156.7], [13, 157.7], [14, 161.0], [15, 162.0], [16, 162.8], [17, 162.2], [18, 162.8], [19, 163.3]]};
|
|
18
|
+
|
|
19
|
+
var dataset = [
|
|
20
|
+
{ label: "Female mean", data: females["mean"], lines: { show: true }, color: "rgb(255,50,50)" },
|
|
21
|
+
{ id: "f15%", data: females["15%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(255,50,50)" },
|
|
22
|
+
{ id: "f25%", data: females["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f15%" },
|
|
23
|
+
{ id: "f50%", data: females["50%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(255,50,50)", fillBetween: "f25%" },
|
|
24
|
+
{ id: "f75%", data: females["75%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(255,50,50)", fillBetween: "f50%" },
|
|
25
|
+
{ id: "f85%", data: females["85%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f75%" },
|
|
26
|
+
|
|
27
|
+
{ label: "Male mean", data: males["mean"], lines: { show: true }, color: "rgb(50,50,255)" },
|
|
28
|
+
{ id: "m15%", data: males["15%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(50,50,255)" },
|
|
29
|
+
{ id: "m25%", data: males["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: "m15%" },
|
|
30
|
+
{ id: "m50%", data: males["50%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(50,50,255)", fillBetween: "m25%" },
|
|
31
|
+
{ id: "m75%", data: males["75%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(50,50,255)", fillBetween: "m50%" },
|
|
32
|
+
{ id: "m85%", data: males["85%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: "m75%" }
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
$.plot($("#placeholder"), dataset, {
|
|
36
|
+
xaxis: {
|
|
37
|
+
tickDecimals: 0
|
|
38
|
+
},
|
|
39
|
+
yaxis: {
|
|
40
|
+
tickFormatter: function (v) {
|
|
41
|
+
return v + " cm";
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
legend: {
|
|
45
|
+
position: "se"
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Add the Flot version string to the footer
|
|
50
|
+
|
|
51
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
</script>
|
|
55
|
+
</head>
|
|
56
|
+
<body>
|
|
57
|
+
|
|
58
|
+
<div id="header">
|
|
59
|
+
<h2>Percentiles</h2>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div id="content">
|
|
63
|
+
|
|
64
|
+
<div class="demo-container">
|
|
65
|
+
<div id="placeholder" class="demo-placeholder"></div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<p>Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: <a href="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>). The 15%-85%, 25%-75% and 50% percentiles are indicated.</p>
|
|
69
|
+
|
|
70
|
+
<p>For each point of a filled curve, you can specify an arbitrary bottom. As this example illustrates, this can be useful for plotting percentiles. If you have the data sets available without appropriate fill bottoms, you can use the fillbetween plugin to compute the data point bottoms automatically.</p>
|
|
71
|
+
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div id="footer">
|
|
75
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
</body>
|
|
79
|
+
</html>
|