Presentation is loading. Please wait.

Presentation is loading. Please wait.

ENHANCE YOUR DASHBOARD WITH JQUERY

Similar presentations


Presentation on theme: "ENHANCE YOUR DASHBOARD WITH JQUERY"— Presentation transcript:

1 ENHANCE YOUR DASHBOARD WITH JQUERY
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> <H3>Section 3</H3> </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> <H3>Section 3</H3> </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 class=”accordgraph3” onClick=“showMenu(3)” style=“display:none;”> <H3>Section 3</H3>

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 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 www.hanskristianlim.com/jquery MOBILE VERSION

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 "ENHANCE YOUR DASHBOARD WITH JQUERY"

Similar presentations


Ads by Google