Creating an HTML5 Chart

How to:

To generate an HTML5 chart, include the following command In your GRAPH FILE request:

ON GRAPH PCHOLD FORMAT JSCHART

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

WebFOCUS styling commands and libraries of JSON objects and legacy graph API calls are available to customize the final output to make it conform to your needs and standards.

If you do not specify JSON properties, default properties will be used. If you do not specify a WebFOCUS StyleSheet to be used, default styles will be used.


Top of page

Example: Creating an HTML5 Vertical Bar Graph

The following request against the GGSALES data source creates an HTML5 vertical bar chart. As it includes no StyleSheet or JSON properties, default properties are used:

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

The output is:


Top of page

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

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

ON GRAPH SET AUTOFIT {OFF|ON|RESIZE}

where:

OFF

Respects the dimensions specified by the HAXIS and VAXIS parameters.

ON

Always resizes the HTML5 chart output to fit its container.

RESIZE

Respects the dimensions specified by the HAXIS and VAXIS parameters initially, but resizes the chart output if the container is resized.



Example: Using SET AUTOFIT

The following request created a vertical bar chart. the AUTOFIT parameter is set to OFF:

SET AUTOFIT = OFF
GRAPH FILE GGSALES
SUM DOLLARS BUDDOLLARS
ACROSS REGION 
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
END

The size of the chart is controlled by the default settings for the HAXIS and VAXIS parameters:

If you change the AUTOFIT parameter value to ON, the chart is drawn using the entire page, ignoring the HAXIS and VAXIS values:

If the size of the page is reduced, part of the chart does not display unless you use the scrollbar, as the chart did not resize:

Changing the AUTOFIT setting to resize, initially renders the chart as with the OFF setting, but resizes it if the container is reduced or enlarged. In the following illustration, the page size was reduced, and the chart was reduced to fit the smaller size:


WebFOCUS