Web www.gerd-tentler.de
Version 4.10 (released Jan. 7, 2012) [Download]

Fader Graphs

Fader graphs are, like progress bars, a bit different from the other graph types. You have to set two values for each fader: The first one is the actual value, the second one is the maximum value of the fader, i.e. the value that equals 100%. The two values are separated by a semicolon.
Also there is no legend, and if barBGColor isn't set or barBGColor and labelBGColor are the same, barBGColor will be set to labelBGColor; if no titles are set, the labelBGColor setting will be ignored and labels will appear transparent (see examples #5 and #8). In this case, if you want to set labelBGColor you must set barBGColor, too, using different colors (see example #4).
Example #1
The most simple graph looks like this:
$graph = BAR_GRAPH->new("fader");
$graph->{values} = "123;456";
print $graph->create();
 27%
Example #2
Now let's add a label and titles:
$graph = BAR_GRAPH->new("fader");
$graph->{values} = "123;456";
$graph->{labels} = "Total";
$graph->{titles} = "Type,Progress";
print $graph->create();
TypeProgress
 Total 
 27%
Example #3
It's also possible to create multiple faders.
Values for each fader are comma-separated:
$graph = BAR_GRAPH->new("fader");
$graph->{titles} = "Type,Progress";
$graph->{values} = "123;456, 456;789";
$graph->{labels} = "Current,Total";
print $graph->create();
TypeProgress
 Current 
 27%
 Total 
 58%

If you want to use an array for the values, here's an example:
$graph->{values} = ["380;420", "150;340"];
Example #4
Let's change some colors and show the values:
$graph = BAR_GRAPH->new("fader");
$graph->{values} = "123;456, 456;789";
$graph->{labels} = "Current,Total";
$graph->{titles} = "Type,Count,Progress";
$graph->{graphBGColor} = "#B0E0B0";
$graph->{graphBorder} = "1px solid green";
$graph->{graphPadding} = 10;
$graph->{titleColor} = "yellow";
$graph->{titleBGColor} = "#60C060";
$graph->{barColors} = "#C0D0C0,#80D080";
$graph->{barBGColor} = "#D0F0D0";
$graph->{labelColor} = "yellow";
$graph->{labelBGColor} = "#60C060";
$graph->{absValuesColor} = "#008000";
$graph->{absValuesBGColor} = "#D0F0D0";
$graph->{percValuesColor} = "#008000";
$graph->{showValues} = 1;
print $graph->create();
TypeCountProgress
 Current  123 / 456 
 27%
 Total  456 / 789 
 58%
Example #5
Fader width (pixels), length (ratio) and border (CSS-spec) are also changable.
By the way, BAR_GRAPH also supports floating point numbers:
$graph = BAR_GRAPH->new("fader");
$graph->{labels} = "Progress";
$graph->{barColors} = "white";
$graph->{values} = "0.62;1.00";
$graph->{percValuesDecimals} = 2;
$graph->{barWidth} = 40;
$graph->{barLength} = 1.5;
$graph->{barBorder} = "2px solid red";
print $graph->create();
 Progress 
 62.00%
Example #6
Let's do some more design changes and add a prefix to the values:
$graph = BAR_GRAPH->new("fader");
$graph->{values} = "50;70";
$graph->{labels} = "Progress";
$graph->{showValues} = 1;
$graph->{barColors} = "#E0E0E0";
$graph->{barBGColor} = "white";
$graph->{barBorder} = "1px solid #808080";
$graph->{labelColor} = "#A0A0A0";
$graph->{labelBGColor} = "";
$graph->{labelBorder} = "1px dashed #A0A0A0";
$graph->{labelFont} = "Arial Black, Arial, Helvetica";
$graph->{labelSize} = 16;
$graph->{absValuesColor} = "silver";
$graph->{absValuesBGColor} = "white";
$graph->{absValuesBorder} = "1px solid silver";
$graph->{absValuesFont} = "Verdana, Arial, Helvetica";
$graph->{absValuesSize} = 14;
$graph->{absValuesPrefix} = "€";
$graph->{percValuesColor} = "#C0C0C0";
$graph->{percValuesFont} = "Comic Sans MS, Times New Roman";
$graph->{percValuesSize} = 16;
print $graph->create();
 Progress  €50 / €70 
 71%
Example #7
It is possible to set extra colors for faders whose value exceeds certain levels:
$graph = BAR_GRAPH->new("fader");
$graph->{values} = "120;160, 80;160, 40;160";
$graph->{titles} = ",,Disk Usage";
$graph->{labels} = "Disk 1, Disk 2, Disk 3";
$graph->{showValues} = 1;
$graph->{absValuesSuffix} = " GB";
$graph->{barLevelColors} = [1, "lightgreen", 80, "yellow", 120, "red"];
print $graph->create();
  Disk Usage
 Disk 1  120 GB / 160 GB 
 75%
 Disk 2  80 GB / 160 GB 
 50%
 Disk 3  40 GB / 160 GB 
 25%

NOTE: All level-color-pairs should be written in ascending order.

You can also use the keyword MAX for setting the color of the fader with the highest value:
$graph = BAR_GRAPH->new("fader");
$graph->{values} = "120;160, 80;160, 40;160";
$graph->{showValues} = 1;
$graph->{barLevelColors} = [1, "#C0C0FF", 80, "#8080FF", "MAX", "#4040FF"];
print $graph->create();
 120 / 160 
 75%
 80 / 160 
 50%
 40 / 160 
 25%
Example #8
You can also use images (PNG, JPG or GIF) instead of fader colors, and add some space between labels:
$graph = BAR_GRAPH->new("fader");
$graph->{values} = "50;100, 60;100, 70;100";
$graph->{labels} = "cats,dogs,birds";
$graph->{barColors} = "blue.gif,red.gif,green.gif";
$graph->{labelSpace} = 10;
print $graph->create();
 cats 
 50%
 dogs 
 60%
 birds 
 70%

NOTE: Images are not included in this package.

Comments