WebFOCUS Newsletter September 2003 - Customer View: How to Kick Up GRAPHTYPE a Notch

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?

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:

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 (see Figure 3):


{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.)

{drive}:\InetPub\wwwroot\images\gred179056045.gif 
	 gtan147131086.gif
	 gtan193173121.gif
	 gblu026054084.gif
	 gc0c0c0.gif
	 g808080.gif

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">
</td>

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.

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!)

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 | '">' |
'</TD>';
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:

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">
<TR>
<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. If you have questions, e-mail me at susanj@elietahari.com

Susannah Jones, WebFOCUS architect at Elie Tahari, Ltd., in New York. InSeam is a self-service system written Susannah in WebFOCUS version 5.2.2, running on Windows 2K server on an HP ProLiant server. Visit the company and view the Elie Tahari Collection at www.elietahari.com.