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>

Section 1

(YOUR GRAPH)

Section 2

Section 3

", "width": "800" }

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>

Section 1

(YOUR GRAPH)

Section 2

Section 3

Compared To.

Section 1

(YOUR GRAPH)

Similar presentations


Ads by Google