SAS/GRAPH Software: Reference

Customizing Web Pages for Drill-down Graphs

If you use the HTML or WEBFRAME driver to generate a drill-down graph, you have no control over the page design. The HTML driver always displays graphs on a single Web page and requires you to scroll the page if multiple graphs are produced by the last graphics procedure that is run. The WEBFRAME driver always displays thumbnail graphs in a left frame and uses the right frame to display the output that corresponds to a thumbnail that is selected in the left frame.

If you use ODS to generate a drill-down graph, you can use style sheets to control some of the page attributes, but you are limited to the layouts that ODS offers. Although you can use a frame to display a Table of Contents, a Table of Pages, or both, you must display the drill-down graph on a body page. When you drill down to target output, the target output will display in the body page, replacing the drill-down graph.

If you have a good working knowledge of HTML, and you understand how to generate drill-down graphs in SAS/GRAPH, you can customize the layout of Web pages that implement the drill-down graphs. For example, Customized Web Page with Drill-down Graph shows a Web page that cannot be produced with the HTML or WEBFRAME drivers or with ODS; however, you can customize the page with help from SAS/GRAPH. On this Web page, the left frame displays a drill-down bar chart showing a company's regional sales. When one of the bars in the chart is selected, the right frame displays a pie chart showing the total sales for the states in the corresponding region.

Customized Web Page with Drill-down Graph

[IMAGE]

For a customized Web page, SAS/GRAPH produces the GIF files and an image map for you. You provide the linking information needed to point to the target output, and you create the HTML files and write the HTML tags needed to display the output and use the image map.

Thus, customizing the Web page differs in the following ways from using another method to generate drill-down graphs:

Using the HTML driver, the WEBFRAME driver, or ODS Customizing the Web Page

The HTML files are created for you, and the HTML tags needed to implement the drill-down graph are automatically generated. You create the HTML files and write the HTML tags needed to display your output and use the image map.

You have limited control over the structure of the HTML that is generated. You have complete control over the Web-page layout.

Using the HTML driver, the WEBFRAME driver, or ODS	Customizing the Web Page
The HTML files are created for you, and the HTML tags needed to implement the drill-down graph are automatically generated.	You create the HTML files and write the HTML tags needed to display your output and use the image map.
You have limited control over the structure of the HTML that is generated.	You have complete control over the Web-page layout.

For a SAS/GRAPH Web driver to generate an image map, the graphics procedure that produces the graph must use the IMAGEMAP= option and also the HTML= or HTML_LEGEND= option. IMAGEMAP= causes the procedure to generate an Imagemap data set that contains the following information:

the shape of each area on the graph
the coordinates of each area on the graph
the link information, which is derived from the values of the HTML variable that is specified on HTML= or HTML_LEGEND=.

After the procedure generates the Imagemap data set, you specify that data set as an argument on a call to the IMAGEMAP macro (delivered with SAS/GRAPH). The macro writes the HTML tags needed to define an image map for the graph. You then create the HTML files needed to use that image map and implement the drill-down graph.

An image map must be defined and used in the same HTML file that references the drill-down graph. To create the HTML files, you can use a text editor or an HTML editor. Or, you can use DATA step processing in your SAS program. You can even use a SAS/GRAPH Web driver to generate the initial files, and then edit those files as needed to customize the page. For example, you could use the WEBFRAME driver to generate HTML and GIF files, and then edit the resulting HTML files as needed to customize the page layout and use an image map. This saves you the trouble of writing all your HTML files from scratch.

The technique to use for creating the HTML files is entirely up to you and depends on your needs. For example, if you are generating your graphs in batch runs and do not want to update the HTML files manually every time the image map changes, you may want to generate the HTML files in your SAS program, as shown in Example 5: Customizing a Web Page with a Drill-Down Graph.

About the IMAGEMAP Macro

The IMAGEMAP macro is delivered with SAS/GRAPH. It reads an Imagemap data set that is generated by a graphics procedure and writes the HTML tags needed to create an image map for the graph produced by that procedure. You only use the IMAGEMAP macro when you create a customized Web page. In that case, you use the GIF driver (without ODS) to generate the GIF files. Because the GIF driver does not generate HTML files, you have to create the HTML files you need for your Web page, and you use the IMAGEMAP macro to write the image map to the appropriate HTML file. The IMAGEMAP macro writes the image map for you, but you must write the <IMG> tag that references the image that will use the map, and you must specify the USEMAP attribute on that <IMG> tag to associate the image map with the GIF image.

Note: When you use ODS, or when you use the HTML or WEBFRAME device drivers, SAS/GRAPH creates the HTML files needed for your output, and it implements the drill-down graph for you. In those cases, you do not need to use the IMAGEMAP macro. [cautionend]

The macro has the following syntax:

%IMAGEMAP(imagemap-data-set, outfile)

imagemap-data-set The name of the data set that contains the image-map information. This is the data set specified on the IMAGEMAP= option on the graphics procedure that produces the graph (see About the Imagemap Data Set).

outfile The file in which to write the HTML tags that define the image map. This can be any file. However, the image map must eventually be defined in the HTML file that references the drill-down graph's GIF file. Typically, it is easiest to specify the HTML file as the outfile, although you can write the image map to a different file, and later paste it into the appropriate HTML file.

The IMAGEMAP macro is delivered as one of the Annotate macros that come with SAS/GRAPH. To use an Annotate macro, you must provide your program with access to the data set that contains the macros, and you must compile the macros. Some sites automatically define a fileref for the data set that contains the Annotate macros.

If the fileref is set automatically at your site, you can compile the Annotate macros and make them available by simply submitting the ANNOMAC macro:

%annomac;

If the fileref is not set automatically, find out from your SAS Support Consultant where the Annotate macros are stored, and allocate a fileref that points to the data set:

filename fileref 'external-file';

Then include the Annotate macros in your session:

%include fileref (annomac);

To call the IMAGEMAP macro, you must specify both the name of the Imagemap data set to be used as input and the name of the output file where you want the image map defined. The following code assumes that a graphics procedure has already specified IMAGEMAP=MAPDATA to create the Imagemap data set named MAPDATA:

/* compile the annomac macros */
%annomac;
/* allocate a file for custom html file */
filename vbar  'external-file';
/* generate image map for drill-down */
%imagemap(mapdata, vbar);

Here, the macro reads the information in the data set MAPDATA and uses it to write the image map to the file that is referenced by the fileref VBAR. If the file does not exist, it is created. If the file does exist, the HTML tags are appended to the end of the file. The resulting HTML tags resemble the following:

<MAP NAME="BARCHART">
<AREA SHAPE=RECT COORDS="424, 143, 470, 256"
      href="reports.html#central">
<AREA SHAPE=RECT COORDS="366, 175, 412, 256"
      href="reports.html#south">
<AREA SHAPE=RECT COORDS="308, 106, 354, 256"
      href="reports.html#west">
</MAP>
<P>
<IMG SRC="barchart.gif" USEMAP="#BARCHART">

The image map is assigned the same name as the GRSEG that is produced by the procedure. For example, if the GRSEG is named BARCHART, then the image-map name will be BARCHART.

The image-map name is written in all uppercase letters. Because the Web browsers in some operating environments use case-sensitive image-map names, the USEMAP attribute on the <IMG> tag that uses the map should reference the map's anchor name in all uppercase letters, as shown in the HTML tags above.

Creating an HTML File in a SAS Program

For a customized Web page, you must create all the HTML files you need to display your output. You can create the files any way you like. This section shows you how to create an HTML file in a SAS program, using PUT statements in a DATA step.

To implement a drill-down graph, you need an HTML file that references the graph. That same HTML file must also contain the image map that defines the graph's hot zones and the location of the graph's link targets. When you call the IMAGEMAP macro to create the image map, you can direct its output to the HTML file that references the graph. To use the IMAGEMAP macro, you must first compile the Annotate macros that are delivered with SAS/GRAPH (see About the IMAGEMAP Macro).

The following code creates a file that is referenced by the fileref VBAR. The code assumes the following:

A fileref already exists to point to the location of the Annotate macros.
The Imagemap data set MAPDATA has already been created.
An HTML file with two frames will be created to display the output. The left frame will display the drill-down graph, and the right frame will display the target output for the link selected in the graph. The frame that displays the target output will be assigned the name view_pies.

/* specification for the html file */
filename vbar  'external-file';
/* generate html file to display */
/* 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>';
/* writes image map to file */
%imagemap(mapdata, vbar);

Here, the _NULL_ keyword is used in the DATA step to suppress the creation of a SAS data set. Instead, output is directed to file VBAR.

The PUT statements write the HTML tags to create a body page and to reference the chart that is stored in the file barchart.gif. The USEMAP attribute on the <IMG> tag indicates that an image map named BARCHART defines hot zones and links for the chart. The image map does not yet exist, but it will be appended to the file by the IMAGEMAP macro, which is called on the last line in the code that is shown above. The <BASE> tag indicates that the target output for the links will be displayed in a frame named view_pies.

After all the HTML tags have been completed for file VBAR, the code calls the IMAGEMAP macro, which specifies file VBAR as the output file. Thus, the macro appends to the end of file VBAR the HTML tags that are needed to define the image map. The image map is assigned the name BARCHART because the GCHART procedure that created file barchart.gif used NAME=BARCHART to name the resulting graph.

To place the image map in the middle of the file (for example, above the <IMG> tag that uses it), you would have to start a new DATA step after the macro call to continue writing HTML tags to the file. The new DATA step would have to open the HTML file in "modify" mode, using an operating-environment specific option on the FILE statement. For example, some environments use the option MOD. For more information on DATA step programming, see SAS Language Reference.

For a complete example that shows how to create all the HTML files needed to implement a custom Web page, see Example 5: Customizing a Web Page with a Drill-Down Graph.

Chapter Contents
Previous
Next
Top of Page

imagemap-data-set	The name of the data set that contains the image-map information. This is the data set specified on the IMAGEMAP= option on the graphics procedure that produces the graph (see About the Imagemap Data Set).
outfile	The file in which to write the HTML tags that define the image map. This can be any file. However, the image map must eventually be defined in the HTML file that references the drill-down graph's GIF file. Typically, it is easiest to specify the HTML file as the outfile, although you can write the image map to a different file, and later paste it into the appropriate HTML file.