<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>untitled</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body { font-family: sans; } form div { text-align: center; } .range-preview { width: 700px; height:50px; margin: 0 auto 0 auto; left: 50px; position: relative; } .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> <script type="text/javascript" src="assets/javascript/flot/jquery.flot.stack.js"></script> <script type="text/javascript" src="assets/javascript/flot/jquery.flot.selection.js"></script> <script type="text/javascript" src="assets/javascript/javascriptrrd/binaryXHR.js"></script> <script type="text/javascript" src="assets/javascript/javascriptrrd/rrdFile.js"></script> <script type="text/javascript" src="assets/javascript/MochiKit/Base.js"></script> <script type="text/javascript" src="assets/javascript/MochiKit/Async.js"></script> <script type="text/javascript" src="jrrd.js"></script> <script type="text/javascript"> var baseOptions = { grid: { clickable: true }, selection: { mode: 'x' }, series: { points: { show: false }, lines: { show: true, steps: false, shadowSize: 0, lineWidth: 1 }, shadowSize: 0 }, xaxis: { mode: "time" } }; var fillOptions = jQuery.extend(true, { series: { stack: true, lines: { fill: 0.5 } } }, baseOptions); function cpuChartFactory(template) { var c = new jrrd.Chart(template, fillOptions); data = 'cpu-user.rrd cpu-system.rrd cpu-wait.rrd'.split(' ').reverse(); jQuery.each(data, function(i, el) { var label = el.split('.')[0].split('-')[1]; c.addData('cpu0-' + label, new jrrd.RrdQueryRemote('data/cpu-0/' + el)); c.addData('cpu1-' + label, new jrrd.RrdQueryRemote('data/cpu-1/' + el)); }); return c; } function memoryChartFactory(template) { var c = new jrrd.Chart(template, fillOptions); data = 'memory-free.rrd memory-cached.rrd memory-used.rrd memory-buffered.rrd'.split(' ').reverse(); jQuery.each(data, function(i, 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/load/load.rrd'); var rrdDSs = ['shortterm', 'midterm', 'longterm']; jQuery.each(rrdDSs, function(i, rrdDS) { c.addData(rrdDS, new jrrd.RrdQueryDsProxy(data, rrdDS)); }); return c; } function nicChartFactory(template, nicname) { var c = new jrrd.Chart(template, baseOptions); 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)); }); return c; } $(function() { var cc = new jrrd.ChartCoordinator($('.chartRangeControl')); var chartTemplate = $('.chart').remove(); cc.charts = [ //dnsChartFactory( // chartTemplate.clone().appendTo('.charts')), loadChartFactory( chartTemplate.clone().appendTo('.charts')), nicChartFactory( chartTemplate.clone().appendTo('.charts'), 'wlan0'), cpuChartFactory( chartTemplate.clone().appendTo('.charts')), memoryChartFactory( chartTemplate.clone().appendTo('.charts')) ]; cc.reset(); $('.charts').bind("plotselected", function(event, ranges) { cc.setTimeRange(new Date(ranges.xaxis.from), new Date(ranges.xaxis.to)); }); }); </script> </head> <body> <form method="GET" class="chartRangeControl"> <div> <label>Start: <input type="text" name="startTime" /></label> <label>End: <input type="text" name="endTime" /></label> <input type="submit" value="Update" /> <input type="reset" value="Reset" /> </div> <div class="range-preview"></div> </form> <div class="charts"> <div class="chart"></div> </div> </body> </html>