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

[IMAGE]

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:

The graphics options specify the GIF device driver and set the display area to 450 x 400 pixels.
A FILENAME statement allocates a storage location for all the GIF files. The HTML files that are required for the output will be created with DATA step processing, so additional FILENAME statements allocate files for the HTML files.
On the GCHART procedure:
- The PROC GCHART statement uses IMAGEMAP= to create an Imagemap data set named MAPDATA.
- The VBAR3D statement assigns the name BARCHART to the bar chart's GRSEG. Thus, the resulting GIF file is named barchart.gif.
- The PIE3D statement assigns the name SALEREG1 to the first pie chart's GRSEG. Thus, the GIF files for the pie charts are named salereg1.gif, salereg2.gif, and salereg3.gif. For more information on the naming conventions for the output GIF files, see Naming Conventions Used for GIF Files.
Several DATA steps create the required HTML files.
The IMAGEMAP macro uses the data set MAPDATA to create an image map, which it writes to the HTML file that references the drill-down bar chart. Because the GRSEG for the chart was assigned the name BARCHART, the image map is also named BARCHART.

Code for the Example

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

vbar.html to reference the bar chart.
pies.html to reference the three pie charts, which are assigned the anchor names central, south, and west.
sales.html to define the frames needed for the Web-page layout. The right frame is assigned the name view_pies.

The code assumes the following:

A fileref already exists to point to the location of the Annotate macros (see About the IMAGEMAP Macro).
Users will access the output through a file system.

/* 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 */
%annomac;

/* 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
     links='href="pies.html#central"';
  else if Region='South' then
     links='href="pies.html#south"';
  else if Region='West' then
     links='href="pies.html#west"';

     datalines;
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
    imagemap=mapdata;
  vbar3d region / sumvar=sales
    patternid=midpoint
    html=links
    name='barchart';
run;

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

/* 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>';
run;

Chapter Contents
Previous
Next
Top of Page