Ira Kaplan

MD User Forum

November 2, 2012

WebFOCUS 8 Charting

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

Chapter 7: Creating and Customizing Charts(113 of 366 pages)

Properties and Methods for customizing charts

(1382 pages) HTML5 Charts(160 pages)

User

Developer

Developer

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

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 highlightMouse over:

yellow highlight

Where Does the Magic Happen?

In the included style sheet:ON GRAPH SET STYLE *INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENria_dark_ocean_rounded_theme.sty,$

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

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 stepNext step

Active Reports: Pie and Line Charts

Catalogue is Theme awareCatalogue is Theme aware

Moonbeam, HTML5, and JSCHART

New Style Section: *GRAPH_JS

JSON: JavaScript Object NotationJSON: JavaScript Object Notation

riserBevel: ‘cylinder’,

Demonstration

Demonstrate in Portal

Summit 2012 WebFOCUS 8 Charting LabIK -- IA Gradient Exercise Step 2 v01 (IA: gradient and transparency, HTML5 resize)Car -- Chart with Theme and PNG format v01 (Run: flat appearance)Car -- Chart with Theme and HTML5 format v01 (Run: raised appearance)summit_2012_simple_html5_hand_fex_example (Run/Edit: highlight, bevel, animation)

Summit 2012booth_3d (Run: rotate)booth_gauge1 (Run/Edit: show code – browser zoom)booth_line1 (Run/Edit: change marker size, animation speed)ia_pie (Run: resize)summit_2012_small_multiple_usa_map (Run: edit)summit_2012_small_multiple_usa_tagcloud (Run: edit)summit_2012_small_width_bar__edited (Run: edit, GRWIDTH)

Which bullet chart, matrix, add heatmap?