by:

 

Download

SourceCode of data.php

Code

<?
        
    $int="eth0";
    session_start();
    
    $rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes");
    $tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes");
    sleep(1);
    $rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes");
    $tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes");
    
    $tbps = $tx[1] - $tx[0];
    $rbps = $rx[1] - $rx[0];
    
    $round_rx=round($rbps/1024, 2);
    $round_tx=round($tbps/1024, 2);
    
    $time=date("U")."000";
    $_SESSION['rx'][] = "[$time, $round_rx]";
    $_SESSION['tx'][] = "[$time, $round_tx]";
    $data['label'] = $int;
    $data['data'] = $_SESSION['rx'];
    # to make sure that the graph shows only the
    # last minute (saves some bandwitch to)
    if (count($_SESSION['rx'])>60)
    {
        $x = min(array_keys($_SESSION['rx']));
        unset($_SESSION['rx'][$x]);
    }
    
    # json_encode didnt work, if you found a workarround pls write me
    # echo json_encode($data, JSON_FORCE_OBJECT);
    
    echo '
    {"label":"'.$int.'","data":['.implode($_SESSION['rx'], ",").']}
    ';
    ?>

Source of index.php

Code

<?php
    session_start
();
    
session_destroy();
    
session_start();
    
?>
    <html>
        <head>
            <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="js/jquery.flot.js"></script>
            
            <script id="source" language="javascript" type="text/javascript">
            $(document).ready(function() {
                var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: { mode: "time" }
                };
                var data = [];
                var placeholder = $("#placeholder");
    
                $.plot(placeholder, data, options);
    
                var iteration = 0;
    
                function fetchData() {
                    ++iteration;
    
                    function onDataReceived(series) {
                        // we get all the data in one go, if we only got partial
                        // data, we could merge it with what we already got
                        data = [ series ];
                        
                        $.plot($("#placeholder"), data, options);
                        fetchData();
                    }
    
                    $.ajax({
                        url: "data.php",
                        method: 'GET',
                        dataType: 'json',
                        success: onDataReceived
                    });
                    
                }
    
                setTimeout(fetchData, 1000);
            });
    
        </script>
        </head>
        <body>
        <div id="placeholder" style="width:600px;height:300px;"></div>
        </body>
    </html>



Name:
could cause results show 2 rx and tx

Name:
as I can eliminate this
http://prntscr.com/az2xad

Name:
I've added FreeBSD and OSX support along with some syntactic sugar.

You can find my fork of the realtime bandwidth meter at my github:

- https://github.com/dinamic/bw/

Name:

Name:
hi sir..i really interested about this coding. can you tell me how this code works. Besides, i have try to run this code but i failed. The output only box not like you post..

Name:
My personalized version. :)

Info: https://sanmarcell.wordpress.com/2013/08/21/php-jquery-monitorando-link-de-internet-em-tempo-real/
Download: https://www.dropbox.com/s/bviz7axvhg39ibn/js-bwm.tar.gz

Name:
There is a way in Windows also ......

http://www.abyssunderground.co.uk/tutorials-bandwidthgraph.php

Name:
Hi,

Great Tutorial!

One quesiton:
How can I show the Upload+Download graphs together?
Would be really great if you could help by this.

Many thanks in advance.

Cheers
fxworker

Name:
Hi,

Great Tutorial!

One quesiton:
How can I show the Upload+Download graphs together?
Would be really great if you could help by this.

Many thanks in advance.

Cheers
fxworker

Name:
Olá,

Gostei muito do seu projeto, queria uma ajuda pois, ja procurei em toda internet, esses graficos para ping. Digamos: "Ping em tempo real" com esse gráfico seria ótimo.
Você poderia me ajudar ?

Obrigado

Name:
Hi Andreas,

danke für das Script :)

ich habe mir genau 4 Stunden den Kopf darüber zerbrochen wieso mir die Zeit nicht richtig angezeigt wird! Kein Wunder, in der jquery.flot.js war d.getUTC hinterlegt.

Hab d.getUTC mit d.get mit dem Editor ersetzt.

Liebe Grüsse aus Frankreich
BenLue


Name:
Dear Andreas,
Thanks a lot ! This code works well in Linux, but Windows. How can i get $rx and $tx ( number of bytes received and transmitted ) in Windows?

Name:
Dear Andreas,
this is really good code, thanks a lot, i have installed it my one of the server.
But the meter is not proper. i mean only the dots are appearing in the box. they are not joined with the line as you see in this page.

do i need to have some other plugins installed.
thanks

Name:
HI Giovanni,
i feel a bit bad about the wrong unit calculation, but i will fix that soon!
many thanks for your comment.

best regards
andreas

Name:
May be too late but...
About json_encode:
1) $_SESSION['tx'][] = "[$time, $round_tx]" should become $_SESSION['tx'][] = array($time, round_tx)
2) That said you could now safely use exit (json_encode($data))... not echo json_encode(...)

Someting about units You used. /sys/class/net/$int/statistics/rx_bytes -or the aggregate in /proc/net/dev- reports bytes but in telecommunication units only bits are used (bps/kbps/Mbps/Gbps), also a kbps means 1000 bps not 1024. So data got from system shoud be multiplied by 8 then divided by 1000 if you wants kbps. (ref.: http://en.wikipedia.org/wiki/Bit_rate)

Name:
Thank you, i will try this code :D

Name:
iam not sure which version of pho you are running, but since 5.3.0 json_encode allows a second parameter...

Name:
PHP Warning: json_encode() expects exactly 1 parameter, 2 given in

Name:
Fraknly I think that\\\'s absolutely good stuff.

Name:
Hi Carlos,
could your provide me your sourcecode ?

best regards
andreas

Name:
Dear Andreas,
I?m trying to use your code into two separate iframes, but even when i put $int=\"ppp0\" for one and $int=\"eth0\" for the other the graph has the same in both frames.
I?m placing in diferent folders.
Why i can?t see the traffic from each other?
Always appear the same graph in both ;-(
Thanks alot ! Great app !

Name:
Unfortunately most vds provider don t allow you to change the permissions outside you document root.
You can ask your ISP if he would be so kind to give you read permissions on the specific files.
/sys/class/net/eth0/statistics/rx_byte
/sys/class/net/eth0/statistics/tx_byte

good luck anyway

andreas

Name:
how can I set this permissions, I have a VDS?

Name:
maybe your webserver (www-data or nobody) have no permissions to read /sys/class/net/eth0/statistics/rx_byte ?!

Name:
looks great on your webserver but keeps blank on mine, which options should be enabled to get the data from eth0?

Name:
danke f?r die info.
ich werds mir speichern, wer wei? wof?r ich es mal gebrauchen kann, jedenfalls gef?llt mir die animation.

like always, nice work!

Name:
Hi Micha,

das file_get_contents liesst an sich nur den inhalt einer datei ...
in dem fall:
/sys/class/net/$int/statistics/rx_bytes

das ganze funktioniert d.h. nicht unter windows sondern nur auf linux/unix systemen...

Name:
hi andreas,

kannst du mir auch verraten was es mit file_get_contents() auf sich hat? denn bei mir tut sich nichts.

gr??e ausm siegerland^^