how_are_we_doing 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. data/app/controllers/reports_controller.rb +54 -0
  2. data/app/helpers/prints_helper.rb +25 -0
  3. data/app/helpers/reports_helper.rb +36 -0
  4. data/app/helpers/shares_helper.rb +25 -0
  5. data/app/helpers/views_helper.rb +25 -0
  6. data/app/models/print.rb +28 -0
  7. data/app/models/share.rb +29 -0
  8. data/app/models/total.rb +25 -0
  9. data/app/models/view.rb +28 -0
  10. data/app/views/reports/index.html.erb +28 -0
  11. data/how_are_we_doing.gemspec +3 -0
  12. data/lib/acts_as_printable.rb +8 -1
  13. data/lib/acts_as_shareable.rb +9 -2
  14. data/lib/acts_as_totalable.rb +31 -0
  15. data/lib/acts_as_viewable.rb +8 -1
  16. data/lib/generators/how_are_we_doing/install/install_generator.rb +9 -3
  17. data/lib/generators/how_are_we_doing/install/templates/db/migrate/create_totals.rb +16 -0
  18. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/API.txt +1024 -0
  19. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/FAQ.txt +71 -0
  20. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/LICENSE.txt +22 -0
  21. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/Makefile +15 -0
  22. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/NEWS.txt +340 -0
  23. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/PLUGINS.txt +105 -0
  24. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/README.txt +81 -0
  25. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/ajax.html +143 -0
  26. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/annotating.html +75 -0
  27. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/arrow-down.gif +0 -0
  28. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/arrow-left.gif +0 -0
  29. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/arrow-right.gif +0 -0
  30. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/arrow-up.gif +0 -0
  31. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/basic.html +38 -0
  32. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-eu-gdp-growth-1.json +4 -0
  33. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-eu-gdp-growth-2.json +4 -0
  34. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-eu-gdp-growth-3.json +4 -0
  35. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-eu-gdp-growth-4.json +4 -0
  36. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-eu-gdp-growth-5.json +4 -0
  37. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-eu-gdp-growth.json +4 -0
  38. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-japan-gdp-growth.json +4 -0
  39. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/data-usa-gdp-growth.json +4 -0
  40. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/dual-axis.html +39 -0
  41. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/graph-types.html +75 -0
  42. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/hs-2004-27-a-large_web.jpg +0 -0
  43. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/image.html +45 -0
  44. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/index.html +43 -0
  45. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/interacting.html +93 -0
  46. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/layout.css +6 -0
  47. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/navigate.html +118 -0
  48. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/selection.html +114 -0
  49. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/setting-options.html +65 -0
  50. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/stacking.html +77 -0
  51. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/thresholding.html +54 -0
  52. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/time.html +71 -0
  53. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/tracking.html +95 -0
  54. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/turning-series.html +98 -0
  55. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/visitors.html +90 -0
  56. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/examples/zooming.html +98 -0
  57. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/excanvas.js +1427 -0
  58. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/excanvas.min.js +1 -0
  59. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.colorhelpers.js +174 -0
  60. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.colorhelpers.min.js +1 -0
  61. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.crosshair.js +156 -0
  62. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.crosshair.min.js +1 -0
  63. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.image.js +237 -0
  64. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.image.min.js +1 -0
  65. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.js +2119 -0
  66. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.min.js +1 -0
  67. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.navigate.js +272 -0
  68. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.navigate.min.js +1 -0
  69. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.selection.js +299 -0
  70. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.selection.min.js +1 -0
  71. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.stack.js +152 -0
  72. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.stack.min.js +1 -0
  73. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.threshold.js +103 -0
  74. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.flot.threshold.min.js +1 -0
  75. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.js +4376 -0
  76. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/flot/jquery.min.js +19 -0
  77. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/how_are_we_doing.js +89 -0
  78. data/lib/generators/how_are_we_doing/install/templates/public/javascripts/jquery-ui-1.8.10.custom.min.js +99 -0
  79. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png +0 -0
  80. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png +0 -0
  81. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_flat_10_000000_40x100.png +0 -0
  82. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png +0 -0
  83. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png +0 -0
  84. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
  85. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png +0 -0
  86. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png +0 -0
  87. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png +0 -0
  88. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-icons_222222_256x240.png +0 -0
  89. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-icons_228ef1_256x240.png +0 -0
  90. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-icons_ef8c08_256x240.png +0 -0
  91. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-icons_ffd27a_256x240.png +0 -0
  92. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/images/ui-icons_ffffff_256x240.png +0 -0
  93. data/lib/generators/how_are_we_doing/install/templates/public/stylesheets/ui-lightness/jquery-ui-1.8.10.custom.css +362 -0
  94. data/lib/how_are_we_doing/version.rb +1 -1
  95. data/lib/how_are_we_doing.rb +8 -0
  96. metadata +112 -14
@@ -0,0 +1,105 @@
1
+ Writing plugins
2
+ ---------------
3
+
4
+ To make a new plugin, create an init function and a set of options (if
5
+ needed), stuff it into an object and put it in the $.plot.plugins
6
+ array. For example:
7
+
8
+ function myCoolPluginInit(plot) { plot.coolstring = "Hello!" };
9
+ var myCoolOptions = { coolstuff: { show: true } }
10
+ $.plot.plugins.push({ init: myCoolPluginInit, options: myCoolOptions });
11
+
12
+ // now when $.plot is called, the returned object will have the
13
+ // attribute "coolstring"
14
+
15
+ Now, given that the plugin might run in many different places, it's
16
+ a good idea to avoid leaking names. We can avoid this by wrapping the
17
+ above lines in an anonymous function which we call immediately, like
18
+ this: (function () { inner code ... })(). To make it even more robust
19
+ in case $ is not bound to jQuery but some other Javascript library, we
20
+ can write it as
21
+
22
+ (function ($) {
23
+ // plugin definition
24
+ // ...
25
+ })(jQuery);
26
+
27
+ Here is a simple debug plugin which alerts each of the series in the
28
+ plot. It has a single option that control whether it is enabled and
29
+ how much info to output:
30
+
31
+ (function ($) {
32
+ function init(plot) {
33
+ var debugLevel = 1;
34
+
35
+ function checkDebugEnabled(plot, options) {
36
+ if (options.debug) {
37
+ debugLevel = options.debug;
38
+
39
+ plot.hooks.processDatapoints.push(alertSeries);
40
+ }
41
+ }
42
+
43
+ function alertSeries(plot, series, datapoints) {
44
+ var msg = "series " + series.label;
45
+ if (debugLevel > 1)
46
+ msg += " with " + series.data.length + " points";
47
+ alert(msg);
48
+ }
49
+
50
+ plot.hooks.processOptions.push(checkDebugEnabled);
51
+ }
52
+
53
+ var options = { debug: 0 };
54
+
55
+ $.plot.plugins.push({
56
+ init: init,
57
+ options: options,
58
+ name: "simpledebug",
59
+ version: "0.1"
60
+ });
61
+ })(jQuery);
62
+
63
+ We also define "name" and "version". It's not used by Flot, but might
64
+ be helpful for other plugins in resolving dependencies.
65
+
66
+ Put the above in a file named "jquery.flot.debug.js", include it in an
67
+ HTML page and then it can be used with:
68
+
69
+ $.plot($("#placeholder"), [...], { debug: 2 });
70
+
71
+ This simple plugin illustrates a couple of points:
72
+
73
+ - It uses the anonymous function trick to avoid name pollution.
74
+ - It can be enabled/disabled through an option.
75
+ - Variables in the init function can be used to store plot-specific
76
+ state between the hooks.
77
+
78
+
79
+ Options guidelines
80
+ ==================
81
+
82
+ Plugins should always support appropriate options to enable/disable
83
+ them because the plugin user may have several plots on the same page
84
+ where only one should use the plugin.
85
+
86
+ If the plugin needs series-specific options, you can put them in
87
+ "series" in the options object, e.g.
88
+
89
+ var options = {
90
+ series: {
91
+ downsample: {
92
+ algorithm: null,
93
+ maxpoints: 1000
94
+ }
95
+ }
96
+ }
97
+
98
+ Then they will be copied by Flot into each series, providing the
99
+ defaults in case the plugin user doesn't specify any. Again, in most
100
+ cases it's probably a good idea if the plugin is turned off rather
101
+ than on per default, just like most of the powerful features in Flot.
102
+
103
+ Think hard and long about naming the options. These names are going to
104
+ be public API, and code is going to depend on them if the plugin is
105
+ successful.
@@ -0,0 +1,81 @@
1
+ About
2
+ -----
3
+
4
+ Flot is a Javascript plotting library for jQuery. Read more at the
5
+ website:
6
+
7
+ http://code.google.com/p/flot/
8
+
9
+ Take a look at the examples linked from above, they should give a good
10
+ impression of what Flot can do and the source code of the examples is
11
+ probably the fastest way to learn how to use Flot.
12
+
13
+
14
+ Installation
15
+ ------------
16
+
17
+ Just include the Javascript file after you've included jQuery.
18
+
19
+ Note that you need to get a version of Excanvas (e.g. the one bundled
20
+ with Flot) which is canvas emulation on Internet Explorer. You can
21
+ include the excanvas script like this:
22
+
23
+ <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
24
+
25
+ If it's not working on your development IE 6.0, check that it has
26
+ support for VML which excanvas is relying on. It appears that some
27
+ stripped down versions used for test environments on virtual machines
28
+ lack the VML support.
29
+
30
+ Also note that you need at least jQuery 1.2.6 (but at least jQuery
31
+ 1.3.2 is recommended for interactive charts because of performance
32
+ improvements in event handling).
33
+
34
+
35
+ Basic usage
36
+ -----------
37
+
38
+ Create a placeholder div to put the graph in:
39
+
40
+ <div id="placeholder"></div>
41
+
42
+ You need to set the width and height of this div, otherwise the plot
43
+ library doesn't know how to scale the graph. You can do it inline like
44
+ this:
45
+
46
+ <div id="placeholder" style="width:600px;height:300px"></div>
47
+
48
+ You can also do it with an external stylesheet. Make sure that the
49
+ placeholder isn't within something with a display:none CSS property -
50
+ in that case, Flot has trouble measuring label dimensions which
51
+ results in garbled looks and might have trouble measuring the
52
+ placeholder dimensions which is fatal (it'll throw an exception).
53
+
54
+ Then when the div is ready in the DOM, which is usually on document
55
+ ready, run the plot function:
56
+
57
+ $.plot($("#placeholder"), data, options);
58
+
59
+ Here, data is an array of data series and options is an object with
60
+ settings if you want to customize the plot. Take a look at the
61
+ examples for some ideas of what to put in or look at the reference
62
+ in the file "API.txt". Here's a quick example that'll draw a line from
63
+ (0, 0) to (1, 1):
64
+
65
+ $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
66
+
67
+ The plot function immediately draws the chart and then returns a plot
68
+ object with a couple of methods.
69
+
70
+
71
+ What's with the name?
72
+ ---------------------
73
+
74
+ First: it's pronounced with a short o, like "plot". Not like "flawed".
75
+
76
+ So "Flot" rhymes with "plot".
77
+
78
+ And if you look up "flot" in a Danish-to-English dictionary, some up
79
+ the words that come up are "good-looking", "attractive", "stylish",
80
+ "smart", "impressive", "extravagant". One of the main goals with Flot
81
+ is pretty looks.
@@ -0,0 +1,143 @@
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"></link>
7
+ <!--[if IE]><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>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below.</p>
17
+
18
+ <p>The data is fetched over HTTP, in this case directly from text
19
+ files. Usually the URL would point to some web server handler
20
+ (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that
21
+ extracts it from a database and serializes it to JSON.</p>
22
+
23
+ <p>
24
+ <input class="fetchSeries" type="button" value="First dataset"> -
25
+ <a href="data-eu-gdp-growth.json">data</a> -
26
+ <span></span>
27
+ </p>
28
+
29
+ <p>
30
+ <input class="fetchSeries" type="button" value="Second dataset"> -
31
+ <a href="data-japan-gdp-growth.json">data</a> -
32
+ <span></span>
33
+ </p>
34
+
35
+ <p>
36
+ <input class="fetchSeries" type="button" value="Third dataset"> -
37
+ <a href="data-usa-gdp-growth.json">data</a> -
38
+ <span></span>
39
+ </p>
40
+
41
+ <p>If you combine AJAX with setTimeout, you can poll the server
42
+ for new data.</p>
43
+
44
+ <p>
45
+ <input class="dataUpdate" type="button" value="Poll for data">
46
+ </p>
47
+
48
+ <script id="source" language="javascript" type="text/javascript">
49
+ $(function () {
50
+ var options = {
51
+ lines: { show: true },
52
+ points: { show: true },
53
+ xaxis: { tickDecimals: 0, tickSize: 1 }
54
+ };
55
+ var data = [];
56
+ var placeholder = $("#placeholder");
57
+
58
+ $.plot(placeholder, data, options);
59
+
60
+
61
+ // fetch one series, adding to what we got
62
+ var alreadyFetched = {};
63
+
64
+ $("input.fetchSeries").click(function () {
65
+ var button = $(this);
66
+
67
+ // find the URL in the link right next to us
68
+ var dataurl = button.siblings('a').attr('href');
69
+
70
+ // then fetch the data with jQuery
71
+ function onDataReceived(series) {
72
+ // extract the first coordinate pair so you can see that
73
+ // data is now an ordinary Javascript object
74
+ var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';
75
+
76
+ button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);
77
+
78
+ // let's add it to our current data
79
+ if (!alreadyFetched[series.label]) {
80
+ alreadyFetched[series.label] = true;
81
+ data.push(series);
82
+ }
83
+
84
+ // and plot all we got
85
+ $.plot(placeholder, data, options);
86
+ }
87
+
88
+ $.ajax({
89
+ url: dataurl,
90
+ method: 'GET',
91
+ dataType: 'json',
92
+ success: onDataReceived
93
+ });
94
+ });
95
+
96
+
97
+ // initiate a recurring data update
98
+ $("input.dataUpdate").click(function () {
99
+ // reset data
100
+ data = [];
101
+ alreadyFetched = {};
102
+
103
+ $.plot(placeholder, data, options);
104
+
105
+ var iteration = 0;
106
+
107
+ function fetchData() {
108
+ ++iteration;
109
+
110
+ function onDataReceived(series) {
111
+ // we get all the data in one go, if we only got partial
112
+ // data, we could merge it with what we already got
113
+ data = [ series ];
114
+
115
+ $.plot($("#placeholder"), data, options);
116
+ }
117
+
118
+ $.ajax({
119
+ // usually, we'll just call the same URL, a script
120
+ // connected to a database, but in this case we only
121
+ // have static example files so we need to modify the
122
+ // URL
123
+ url: "data-eu-gdp-growth-" + iteration + ".json",
124
+ method: 'GET',
125
+ dataType: 'json',
126
+ success: onDataReceived
127
+ });
128
+
129
+ if (iteration < 5)
130
+ setTimeout(fetchData, 1000);
131
+ else {
132
+ data = [];
133
+ alreadyFetched = {};
134
+ }
135
+ }
136
+
137
+ setTimeout(fetchData, 1000);
138
+ });
139
+ });
140
+ </script>
141
+
142
+ </body>
143
+ </html>
@@ -0,0 +1,75 @@
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"></link>
7
+ <!--[if IE]><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>Flot has support for simple background decorations such as
17
+ lines and rectangles. They can be useful for marking up certain
18
+ areas. You can easily add any HTML you need with standard DOM
19
+ manipulation, e.g. for labels. For drawing custom shapes there is
20
+ also direct access to the canvas.</p>
21
+
22
+ <script id="source" language="javascript" type="text/javascript">
23
+ $(function () {
24
+ // generate a dataset
25
+ var d1 = [];
26
+ for (var i = 0; i < 20; ++i)
27
+ d1.push([i, Math.sin(i)]);
28
+
29
+ var data = [{ data: d1, label: "Pressure", color: "#333" }];
30
+
31
+ // setup background areas
32
+ var markings = [
33
+ { color: '#f6f6f6', yaxis: { from: 1 } },
34
+ { color: '#f6f6f6', yaxis: { to: -1 } },
35
+ { color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
36
+ { color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
37
+ ];
38
+
39
+ var placeholder = $("#placeholder");
40
+
41
+ // plot it
42
+ var plot = $.plot(placeholder, data, {
43
+ bars: { show: true, barWidth: 0.5, fill: 0.9 },
44
+ xaxis: { ticks: [], autoscaleMargin: 0.02 },
45
+ yaxis: { min: -2, max: 2 },
46
+ grid: { markings: markings }
47
+ });
48
+
49
+ // add labels
50
+ var o;
51
+
52
+ o = plot.pointOffset({ x: 2, y: -1.2});
53
+ // we just append it to the placeholder which Flot already uses
54
+ // for positioning
55
+ placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');
56
+
57
+ o = plot.pointOffset({ x: 8, y: -1.2});
58
+ placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');
59
+
60
+ // draw a little arrow on top of the last label to demonstrate
61
+ // canvas drawing
62
+ var ctx = plot.getCanvas().getContext("2d");
63
+ ctx.beginPath();
64
+ o.left += 4;
65
+ ctx.moveTo(o.left, o.top);
66
+ ctx.lineTo(o.left, o.top - 10);
67
+ ctx.lineTo(o.left + 10, o.top - 5);
68
+ ctx.lineTo(o.left, o.top);
69
+ ctx.fillStyle = "#000";
70
+ ctx.fill();
71
+ });
72
+ </script>
73
+
74
+ </body>
75
+ </html>
@@ -0,0 +1,38 @@
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"></link>
7
+ <!--[if IE]><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>Simple example. You don't need to specify much to get an
17
+ attractive look. Put in a placeholder, make sure you set its
18
+ dimensions (otherwise the plot library will barf) and call the
19
+ plot function with the data. The axes are automatically
20
+ scaled.</p>
21
+
22
+ <script id="source" language="javascript" type="text/javascript">
23
+ $(function () {
24
+ var d1 = [];
25
+ for (var i = 0; i < 14; i += 0.5)
26
+ d1.push([i, Math.sin(i)]);
27
+
28
+ var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
29
+
30
+ // a null signifies separate line segments
31
+ var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
32
+
33
+ $.plot($("#placeholder"), [ d1, d2, d3 ]);
34
+ });
35
+ </script>
36
+
37
+ </body>
38
+ </html>