summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRichard Wall <richard@aziz>2010-04-10 19:49:24 +0100
committerRichard Wall <richard@aziz>2010-04-10 19:49:24 +0100
commite5716002c8d9cc092bd4ee87db9c9b5551f41309 (patch)
tree028ead3012bdf4b50dd266dbeaa736d7a866355b
parent887896a5019a4e5bd1fe6d1550eae3248faeb18e (diff)
Align the charts and add test with locally installed collectd
-rw-r--r--index.html47
1 files changed, 35 insertions, 12 deletions
diff --git a/index.html b/index.html
index 0b43bb0..d52776b 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,17 @@
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+ <style type="text/css">
+ .chart {
+ width:800px;
+ height:200px;
+ margin: 50px auto 50px auto;
+ }
+ .tickLabel {
+ width:100px;
+ overflow:hidden;
+ }
+ </style>
<script type="text/javascript" src="assets/javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="assets/javascript/flot/excanvas.min.js"></script>
<script type="text/javascript" src="assets/javascript/flot/jquery.flot.js"></script>
@@ -52,9 +63,9 @@
data = 'cpu-user.rrd cpu-system.rrd cpu-wait.rrd'.split(' ').reverse();
jQuery.each(data, function(i, el) {
- var url = 'data/localhost/cpu-0/' + el;
var label = el.split('.')[0].split('-')[1];
- c.addData(label, new jrrd.RrdQueryRemote(url));
+ c.addData('cpu0-' + label, new jrrd.RrdQueryRemote('data/cpu-0/' + el));
+ c.addData('cpu1-' + label, new jrrd.RrdQueryRemote('data/cpu-1/' + el));
});
return c;
}
@@ -64,16 +75,28 @@
data = 'memory-free.rrd memory-cached.rrd memory-used.rrd memory-buffered.rrd'.split(' ').reverse();
jQuery.each(data, function(i, el) {
- var url = 'data/localhost/memory/' + el;
+ var url = 'data/memory/' + el;
var label = el.split('.')[0].split('-')[1];
c.addData(label, new jrrd.RrdQueryRemote(url));
});
return c;
}
+ function dnsChartFactory(template) {
+ var c = new jrrd.Chart(template, baseOptions);
+ data = 'dns_opcode-Query.rrd dns_qtype-A.rrd dns_qtype-PTR.rrd dns_rcode-NOERROR.rrd'.split(' ').reverse();
+
+ jQuery.each(data, function(i, el) {
+ var url = 'data/dns/' + el;
+ var label = el.split('.')[0].split('_')[1];
+ c.addData(label, new jrrd.RrdQueryRemote(url));
+ });
+ return c;
+ }
+
function loadChartFactory(template) {
var c = new jrrd.Chart(template, baseOptions);
- var data = new jrrd.RrdQueryRemote('data/localhost/load/load.rrd');
+ var data = new jrrd.RrdQueryRemote('data/load/load.rrd');
var rrdDSs = ['shortterm', 'midterm', 'longterm'];
jQuery.each(rrdDSs, function(i, rrdDS) {
c.addData(rrdDS, new jrrd.RrdQueryDsProxy(data, rrdDS));
@@ -83,7 +106,7 @@
function nicChartFactory(template, nicname) {
var c = new jrrd.Chart(template, baseOptions);
- var data = new jrrd.RrdQueryRemote('data/localhost/interface/if_octets-' + nicname + '.rrd');
+ var data = new jrrd.RrdQueryRemote('data/interface/if_octets-' + nicname + '.rrd');
var rrdDSs = ['tx', 'rx'];
jQuery.each(rrdDSs, function(i, rrdDS) {
c.addData(rrdDS, new jrrd.RrdQueryDsProxy(data, rrdDS));
@@ -94,14 +117,14 @@
$(function() {
var chartTemplate = $('.chart').remove();
var charts = [
- loadChartFactory(
+ dnsChartFactory(
chartTemplate.clone().appendTo('.charts')),
- nicChartFactory(
- chartTemplate.clone().appendTo('.charts'), 'lo'),
+ loadChartFactory(
+ chartTemplate.clone().appendTo('.charts')),
nicChartFactory(
- chartTemplate.clone().appendTo('.charts'), 'eth0'),
+ chartTemplate.clone().appendTo('.charts'), 'wlan0'),
cpuChartFactory(
chartTemplate.clone().appendTo('.charts')),
@@ -111,8 +134,8 @@
];
jQuery.each(charts, function(i, chart) {
- chart.draw(new Date('7 April 2010 09:30:00'),
- new Date('10 April 2010 15:00:00'));
+ chart.draw(new Date('10 April 2010 19:30:00'),
+ new Date());
});
$('.chart').bind("plotselected", function(event, ranges) {
@@ -128,7 +151,7 @@
<body>
<div class="charts">
- <div class="chart" style="width:800px; height:200px; float: right; clear: right;"></div>
+ <div class="chart"></div>
</div>
</body>
</html>