WebFOCUS 8 Charting

Pittsburgh User Forum Ira Kaplan October 18, 2012

Documentation Chapter 7: Creating and Customizing Charts (113 of 366 pages) Properties and Methods for customizing charts (1382 pages) HTML5 Charts (160 pages)

Documentation: Audience

User Developer Developer

Chapter 7: Creating and Customizing Charts (113 of 366 pages) Properties and Methods for customizing charts (1382 pages) HTML5 Charts (160 pages)

http://ecl.informationbuilders.com/wf/index.jsp

WebFOCUS Graphics

InfoAssist

WebFOCUS 8 Chart Customization Manual to be released

WebFOCUS 8 InfoAssist

Gradients and Transparency

Gradients and Transparency

Right click on red bar, context menu opens

Gradient and Transparency: Red and Blue Risers

Themes

Select Theme: ENria Dark Ocean Rounded

Select Output Type: HTML5

Results

Mouse over: yellow highlight

Where Does the Magic Happen?

In the included style sheet:

ON GRAPH SET STYLE * INCLUDE= ENDSTYLE

IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENria_dark_ocean_rounded_theme.sty,$

TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $

C:\ibi\WebFOCUS80\ibi_html\javaassist\intl\EN\combine_templates\ ENria_dark_ocean_rounded_theme.sty

*GRAPH_JS "mouseOverIndicator": { "enabled": true, "color": "yellow", "marker":{"size": 0} }, "introAnimation": { "enabled": true, "duration": 1400 }, "riserBevel":"bevel" *END

Resizable

Active Reports

Output Type: Active Report

Next step

Active Reports: Pie and Line Charts

Catalogue is Theme aware

Moonbeam, HTML5, and JSCHART

New Style Section: *GRAPH_JS

JSON: JavaScript Object Notation

riserBevel: ‘cylinder’,

Demonstration

Demonstrate in Portal

Summit 2012 WebFOCUS 8 Charting Lab

IK -- IA Gradient Exercise Step 2 v01 Car -- Chart with Theme and PNG format v01 Car -- Chart with Theme and HTML5 format v01 summit_2012_simple_html5_hand_fex_example

Summit 2012

booth_3d booth_gauge1 booth_line1 ia_pie summit_2012_small_multiple_usa_map summit_2012_small_multiple_usa_tagcloud summit_2012_small_width_bar__edited Which bullet chart, matrix, add heatmap?

(IA: gradient and transparency, HTML5 resize) (Run: flat appearance) (Run: raised appearance) (Run/Edit: highlight, bevel, animation) (Run: rotate) (Run/Edit: show code – browser zoom) (Run/Edit: change marker size, animation speed) (Run: resize) (Run: edit) (Run: edit) (Run: edit, GRWIDTH)