Simple HTML Graph by Oliver Cage

Here is a simple method to generate graphic bars with percentual values, instead of generating images with the graph. The method is limited, but it allows you to easy create graphic statistics without using any graphic library. The entire layout is based on CSS and HTML.
The function doGraph is doing all the job, and returns a table with the graph.

--- BEGIN CODE ---
#!/usr/bin/perl
use strict;
my ($hash,$header,$footer,$content);

# Here we create the hash reference with the data we want
# to display in the graph.
# the values in the hash_ref are a 2 elements array
# with the following rule ['Title',integer_value]

$hash->{'0'} = ['1st Day',98];
$hash->{'1'} = ['2th Day',61];
$hash->{'2'} = ['3th Day',40];
$hash->{'3'} = ['4th Day',50];
$hash->{'4'} = ['5th Day',3];

# Define the header & footer
$header=qq|
<html>
<style type="text/css" media="screen">
div.graph {
        float: left;
        height: 10px;
        width: 5px;
        font-size: 1px;
}
</style>
<title>Graphs Page</title>
</head>
<body>
|;
$footer=qq|</body>\n</html>\n|;

$content=doGraph($hash,"Bandwidth usage");

print "Content-type: text/html\n\n".$header.$content.$footer;

################################################
# Subroutines                                  #
# Usage: doGraph(inHash_Refference,GraphTitle) #
################################################
sub doGraph {
my ($in,$out,$entry,$i,$j,$k,$l,$col);
my $start_color = 13158;
my $step        = 1536;
$out = "";
if (defined($_[0])){
    $in=$_[0];
    foreach $entry (sort {$a<=>$b} keys %{$in}) {
      $out.= qq|
<tr style="height: 12px;">
    <td align="right" style="font-size: 12px;">$in->{$entry}[0]</td>
    <td style="width:102px; padding-left: 1px;" align="left">
|;
      $in->{$entry}[1]=100 if ($in->{$entry}[1] > 100); # Force to 100% if bigger
      $in->{$entry}[1]=0   if ($in->{$entry}[1] < 0);   # Force to 0% if smaller
      $i=0; $j=0;
      $j=$in->{$entry}[1]%5;      # incomplete segment
      $i=($in->{$entry}[1]-$j)/5; # full segments
      for ($k=0; $k<$i; $k++) {
        $col=sprintf ("%x",$start_color+($step*$k));
        for ($l=length($col)+1; $l<=6; $l++) { $col="0".$col; }
        $out.= qq|\t <div class="graph" style="background-color: #$col; width: 5px;"></div>\n|;
      }
      if ($j != 0 ) {
        $col=sprintf ("%x",$start_color+($step*$k));
        for ($l=length($col)+1; $l<=6; $l++) { $col="0".$col; }
        $out.= qq|\t <div class="graph" style="background-color: #$col; width: $j|;
        $out.= qq|px;"></div>\n|;
      }
      $out.= qq|
    </td>
    <td align="left" style="font-size: 12px;">$in->{$entry}[1]\%</td>
</tr>
|;
    }
    $out.=qq|
<tr style="height: 12px;">
    <td align="center" style="font-size: 12px; background-color:#DFDFDF;" colspan="3">
        <b>$_[1]</b>
    </td>
</tr>
|;
    $out=qq|<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color:#EFEFEF;">$out</table>\n|;
}
return($out);
}
--- END CODE ---

Ofcourse, the PERL code itself is not a big deal, the essence of the example is actually the html layout.
The results of the script for the values in the example will look like this:

1st Day		98%
2th Day		61%
3th Day		40%
4th Day		50%
5th Day		3%
Bandwidth usage

Oliver Cage is a contributor for http://ikoupon.com and http://simbiotiq.com