HTML Variable

Defines a link in the HTML file that is created for a drill-down graph. This link is associated with an area of the graph and contains valid HTML syntax that can link to a report or another graph. The report or graph is displayed when the user clicks on the area.

Type:	character
Length:	no limit
Default:	none
Tip:	When used with an SVG graphics device, the variable can create particular drill-down events. When used with the LABEL function and an SVG graphics device, this variable can be used to animate the label text.

Table of Contents

Syntax

HTML='link-string';

HTML="ANIMATE=animate-action(parameters)";

HTML=enhanced-link-options;

Variable Values

link-string

specifies the text that defines the drill-down link. For more information about drill-down graphs and how to specify the link string, see Adding Links and Enhancements with the URL=, HTML=, and HTML_LEGEND= Options. For using the HTML variable for data tips, see Adding Custom Data Tips with the HTML= Option.

"ANIMATE=animate-action(parameters)"

specifies an animation action and animation control parameters that are required to animate a label. Use this option with the LABEL function and an SVG to animate label text. Animate-action specifies an animation action while parameters specifies the parameters that control the animation.

Note: "ANIMATE=animate-action(parameters)" must be enclosed in double quotation marks. If you use single quotation marks, an error is generated.

When you animate the label text, the output is saved as an SVG graphic.

animate-action can be one of the following:

BLINK('text-string', begin, speed, REPEAT | repeat-value)

causes the text in the label observation to blink at a specified rate. Provide all of the following parameters in the order listed here.

'text-string'

specifies the value of the label to blink. This parameter must exactly match the text variable in the corresponding label observation in the annotate data set. In addition, 'text-string' must be enclosed in single quotation marks. If you use double quotation marks, an error is generated.

begin

specifies after how many seconds to begin the blinking action after the SVG page has been loaded.

speed

specifies the blinking speed in seconds.

REPEAT | repeat-value

repeats the blink action.

REPEAT

repeats indefinitely.

repeat-value

repeats repeat-value times.

Examples	This example causes the text label ‘blinking text’ to blink when the page is loaded into the browser. The text blinks at a speed of one second, and repeats indefinitely. `HTML="animate=blink('blinking text', 0, 1, repeat)"`
Examples	This example causes the text label ‘text blinking for 10 times’ to blink when the page is loaded into the browser. The text blinks 10 times at a speed of 2 seconds, and then stops blinking. `HTML="animate=blink('text blinking for 10 times', 0, 2, 10)"`

SIZE('text-string', begin, duration, REPEAT | repeat-value)

causes the text in the label observation to increase or decrease in size by modifying the font size of the text over a time interval. Provide all of the following parameters in the order listed here.

'text-string'

specifies the value of the label to resize. This parameter must exactly match the text variable in the label observation in the annotate data set. In addition, 'text-string' must be enclosed in single quotation marks. If you use double quotation marks, an error is generated.

font-size

specifies the new font size in . The text changes to this size during the specified duration.

begin

specifies after how many seconds to begin the sizing action after the SVG page has been loaded.

duration

specifies the duration in seconds during which the text sizing should occur.

REPEAT | repeat-value

repeats the size action.

REPEAT

repeats indefinitely.

repeat-value

repeats repeat-value times.

Examples	This example causes the text label ‘growing text’ to increase to an 80-pixel font size. The increase occurs three seconds after the page is loaded into the browser over a duration of five seconds. The action repeats indefinitely. `HTML="animate=size('growing text', 80, 3, 5, repeat)"`
Examples	This example causes the text label ‘growing text’ to decrease to 0 pixel font size. The increase occurs five seconds after the page is loaded into the browser over a duration of three seconds, and then the animation stops. `HTML="animate=size('shrinking text', 0, 5, 3, norepeat)"`

MOVE('text-string', toX, toY, begin, duration, REPEAT | repeat-value)

moves the text in the label observation to a specified coordinate in the SVG output within a specified time interval. Provide all of the following parameters in the order listed here.

'text-string'

specifies the value of the label to move. This parameter must exactly match the text variable in the label observation in the annotate data set. In addition, 'text-string' must be enclosed in single quotation marks. If you use double quotation marks, an error is generated.

toX

specifies the X coordinate that the text moves to in percentage units of the display or the SVG space. You can specify either a relative or absolute value.

Note: The toX and toY coordinates can be specified in either a relative or absolute value from the original X and Y coordinates of the annotated text string. To indicate a relative move, add + or – prior to the coordinate. The symbol causes the text to move the specified amount in a positive or negative direction relative from the original text coordinate. To move the text to an absolute position, specify the percentage-based coordinates without the + or –.

toY

specifies the Y coordinate that the text moves to in percentage units of the display or the SVG space. You can specify either a relative or absolute value. (See the note for toX.)

begin

specifies after how many seconds to begin the move action after the SVG page has been loaded.

duration

specifies the duration in seconds during which the text move should occur.

REPEAT | repeat-value

repeats the move action.

REPEAT

repeats indefinitely.

repeat-value

repeats repeat-value times.

Examples

Examples	This example moves the text label ‘moving text’ to the bottom right corner of the screen when the page is loaded into the browser. The text moves over a duration of four seconds, and repeats indefinitely. `HTML="animate=move('moving text', 100, 0, 0, 4, repeat)"`
This example moves the text label across the bottom of the screen when the page is loaded into the browser. The text moves over a duration of five seconds, and repeats indefinitely. The X value of 100 is interpreted as an absolute value and moves the text 100% across the display. The Y value of +0 is relative to the original Y coordinate. The 0 value has the effect of not moving the text vertically. `HTML="animate= move('ALERT: SVG can create a moving news ticker!', 100, +0, 0, 5, repeat)"`

This example moves the text label ‘moving text’ to the bottom right corner of the screen when the page is loaded into the browser. The text moves over a duration of four seconds, and repeats indefinitely.

HTML="animate=move('moving text', 100, 0, 0, 4, repeat)"

This example moves the text label across the bottom of the screen when the page is loaded into the browser. The text moves over a duration of five seconds, and repeats indefinitely. The X value of 100 is interpreted as an absolute value and moves the text 100% across the display. The Y value of +0 is relative to the original Y coordinate. The 0 value has the effect of not moving the text vertically.

HTML="animate=
   move('ALERT: SVG can create a moving news ticker!',
      100, +0, 0, 5, repeat)"

TEXTPATH('text-string', from-offset, to-offset, begin, duration, REPEAT | repeat-value)

causes the text in the label observation to move along a path at a specified speed. The path that the text follows must also be defined in the annotate data set. Provide all of the following parameters in the order listed here.

’text-string’

from-offset

specifies the starting position of the text string relative to the path. This value is expressed as a percentage of the path.

to-offset

specifies the ending position of the text string relative to the path. This value is expressed as a percentage of the path.

begin

specifies after how many seconds to begin the move action after the SVG page has been loaded.

duration

specifies the duration in seconds during which the move should occur.

REPEAT | repeat-value

repeats the move action.

REPEAT

repeats indefinitely.

repeat-value

repeats repeat-value times.

Restriction	There can be only one TEXTPATH action per SVG file.
Requirement	The line that the text follows must be added to the annotate data set using the MOVE and DRAW functions. The line annotation must immediately follow the label observation in the data set.
Example	This example causes the text label ‘moving text on a path’ to move from the 0% to 100% offset of the path. The animation occurs when the page is loaded into the browser. The text moves across the annotated line over a duration of five seconds, and repeats indefinitely. `HTML="animate=textpath('moving text on a path', 0, 100, 0, 5, repeat)"`
Example	Moving Text on a Path

Restriction	Available only when used with the LABEL function and an SVG graphics device.
See	Using SVG Graphics

enhanced-link-options

When you generate output as an SVG graphic, you have additional options for enhancing your drill-down links. The SVG graphics devices provide the following enhanced-link-options.

ONMOUSEOVER=events

specifies particular events that occur when the mouse pointer is positioned over a linked shape.

ONCLICK=events

specifies particular events that occur when a linked shape is clicked.

For the complete syntax with examples, see Enhancing Drill-Down Behavior in SVG Presentations Using HTML Attributes.

See	Using SVG Graphics

Details

Setting the Length of the HTML Variable

Use a LENGTH statement to set the length of the HTML variable to the longest string that you need for the link string. Be sure to set the HTML value to a null if you continue writing observations to the annotate data set after you are done assigning links. For example, the following code defines link information for two squares, but then sets the HTML variable to null when drawing a frame. Otherwise, the background area within the frame uses the link information from the last defined HTML value and become a hot zone in the graph.

data squares;
     length function style color $ 8
            html text $ 15;
     xsys="3"; ysys="3";
        /* draw a green square */
     color="green";
     function="move"; x=10; y=65; output;
     function="bar";  x=30; y=95; style="solid";
        html="href=green.gif"; output;
        /* draw a red square */
     color="red";
     function="'move"; x=60; y=65; output;
     function="bar";  x=80; y=95;
        html="href=red.gif"; output;
        /* draw a blue frame */
     function="frame"; color="blue"; style="empty";
        /* set null link for background area in frame */
        html=""; output;
run;

data squares;
     length function style color $ 8
            html text $ 15;
     xsys="3"; ysys="3";
        /* draw a green square */
     color="green";
     function="move"; x=10; y=65; output;
     function="bar";  x=30; y=95; style="solid";
        html="href=green.gif"; output;
        /* draw a red square */
     color="red";
     function="'move"; x=60; y=65; output;
     function="bar";  x=80; y=95;
        html="href=red.gif"; output;
        /* draw a blue frame */
     function="frame"; color="blue"; style="empty";
        /* set null link for background area in frame */
        html=""; output;
run;

Functions

You can use the HTML variable with these functions:

ARROW
BAR
FRAME
IMAGE
LABEL
PIE
POLY
SYMBOL

Last updated: January 17, 2025