In this session we will take a closer look on the options the new JET Charting engine brings to the APEX world. There are a quite a lot of declarative options to explore, but also the JavaScript API is worthwhile to investigate. You will learn that with just a few lines of JavaScript you can change the look and feel of a chart to your own needs. Outline: - What is Oracle JET. - Declarative JET integration in APEX. - Modify the JET charts using Dynamic Actions and a few snippets of JavaScript. - Use other JET components in APEX. - Building an APEX plugin for a JET component

1. A Deep Dive into APEX JET Charts

2. 2

5. What is Oracle JET

6. Copyright © 2017 APEX Consulting
APEX JET Charts
Demonstration

8. Copyright © 2017 APEX Consulting
Let’s start with a chart
Demonstration

9. Bring your charts to life
• Use Dynamic Actions to change JET options
$("#bar_jet").ojChart({stack: 'off'});
• Use localStorage to remember options
myStorage.setItem("stack", "off");
• Use JavaScript code to activate remembered options
function( options ){
options.stack = myStorage.getItem("stack");
return options;
}

10. Copyright © 2017 APEX Consulting
But wait…there’s more
Plugins to the rescue!

12. UNDERDOCUMENTED
FEATURE

19. A JET Charts Plugin : Building Blocks
• A simple PL/SQL render function
• A simple PL/SQL ajax function
• A simple JavaScript call
• A simple SQL query

20. Copyright © 2017 APEX Consulting
Read / Set JET Chart
data
Use a JET Chart as an input item

21. Read / Set JET Chart data
• Disable the readonly option
• Use the ojoptionchange event to listen to changes
• Use the data payload to find the new value

22. •Enhance JET Chart
•Create a JET Chart Plugin
•Use JET Chart as an input item

23. Q& A@roelh
roel@apexconsulting.nl
http://www.apexconsulting.nl

25. @roelh
roel@apexconsulting.nl
http://www.apexconsulting.nl
Copyright © 2016 APEX Consulting