Chapter Contents


SAS/GRAPH Software: Reference

Example 5: Customizing a Web Page with a Drill-Down Graph

To plan a customized Web page for a drill-down graph, you must determine what the Web page will look like, what output you need, what HTML files you need to display the output in the layout you want, and what links you need to implement the drill-down capability. This example creates the Web page shown in Customized Web Page with Drill-down Graph. On this Web page, the left frame displays a drill-down bar chart that shows the regional sales for three sales regions. When you select one of the bars in the bar chart, the right frame displays a pie chart that shows total sales for the states in the corresponding region.

Customized Web Page with Drill-down Graph


To create this Web page, you need the following:
output The output requires a 3-D vertical bar chart to show the drill-down chart. The output also requires three 3-D pie charts to show the state sales figures for each region. To produce the graphs, you can use the GIF device driver to write each chart to its own GIF file.
HTML files Requires one HTML file to reference the drill-down chart, and a second to define the two HTML frames needed for the Web-page layout.

For the pie charts, you don't need an HTML file to display them, you can simply display each GIF file as needed. However, you can also create one HTML file to reference all three pie charts. This example will create an HTML file to reference all three pie charts, which will demonstrate how to use anchor names in a customized Web page.

You can name the HTML files with any legal file name in your operating environment. This example will use the following names: vbar.html for the bar chart, pies.html for the pie charts, and sales.html for the file that defines the frames. To view the custom Web page, you must open sales.html in a browser.

links Each bar in the bar chart requires a link to the corresponding region's pie chart. Because the example will reference all three pie charts in a single HTML file, the links need anchor names to locate each pie chart within the file. You can choose any anchor names you want. Because the pie charts represent the three sales regions, this example will use the anchor names central, south, and west.

The drill-down capability for this design requires only one drill-down level: from the bar chart to the pie charts. There is no legend and, therefore, there are no links from the legend. Thus, only one HTML variable is required to store link information for the chart. This example will create a variable named LINKS.

Output Needed for the Drill-down Graph

To generate the drill-down bar chart for this example, you need to run the GCHART procedure with the VBAR3D statement. The PROC GCHART statement must use the IMAGEMAP= option to specify a name for the Imagemap data set. The VBAR3D statement must use the HTML= option to specify the HTML variable that contains the linking information--in this case, the variable LINKS.

To generate the pie charts, you need to run GCHART with the PIE3D statement. You can use BY-group processing BY Statement to generate all three pie charts on a single procedure run.

In this example code, note the following:

Code for the Example

This example uses the following names for the output HTML files:

The code assumes the following:

/* These FILENAME statements are the only       */
/* lines you have to change to run the program. */
/* Specify locations in your file system.       */

/* aggregate location for all gif files */
filename webout 'path-to-Web-server';

/* filename for this file must be vbar.html */
filename vbar  'external-file';

/* filename for this file must be pies.html */
filename pies  'external-file';

/* filename for this file must be sales.html */
filename frame 'external-file';

/* compile the annomac macros */

/* set general graphic options */
goptions reset=all gunit=pct
         htitle=6 htext=4
         ftitle=zapfb ftext=swiss;

/* assign graphics options for Web output */
goptions device=gif transparency
         gsfname=webout gsfmode=replace
         xpixels=450 ypixels=400;

/* create data set REGSALES */
data regsales;
     length Region State $ 8;
     format Sales dollar8.;
     input Region State Sales;
/* the HTML variable */
     length links $40;

/* add HTML variable, assign its values */
if Region='Central' then
  else if Region='South' then
  else if Region='West' then

West    CA  13636
West    OR  18988
West    WA  14523
Central IL  18038
Central IN  13611
Central OH  11084
Central MI  19660
South   FL  14541
South   GA  19022

/* sort data by region for pie charts */
proc sort data=regsales out=regsales;
by region;

/* Create chart for drill-down graph */
title1 'Company Sales';
proc gchart data=regsales
  vbar3d region / sumvar=sales

/* create pie charts for regional sales */
  pie3d state / sumvar=sales
    noheading name='salereg1';
  by region;

/* generate html file for drill-down graph */
data _null_;
  file vbar;
  put '<HTML>';
  put '<BODY>';
  put '<BASE TARGET=view_pies>';
  put '<IMG SRC="barchart.gif" '@;
  put ' USEMAP="#BARCHART">';
  put '</BODY>';
  put '</HTML>';
/* write image map to file */
%imagemap(mapdata, vbar);

/* generate html file to display pie charts */
data _null_;
  file pies;
  put '<HTML>';
  put '<BODY>';
  put '<A NAME="central"></A>'@;
  put '<IMG SRC="salereg1.gif">';
  put '<A NAME="south"></A>'@;
  put '<IMG SRC="salereg2.gif">';
  put '<A NAME="west"></A>'@;
  put '<IMG SRC="salereg3.gif">';
  put '</BODY>';
  put '</HTML>';

/* generate html file to display frames */
data _null_;
  file frame;
  put '<HTML>';
  put '<FRAMESET COLS="50%, *">';
  put '<FRAME SRC="vbar.html">';
  put '<FRAME SRC="pies.html"'@;
  put ' NAME="view_pies">';
  put '</FRAMESET>';
  put '</HTML>';

Chapter Contents



Top of Page

Copyright 1999 by SAS Institute Inc., Cary, NC, USA. All rights reserved.