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 = new BAR_GRAPH("fader");
graph.values = "123;456";
document.write(graph.create());
Example #2
Now let's add a label and titles:
graph = new BAR_GRAPH("fader");
graph.values = "123;456";
graph.labels = "Total";
graph.titles = "Type,Progress";
document.write(graph.create());
Example #3
It's also possible to create multiple faders.
Values for each fader are comma-separated:
graph = new BAR_GRAPH("fader");
graph.titles = "Type,Progress";
graph.values = "123;456, 456;789";
graph.labels = "Current,Total";
document.write(graph.create());

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 = new BAR_GRAPH("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 = "yellow";
graph.absValuesBGColor = "#60C060";
graph.percValuesColor = "#008000";
graph.showValues = 1;
document.write(graph.create());
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 = new BAR_GRAPH("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";
document.write(graph.create());
Example #6
Let's do some more design changes and add a prefix to the values:
graph = new BAR_GRAPH("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;
document.write(graph.create());
Example #7
It is possible to set extra colors for faders whose value exceeds certain levels:
graph = new BAR_GRAPH("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"];
document.write(graph.create());

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 = new BAR_GRAPH("fader");
graph.values = "120;160, 80;160, 40;160";
graph.showValues = 1;
graph.barLevelColors = [1, "#C0C0FF", 80, "#8080FF", "MAX", "#4040FF"];
document.write(graph.create());
Example #8
You can also use images (PNG, JPG or GIF) instead of fader colors, and add some space between labels:
graph = new BAR_GRAPH("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;
document.write(graph.create());

NOTE: Images are not included in this package.

Comments