Revision 70 hci/trunk/eneraptor-web-app/grails-app/views/statistics/showCombGraph.gsp

View differences:

showCombGraph.gsp
10 10 

  		




  11
  11
  
    
	<erptr:box title="Graph">


  		




  12
  12
  
    
		<g:javascript>


  		




  
  13
  
    
			var plot;


  		




  13
  14
  
    
			var data = ${data};


  		




  14
  15
  
    
			var options = {


  		




  15
  16
  
    
				lines: { show: true },


  		




  16
  17
  
    
				points: { show: true },


  		




  17
  18
  
    
				xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" },


  		




  18
  
  
    
				legend: { container: '#legendHolder' }


  		




  
  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
  
    
				}


  		




  19
  32
  
    
			};


  		




  20
  33
  
    
		</g:javascript>


  		




  
  34
  
    
		


  		




  21
  35
  
    
		<div class="chart">


  		




  22
  
  
    
			<flot:plot id="placeholder" style="width: 900px; height: 300px; padding:5px;" data="data" options="options" />


  		




  
  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>


  		




  23
  42
  
    
		</div>


  		




  
  43
  
    
		


  		




  24
  44
  
    
		<br />


  		




  25
  45
  
    
		<p>Legend:</p>


  		




  26
  46
  
    
		<div id="legendHolder" name="legendHolder"></div>


  		




  27
  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="showCombGraph" 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
  
    
			&nbsp;&nbsp;&nbsp;


  		




  
  64
  
    
			<g:submitButton name="outputDeviceSubmit" value="Update" />


  		




  
  65
  
    
		</g:form>


  		




  
  66
  
    
		<br />


  		




  
  67
  
    
		


  		




  28
  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>


  		




  29
  90
  
    

  		




  30
  91
  
    
</body>


  		




  31
  92
  
    

  		












Also available in:  Unified diff