1 / 22

WEBFOCUS USER GROUP

WEBFOCUS USER GROUP. ENHANCE YOUR DASHBOARD WITH JQUERY BI with Style Hans Lim March 8, 2012. INTRODUCTION. Hans Lim Web Application Architect Currently Using ColdFusion PHP jQuery AJAX WebFOCUS. INTRODUCTION. ENHANCE YOUR DASHBOARD WITH JQUERY I call it “ jFOCUS "

zuriel
Download Presentation

WEBFOCUS USER GROUP

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEBFOCUS USER GROUP ENHANCE YOUR DASHBOARD WITH JQUERY BI with Style Hans Lim March 8, 2012

  2. INTRODUCTION Hans Lim • Web Application Architect Currently Using • ColdFusion • PHP • jQuery • AJAX • WebFOCUS

  3. INTRODUCTION ENHANCE YOUR DASHBOARD WITH JQUERY I call it “jFOCUS" • A new style of Business Intelligence • Flashy but not Flash with animations & effects • Link to multiple charts with a single filter • Load reports using AJAX without reloading page • View real-time data • Data visualization improves user productivity • Compatible with all mobile devices • No software to purchase

  4. OVERVIEW • What is jQuery • How jQuery Works • Setup jQuery in WebFOCUS • Standard BI Dashboard • jQuery Dashboard • Demo

  5. WHAT IS JQUERY? • Who’s familiar with jQuery? • How many using jQuery?

  6. WHAT IS JQUERY? • JavaScript library that simplifies HTML document event handling, animating and AJAX interaction • Designed to make the client-side scripting of HTML more simple Primary Scripting Language • HTML • Cascading Style Sheets • JavaScript

  7. HOW JQUERY WORKS jQuery Accordion Example <script> $(function() { $( "#accordgraph" ).accordion({ autoHeight: false, navigation: true, collapsible: true }); }); </script> <div id="accordgraph"> <H3>Section 1</H3> <div> (YOUR GRAPH) </div> <H3>Section 2</H3> <div> (YOUR GRAPH) </div> <H3>Section 3</H3> <div> (YOUR GRAPH) </div> </div>

  8. HOW JQUERY WORKS jQuery Accordion Example <script> $(function() { $( "#accordgraph" ).accordion({ autoHeight: false, navigation: true, collapsible: true }); }); </script> <div id="accordgraph"> <H3>Section 1</H3> <div> (YOUR GRAPH) </div> <H3>Section 2</H3> <div> (YOUR GRAPH) </div> <H3>Section 3</H3> <div> (YOUR GRAPH) </div> </div> Compared To <style> #accordgraph {} #accordgraph.accordgraph1 {/*set style*/} #accordgraph.accordgraph2 {/*set style*/} #accordgraph.accordgraph3 {/*set style*/} </style> <script> function showMenu(a) { // set JavaScript // } </script> <div id="accordgraph"> <div class=”accordgraph1” onClick=“showMenu(1)”> <H3>Section 1</H3> <div> (YOUR GRAPH) </div> </div> <div class=”accordgraph2” onClick=“showMenu(2)” style=“display:none;”> <H3>Section 2</H3> <div> (YOUR GRAPH) </div> </div> <div class=”accordgraph3” onClick=“showMenu(3)” style=“display:none;”> <H3>Section 3</H3> <div> (YOUR GRAPH) </div> </div> </div>

  9. HOW JQUERY WORKS AJAX Example <div class="accordgraph"> Loading… </div> <script> $.get(‘FILENAME&PARAM1&PARAM2', function(data) { $('.accordgraph').html(data); }); </script> JS at the bottom. Why?

  10. SETUP JQUERY IN WEBFOCUS • First go to http://jqueryui.com • Download the latest version 1.8.18 • In WebFOCUS server go to /ibi/apps/ Copy and paste all files in a new folder jquery • Instructions, Dashboard Design, Implementation & Deployment: • Contact Hans Lim 630-290-3056

  11. STANDARD BI DASHBOARD

  12. JQUERY DASHBOARD Example 1 • Slide show of charts • Drilldown to ALL charts with one filter • Including charts inside the slide show

  13. JQUERY DASHBOARD Example 2 • Logos of Customer rotate in circle • Swipe logos using mobile device • Drilldown to ALL charts when customer logo is focused

  14. JQUERY DASHBOARD Example 3 • Expand or collapse graphsor reports • Create a tab for each customer, department, etc… • Set of a graph with report below

  15. JQUERY DASHBOARD Example 3 • Drilldown report to a draggable window • Draggable window can have multiple tabs

  16. JQUERY DASHBOARD Example 4 • Place multiple charts in one dashboard with no issue • AJAX instead of IFRAME • All charts drills down to a draggable window

  17. JQUERY DASHBOARD Mobile Version • Dashboard tailored to your device • Quickly navigate • No app to download • No license to purchase

  18. JQUERY DASHBOARD Mobile Version • Works on any mobile device • Drills down the same way as PC browser

  19. DEMO • www.hanskristianlim.com/jquery • MOBILE VERSION • http://reports.network-data.com/approot/jquery/mobile.html

  20. CLOSING • Anyone going to Summit this June in Orlando? • I will be presenting this topic so sign up to my class Topic: • Enhancing Your Dashboard with jQuery

  21. QUESTIONS?

  22. CONTACT INFORMATION For tutorials and implementation or dashboard redesign: HANS LIM Web Application Architect hanslim504@yahoo.com 630-290-3056

More Related