Extending APEX

30 Pages·2013·3.05 MB·English

Extending Apex with Open Source JavaScript
Libraries: Dynamic Chart Generation, Large Image
Zooming, and Interactive Graph Visualization
Dr. Changtao Qu, Dr. Alex Kohn
pRED Informatics, Roche Diagnostics GmbH,
Nonnenwald 2, 82377 Penzberg, Germany
The Roche Group
Key Facts at a Glance
• Founded 1896 in Basel, Switzerland
• Founding families still hold majority stake
• Employing 80,000 people
• Leadership in pharmaceuticals
Leading supplier of medicines for cancer and a
market leader in virology
• Leadership in in vitro diagnostics
• Focus on Personalized Healthcare

2
The Roche Penzberg Site
One of the largest biotech centers in Europe
Divisions: Pharma & Diagnostics
Established: 1972 (Boehringer Mannheim GmbH)
1998 acquired by Roche
Employees: 4825* (Diagnostics 62 %; Pharma 38%)
Pharma Research & Early Centre of excellence for therapeutic proteins
Development (pRED)
(Oncology, Inflammation, CNS, Virology, Metabolic)
* Headcount of December 2011
3
Overview
• Custom Charts using Raphaël JS
• Large Image Zooming through OpenLayers JS
• Interactive Graph Visualization in Apex
• Lessons Learned

4
Custom Charts using Raphaël JS
5
New Medicine Portfolio (NMP) Chart
• Project information related to NMP available in Oracle
• Annotations relevant for Oncology dept. are managed in Apex
• Chart, mapping NMP data to Drug Life Cycle

• Problem:
o Piano charts are not available in Apex
o No suitable piano chart library available in the Internet
Need to create a custom chart
6
Creating a Custom Chart
• Graphics library
o Raphaël, http://raphaeljs.com
o Supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet
Explorer 6.0+
• JavaScript method painting piano charts
o JSON interface
• PL/SQL procedure
o Creates JSON objects
o Writes to HTML out
• Integrate into Apex
o Reference Raphaël library and custom painting library
o Call PL/SQL procedure

7
Drawing the Chart Elements
• Create vector graphics with favorite paint program
• Extract path coordinates from vector graphics
• Create JS function for each element,
i.e. drawPhase(…), drawProject(…) and drawMS(…)
8
Putting it all together
9
Integrating into Apex
10