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