Learn about JET charts in APEX - Oracle JET charts replace the legacy Anychart charts used in previous APEX versions.  JET charts mean simple SQL queries - no special query syntax for each chart type - and many declarative options for the most commonly used charts.  APEX users now have a wider set of charts, improvements of JET charts  Customizations are done in JavaScript.  Dara Viz is in - JET charts make it easier to incorporate graphs and charts and other visualizations in your APEX applications.

1. TH Technology
Oracle JET
Charts in
APEX:
Data Viz Now!
Karen Cannell
kcannell@thtechnology.com
TH Technology
@thtechnology

2. TH Technology
About Me …
• TH Technology – Oracle Consulting Services, APEX Focus
• Mechanical/SW Engineer - Analyzed, designed,
developed, converted, upgraded, enhanced legacy &
database applications for 30+ years
• Building Web/APEX applications for government, medical,
engineering industries since HTMLDB beginnings
• Leveraging Oracle, Oracle tools 25+ years
• ODTUG Director, Editor Emeritus, Technical Journal
• Oracle Ace
• APress Author

3. TH Technology

4. TH Technology
Facebook group:
https://www.facebook.com/groups/womeninapex/
https://www.womeninapex.com/

5. TH Technology
About You …
• Oracle Technology ?
• APEX Users ?
• AnyCharts?
• Why Are You Here?

6. TH Technology
Goals (Challenge)
• Understand JET Charts
Advantage
• Comfortable Using Them
• Actually Use Them

7. TH Technology
JET Charts in APEX 5/18+
• Oracle JET (vs Anychart)
• Any SQL Query (No Special Formats)
• Javascript (vs XML) Customizations

8. TH Technology
Agenda
• Visualization in APEX via JET Charts
• How to Build
• No Special Query
• When ~Where to Use
• Wrap-up
• Questions ~ Discussion

9. TH Technology
Visualization in APEX
• Interactive Reports – A Few Charts
• Interactive Grid – APEX 5.1 + - More Charts
• Oracle JET Charts – APEX 5.1 + - More Charts
APEX 19.1 – More Charts, Enhance
• Declarative - Point and Click - Charts
• Declarative - Point and Click – Chart Features
• JS Customizations - Optional

10. TH Technology
• Know Your Data
• Know Your Users
• Know What Your Users Do
With The Data

11. TH Technology
Data Tells A Story …

12. TH Technology
Data Tells A Story …

13. TH Technology
Data Tells A Story …

14. TH Technology
Data Tells A Story …

15. TH Technology
Data Tells A Story …

16. TH Technology
Data Tells a Story …
• <chart w series>
• <3d chart?>

17. TH Technology
Data Tells A Story ...

18. TH Technology
Notes:
• Custom Bar Colors
• JS Chart Changes
• Legend Plugin

19. TH Technology
Oracle JET
Charts in
APEX:
to BuildWhat ?

20. TH Technology
Oracle JET

21. TH Technology
Oracle JET
• JavaScript Toolkit
• Client-Side Apps
• Open Source + Oracle JS Libraries
• Components
https://www.oracle.com/webfolder/technetwork/jet/index.html

22. TH Technology
Oracle JET Charts

23. TH Technology
APEX JET Charts
• SUBSET of JET Charts in APEX as Declarative
Charts
• Extensive Set of Declarative Parameters
• Customize via Custom (non-Declarative) JavaScript
• Developer-Driven – No End User Interaction
• Regular SQL Query
• Future: JET Chart APEX Plugins

24. TH Technology
APEX JET Charts
• Most Used Subset
• No Special Query
• Table
• SQL
• Web Service
• Declarative Parameters – Lots
• JS Customizations - Optional

25. TH Technology
Examples
• Simple
• Middle
• JS Customized

26. TH Technology
Simple: Bar, Pie, Line

27. TH Technology
Combination
• Combo – landings and value
• 2nd Z axis

28. TH Technology
Bubble, Box

29. TH Technology
Oracle JET
Charts in
APEX:
to BuildHow?

30. TH Technology
APEX JET Charts
• SQL Query – Table – Web Service
• Declarative Attributes
• Adjust Attributes As Needed

31. TH Technology
Chart Elements
• Source
• Series
• Attributes
• X, Y Axes
• 2nd Y Axis
• Time Axis
• Fill Gaps – Time Fill Gaps
• JS Customizations

32. TH Technology
Source
• Simplified vs AnyChart
• Table
• SQL Query
• PL/SQL Function Returning Query
• Remote Database*
• Web Service*

33. TH Technology
Series
• Source
• Column Mapping
• Link
• Appearance – Color, Y2
• Line – Marker – Label
• Performance == Max Rows

34. TH Technology
X, Y Axis
• Value
• Min – Max
• Format Type – Format Scaling
• Baseline Scaling – Scale - Step
• Major / Minor Ticks
• Straight / Logarithmic

35. TH Technology
Attributes
• Time Axis Type
• Attributes -> Settings
• Fill Gaps in Chart Data
• Attributes -> Multi-Series
• Zoom and Scroll
• Delayed / Live Scroll

36. TH Technology
Time Axis Type
• Skip Gaps
• Enabled – Gaps Stay

37. TH Technology
Fill Gaps “Densification”
• Multi-Series Chart Must be One
–to-One
• APEX 18.1:
• Fill Gaps in Chart Data
• Sort Order

38. TH Technology
No Densification Example

39. TH Technology
Densification Example

40. TH Technology
Zoom and Scroll
• liveScrollOnly – Disables Zoon
• Live – Zoom and Scroll
• delayed –
• delayedScrollOnly
• Zoom Delayed recommended

41. TH Technology
Best Practices
• Chart Type
• Consider Data Density
• Filter As Needed
• Animation … w Large Data Sets
• Disable Indicators
• Disable Altogether

42. TH Technology
General Chart Types
• Bar, Pie, Line
• X vs Y plots
• Series, Stacked or No
• Combination
• Range, Bubble
• X, Y and Z
• Magnitude, Height,
Range, High-Low
• Pyramid, Funnel
• Hierarchy
• Box
• Statistics, Quartiles
• Polar, Radial
• Y Radial
• Directional Data
• Dial Gauge
• Progress, % Complete/ Full/
Empty
• Gantt
• Elements Across Time
• Map
• Values Across Regions

43. TH Technology
Bar, Line
• X, Y optional Y2
• Stacked or No

44. TH Technology
Pie
• Portions of a Whole
• Percents of Total

45. TH Technology
Box
• Statistical Data
• High/Low
• Quartiles
• Outliers

46. TH Technology
Bubble
• Relations betw 3 Values
• X, Y and Z
• No Negative Z
• Ex:
• Employee, Employer Contrib vs Salary
• Landings, Value vs Price

47. TH Technology
Radar, Polar

48. TH Technology
Using Series Declarative Features

49. TH Technology
Using Chart Declarative Features

50. TH Technology
Using Axis Declarative Features

51. TH Technology
Links
• Link from Chart to …
• Page, report, data ,another chart …
• Any APEX Link

52. TH Technology
Customizations
• ojChart API
• Match JET Version
• Dynamic Actions
• Attributes → JavaScript Code
• Future – More JET Components

53. TH Technology
Customized Chart
• Dyn Actions
• Exec JavaScript
• Attributes → JavaScript Code

54. TH Technology
Plugins
• Roel’s Picto Chart
• Circiful Gauge
• JET Legend
• Others –
• apex.world

55. TH Technology
Dashboards
• Use Charts For Purpose
• Supplement not Overwhelm
• Balance, Taste

56. TH Technology
Which Tells the Story Better?

57. TH Technology
Learning Curve
• Chart Type Not a Good Fit

58. TH Technology
Learning Curve
Common Errors
• Group 5, 7, 9…
• Mismatch of X and Y – Must be 1:1
• Fix By
• Fill Gaps Setting
• Filter so X, Y Match

59. TH Technology
Learning Curve
• No Chart
• Check Selections
• View JS Error bottom left show pic
of – Read The Message RTM!
• Debug Chart

60. TH Technology
JET Charts in IR and IGrid
• Subset of Subset
• Supply Required Values
• Train End Users
• Ex: Grid Bubble,
• Ex: No Chart, JS Error

61. TH Technology
Interactive Grid Charts
• More Options
• No Declarative Way to Limit
Chart Options
• Train End Users!

62. TH Technology

63. TH Technology
Coming in 19.1
• Status Meter Gauge
• Replaces Dial Gauge
• Stack Grouping for Bar Charts
• Declarative Font Formatting
• Declarative Gantt Tooltip
https://apexea.oracle.com

64. TH Technology
Learn More!
• Study the Sample Charts App!
• Oracle JET Cookbook
• ojchart

65. TH Technology
Consider …
• Analytic Views ….
• Visual Home Page – Dashboard
Let Your Data Tell the Story
Let APEX JET Charts Help

66. TH Technology
Comments?
Questions?
Thank You
Evaluations Please!
Karen Cannell
kcannell@thtechnology.com

67. TH Technology
Resources
• Oracle JET
https://www.oracle.com/webfolder/technetwork/jet/index.html
https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html
• Oracle JET Charts
https://livesql.oracle.com/apex/livesql/file/tutorial_EDVE861IJ168OTUP6ZZ
01MX84.html
• JET OTN Forum
https://community.oracle.com/community/database/developer-tools/oracle-jet
• APEX Sample Charts Application
https://apex.oracle.com/charts
• oj-chart Element Reference
https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html

68. TH Technology
Resources
• Hilary Sample Charts App
https://apex.oracle.com/pls/otn/f?p=SAMPLE_CHARTS
• apex.world
https://docs.oracle.com/en/database/oracle/oracle-database/18/sqlrf/analytic-
view-measure-expressions.html#GUID-F8C7ED67-A4EC-479C-975F-
12F1F4B8CBA0
• OTN Forum
https://community.oracle.com/community/database/developer-
tools/application_express