DataMigrator/Reporting Server > Server Release Notes Release 7708 > HTML5 Charts: Displaying Multiple HTML5 Charts in One -HTMLFORM

HTML5 Charts: Displaying Multiple HTML5 Charts in One -HTMLFORM

In order for HTML5 graphs (HOLD FORMAT JSCHART) to be included in -HTMLFORMs in a way that results in a valid HTML document, there must be a way to generate the output of an HTML5 graph so that it does not contain document-level HTML tags (such as, <html>, <head>, <body>). For the older, Java-based graph formats, this was accomplished by using HOLD FORMAT HTMTABLE instead of HOLD FORMAT HTML.

Starting with WebFOCUS Reporting Server Release 8204, anew SET command has been introduced that generates this type of output for HTML5 graphs. 

SET EMBEDDABLE = {OFF|ON}

where:

OFF

Generates complete HTML report output with document-level HTML tags. This is the default value.

ON

Generates report output in HTML format without document-level tags. This setting should be used when creating HTML5 graph output to be used with -HTMLFORM.

Note: SET EMBEDDABLE=ON also affects HTML report output and Java-based graph formats. For those formats, it is the equivalent of using HOLD FORMAT HTMTABLE.

Embeddable HTML5 graph output does not contain the <script> tags necessary to load the JavaScript code for the chart engine (since it should only be loaded once in an HTML document). You must do this in the HTML you provide with the -HTMLFORM. The simplest solution is to include the IBI.OBJ.IBIHEADJS token, which automatically expands into the code necessary to load all the JavaScript libraries required for its interactive report and graph features (including the chart engine). For example: 

SET EMBEDDABLE=ON

GRAPH FILE GGSALES
SUM UNITS BY CATEGORY
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH HOLD FORMAT JSCHART AS GRAPH1
ON GRAPH SET STYLE *
type=data, column=n1, bucket=x-axis, $
type=data, column=n2, bucket=y-axis, $
END

GRAPH FILE GGSALES
SUM UNITS BY REGION
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH HOLD FORMAT JSCHART AS GRAPH2
ON GRAPH SET STYLE *
type=data, column=n1, bucket=x-axis, $
type=data, column=n2, bucket=y-axis, $
END

-HTMLFORM BEGIN
<html>
<head>
<title>Two HTML5 graphs in an HTMLFORM</title>
!IBI.OBJ.IBIHEADJS;
</head>
<body>
!IBI.FIL.GRAPH1;
<br>
!IBI.FIL.GRAPH2;
</body>
</html>
-HTMLFORM END

The output is shown in the following image.

In prior releases, customers may have attempted to place output from HOLD FORMAT JSCHART into HTMLFORMs, but this would have resulted in invalid HTML documents (multiple document-level tags and repeated initialization of the JavaScript chart code). While this technique may have appeared to produce correct results in the past, it is not possible to rely on it going forward, and the method described in this release note should be used instead.

WebFOCUS

Feedback