root / hci / trunk / eneraptor-web-app / grails-app / views / statistics / showGraph.gsp
History | View | Annotate | Download (2.67 KB)
1 |
<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 |
var plot; |
14 |
var data = [${data}]; |
15 |
var options = { |
16 |
lines: { show: true }, |
17 |
points: { show: true }, |
18 |
xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" }, |
19 |
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 |
}; |
33 |
</g:javascript> |
34 |
|
35 |
<div class="chart"> |
36 |
<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 |
</div> |
43 |
|
44 |
<br /> |
45 |
<p>Legend:</p> |
46 |
<div id="legendHolder" name="legendHolder"></div> |
47 |
|
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 |
<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 |
|
68 |
</erptr:box> |
69 |
|
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 |
|
91 |
</body> |
92 |
|
93 |
</html> |