radiant-race_results-extension 1.4.3 → 1.4.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. data/app/controllers/admin/race_instances_controller.rb +1 -1
  2. data/app/controllers/race_instances_controller.rb +7 -1
  3. data/app/controllers/race_performances_controller.rb +8 -0
  4. data/app/models/race.rb +7 -0
  5. data/app/models/race_checkpoint.rb +27 -1
  6. data/app/models/race_checkpoint_time.rb +33 -5
  7. data/app/models/race_instance.rb +38 -9
  8. data/app/models/race_performance.rb +81 -3
  9. data/app/views/admin/races/_form.html.haml +1 -2
  10. data/app/views/race_clubs/show.html.haml +3 -3
  11. data/app/views/race_instances/_results_header.html.haml +10 -0
  12. data/app/views/race_instances/_splits_header.html.haml +9 -0
  13. data/app/views/race_instances/show.html.haml +17 -8
  14. data/app/views/race_instances/splits.html.haml +19 -14
  15. data/app/views/race_performances/_performance.html.haml +12 -2
  16. data/app/views/race_performances/_splits.html.haml +30 -8
  17. data/app/views/race_performances/show.html.haml +18 -76
  18. data/app/views/races/show.html.haml +2 -1
  19. data/config/locales/en.yml +20 -0
  20. data/config/routes.rb +1 -1
  21. data/db/migrate/20111103150827_mapping_routes.rb +22 -0
  22. data/db/migrate/20111115150827_finish_checkpoint.rb +8 -0
  23. data/lib/race_tags.rb +3 -3
  24. data/lib/radiant-race_results-extension.rb +1 -1
  25. data/public/images/race_results/sorts.png +0 -0
  26. data/public/javascripts/flot/API.txt +1201 -0
  27. data/public/javascripts/flot/FAQ.txt +76 -0
  28. data/public/javascripts/flot/LICENSE.txt +22 -0
  29. data/public/javascripts/flot/Makefile +9 -0
  30. data/public/javascripts/flot/NEWS.txt +508 -0
  31. data/public/javascripts/flot/PLUGINS.txt +137 -0
  32. data/public/javascripts/flot/README.txt +90 -0
  33. data/public/javascripts/flot/examples/ajax.html +143 -0
  34. data/public/javascripts/flot/examples/annotating.html +75 -0
  35. data/public/javascripts/flot/examples/arrow-down.gif +0 -0
  36. data/public/javascripts/flot/examples/arrow-left.gif +0 -0
  37. data/public/javascripts/flot/examples/arrow-right.gif +0 -0
  38. data/public/javascripts/flot/examples/arrow-up.gif +0 -0
  39. data/public/javascripts/flot/examples/basic.html +38 -0
  40. data/public/javascripts/flot/examples/data-eu-gdp-growth-1.json +4 -0
  41. data/public/javascripts/flot/examples/data-eu-gdp-growth-2.json +4 -0
  42. data/public/javascripts/flot/examples/data-eu-gdp-growth-3.json +4 -0
  43. data/public/javascripts/flot/examples/data-eu-gdp-growth-4.json +4 -0
  44. data/public/javascripts/flot/examples/data-eu-gdp-growth-5.json +4 -0
  45. data/public/javascripts/flot/examples/data-eu-gdp-growth.json +4 -0
  46. data/public/javascripts/flot/examples/data-japan-gdp-growth.json +4 -0
  47. data/public/javascripts/flot/examples/data-usa-gdp-growth.json +4 -0
  48. data/public/javascripts/flot/examples/graph-types.html +75 -0
  49. data/public/javascripts/flot/examples/hs-2004-27-a-large_web.jpg +0 -0
  50. data/public/javascripts/flot/examples/image.html +45 -0
  51. data/public/javascripts/flot/examples/index.html +44 -0
  52. data/public/javascripts/flot/examples/interacting-axes.html +97 -0
  53. data/public/javascripts/flot/examples/interacting.html +93 -0
  54. data/public/javascripts/flot/examples/layout.css +6 -0
  55. data/public/javascripts/flot/examples/multiple-axes.html +60 -0
  56. data/public/javascripts/flot/examples/navigate.html +118 -0
  57. data/public/javascripts/flot/examples/percentiles.html +57 -0
  58. data/public/javascripts/flot/examples/pie.html +756 -0
  59. data/public/javascripts/flot/examples/realtime.html +83 -0
  60. data/public/javascripts/flot/examples/resize.html +61 -0
  61. data/public/javascripts/flot/examples/selection.html +114 -0
  62. data/public/javascripts/flot/examples/setting-options.html +61 -0
  63. data/public/javascripts/flot/examples/stacking.html +77 -0
  64. data/public/javascripts/flot/examples/symbols.html +49 -0
  65. data/public/javascripts/flot/examples/thresholding.html +54 -0
  66. data/public/javascripts/flot/examples/time.html +71 -0
  67. data/public/javascripts/flot/examples/tracking.html +95 -0
  68. data/public/javascripts/flot/examples/turning-series.html +98 -0
  69. data/public/javascripts/flot/examples/visitors.html +90 -0
  70. data/public/javascripts/flot/examples/zooming.html +98 -0
  71. data/public/javascripts/flot/excanvas.js +1427 -0
  72. data/public/javascripts/flot/excanvas.min.js +1 -0
  73. data/public/javascripts/flot/jquery.colorhelpers.js +179 -0
  74. data/public/javascripts/flot/jquery.colorhelpers.min.js +1 -0
  75. data/public/javascripts/flot/jquery.flot.crosshair.js +167 -0
  76. data/public/javascripts/flot/jquery.flot.crosshair.min.js +1 -0
  77. data/public/javascripts/flot/jquery.flot.fillbetween.js +183 -0
  78. data/public/javascripts/flot/jquery.flot.fillbetween.min.js +1 -0
  79. data/public/javascripts/flot/jquery.flot.image.js +238 -0
  80. data/public/javascripts/flot/jquery.flot.image.min.js +1 -0
  81. data/public/javascripts/flot/jquery.flot.js +2599 -0
  82. data/public/javascripts/flot/jquery.flot.min.js +6 -0
  83. data/public/javascripts/flot/jquery.flot.navigate.js +336 -0
  84. data/public/javascripts/flot/jquery.flot.navigate.min.js +1 -0
  85. data/public/javascripts/flot/jquery.flot.pie.js +750 -0
  86. data/public/javascripts/flot/jquery.flot.pie.min.js +1 -0
  87. data/public/javascripts/flot/jquery.flot.resize.js +60 -0
  88. data/public/javascripts/flot/jquery.flot.resize.min.js +1 -0
  89. data/public/javascripts/flot/jquery.flot.selection.js +344 -0
  90. data/public/javascripts/flot/jquery.flot.selection.min.js +1 -0
  91. data/public/javascripts/flot/jquery.flot.stack.js +184 -0
  92. data/public/javascripts/flot/jquery.flot.stack.min.js +1 -0
  93. data/public/javascripts/flot/jquery.flot.symbol.js +70 -0
  94. data/public/javascripts/flot/jquery.flot.symbol.min.js +1 -0
  95. data/public/javascripts/flot/jquery.flot.threshold.js +103 -0
  96. data/public/javascripts/flot/jquery.flot.threshold.min.js +1 -0
  97. data/public/javascripts/flot/jquery.js +8316 -0
  98. data/public/javascripts/flot/jquery.min.js +23 -0
  99. data/public/javascripts/jquery.qtip.js +2675 -0
  100. data/public/javascripts/jquery.sparkline.js +1271 -0
  101. data/public/javascripts/races.js +245 -0
  102. data/public/stylesheets/sass/admin/races.sass +65 -70
  103. data/public/stylesheets/sass/jquery.flot.sass +416 -0
  104. data/public/stylesheets/sass/race_results.sass +38 -2
  105. data/radiant-race_results-extension.gemspec +1 -1
  106. metadata +95 -11
  107. data/public/javascripts/tablesorter.js +0 -3
@@ -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>