I've successfully created a script that will display the disk space usage of my domain...however I want to take it a step further and take that data to create a percentage bar in java that will show the percentage of the disk space used in regards to a certain number of MB's my account allots me for my hosting account:

Here is what I have so far..but the bar doesnt show...look at my last line

<?php
function getDirectorySize($path)
{
  $totalsize = 0;
  $totalcount = 0;
  $dircount = 0;
  if ($handle = opendir ($path))
  {
    while (false !== ($file = readdir($handle)))
    {
      $nextpath = $path . '/' . $file;
      if ($file != '.' && $file != '..' && !is_link ($nextpath))
      {
        if (is_dir ($nextpath))
        {
          $dircount++;
          $result = getDirectorySize($nextpath);
          $totalsize += $result['size'];
          $totalcount += $result['count'];
          $dircount += $result['dircount'];
        }
        elseif (is_file ($nextpath))
        {
          $totalsize += filesize ($nextpath);
          $totalcount++;
        }
      }
    }
  }
  closedir ($handle);
  $total['size'] = $totalsize;
  $total['count'] = $totalcount;
  $total['dircount'] = $dircount;
  return $total;
}

function sizeFormat($size)
{
    if($size<1024)
    {
        return $size." bytes";
    }
    else if($size<(1024*1024))
    {
        $size=round($size/1024,1);
        return $size." KB";
    }
    else if($size<(1024*1024*1024))
    {
        $size=round($size/(1024*1024),1);
        return $size." MB";
    }
    else
    {
        $size=round($size/(1024*1024*1024),1);
        return $size." GB";
    }

}  

$path= $glob['rootDir'];
$ar=getDirectorySize($path);

echo "<h4>Diskspace Usage  $path</h4>";
echo ":".sizeFormat($ar['size'])." of 1000MB<br>";
?>

<style type="text/css">
  div.smallish-progress-wrapper { 
position: relative; 
border: 1px solid black;
 } 
div.smallish-progress-bar {
position: absolute; 
top: 0; 
left: 0; 
height: 100%;
 } 
div.smallish-progress-text {
text-align: center; 
position: relative; 
 } 
</style>

 <script type="text/javascript">
 function drawProgressBar(color, width, percent) {
 var pixels = width * (percent / 1000);
 document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">'); document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>'); document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + 'MB</div>'); document.write('</div>'); } </script> 

<script type="text/javascript">drawProgressBar('#987654', 500, <?php echo " ".sizeFormat($ar['size'])." of 1000MB"; ?>);</script>

    It begs the question... why not just use GD to draw the bar instead of using javascript?

      How do I go about doing that lol....off to google it i suppose lol

        well i used java i suppose becuase id like to replace the hex color value of the bar with a nice graphic for handsome appearance

          Sounds like it'd be a lot simpler using nothing but HTML and some CSS... create a container div that has one color/image for the background (or no background at all), and then create another div inside of it and set its width equal to the percentage you calculate. This inner div represents the percentage "bar" and can be styled with any color/image/etc. you like using simple CSS.

          EDIT: Also, just for clarification... you aren't using Java above, you're using JavaScript - two very different languages.

            that didnt work lol. i used that script replacing my file name etc. I get a warning cannot modify headers...and some encrypted data

              bradgrafelman;10952290 wrote:

              and set its width equal to the percentage you calculate.

              How do I insert the dynamic value of the "percentage"

                Something like:

                echo '<div id="percentBar" style="width: ' . ($ar['size'] / 1000) * 100 . '%">&nbsp;</div>';

                EDIT: Just to clarify, the 1000 above is your 1000 MB maximum space that you stated above, and the '* 100' is simply to turn the decimal ratio into a percentage.

                  I coded:

                   <?php
echo '<div id="Bar" style="width: 100%; background-color: #ffffff; border:1px solid #000000; padding:10px">'; 
echo '<div id="percentBar" style="width: '.sizeFormat($ar['size'])* 100 . '%; background-color: #996633;">&nbsp;</div></div>'; 
?>

                  my first bar is 100% but the progess bar goes WAY off the page and exceeds the progress bar contraint (first div) to the point wher eI have to scroll horiz to see it all.

                  By the way..my load is 46.9MB of 1000MB

                    the progress div exceeds the container div. The page source reveals this:

                     <div id="Bar" style="width: 100&#37;; background-color: #ffffff; border:1px solid #000000; padding:10px"><div id="percentBar" style="width: 4630%; background-color: #996633;">&nbsp;</div></div>

                      Got it....I changed the 100 . to .100 .

                      Now it looks like this:

                       <?php
echo '<div id="Bar" style="width: 100&#37;; background-color: #ffffff; border:1px solid #000000; padding:10px">'; 
echo '<div id="percentBar" style="width: '.sizeFormat($ar['size'])* .100 . '%; background-color: #996633;">&nbsp;</div></div>'; 
?>

                        Well there's your problem:

                        width: 4630%

                        Of course it exceeds the container div - it should be roughly 46.3 times as large!

                        Note in my code above, I divided the MB usage by the total MB allowed (1000MB, according to your post above) to give the ratio of MB used versus MB available. Your code, however, is missing that calculation.

                        EDIT: Didn't see your second post before I replied; does the progress bar work as expected now?

                          so it was multiplying the amount by 100 to create a percentage of 4630&#37; when now I have made it to multiply it by .100 ( a division rather) to create a perectage of 4.630% which looks and is proper 🙂 YAY!!

                            So.. does that solve your initial problem? If so, don't forget to mark this thread resolved using the link on the Thread Tools menu above.

                              Write a Reply...