Horizontal BarGraphs
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 = new BAR_GRAPH("hBar");
graph.values = "380,150,260,310,430";
document.write(graph.create());

Example #2
Now let's add some labels and titles:
graph = new BAR_GRAPH("hBar");
graph.values = "380,150,260,310,430";
graph.labels = "Jan.,Feb.,Mar.,Apr.,May";
graph.titles = "Month,Sales";
document.write(graph.create());

Example #3
It's also possible to create grouped bargraphs for comparison.
Separate grouped values by a semicolon and add a legend:
graph = new BAR_GRAPH("hBar");
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";
document.write(graph.create());
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 = new BAR_GRAPH("hBar");
graph.labels = "Jan.,Feb.,Mar.,Apr.,May";
graph.titles = "Month,Sales,Percent";
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 = true;
graph.showValues = 1;
document.write(graph.create());

Example #5
Bar width (pixels), length (ratio) and border (CSSspec) are also changable.
By the way, BAR_GRAPH also supports floating point numbers and negative values:
graph = new BAR_GRAPH("hBar");
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";
document.write(graph.create());

Example #6
For large amounts of values, it may be useful to split them into several charts:
graph = new BAR_GRAPH("hBar");
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;
document.write(graph.create());

Example #7
It is possible to set extra colors for bars whose value exceeds certain levels:
graph = new BAR_GRAPH("hBar");
graph.values = "380,150,260,310,430";
graph.showValues = 1;
graph.barLevelColors = [1, "red", 260, "yellow", 380, "lightgreen"];
document.write(graph.create());
NOTE: All levelcolorpairs should be written in ascending order, and of course this
feature is not suited for grouped bargraphs.
You can also use the keyword MAX for setting the color of the bar with the highest value:
graph = new BAR_GRAPH("hBar");
graph.values = "380,150,260,310,430";
graph.showValues = 1;
graph.barLevelColors = [1, "#C0C0FF", 300, "#8080FF", "MAX", "#4040FF"];
document.write(graph.create());

Example #8
Let's do some more design changes and add a prefix to the values:
graph = new BAR_GRAPH("hBar");
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;
document.write(graph.create());

Example #9
You can also use images (PNG, JPG or GIF) instead of bar colors, and add some
space between labels:
graph = new BAR_GRAPH("hBar");
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;
document.write(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 = new BAR_GRAPH("hBar");
graph.values = "1010,1020,1030";
graph.showValues = 1;
document.write(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 = new BAR_GRAPH("hBar");
graph.values = "1010,1020,1030";
graph.baseValue = 1000;
graph.showValues = 1;
document.write(graph.create());

Comments

