Creating an HTML5 Chart

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

FOCUS 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 FOCUS StyleSheet to be used, default styles will be used.

The following request against the WFLITE 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.

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 WFLITE
SUM REVENUE_US GROSS_PROFIT_US
BY PRODUCT_CATEGORY
ON GRAPH HOLD 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.