Example 9. Combining Graphs and Reports in a Web Page

Features:

AXIS statement options:

- LENGTH=
- VALUE=
BY statement

GOPTIONS statement options:

- BORDER
- DEVICE=
- TRANSPARENCY

ODS HTML statement options:

- BODY=
- CONTENTS=
- FRAME=
- PATH =
- NOGTITLE

OPTIONS statement option:

- NOBYLINE

TITLE statement option:

- # BYVAL

Sample library member: GONCGRW1

This example generates several graphs of sales data that can be accessed from a single Web page. The graphs are two bar charts of summary sales data and three pie charts that break the data down by site. Each bar chart and an accompanying report is stored in a separate body file.

The three pie charts are generated with BY- group processing and are stored in one body file. The program suppresses the default BY lines and instead includes the BY variable value in the title for each chart. The SAS/GRAPH titles are displayed in the HTML output instead of in the graphics output.

The Web page contains two frames , one that displays a Table of Contents for all the graphs, and one that serves as the display area. Links to each piece of output appear in the table of contents, which is displayed in the left frame. Initially the frame file displays the first body file, which contains a bar chart and a report, as shown in the following figure.

Display 7.5: Browser View of Bar Chart and Quarterly Sales Report

Notice that the chart title is displayed outside the graph as part of the HTML file.

Select the link to Total Department Sales to display the second bar chart, as shown in the following figure.

Display 7.6: Browser View of Bar Chart and Department Sales Report

Selecting any link for Department Sales displays the corresponding pie chart as shown in the following figure.

Display 7.7: Browser View of Pie Charts of Site Sales

Because the pie charts are stored in one file, you can easily see all three by scrolling through the file.

Additional features include AXIS statements that specify the same length for both midpoint axes, so that the bar charts are the same width even though they have a different number of bars.

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, HSIZE= and VSIZE= set the horizontal and vertical size of the graphics output area. 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. BORDER is used so that the border around the graphics output area will be compatible with the borders that are created for nongraphics output.

 ods listing close;  goptions reset=global gunit=pct border           colors=(blue green red) ctext=black           hsize=5in vsize=5in ftitle=zapfb           ftext=swiss htitle=6 htext=4           device=gif transparency;

Create the data set TOTALS. The data set contains quarterly sales data for three manufacturing sites for one year.

 data totals;     length dept $ 7 site $ 8;     input dept site quarter sales;     datalines;  Parts   Sydney  1 4043.97  Parts   Atlanta 1 6225.26  Parts   Paris   1 3543.97  Repairs Sydney  1 5592.82  Repairs Atlanta 1 9210.21  Repairs Paris   1 8591.98  Tools   Sydney  1 1775.74  Tools   Atlanta 1 2424.19  Tools   Paris   1 5914.25  Parts   Sydney  2 3723.44  Parts   Atlanta 2 11595.07  Parts   Paris   2 9558.29  Repairs Sydney  2 5505.31  Repairs Atlanta 2 4589.59  Repairs Paris   2 7538.56  Tools   Sydney  2 2945.17  Tools   Atlanta 2 1903.99  Tools   Paris   2 7868.34  Parts   Sydney  3 8437.96  Parts   Atlanta 3 6847.91  Parts   Paris   3 6789.85  Repairs Sydney  3 4426.46  Repairs Atlanta 3 5011.66  Repairs Paris   3 6510.38  Tools   Sydney  3 3767.10  Tools   Atlanta 3 3048.52  Tools   Paris   3 9017.96  Parts   Sydney  4 6065.57  Parts   Atlanta 4 9388.51  Parts   Paris   4 8509.08  Repairs Sydney  4 3012.99  Repairs Atlanta 4 2088.30  Repairs Paris   4 5530.37  Tools   Sydney  4 3817.36  Tools   Atlanta 4 4354.18  Tools   Paris   4 6511.70  ;

Open the ODS HTML destination. FRAME= names the HTML file that integrates the contents and body files. CONTENTS= names the HTML file that contains the table of contents to the HTML procedure output. BODY= names the file for storing the HTML output. The contents file links to each of the body files written to the HTML destination. PATH= specifies the ODSOUT fileref as the HTML destination for all the HTML and GIF files. NOGTITLE suppresses the graphics titles from the SAS/GRAPH output and displays them through the HTML page.

 ods html frame='sales_frame.html'     contents='sales_contents.html'     body='sales_body1.html'     path=odsout     nogtitle;

Define title and footnote. TITLE1 uses the font and height specified by FTITLE= and HTITLE= in the GOPTIONS statement.

 title1 'Total Sales By Quarter';  footnote j=r h=3 'salesqtr ';

Define axis characteristics for the first bar chart. In AXIS2, LENGTH= specifies the length of the midpoint axis.

 axis1 order=(0 to 60000 by 20000)        minor=(number=1)        label=none;  axis2 label=none length=70pct        value=('1Q' '2Q' '3Q' '4Q');

Suppress the legend label and define the size of the legend values.

 legend1 label=none shape=bar(4,4);

Generate the vertical bar chart of quarterly sales. NAME= specifies the name of the catalog entry. Because the PATH= destination is a file storage location and not a specific file name, the name SALESQTR.GIF is assigned to the GIF file, matching the named assigned to the GRSEG on NAME =. DES= specifies the description that is stored in the graphics catalog and used in the Table of Contents.

 proc gchart data=totals;     format sales dollar8.;     vbar3d quarter / discrete                      sumvar=sales                      shape=cylinder                      subgroup=site                      cframe=grayaa                      caxis=black                      width=12                      space=4                      legend=legend1                      maxis=axis2                      raxis=axis1                      des='Total Quarterly Sales'                      name='salesqtr';  run;  quit;

Sort the data set for the report of quarterly sales. The data must be sorted in order of the BY variable before running PROC REPORT with BY-group processing.

 proc sort data=totals out=qtrsort;     by quarter site;  run;

Reset the footnote and suppress the BY-line. We suppress the by-line because otherwise #BYVAL inserts the value of the BY variable into the title of each report.

 footnote1;  options nobyline;

Generate a report of quarterly sales. Because the HTML body file that references the GCHART procedure output is still open, the report is stored in that file. The chart and report are shown in Display 7.5 on page 249.

 title1 'Sales for Quarter #byval(quarter)';  proc report data=qtrsort nowindows;    by quarter;    column quarter site dept sales;    define quarter / noprint group;    define site    / display group;    define dept    / display group;    define sales   / display sum format=dollar8.;    compute after quarter;            site='Total';    endcomp;    break after site    / summarize style=rowheader;    break after quarter / summarize style=rowheader;  run;

Open a new body file for the second bar chart and report. Assigning a new body file closes SALES_BODY1.HTML. The contents and frame files, which remain open, will contain links to all body files.

 ods html body='sales_body2.html' path=odsout;

Define title and footnote for second bar chart.

 title1 'Total Sales By Department';  footnote1 j=r h=3 'salesdep ';

Define axis characteristics. These AXIS statements replace the ones defined earlier. As before, LENGTH= defines the length of the midpoint axis.

 axis1 label=none        minor=(number=1);        order=(0 to 100000 by 20000)  axis2 label=none length=70pct;

Generate the vertical bar chart of departmental sales.

 proc gchart data=totals;     format sales dollar8.;     vbar3d dept / shape=cylinder                   subgroup=site                   cframe=grayaa                   width=12                   space=4                   sumvar=sales                   legend=legend1                   maxis=axis2                   raxis=axis1                   caxis=black                   des='Total Department Sales'                   name='salesdep';  run;  quit;

Sort the data set for the report of department sales. The data must be sorted in order of the BY variable before running PROC REPORT with BY-group processing.

 proc sort data=totals out=deptsort;     by dept site;  run;

Reset the footnote, define a report title, and generate the report of department sales. #BYVAL inserts the value of the BY variable into the title of each report. The chart and report are shown in Display 7.5 on page 249.

 footnote1;  title1 'Sales for #byval(dept)';  proc report data=deptsort nowindows;    by dept;    column dept site quarter sales;    define dept    / noprint group;    define site    / display group;    define quarter / display group;    define sales   / display sum format=dollar8.;    compute after dept;            site='Total';    endcomp;    break after site / summarize style=rowheader;    break after dept / summarize style=rowheader;  run;

Open a new body file for the pie charts. Assigning a new file as the body file closes SALES_BODY2.HTML. The contents and frame files remain open. GTITLE displays the titles in the graph.

 ods html body='sales_body3.html' gtitle path=odsout;

Sort data set in order of the BY variable before running the GCHART procedure with BY-group processing.

 proc sort data=totals out=sitesort;     by site;  run;

Define title and footnote. #BYVAL inserts the value of the BY variable SITE into the title for each output.

 title 'Departmental Sales for #byval(site)';  footnote j=r h=3 'salespie ';

Generate a pie chart for each site. All the procedure output is stored in one body file. Because BY-group processing generates multiple graphs from one PIE3D statement, the name assigned by NAME= is incremented to provide a unique name for each piece of output.

 proc gchart data=sitesort;       format sales dollar8.;       by site;       pie3d dept / noheading                    coutline=black                    sumvar=sales                    des='Department Sales'                    name='salespie';  run;  quit;

Close the ODS HTML destination, and open the ODS Listing destination.

 ods html close;  ods listing;