Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "WEBFOCUS USER GROUP ENHANCE YOUR DASHBOARD WITH JQUERY BI with Style Hans Lim March 8, 2012."— 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 $(function() { $( "#accordgraph" ).accordion({ autoHeight: false, navigation: true, collapsible: true }); Section 1 (YOUR GRAPH) Section 2 (YOUR GRAPH) Section 3 (YOUR GRAPH)

8 HOW JQUERY WORKS jQuery Accordion Example $(function() { $( "#accordgraph" ).accordion({ autoHeight: false, navigation: true, collapsible: true }); Section 1 (YOUR GRAPH) Section 2 (YOUR GRAPH) Section 3 (YOUR GRAPH) Compared To #accordgraph {} #accordgraph.accordgraph1 {/*set style*/} #accordgraph.accordgraph2 {/*set style*/} #accordgraph.accordgraph3 {/*set style*/} function showMenu(a) { // set JavaScript // } Section 1 (YOUR GRAPH) Section 2 (YOUR GRAPH) Section 3 (YOUR GRAPH)

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

10 SETUP JQUERY IN WEBFOCUS First go to Download the latest version 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

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 graphs or 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 MOBILE VERSION data.com/approot/jquery/mobile.html 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


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

Similar presentations


Ads by Google