Creating an HTML5 Chart

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

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.

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

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.

Note:

With AUTOFIT enabled, the output from one GRAPH FILE request is sized to fit the entire draw area. Therefore, if you have a procedure that includes multiple GRAPH FILE requests, set the AUTOFIT parameter to OFF.
AUTOFIT ON is ignored for a multi-graph request. For more information about multi-graph requests, see Creating Multiple Graphs.

Top of page

Example: Using SET AUTOFIT

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

SET AUTOFIT = OFF
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US
BY PRODUCT_CATEGORY
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.

It then resizes if you resize the container.

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.