Example 10. Creating a Bar Chart with Drill-down for the Web


Example 10. Creating a Bar Chart with Drill-down for the Web

Features:

GOPTIONS statement option:

  • RESET=

ODS HTML statement options:

  • BODY=

  • NOGTITLE

  • PATH =

Sample library member: GONDDCW1

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. The following figure shows the bar chart of sales.

click to expand
Display 7.8: Vertical Bar Chart of Total Sales

Display 7.9 on page 256 shows the PROC REPORT output that appears when you click on the bar for Atlanta.

click to expand
Display 7.9: PROC REPORT Output Displayed in a Web Browser

For additional information about this program, see Details on page 259.

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 ;  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.

 pattern color=cyan; 

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.

 goptions reset=footnote1; 

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; 

Details

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

  • how an HREF value is built

  • how the HTML= option creates an image map in the HTML file

  • how the HTML file references the SAS/GRAPH output.

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 Atlanta .

For example, clicking on the first bar in the chart links to the target defined by report_deptsales.html#IDX1 . 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 BY group, Atlanta .

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:

Procedure

Output

Anchor name

GCHART

report3d.gif

IDX

REPORT

Atlanta report

IDX1

REPORT

Paris report

IDX2

REPORT

Sydney report

IDX3

Creating an image map

The HTML= option in the GCHART procedure is assigned the variable with the target information “ in this case, SITEDRILL.

 html=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 report_body.html :

 <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 chart.




SAS.GRAPH 9.1 Reference, Volumes I and II
SAS.GRAPH 9.1 Reference, Volumes I and II
ISBN: N/A
EAN: N/A
Year: 2004
Pages: 342

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net