|SAS/GRAPH Software: Reference|
|GOPTIONS statement option:
| ODS HTML statement options:
Sample library member: GR08N10
This example shows you how to create a drill-down graph in which the user can select an area of the graph in order to display additional information about the data. The program creates one vertical bar chart of total sales for each site and three reports that break down the sales figures for each site by department and quarter. Vertical Bar Chart of Total Sales shows the bar chart of sales.
Vertical Bar Chart of Total Sales
PROC REPORT Output Displayed in a Web Browser shows the PROC REPORT output that appears when you click on the bar for Atlanta.
PROC REPORT Output Displayed in a Web Browser
For additional information about this program, see Details.
Assign the Web-server path. FILENAME assigns the fileref ODSOUT, which specifies a destination for the HTML and GIF files produced by the example program. To assign that location as the HTML destination for program output, ODSOUT is specified later in the program on the ODS HTML statement's PATH= option. ODSOUT must point to a Web-server location if procedure output is to be viewed on the Web.
filename odsout 'path-to-Web-server-space';
Close the ODS Listing destination for procedure output, and set the graphics environment. To conserve system resources, ODS LISTING CLOSE closes the Listing destination for procedure output. On the GOPTIONS statement, DEVICE=GIF causes the ODS HTML statement to generate the graphics output as GIF files. TRANSPARENCY causes the graphics output to use the Web-page background as the background of the graph.
ods listing close; goptions reset=global gunit=pct colors=(black blue green red) hsize=7 in vsize=5 in ftitle=zapfb ftext=swiss htitle=6 htext=4 device=gif transparency noborder;
Add the HTML variable to TOTALS and create the NEWTOTAL data set. The HTML variable SITEDRILL contains the targets for the values of the variable SITE. Each HREF value specifies the HTML body file and the name of the anchor within the body file that identifies the target graph.
data newtotal; set totals; length sitedrill $40; if site='Atlanta' then sitedrill='HREF="report_deptsales.html#IDX1"'; else if site='Paris' then sitedrill='HREF="report_deptsales.html#IDX2"'; else if site='Sydney' then sitedrill='HREF="report_deptsales.html#IDX3"'; run;
Open the ODS HTML destination. BODY= names the file for storing HTML output. PATH= specifies the ODSOUT fileref as the HTML destination for all the HTML and GIF files. NOGTITLE suppresses the graph titles from the SAS/GRAPH output and displays them in the HTML.
ods html path=odsout body='report_body.html' nogtitle;
Define title and footnote.
title1 'Total Sales for All Sites'; footnote1 h=3 j=l 'click on bars' j=r 'REPORT3D ';
Assign a pattern color for the bars. Each bar in the graph uses the same PATTERN definition.
Define axis characteristics. The VBAR3D statement assigns AXIS1 to the response axis and AXIS2 to the midpoint axis.
axis1 order=(0 to 100000 by 20000) minor=(number=1) label=none; axis2 label=none offset=(9,9);
Generate the vertical bar chart of total sales for each site. HTML= specifies SITEDRILL as the variable that contains the name of the target. Specifying HTML= causes SAS/GRAPH to add an image map to the HTML body file. NAME= specifies the name of the catalog entry.
proc gchart data=newtotal; format sales dollar8.; vbar3d site / discrete width=15 sumvar=sales inside=sum html=sitedrill coutline=black cframe=blue maxis=axis2 raxis=axis1 name='report3d '; run; quit;
Open the file for the PROC REPORT output. Assigning a new body file closes REPORT_BODY.HTML.
ods html body='report_deptsales.html' path=odsout;
Sort the data set NEWTOTAL. The data must be sorted in order of the BY variable before running PROC REPORT with BY-group processing.
proc sort data=newtotal; by site dept quarter; run; quit;
Clear the footnote.
Suppress the default BY-line and define a title that includes the BY-value. #BYVAL inserts the value of the BY variable SITE into the title of each report.
options nobyline; title1 'Sales Report for #byval(site)';
Print a report of departmental sales for each site.
proc report data=newtotal nowindows; by site; column site dept quarter sales; define site / noprint group; define dept / display group; define quarter / display group; define sales / display sum format=dollar8.; compute after site; dept='Total'; endcomp; break after site / summarize style=rowheader page; run; quit;
Close the ODS HTML destination, and open the ODS Listing destination.
ods html close; ods listing;
This section provides additional information about the pieces of this program and how they work together to generate SAS/GRAPH output with drill-down functionality. It describes
For a description of the relationship between the parts of the program and the HTML and GIF files, see "About SAS/GRAPH Output and the Web."
|Building an HREF value|
In the DATA step, the variable SITEDRILL is assigned a string that defines the link target for a data value. For example,
if site='Atlanta' then sitedrill='HREF="report_deptsales.html#IDX1"';
The link target is specified by the HTML HREF attribute.
The HREF value tells the Web page where to link to when a user selects the
region associated with the value
For example, clicking on the first bar in the chart
links to the target defined by
This target is composed of a filename and an anchor. The file,
report_deptsales.html, is generated by the PROC REPORT step.
IDX1 is the anchor that
identifies the section of the file that contains the report for the first
Because anchor names increment, in order to assign them accurately you must know how many pieces of output your program generates and in what order. For example, this table lists in order the pieces of output generated by this example and their default anchor names:
|Creating an image map|
The HTML= option in the GCHART procedure is assigned the variable with the target information - in this case, SITEDRILL.
This option causes SAS/GRAPH to generate in the HTML
body file the MAP and AREA elements that compose the image map. It loads the
HREF attribute value from SITEDRILL into the AREA element. This image map,
which is named
gqcke00k_map, is stored in
report_body.html (ODS generates unique map names each time you run the program, so
the next time this program runs, the map name will be different):
<MAP NAME="gqcke00k_map"> <AREA SHAPE="POLY" HREF="report_deptsales.html#IDX3" COORDS="423,409,423,242,510,242,510,409" > <AREA SHAPE="POLY" HREF="report_deptsales.html#IDX2" COORDS="314,409,314,139,401,139,401,409" > <AREA SHAPE="POLY" HREF="report_deptsales.html#IDX1" COORDS="205,409,205,199,292,199,292,409" > </MAP>
The AREA element defines the regions within the graph that you can select to link to other locations. It includes attributes that define the shape of the region (SHAPE=) and position of the region (COORDS=) as well as the link target (HREF=).
The value assigned to the HREF= attribute is contained in the variable assigned to HTML=, in this case SITEDRILL.
|Referencing SAS/GRAPH output|
In the GOPTIONS statement, DEVICE=GIF causes SAS/GRAPH to
create GIF files from the SAS/GRAPH output.
It also adds to the open body file an IMG element that points to the GIF file.
In this case, SAS/GRAPH adds the following IMG element to
<IMG SRC="report3d.gif" USEMAP="#gqcke00k_map">
The IMG element tells the Web page to get the image
from the file
report3d.gif. It also tells the Web page to use
the image map
#report3d_map to define the hot spots of the bar
Top of Page
Copyright 1999 by SAS Institute Inc., Cary, NC, USA. All rights reserved.