GRAPHTYPE – Kicked Up a Notch

Dressing them up, changing their colors, controlling their width, and even stacking them. Susannah Jones tells you how.

Do you like to use graph bars on your Web screens and reports? Would you like to dress them up a bit – change the colors, control their widths, even stack them?

Here is an example of graph bars created with this stylesheet entry:


Graph 1

Figure 1

And after we kick the concept up a notch, here's what we can have:

Graph 2

Figure 2

Now our graph bars are custom colored, they're stacked, and their widths are completely under our control. How? Let's look at GRAPHTYPE. Viewing the source of Figure 1 reveals the underlying code for MERI PANT on the first line:

<IMG SRC="/ibi_html/vis/gc0c0c0.gif" HEIGHT=13 WIDTH=34 ALIGN=MIDDLE>

You'll first notice that each silver bar is actually an image – one of 16 that come with WebFOCUS and are installed on your path. Finding them is easy; here is where I keep mine (and I know you can translate hex in your sleep, but just in case...):

	{drive}:\ibi\WebFOCUS436\ibi_html\vis\g000000.gif   black
	                g008080.gif teal
	                g00ff00.gif green
	                g00ffff.gif aqua
	                g800000.gif maroon
	                g800080.gif purple
	                g808000.gif olive
	                g808080.gif grey
	                gc0c0c0.gif silver
	                gff0000.gif red
	                gff00ff.gif fuschia
	                gffff00.gif yellow
	                gffffff.gif white

Next, notice "WIDTH=34." But where did the value of 34 come from? It's nowhere in our data.

The Quick and Dirty Fix

Open one of these gif files in your favorite image editor – the file is just a single pixel with a hex value matching the file name. If all you want to do is change the colors of those graph bars to your company's color palette, then change the actual color of the supplied gifs. For example, open the blue gif (g0000ff.gif) and tweak the color until it matches the blue of your company's logo. Then save it, and every time you use GRAPHTYPE with COLOR=BLUE in your stylesheet, your bars will be your company logo's blue. Simple!

A Much Spicier Idea

Let's make some gifs of our own, in the color palettes we like, and place them in a different directory, in the path of our Web site's URL. I've made these: (I'm using RGB values, not hex, but you knew that.)


These are the four colors of bars I use in Figure 2. I've color-picked them from the model's picture that appears in this report. In addition, I've added my favorite GREY and SILVER bar gifs to this directory. (You'll find out why a little later.)

Now I not only have my raw materials, but they're in a place where my Web site can see them, so let's write some code! Viewing the source of Figure 2 reveals this code on the first line, SUZANNE BLOUSE, where the value I want to represent is "83%," the value of the variable RATIO.

<td align="left" width="220">
<img height="13" src="http://inseam/images/gtan193173121.gif" width="80">
<img height="13" src="http://inseam/images/gtan147131086.gif" width="3">

The overall width of my bar space is 220 pixels, corresponding to 220 percent. The first 80 percent of my value is light tan; the next 20 percent of my bar space is dark tan. If we've sold more than our projection, then the RATIO value is more than 100 percent. The bar part that is greater than 100 percent will be dark blue. And if we're selling so well we're out of stock, the bar value turns red. Look at the code for STEPHANIE SWEATER in Figure 2, where the RATIO value is 147 percent. We've sold 100 percent of our projection, 47 percent over projection, and 31 percent is out of stock.

<td align="left" width="200">
<img height="13" src="http://inseam/images/gtan193173121.gif" width="80">
<img height="13" src="http://inseam/images/gtan147131086.gif" width="20">
<img height="13" src="http://inseam/images/gblu026054084.gif" width="16">
<img height="13" src="http://inseam/images/gred179056045.gif" width="31">

We can make our cell with any value we choose. We can determine our cell width before we write our code, by an examination of our data set, and set our cell width with an &variable, and individual bar widths as shares of that &variable. (So that's where that 34 in our GRAPHTYPE in Figure 1 came from!)

Here's the code to create these bars. We don't create them with stylesheets.

DEFINE FILE MYFILE -* Figure out your bar values however -* you need to. Make sure to turn them -* into alpha values after you _* calculate them. Mine are ABAR1 -* ABAR2 ABAR3 and ABAR4. MYBAR/A450 WITH SEASON=

'<TD WIDTH="220" ALIGN="LEFT" >' |
'<IMG SRC="http://inseam/images/gtan193173121.gif" ' |
' HEIGHT=13 WIDTH="' | ABAR1 | '">' |
'<IMG SRC="http://inseam/images/gtan147131086.gif" ' |
' HEIGHT=13 WIDTH="' | ABAR2 | '">' |
'<IMG SRC="http://inseam/images/gblu026054084.gif" ' |
' HEIGHT=13 WIDTH="' | ABAR3 | '">' |
'<IMG SRC="http://inseam/images/gred179056045.gif" ' |
' HEIGHT=13 WIDTH="' | ABAR4 | '">' |

END TABLE FILE MYFILE SUM Cut PROJECTIONS AS 'Projected,Sales' Orders Ratio MYBAR AS '' BY body BY style BY DESCRIPTION AS '' BY color ON TABLE SET STYLE * -* Whatever you need to do, but no GRAPHTYPE -* needed. We have replaced GRAPHTYPE with a -* single variable whose value is a long text -* string of HTML, which our browser -* interprets for us as a color block. ENDSTYLE END

Notice that my image references use complete absolute URLs. That's because I use ReportCaster to e-mail these reports and I want my users to be able to see the graphics. The image tag in Figure 1 using the GRAPHTYPE was not an absolute URL, so the lovely little silver and grey bars didn't appear in my e-mailed reports. That's why I copied those bars to my Web site's path. I'll use them, with the same type of DEFINEd variable. As an alternative, you can copy those 16 lovely gifs, and all your bars, to a directory in my site path: http://hostname/images/, for example. Then, in the fex which creates the e-mail, enter this line: SET BASEURL =http//hostname/images/

Also note that I'm using explicit gifs, not the HTML tag BGCOLOR. As you have no doubt discovered, BGCOLOR doesn't print; gifs do. But here's an idea if you consider yourself among the gif-impaired – define your bar variable as a complete table:

MYBAR/A450 = '<TABLE WIDTH="200">
<TD BGCOLOR=RGB(193 173 121) WIDTH= " ' | ABAR1 | '">' | [etc.]

You'll get colored bars, they'll show up nicely in your browser, they'll e-mail, but they won't print.

I hope you can use this technique.