Enhancing Web Presentations with Chart Descriptions, Data Tips, and Drill-Down Functionality

Example: Creating Bar Charts with Drill-Down for the Web

This example shows how to create 3-D bar charts with drill-down functionality for the Web. In addition to showing how to use the ODS HTML statement and the HTML options to create the drill-down, the example also illustrates other VBAR3D statement options.

For creating output with drill-down functionality for the Web, the example shows how to do the following tasks:

explicitly name the HTML files and open and close them throughout the program
specify names and destination for the GIF files created by the ODS HTML statement and the GIF device driver
assign anchor names to the graphics output
use the HTML= and HTML_LEGEND= procedure options to assign link targets
use BY-group processing to store multiple graphs in one file or in individual files
increment the anchor names and increment the file names

For more information, see ODS HTML Statement in SAS/GRAPH Statements.

For creating 3-D bar charts, the example shows how to do the following tasks:

group the midpoints, including patterning bars by group, modifying the group axis, adjusting the space between groups of bars
identify midpoint values with a legend instead of labeling each bar
subgroup bars
remove an axis and its axis plane
add reference lines

The introduction to each part lists the VBAR3D options that it features.

Procedure Features:

VBAR3D statement

ODS HTML options:

	ANCHOR=
	BODY=
	CONTENTS=
	FRAME=
	NEWFILE
	NOGTITLE
	PATH=

Other Features:

	AXIS statement
	BY statement
	FORMAT statement
	GOPTIONS statement option: BORDER
	LEGEND statement
	RUN-group processing
	TITLE statement
	WHERE statement

Sample library member:

GCHDDOWN

The program generates twelve linked bar charts that display data about the world's leading grain producers. The data contain the amount of grain produced by five countries in 1995 and 1996. Each of these countries is one of the three leading producers of wheat, rice, or corn, worldwide.

The first chart, shown in Browser View of Overview Graph as it appears in a browser, is an overview of the data that shows the total grain production for the five countries for both years.

Browser View of Overview Graph

[GCHDDOWNa-Browser View of Overview Graph]

The next two charts break down grain production by year. These charts are linked to the legend values in Browser View of Overview Graph. For example, when you select the legend value for 1995, the graph in Browser View of Year Breakdown for 1995 appears.

Browser View of Year Breakdown for 1995

[GCHDDOWNb-Browser View of Year Breakdown for 1995]

Another group of charts breaks down the data by country. These charts are linked to the bars. For example, when you drill down on the bar for China in either Browser View of Overview Graph or Browser View of Year Breakdown for 1995, the graph in Browser View of Breakdown for China appears.

Browser View of Breakdown for China

[GCHDDOWNc-Browser View of Breakdown for China]

Finally the data is charted by grain type. These graphs are linked to the bars in Browser View of Breakdown for China. If you select the legend value or bar for Rice , Browser View of Breakdown for Rice appears.

Browser View of Breakdown for Rice

[GCHDDOWNd-Browser View of Breakdown for Rice]

This program is divided into four parts:

Example Part A generates the graph shown in Browser View of Overview Graph.
Example Part B generates the pair of graphs represented by Browser View of Year Breakdown for 1995.
Example Part C generates the five graphs represented by Browser View of Breakdown for China.
Example Part D generates the three graphs represented by Browser View of Breakdown for Rice.

Example Part A

VBAR3D options:

	DES=
	DISCRETE
	GROUP=
	GSPACE=
	HTML=
	HTML_LEGEND=
	NAME=
	SUBGROUP=

ODS HTML options:

	BODY=
	CONTENTS=
	FRAME=
	GPATH=
	NOGTITLE

The first part of the program, which includes setting the graphics environment and creating the data set, does the following:

Adds three HTML variables to the data set. The variables contain the link targets for all of the graphs that support drill-down functionality. The HREF values for the HTML variables in the data set contain this information about the link targets:
- the name of the body file that is the target. BODY= in the ODS HTML statement names the body file.
- the anchor name of the output if the target file contains more than one graph. By default, all output is assigned a unique anchor name unless you specify a name with ANCHOR= in the ODS HTML statement.
Opens the HTML destination for the frame and contents files and the first body file.
Creates one grouped 3-D vertical bar chart (shown in Browser View of Overview Graph) with drill-down on the bars and legend values. The bars, which represent total production for each year for each country, are grouped and labeled by COUNTRY. Instead of displaying the year below each bar, the program suppresses the midpoint values with an AXIS statement and creates a legend that associates bar color and year. To create the legend, the chart variable YEAR is assigned to the SUBGROUP= option. Because the chart variable and the subgroup variable are the same, each bar contains only one "subgroup." As a result, the subgroup legend has an entry for each value of YEAR, thereby creating a legend for the midpoints. The values of COUNTRY label each group of bars.
Assigns the HTML variables that contain link information for the bars and for the legend values to the HTML= and HTML_LEGEND= options, respectively.

filename odsout "c:\";

goptions reset=all border;

data grainldr;
length country $ 3 type $ 5;
input year country $ type $ amount;
megtons=amount/1000;

datalines;
1995 BRZ Wheat 1516
1995 BRZ Rice 11236
1995 BRZ Corn 36276
1995 CHN Wheat 102207
1995 CHN Rice 185226
1995 CHN Corn 112331
1995 IND Wheat 63007
1995 IND Rice 122372
1995 IND Corn 9800
1995 INS Wheat .
1995 INS Rice 49860
1995 INS Corn 8223
1995 USA Wheat 59494
1995 USA Rice 7888
1995 USA Corn 187300
1996 BRZ Wheat 3302
1996 BRZ Rice 10035
1996 BRZ Corn 31975
1996 CHN Wheat 109000
1996 CHN Rice 190100
1996 CHN Corn 119350
1996 IND Wheat 62620
1996 IND Rice 120012
1996 IND Corn 8660
1996 INS Wheat .
1996 INS Rice 51165
1996 INS Corn 8925
1996 USA Wheat 62099
1996 USA Rice 7771
1996 USA Corn 236064
;

data newgrain;
set grainldr;
length yeardrill typedrill countrydrill $ 40;
if year=1995 then
yeardrill="HREF='year95_body.html'";
else if year=1996 then
yeardrill="HREF='year96_body.html'";

     if country="BRZ" then
countrydrill="HREF='country_body.html#country'";
else if country="CHN" then
countrydrill="HREF='country_body.html#country1'";
else if country="IND" then
countrydrill="HREF='country_body.html#country2'";
else if country="INS" then
countrydrill="HREF='country_body.html#country3'";
else if country="USA" then
countrydrill="HREF='country_body.html#country4'";

if type="Corn" then
typedrill="HREF='type1_body.html'";
else if type="Rice" then
typedrill="HREF='type2_body.html'";
else if type="Wheat" then
typedrill="HREF='type3_body.html'";
run;

 proc format;
      value $country "BRZ" = "Brazil"
                     "CHN" = "China"
                     "IND" = "India"
                     "INS" = "Indonesia"
                     "USA" = "United States";
 run;

 legend1 label=none
         shape=bar(4,4)
         position=(bottom center)
         offset=(-3);

 goptions device=gif;

ods html body="grain_body.html"
frame="grain_frame.html"
contents="grain_contents.html"
path=odsout
nogtitle;

axis1 label=none value=none;

axis2 label=(angle=90 "Metric Tons (millions)")
minor=(n=1)
order=(0 to 500 by 100)
offset=(0,0);

axis3 label=none
order=("China" "United States" "India"
"Indonesia" "Brazil")
split=" ";

title1 "Corn, Rice, and Wheat Production";
title2 "Leading Producers for 1995 and 1996";
footnote1 j=l "click on bars or legend values" j=r "GRAINALL ";

proc gchart data=newgrain;
format country $country.;
vbar3d year / discrete
sumvar=megtons
group=country
subgroup=year
legend=legend1
space=0
width=4
gspace=3
maxis=axis1
raxis=axis2
gaxis=axis3

html=countrydrill
html_legend=yeardrill
name="grainall"
des="Overview of leading grain producers";
run;
quit;

Example Part B

VBAR3D options:

	AUTOREF
	HTML=
	HTML_LEGEND=
	SUBGROUP=
	SPACE=
	NAME=

ODS HTML options:

BODY=

In the second part, the PROC GCHART step continues, using RUN-group processing and WHERE statements to produce two graphs of grain production for each year, one of which is shown in Browser View of Year Breakdown for 1995. Each bar represents a country and is subgrouped by grain type. As before, both the bars and the legend values are links to other graphs. The bars link to targets stored in COUNTRYDRILL and the legend values link to targets in TYPEDRILL. These two graphs not only contain links, they are the link targets for the legend values in Browser View of Overview Graph. Before each graph is generated, the ODS HTML statement opens a new body file in which to store the output. Because each of these graphs is stored in a separate file, the HREF attributes that are stored in the variable YEARDRILL point only to the file. The name of the file is specified by the BODY= option in the ODS HTML statement. This example shows the HREF attribute that points to the graph of 1995 and is stored in the variable YEARDRILL:

HREF=year95_body.html

YEARDRILL is assigned to the HTML_LEGEND= option in Part A.

ods html body="year95_body.html" path=odsout;

title1 "Total Production for 1995";
footnote1 j=l "click on bars or legend values" j=r "YEAR95";

proc gchart data=newgrain;
  format country $country.;
  where year=1995;
  vbar3d country / sumvar=megtons
  subgroup=type
  autoref
  html=countrydrill
  html_legend=typedrill
  legend=legend1
  space=3
  coutline=black
  maxis=axis3
  raxis=axis2
  name="year95"
  des="Production Breakdown for 1995";
run;
quit;

ods html body="year96_body.html" path=odsout;

title1 "Total Production for 1996";
footnote1 j=l "click on bars or legend values" j=r "YEAR96 ";

proc gchart data=newgrain;
format country $country.;
where year=1996;
vbar3d country / sumvar=megtons
subgroup=type
autoref
html=countrydrill
html_legend=typedrill
legend=legend1
space=3
coutline=black
maxis=axis3
raxis=axis2
name="year96"
des="Production Breakdown for 1996";
run;
quit;

proc sort data=newgrain out=country;
by country;
run;

Example Part C

VBAR3D options:

	DES=
	GAXIS=
	GROUP=
	HTML=
	NAME=
	OUTSIDE=
	PATTERNID=
	RAXIS=
	SHAPE=

ODS HTML options:

	BODY=
	ANCHOR=

The third part produces the five graphs that show the breakdowns by country. These graphs are generated with BY-group processing and are all stored in one body file. When the file is displayed in the browser, all the graphs appear in one frame that can be scrolled. Because the graphs are stored in one file, the links to them must explicitly point to the location of each graph in the file, not just to the file. This location is defined by an anchor. ODS HTML assigns anchor names by default, but you can specify anchor names with the ANCHOR= option. When the procedure uses BY-group processing to generate multiple pieces of output, ODS automatically increments the anchor name to produce a unique name for each graph. This example assigns the base name {mono country} to the ANCHOR= variable value. The graphs created by this part are referenced by the COUNTRYDRILL variable. With BY-group processing the catalog entry name also increments automatically. The NAME= option specifies COUNTRY as the base name for the graphics output. Because you cannot specify a different description for each graph, the DES= option specifies a generic description for the HTML Table of Contents.

proc sort data=newgrain out=country;
by country;
run;

ods html body="country_body.html"
anchor="country"
gfootnote 
path=odsout
;

axis2 order=(0 to 250 by 50)
label=none
value=none
style=0
major=none
minor=none
noplane;

axis4 label=none;

options nobyline;
title1 "Breakdown for #byval(country)";
footnote1 j=l "click on bars";
footnote2 j=c "(Millions of Metric Tons)";

proc gchart data=country;
format country $country.;
by country;
vbar3d year / discrete
sumvar=megtons
patternid=group
group=type
shape=hexagon
outside=sum
html=typedrill
width=9
gspace=3
space=0
raxis=axis2
gaxis=axis4
maxis=axis4
name="country"
des="Grain and Year Breakdown";
run;
quit;

proc sort data=grainldr out=type;
by type;
run;

Example Part D

VBAR3D options:

	INSIDE=
	NOZERO

ODS HTML options:

	BODY=
	NEWFILE=TABLE

Like Part C, this part uses BY-group processing to generate three graphs that show the three leading producers for each type of grain. The program subsets the data and suppresses midpoints with no observations. Instead of storing all of the output in one body file, it stores each graph in a separate file using the ODS HTML option NEWFILE=TABLE. When NEWFILE=TABLE is used with BY-group processing, each new piece of output automatically generates a new body file and simply increments the name of the file that is specified by the BODY= option. Because each graph is stored in a separate file, the links to these graphs reference only the file name and do not require an anchor name. The graphs created by this part are referenced by the TYPEDRILL variable.

proc sort data=grainldr out=type;
by type;
run;

ods html body="type1_body.html"
newfile=table
path=odsout;

axis5 label=none
    split=" ";

title1 "Top Three Producers of #byval(type)";
title2 "(In Millions of Metric Tons)";
footnote j=r "TYPE ";

proc gchart data=type (where=(megtons gt 31));
format country $country.;
by type;
vbar3d year / discrete
sumvar=megtons
group=country
nozero
shape=cylinder
noframe
patternid=group
inside=sum
width=8
maxis=axis4
raxis=axis2
gaxis=axis5
name="type"
des="Leading Producers";
run;
quit;

ods html close;
ods listing;

Top of Page