Creating an HTML5 Graph

How to:

Create HTML5 Graph Output
Resize HTML5 Graph Output to Fit Its Container

WebFOCUS supports a graph output format that takes advantage of the HTML5 standard. The charts are rendered in the browser as high quality interactive vector graphics using a built-in JavaScript engine. Note that older browsers do not support all of the features of the HTML5 standard.

You can use the SET AUTOFIT command to make the HTML5 graph output resize to fit into the container in which it is placed.

Syntax: How to Create HTML5 Graph Output

In your graph request, include the following commands

ON GRAPH PCHOLD FORMAT JSCHART

If the ON GRAPH PCHOLD FORMAT JSCHART command is not issued, server-side graphics are generated.

Example: Creating an HTML5 Vertical Bar Graph

The following request against the GGSALES data source creates an HTML5 vertical bar graph:

GRAPH FILE GGSALES
SUM DOLLARS BUDDOLLARS
BY REGION
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
END

The output is:

Syntax: How to Resize HTML5 Graph Output to Fit Its Container

ON GRAPH SET AUTOFIT {OFF|ON|RESIZE}

where:

OFF: Respects the dimensions specified by the HAXIS and VAXIS parameters.
ON: Always resizes the HTML5 graph output to fit its container.
RESIZE: Respects the dimensions specified by the HAXIS and VAXIS parameters initially, but resizes the graph output if the container is resized.