root / hci / trunk / eneraptor-web-app / grails-app / views / statistics / showGraph.gsp @ 70
History | View | Annotate | Download (2.67 KB)
1 | 42 | alexbesir | <html> |
---|---|---|---|
2 | |||
3 | <head> |
||
4 | <title>Statistics » Graph view</title> |
||
5 | <meta name="layout" content="main" /> |
||
6 | <flot:resources /> |
||
7 | </head> |
||
8 | |||
9 | <body> |
||
10 | |||
11 | <erptr:box title="Graph"> |
||
12 | <g:javascript> |
||
13 | 70 | alexbesir | var plot; |
14 | 42 | alexbesir | var data = [${data}]; |
15 | var options = { |
||
16 | lines: { show: true }, |
||
17 | points: { show: true }, |
||
18 | 67 | alexbesir | xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" }, |
19 | 69 | alexbesir | legend: { container: '#legendHolder' }, |
20 | grid: { |
||
21 | markings: [ |
||
22 | <g:each in="${actionLog}" var="al"> |
||
23 | <g:if test="${al == actionLog[-1]}"> |
||
24 | { color: 'red', lineWidth: 1, xaxis: { from: ${al.dateRecieved.time}, to: ${al.dateRecieved.time} } } |
||
25 | </g:if> |
||
26 | <g:else> |
||
27 | { color: 'red', lineWidth: 1, xaxis: { from: ${al.dateRecieved.time}, to: ${al.dateRecieved.time} } }, |
||
28 | </g:else> |
||
29 | </g:each> |
||
30 | ] |
||
31 | } |
||
32 | 42 | alexbesir | }; |
33 | </g:javascript> |
||
34 | 70 | alexbesir | |
35 | 42 | alexbesir | <div class="chart"> |
36 | 70 | alexbesir | <div id='placeholder' style='width: 900px; height: 300px; padding:5px;'></div> |
37 | <script type='text/javascript'> |
||
38 | jQuery(function (){ |
||
39 | plot = jQuery.plot(jQuery("#placeholder"),data, options); |
||
40 | }); |
||
41 | </script> |
||
42 | 42 | alexbesir | </div> |
43 | 70 | alexbesir | |
44 | 67 | alexbesir | <br /> |
45 | <p>Legend:</p> |
||
46 | <div id="legendHolder" name="legendHolder"></div> |
||
47 | 70 | alexbesir | |
48 | <table> |
||
49 | <g:set var="al2num" value="0" /> |
||
50 | <g:each in="${actionLog}" var="al2"> |
||
51 | <tr> |
||
52 | <td style="width:20px;"><p style="color:red;font-size:smaller;">${++al2num}</p></td> |
||
53 | <td style="width:150px;">${al2.dateRecieved}</td> |
||
54 | <td>${al2.reportedData}</td> |
||
55 | </tr> |
||
56 | </g:each> |
||
57 | </table> |
||
58 | |||
59 | 69 | alexbesir | <p>Display actions:</p> |
60 | <g:form action="showGraph" method="GET"> |
||
61 | <g:hiddenField name="id" value="${params.id}" /> |
||
62 | <g:select name="outputDevice" from="${outputDevices}" optionKey="deviceId" optionValue="friendlyName" noSelection="['none':'- None -']" style="width:350px;" value="${params.outputDevice}" /> |
||
63 | |
||
64 | <g:submitButton name="outputDeviceSubmit" value="Update" /> |
||
65 | </g:form> |
||
66 | <br /> |
||
67 | 67 | alexbesir | |
68 | 42 | alexbesir | </erptr:box> |
69 | 70 | alexbesir | |
70 | <g:javascript> |
||
71 | jQuery( function () { |
||
72 | var o; |
||
73 | var num = 1; |
||
74 | var placeholder = plot.getPlaceholder(); |
||
75 | var vertica = getMax(plot.getData()[0].datapoints.points); |
||
76 | <g:each in="${actionLog}" var="al1"> |
||
77 | o = plot.pointOffset({ x: ${al1.dateRecieved.time}, y: vertica}); |
||
78 | placeholder.append("<div style=\"position:absolute;left:" + (o.left + 10) + "px;top:" + o.top + "px;color:red;font-size:smaller\"><a href=\"#\" onclick=\"return false;\" title=\"${al1.reportedData}\">" + num + "</a></div>"); |
||
79 | num++; |
||
80 | </g:each> |
||
81 | }); |
||
82 | function getMax(points) { |
||
83 | var max = points[1]; |
||
84 | for(i = 1; i < points.length; i += 2) { |
||
85 | if(points[i] > max) max = points[i]; |
||
86 | } |
||
87 | return max; |
||
88 | } |
||
89 | </g:javascript> |
||
90 | 42 | alexbesir | |
91 | </body> |
||
92 | |||
93 | </html> |