|
Vertical Bar-Graphs
Have a look at the following examples to see how you can create your own graphs:
Example #1
The most simple graph looks like this:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "380,150,260,310,430";
print $graph->create();
|
Example #2
Now let's add some labels and titles:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "380,150,260,310,430";
$graph->{labels} = "Jan.,Feb.,Mar.,Apr.,May";
$graph->{titles} = "Month,Sales";
print $graph->create();
| Sales | | | | | | | Month | Jan. | Feb. | Mar. | Apr. | May |
|
|
Example #3
It's also possible to create grouped bar-graphs for comparison.
Separate grouped values by a semicolon and add a legend:
$graph = BAR_GRAPH->new("vBar");
$graph->{labels} = "Jan.,Feb.,Mar.,Apr.,May";
$graph->{titles} = "Month,Sales";
$graph->{values} = "380;420, 150;340, 260;120, 310;250, 430;370";
$graph->{legend} = "2001,2002";
print $graph->create();
| Sales | | | | | | | | | | | | Month | Jan. | Feb. | Mar. | Apr. | May |
| | |
|
If you want to use an array for the values, here's an example:
$graph->{values} = ["380;420", "150;340", "260;120"];
|
Example #4
Let's change some colors and show the values:
$graph = BAR_GRAPH->new("vBar");
$graph->{labels} = "Jan.,Feb.,Mar.,Apr.,May";
$graph->{titles} = "Month,Sales,Per-cent";
$graph->{values} = "380;420, 150;340, 260;120, 310;250, 430;370";
$graph->{legend} = "2001,2002";
$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->{legendAbsValues} = 1;
$graph->{showValues} = 1;
print $graph->create();
| Percent | | | | | | | | | | | | Sales | 380 | 420 | 150 | 340 | 260 | 120 | 310 | 250 | 430 | 370 | | Month | Jan. | Feb. | Mar. | Apr. | May |
| | |
|
|
Example #5
Bar width (pixels), length (ratio) and border (CSS-spec) are also changable.
By the way, BAR_GRAPH also supports floating point numbers and negative values:
$graph = BAR_GRAPH->new("vBar");
$graph->{labels} = "Jan.,Feb.,Mar.,Apr.,May";
$graph->{barColors} = "white";
$graph->{showValues} = 1;
$graph->{values} = "0.38,-0.15,-0.26,0.31,0.43";
$graph->{percValuesDecimals} = 2;
$graph->{barWidth} = 40;
$graph->{barLength} = 1.5;
$graph->{barBorder} = "2px solid red";
print $graph->create();
| | | | | | 0.38 | -0.15 | -0.26 | 0.31 | 0.43 | | Jan. | Feb. | Mar. | Apr. | May |
|
|
Example #6
For large amounts of values, it may be useful to split them into several charts:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "1,2,3,4,5,6,7,8,9,10,10,9,8,7,6,5,4,3,2,1";
$graph->{labelBGColor} = "#C0C0F0";
$graph->{barBGColor} = "#E0E0F0";
$graph->{charts} = 2;
print $graph->create();
| | | | | | | | | | | | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
|
|
|
Example #7
It is possible to set extra colors for bars whose value exceeds certain levels:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "380,150,260,310,430";
$graph->{showValues} = 1;
$graph->{barLevelColors} = [1, "red", 260, "yellow", 380, "lightgreen"];
print $graph->create();
| | | | | | 380 | 150 | 260 | 310 | 430 | | 1 | 2 | 3 | 4 | 5 |
|
NOTE: All level-color-pairs should be written in ascending order, and of course this
feature is not suited for grouped bar-graphs.
You can also use the keyword MAX for setting the color of the bar with the highest value:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "380,150,260,310,430";
$graph->{showValues} = 1;
$graph->{barLevelColors} = [1, "#C0C0FF", 300, "#8080FF", "MAX", "#4040FF"];
print $graph->create();
| | | | | | 380 | 150 | 260 | 310 | 430 | | 1 | 2 | 3 | 4 | 5 |
|
|
Example #8
Let's do some more design changes and add a prefix to the values:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "380,150,260,310,430";
$graph->{labels} = "Jan.,Feb.,Mar.,Apr.,May";
$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();
| | | | | | €380 | €150 | €260 | €310 | €430 | | Jan. | Feb. | Mar. | Apr. | May |
|
|
Example #9
You can also use images (PNG, JPG or GIF) instead of bar colors, and add some
space between labels:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "50;30;40, 60;80;50, 70;40;60";
$graph->{labels} = "Jan.,Feb.,Mar.";
$graph->{legend} = "cats,dogs,birds";
$graph->{barColors} = "blue.gif,red.gif,green.gif";
$graph->{labelSpace} = 10;
print $graph->create();
NOTE: Images are not included in this package.
|
Example #10
Sometimes you have very similar values, like for instance 1000, 1010, 1020. The difference between them
is too small to view in a graph:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "1010,1020,1030";
$graph->{showValues} = 1;
print $graph->create();
In this case you can tweak the bar length by using the baseValue variable. Please note that not
only the bar length, but also the percentage changes accordingly:
$graph = BAR_GRAPH->new("vBar");
$graph->{values} = "1010,1020,1030";
$graph->{baseValue} = 1000;
$graph->{showValues} = 1;
print $graph->create();
|
Comments
|
|