Generating HTML5 Charts for Use in Formats PDF, Excel, PowerPoint, and PNG

HTML5 chart output is normally rendered in the browser, making it highly interactive. However, in prior releases, this type of output could not be generated in other formats, such as .png or .pdf. When customers wanted to generate chart output in a static format, they had to use the legacy graph API engine, which does not support the new features available with HTML5 charts, such as maps and other chart extensions.

The server-side graphics feature adds the capability of generating HTML5 chart output in formats PDF, PNG, DHTML, XLSX, and PPTX. While the interactive capabilities of HTML5 charts are not available with these static formats, maps and chart extensions are supported, The output file generated shows the chart exactly as you would see it in the browser if it were not rendered in another format by the Reporting Server. 

Usage Notes for Server-Side HTML5 Chart Output

• In this release, server-side graphics for HTML5 charts is supported only on Windows and on Linux running on Intel x86-64 CPUs.
• The HAXIS, VAXIS, and UNITS parameters that specify the dimensions of the chart output are supported. For information about these parameters, see the Creating Reports With WebFOCUS Language manual.
• Server-side HTML5 chart output is static. Even if a button appears (such as a zoom button), it will not be active, it will be an image.

• The server-side chart output is rendered using a default resolution of 192 PPI (Pixels-Per-Inch) to prevent anti-aliasing effects (for example, jagged edges). You can change the resolution used by issuing the SET GRAPH-PPI command. The syntax is: 
  
  SET GRAPH-PPI = n
  
  or, in a chart request:
  
  ON GRAPH SET GRAPH-PPI n
  
  where:
  
  n is an integer from 72 to 1200
  that specifies the output resolution in pixels-per-inch. The default value is 192. A higher number produces a larger output file.

•  HTML5 charts can be used as components of compound reports.

How to Enable Server-Side Chart Output

The server recognizes that it needs to generate HTML5 output, rather than legacy graph output, when the following setting is in effect:

SET GRAPHENGINE = JSCHART

By default, this setting is implemented when the chart request uses chart attribute syntax. For chart requests that do not use chart attribute syntax, you must issue this command manually in your request or in a supported profile. If you do not, the legacy graph API will be used to generate the output. For information about chart attribute syntax, see the Creating HTML5 Charts With WebFOCUS Language manual.

How to Generate HTML5 Chart Output in Other Formats

When you generate interactive HTML5 charts, you include the following command in your chart request.

ON GRAPH PCHOLD FORMAT JSCHART

To generate HTML5 chart output in other formats, you must include the following command in your chart request.

ON GRAPH PCHOLD FORMAT format

where:

format

Can be one of the following output formats.

• PDF
• PNG
• DHTML
• XLSX
• PPTX

For more information about these output formats see, the Creating Reports With WebFOCUS Language manual.

In addition, the SET GRAPHENGINE = JSCHART command must be in effect, either by default (if the request uses chart attribute syntax), or because the command is issued in the FOCEXEC or in a profile.

Example: Generating an Esri Map Chart as a PowerPoint File

The following chart request generates an Esri map and exports it as a PowerPoint file.

GRAPH FILE wf_retail_lite
SUM COGS_US
BY STATE_PROV_NAME
WHERE COUNTRY_NAME EQ 'United States' AND STATE_PROV_NAME NE 'Puerto Rico'
ON GRAPH PCHOLD FORMAT PPTX
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=color, $
*GRAPH_JS_FINAL
"extensions": {
  "com.esri.map": {
    "overlayLayers":
     [
      {
      "ibiDataLayer": {
         "map-metadata": {
           "map_by_field": "STATE_PROV_NAME"
                         }
                      }
     }
    ],
"baseMapInfo":
  {
    "customBaseMaps":
    [
     {
      "ibiBaseLayer": "gray"
      }
    ]
   }
                  }
             }
*END
ENDSTYLE
END

The output is shown in the following image.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Example: Changing the Resolution of HTML5 Chart Output in PDF Format

The following request generates a bubble chart in PDF format using the default resolution.

GRAPH FILE ibisamp/ggsales
SUM GGSALES.SALES01.BUDDOLLARS
GGSALES.SALES01.BUDUNITS
GGSALES.SALES01.UNITS
BY GGSALES.SALES01.PRODUCT
BY GGSALES.SALES01.REGION
ON GRAPH PCHOLD FORMAT PDF
ON GRAPH SET LOOKGRAPH BUBBLE
ON GRAPH SET AUTOFIT OFF
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, CHART-ORIENTATION=VERTICAL, CHART-SERIES-LAYOUT=side-by-side, ARGRAPHENGINE=JSCHART, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N1, BUCKET=color, $
TYPE=DATA, COLUMN=N4, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N5, BUCKET=size, $
TYPE=DATA, COLUMN=N2, BUCKET=detail, $
ENDSTYLE
END

The output is shown in the following image.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Adding the command ON GRAPH SET GRAPH-PPI 1200 generates cleaner-looking markers. To show the difference even more clearly, the following image shows two of the bubbles at the default resolution, when the chart is zoomed in:

 

 

 

 

 

 

 

 

The following image shows the same two bubbles zoomed in, when the ON GRAPH SET GRAPH-PPI 1200 is added to the request:

 

 

 

 

 

 

 

 

Example: Generating an HTML5 Chart Without Chart Attribute Syntax as an Excel Output File

The following request generates a radar chart as an Excel output file. As the request does not use chart attribute syntax, the command ON GRAPH SET GRAPHENGINE JSCHART has been added to the request.

GRAPH FILE WF_RETAIL_LITE
SUM AVE.COGS_US MDN.COGS_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT XLSX
ON GRAPH SET LOOKGRAPH RADARL
ON GRAPH SET GRAPHENGINE JSCHART
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$*GRAPH_JS
"legend": {"visible": true},
"polarProperties": {
"straightGridLines": false, "extrudeAxisLabels": false, "drawAsArea": false},
"yaxis": {"numberFormat": "##","majorGrid": {"lineStyle": {
"width": 1, "color": "navy", "dash": "2 2"}}},
"series": [
{"series": 0, "color": "purple", "border": {"width": 2}},
{"series": 1, "color": "cyan", "border": {"width": 2}},
{"series": 2, "color": "grey", "border": {"width": 2}},
{"series": 3, "color": "teal", "border": {"width": 2}}]
*END
ENDSTYLE
END

The output is shown in the following image.