Update Chart to show both rx/tx and scale to show load

[Jason]

[Album] Imgur

NB. The ‘$(document).ready’ function will need some input from the script expert on how to set an appropriate ‘yaxis: { max:’ figure during install. 55000 works perfectly on my 400Mb VPS.

widgets\data.php

<?php
$interface = venet0;
session_start();
$rx[] = @file_get_contents("/sys/class/net/venet0/statistics/rx_bytes");
$tx[] = @file_get_contents("/sys/class/net/venet0/statistics/tx_bytes");
sleep(1);
$rx[] = @file_get_contents("/sys/class/net/venet0/statistics/rx_bytes");
$tx[] = @file_get_contents("/sys/class/net/venet0/statistics/tx_bytes");
$tbps = $tx[1] - $tx[0];
$rbps = $rx[1] - $rx[0];
$round_rx=round($rbps/1024, 1);
$round_tx=round($tbps/1024, 1);
$time=date("U")."000";
$_SESSION['rx'][] = "[$time, $round_rx]";
$_SESSION['tx'][] = "[$time, $round_tx]";
//$data['label'] = "1";
//$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]);

    $x2 = min(array_keys($_SESSION['tx']));
    unset($_SESSION['tx'][$x2]);
}

// # json_encode didnt work, if you found a workarround pls write m
//echo json_encode($data, JSON_FORCE_OBJECT);

echo '[ { "data":['.implode($_SESSION['rx'], ",").'],"label": "Download"}, ';
echo '{ "data":['.implode($_SESSION['tx'], ",").'],"label": "Upload"} ';
echo ']';
?>

/inc/panel.header.php

  $(document).ready(function() {
      var options = {
		  series: {
	        lines: {
            show: [true],
            fill: [true],
            fillColor: { colors: [{ opacity: 0.02 }, { opacity: 1}] }
				  }
		  },
          border: { show: [true, false] },
          points: { show: false },
          xaxis: { mode: "time" },
		  yaxis: { max: 55000, min: 0, axislabel: "MB/s"},    // The max value will need to be set accordingly for each server's internet speed.
          colors: ["#6600AA", "#10D2E5"],
          shadowSize: 		  
      };
      var data = [];
      var placeholder = $("#mainbw");
	  
      $.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;
              var updateInterval = 30;
              $.plot($("#mainbw"), data, options);
		      fetchData();
          }
          $.ajax({
              url: "widgets/data.php",
              method: 'GET',
              dataType: 'json',
              success: onDataReceived
          });
      }
      setTimeout(fetchData, 30);
  });

[JMSolo]

That’s some bang up work you have done there sir. We can alternatively leave yaxis out of the picture and have the chart display dynamically rather than calculating height in accordance with network speed. This way the chart will not be so void on low activity.

However, the yaxis will come in handy on an inclusion of stats handled as ‘Live’ (no yaxis) - ‘Hourly’ - ‘Daily’ - Weekly’ - ‘Monthly’ - ‘Total’

Pretty much, the stats you see from the vnstat dump on your additional bandwidth charts will need to be converted to charts as well. … and that’s a fun one!

###Update
I have done some more adjusting to that and added another layer of info. I figure it is best to set what the max value is, yet retain a readout of what the current value is showing. I still need to figure out how to convert these axis values to human readable MB/s… but this is what I got so far.

PS: I also wen the way of low stress spline on the lines… just seems neater.

[Jason]

You got an axis label to work. I couldnt figure that one out!

If you want the graph to not be so void, how you considered dynamically adjusting the axis dynamically dependent on the data?

Can I see your axis label code, and maybe I can figure out how to set it to one value yet display the MB/s?

Edit: Oh something does happen dynamically around 18 seconds, didnt notice that on first viewing. Is that because you didnt set a max value and letting it scale on its own?

[JMSolo]

Yes, I have it pulling on a dynamic scale now. Now it really comes down to making those values easier to read. Rather than appending a label to the top (1000 = 1 MB/s)

Here is the code block now:

  <script id="source" language="javascript" type="text/javascript">
  $(document).ready(function() {
    var options = {
      series: {
        lines: {
          show: false
        },
        splines: {
          show: true,
          tension: 0.4,
          lineWidth: 1,
          fill: 0.4
        }
      },
      axisLabels: { show: true },
      points: { show: false },
      legend: {
        container: '#mainbwLegend',
        noColumns: 0
      },
      grid: {
        borderColor: '#aaaaaa',
        borderWidth: 0,
        color: '#ddd',
        labelMargin: 5,
        backgroundColor: 'transparent'
      },
      xaxis: { 
        mode: "time", 
        axislabel: "Time",
        font: {
          size: 9,
          style: "normal",
          color: "#999",
          weight: "light",
          family: "open sans",
          variant: "small-caps"
        }
      },
      yaxis: { 
        tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "1000<br/>=<br/>1MB/s"; },
        font: {
          size: 11,
          style: "normal",
          color: "#999",
          weight: "light",
          family: "open sans",
          variant: "small-caps"
        } 
      },
      colors: ["#44BBFF", "#66CC99"],
      shadowSize: 0
    };
    var data = [];
    var placeholder = $("#mainbw");
    $.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;
          var updateInterval = 1;
          $.plot($("#mainbw"), data, options);
        fetchData();
        }
        $.ajax({
          url: "widgets/data.php",
          method: 'GET',
          dataType: 'json',
          success: onDataReceived
        });
      }
    setTimeout(fetchData, 1);
  });
  </script>

[Jason]

Just thinking, the easiest way to do Mb/S might be to actually make the data.php routine pass the data back in Mb.

I think you already convert from bytes to kb, so perhaps another / 1024 for mb?

[JMSolo]

Yup. That nailed it

$round_rx=round($rbps/1024/1024, 1);
$round_tx=round($tbps/1024/1024, 1);