<!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"> .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 chartTemplate = $('.chart').remove(); var 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')) ]; jQuery.each(charts, function(i, chart) { chart.draw(new Date('10 April 2010 19:30:00'), new Date()); }); $('.chart').bind("plotselected", function(event, ranges) { var startTime = new Date(ranges.xaxis.from); var endTime = new Date(ranges.xaxis.to); jQuery.each(charts, function(i, chart) { chart.draw(startTime, endTime); }); }); }); </script> </head> <body> <div class="charts"> <div class="chart"></div> </div> </body> </html>