|
Progress Bars
Progress bars are, like fader graphs, a bit different from the other graph types. You have to set
two values for each bar: The first one is the actual value, the second one is the maximum value of
the progress bar, i.e. the value that equals 100%. The two values are separated by a semicolon.
Also there is no legend (doesn't really make sense with progress bars), 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("pBar");
$graph->values = "123;456";
echo $graph->create();
|
Example #2
Now let's add a label and titles:
$graph = new BAR_GRAPH("pBar");
$graph->values = "123;456";
$graph->labels = "Total";
$graph->titles = "Type,Progress";
echo $graph->create();
|
Example #3
It's also possible to create multiple progress bars.
Values for each bar are comma-separated:
$graph = new BAR_GRAPH("pBar");
$graph->titles = "Type,Progress";
$graph->values = "123;456, 456;789";
$graph->labels = "Current,Total";
echo $graph->create();
| Type | Progress | | Current | | 27% | | Total | | 58% |
|
If you want to use an array for the values, here's an example:
$graph->values = array("380;420", "150;340");
|
Example #4
Let's change some colors and show the values:
$graph = new BAR_GRAPH("pBar");
$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->legendColor = "#008000";
$graph->legendBGColor = "#D0F0D0";
$graph->showValues = 1;
echo $graph->create();
| Type | Count | Progress | | Current | 123 / 456 | | 27% | | Total | 456 / 789 | | 58% |
|
|
Example #5
Bar 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("pBar");
$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";
echo $graph->create();
|
Example #6
Let's do some more design changes and add a prefix to the values:
$graph = new BAR_GRAPH("pBar");
$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;
echo $graph->create();
|
Example #7
It is possible to set extra colors for bars whose value exceeds certain levels:
$graph = new BAR_GRAPH("pBar");
$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 = array(1, "lightgreen", 80, "yellow", 120, "red");
echo $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 bar with the highest value:
$graph = new BAR_GRAPH("pBar");
$graph->values = "120;160, 80;160, 40;160";
$graph->showValues = 1;
$graph->barLevelColors = array(1, "#C0C0FF", 80, "#8080FF", "MAX", "#4040FF");
echo $graph->create();
| 120 / 160 | | 75% | | 80 / 160 | | 50% | | 40 / 160 | | 25% |
|
|
Example #8
You can also use images (PNG, JPG or GIF) instead of bar colors, and add some
space between labels:
$graph = new BAR_GRAPH("pBar");
$graph->values = "50;100, 60;100, 70;100";
$graph->labels = "cats,dogs,birds";
$graph->barColors = "blue.gif,red.gif,green.gif";
$graph->labelSpace = 10;
echo $graph->create();
| cats | | 50% | | | dogs | | 60% | | | birds | | 70% |
|
NOTE: Images are not included in this package.
|
Comments
|
|