cloudwatch-livegraph/index.html at master · kjoconnor/cloudwatch-livegraph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!--
	Kevin O'Connor <kevino@arc90.com> / @gooeyblob
	My javascript/HTML skills are pretty lacking so I'm certain there are nicer
	ways to be doing most of this.  This is a pretty easy to understand proof of concept though.

	Improvements welcomed!
-->
<html>
	<head>
		<script type="text/javascript" src="flot/jquery.js"></script>
		<script type="text/javascript" src="flot/jquery.flot.js"></script>
		<title>CloudWatch Metrics</title>
	</head>

	<body>
		<div id='cw' style='width:100%; height:90%;'></div>
		<div id='counter' style='float: right;'>Highest Metric seen: </div>
		<script type="text/javascript">
			var plot_data = [[], []];
			var options = {
					legend: { show: true, position: "nw" },
					grid: { hoverable: true, clickable: false },
					xaxis: { mode: "time", timeformat: "%H:%M:%S" }
				};

			var plot = $.plot($("#cw"), plot_data, options);

			var highestMetric = 0;


			function getData() {
				// Grab new data from cw.php and run the JS function updateGraph with that info
				$.get('cw.php', function(data) { updateGraph(data) });
			}

			function updateGraph(r) {
				// Keep track of the highest number we've seen
				if(r > highestMetric) {
					highestMetric = r;
					$('#counter').text('Highest Metric seen: ' + r);
				}

				plot_data[0].push([new Date().getTime(), r]);
				// Limit the number of entries to 100
				if(plot_data.length > 100) {
					plot_data = plot_data.splice(1);
				}

				// Redraw the graph with the new data
				plot.setData(plot_data);
				plot.setupGrid();
				plot.draw();
			}

			// Set the update frequency, 20000 = 20s
			// There's not much use for making this faster as CloudWatch doesn't update often enough
			setInterval(getData, 20000);

		</script>
	</body>
</html>