ADF DVTA Picture Paints a 1000 Words<br />ODTUG Kaleidoscope 2011 – Long Beach, California<br />Luc Bors, AMIS, The Nether...
Overview<br />The DVT Component in ADF Architecture<br />Using DVT for data analysis<br />Interactive Graphs<br />Maps<br ...
DVT in ADF Architecture<br />Desktop<br />Browser-Based<br />Metadata Services (MDS)<br />JSF<br />JSP<br />Office<br />AD...
Before It gets complicated<br />Creating Basic Graphs is easy<br />
Using DVT for data analysis<br />From plain numbers to interactive data analysis<br />
A Needle in a Haystack<br /><ul><li>Supply ?
Demand ?
… ?</li></li></ul><li>Use Gauges as an indicator<br />Coloring based on threshold values<br />Usually hardcoded values<br ...
Use Gauges as an indicator<br />
Bar Graphs : Beyond the Defaults<br />Default coloring can be confusing<br />Default coloring can be ugly<br />Overwrite D...
Bar Graphs : Beyond the Defaults<br /><ul><li>10 ?
500 ?
…  ?</li></li></ul><li>Bar Graphs : Beyond the Defaults<br />To add Selected Series Highlighting<br />Create Graph and Swa...
Bar Graphs : Beyond the Defaults<br />Use a Custom ClickListener<br />In Listener iterate, compare and highlight<br />clic...
Bar Graphs : Beyond the Defaults<br /><ul><li>250 !</li></li></ul><li>Stock level origin : Sales overview<br />Why are the...
Grouping Sales : Sales overview <br />Create a graph based on a ‘read only’ viewObject that produces the query result<br /...
Bar Graph : the Basics<br />Per day, the amount ordered for this item in this warehouse<br />2<br />1<br />3<br />
Grouping Sales : Sales overview <br />Display sold items as percentage of total<br />What was the ‘percentage sold’ in a g...
Grouping Sales : Sales overview <br />Create a graph based on a ‘read only’ viewObject that produces the query result<br /...
Pie Graphs<br />Add some ‘flashy’ behaviour<br /><dvt:pieGraph id="pieGraph1"<br />                      value="#{bindings...
Pie Graphs<br />What is behind the information in the Pie ?<br />public void clickListener (ClickEvent event){<br />Compon...
Do you remember this one ?<br />Per day, the amount ordered for this item in this warehouse<br />Let get some more detail ...
Time Selector : Component info<br />Using the TimeSelector Component to ‘drill down’<br />TimeSelectorComponent can select...
Time Selector : Example (1)<br />Add timeSelector component to Graph<br />Use the TimeSelectorListener, for instance to us...
Time Selector : Example (2)<br />Show what customers placed order in that particular time frame.<br />
Make graphs Interactive<br />Listeners do the Trick<br />ZoomListeners<br />ScrollListeners<br />ClickListeners<br />
Interactive Graphs : add References<br />How to use the ClickListener to change or add a <dvt:referenceObject /><br />Bind...
Interactive Graphs : Update Data<br />In Click Listeners you can do almost anything you like<br />Get to the Data value (i...
Interactive Graphs<br />scrollbarPresenceGroups<br />ZoomListener<br /> public void zoomListener (ZoomEvent event){<br /> ...
Lets take a closer look : Zooming<br />ZoomListener<br /> public void zoomListener (ZoomEvent event){<br />  double zoomMi...
Interactive Graphs<br />ScrollListener<br />The listener interface for receiving scroll events on the graph. The event tri...
Do you remember this one ?<br />Where do these customers live ? <br />Lets use a map to plot them<br />
Geographical Map<br />Create a viewObject to provide the data. <br />SELECT<br />…………..<br />    adr.ADDRESS1, <br />adr.C...
Geographical Map<br />Points is plotted to a Map	 <br />
Geographical Map<br />Adding Circles <br />Use MapviewerJavascript API combined with ADF Javescript API<br /><ul><li>This ...
Thematic Map : New in 11g R2<br />Create Map<br />Create Layers<br />
Thematic Map : New in 11g R2<br />Relevant states are highlighted<br />Drilldown <br />Drillup<br />Reset<br />Zoom<br />
Interactive DashBoard Demo<br />DEMONSTRATION<br />
Feeding the graphs<br />Stock Level changed by:<br />Services ?<br />Batch Process ?<br />…. ?<br />How to inform applicat...
Active Graphs : Push DB Changes<br />What are the options ?<br />Use ADS via Databinding ?<br />Use ADS via Active Data Pr...
Active Graphs : Push DB Changes<br />Use Database ChangeNotification<br />grant change notification to <user>;<br />Set Au...
Active Graphs : Push DB Changes<br />
DashBoard DATA PUSHDemo<br />DEMONSTRATION<br />
Contextual Events<br />ADF Code Corner Example 17<br />To Refresh a Region Based on A Graph Click Event in an other Region...
Upcoming SlideShare
Loading in …5
×

A picture-paints-a-1000-words

1,591 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,591
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Process
  • This session is all about clarifying data by means of ADF Data Visualization Components. You will learn how to present your data in a different way and you will learn to recognize when and how to use DVT components for data analysis. From pretty straightforward usage of gauges, graphs and maps, to more sophisticated features like time selectors, drill down functionality, data manipulation in DVT and real time update via server push. And finally this will all come together in a fancy interactive dashboard.After a short introduction explaining DVT and their place in the ADF overall architecture, the rest of the session will be all about DVT added value. You will see situations where ADF Data Visualization Components come to the rescue and how DVT add value to your application and business.
  • Because of the overall ADF Architecture it is possible to base graphs on any dataset that can be made available via an ADF data control (ADFm JSR227). Binding to a standard rowset and binding to hierarchical data controls is supported. This means that graphs can be based on data from a database exposed via ADF Business Components, but also data from a BAM server or BI server. One can also use web services to provide graphs with data.It is easy to create a graph by dragging and dropping a collection from the data control palette, the same way that you create a databound form or table on a page. Data for a graph can also be provided via a managed bean. DVT components support both skinning and partial page refresh. DVT’s can be PPR targets, but they are also able to initiate a PPR event. It is also possible to dynamically change almost any property of a DVT component by means of EL.
  • Data Visualization Components consist of over 50 different kinds of graphs. All graphs support animation (initial display and data change), zooming and scrolling, and some of them support a time selector window.
  • This session is all about clarifying data by means of ADF Data Visualization Components. You will learn how to present your data in a different way and you will learn to recognize when and how to use DVT components for data analysis. From pretty straightforward usage of gauges, graphs and maps, to more sophisticated features like time selectors, drill down functionality, data manipulation in DVT and real time update via server push. And finally this will all come together in a fancy interactive dashboard.After a short introduction explaining DVT and their place in the ADF overall architecture, the rest of the session will be all about DVT added value. You will see situations where ADF Data Visualization Components come to the rescue and how DVT add value to your application and business.
  • In the warehouse stock displayed on this sheet there are some products that are somewhat low on stock. Only if you know what the critical stocklevels of all product are, you will be able to determine exactly those products. An amount of 345 is indeed less then 600 or 1100, but you cannot tell is a stock of 345 is more critical then a stock of 600. We need a solution for that to start with. We want to see instantly where the pain is.
  • &lt;dvt:thresholdSet &gt; &lt;dvt:thresholdthresholdMaxValue=&quot;#{row.CriticalStockLevel}&quot; fillColor=&quot;#d62800&quot;/&gt; &lt;dvt:thresholdthresholdMaxValue=&quot;#{row.CriticalStockLevel + (row.CriticalStockLevel * 5)}&quot; fillColor=&quot;#ffff00&quot;/&gt; &lt;dvt:thresholdthresholdMaxValue=&quot;#{row.CriticalStockLevel + (row.CriticalStockLevel * 10)}&quot; fillColor=&quot;#00ff00&quot;/&gt;&lt;/dvt:thresholdSet&gt;
  • &lt;dvt:thresholdSet &gt; &lt;dvt:thresholdthresholdMaxValue=&quot;#{row.CriticalStockLevel}&quot; fillColor=&quot;#d62800&quot;/&gt; &lt;dvt:thresholdthresholdMaxValue=&quot;#{row.CriticalStockLevel + (row.CriticalStockLevel * 5)}&quot; fillColor=&quot;#ffff00&quot;/&gt; &lt;dvt:thresholdthresholdMaxValue=&quot;#{row.CriticalStockLevel + (row.CriticalStockLevel * 10)}&quot; fillColor=&quot;#00ff00&quot;/&gt; &lt;/dvt:thresholdSet&gt;
  • Usually on cannot tell what is the currently selected bar in a bargraph, so you are not able to tell to what bar any displayed detail data belongs.The barGraph variable is an instance of the graph created through the graph component Binding property. It grants access to the ADF binding layer. The clickEvent provides the information about the bar (the series) the user clicked on.The bar&apos;s row representation is then set as current in the ADF binding layer.
  • Usually on cannot tell what is the currently selected bar in a bargraph, so you are not able to tell to what bar any displayed detail data belongs.The barGraph variable is an instance of the graph created through the graph component Binding property. It grants access to the ADF binding layer. The clickEvent provides the information about the bar (the series) the user clicked on.The bar&apos;s row representation is then set as current in the ADF binding layer.
  • To ensure master-detail correlation to happen when users click on a bar, check the Set current row for master-detail checkbox (1), which ensures the current row to be set in the ADF binding layer iterator. Press the Swap Bars with X-Axis button (2) to turn the product name entries into their own series, which is key for the color highlighting. The major change is between setting and not setting this option is that the product names are displayed in the graph&apos;s legend than beneath its bar. The barGraph variable is an instance of the graph created through the graph component Binding property. It grants access to the ADF binding layer. The clickEvent provides the information about the bar (the series) the user clicked on.The bar&apos;s row representation is then set as current in the ADF binding layer.
  • The barGraph variable is an instance of the graph created through the graph component Binding property. It grants access to the ADF binding layer. The clickEvent provides the information about the bar (the series) the user clicked on.The bar&apos;s row representation is then set as current in the ADF binding layer.
  • In this pie graph we can see the amount available in all warehouses.We can add extra info to the pie by means of :a) b)c)d) &lt;dvt:pieGraph id=&quot;pieGraph1&quot; value=&quot;#{bindings.OrderTotalsPie1.graphModel}&quot;subType=&quot;PIE&quot; threeDEffect=&quot;true&quot;animationOnDisplay=&quot;flipLeft&quot; animationDuration=&quot;2000&quot;clickListener=&quot;#{pieClickListenerBean.processClick}&quot;imageFormat=&quot;FLASH&quot; seriesRolloverBehavior=&quot;RB_HIGHLIGHT&quot;seriesEffect=&quot;SE_GRADIENT&quot; dynamicResize=&quot;DYNAMIC_SIZE&quot;interactiveSliceBehavior=&quot;explode&quot; visualEffects=&quot;AUTO&quot;&gt; &lt;dvt:background&gt; &lt;dvt:specialEffectsgradientDirection=&quot;GD_RADIAL&quot;fillType=&quot;FT_GRADIENT&quot; gradientNumStops=&quot;4&quot;/&gt; &lt;/dvt:background&gt; &lt;dvt:graphPieFrame/&gt; &lt;dvt:seriesSet&gt; &lt;dvt:series/&gt; &lt;/dvt:seriesSet&gt; &lt;dvt:legendAreaautomaticPlacement=&quot;AP_NEVER&quot; position=&quot;LAP_TOP&quot;/&gt; &lt;dvt:sliceLabelautoPrecision=&quot;off&quot; scaling=&quot;auto&quot;textType=&quot;LD_PERCENT&quot;/&gt; &lt;dvt:pieLabel rendered=&quot;false&quot;/&gt; &lt;/dvt:pieGraph&gt;
  • In this pie graph we can see the amount available in all warehouses.We can add extra info to the pie by means of :a) b)c)d)
  • The timeselector listener enables you to respond to changes in the date range.Not only can you requery a collection based on the new date range, but you can also execute ant y kind of logic that you need.
  • Use a click listener on &lt;dvt:shapeAttributes /&gt;&lt;dvt:barGraph &gt; &lt;dvt:shapeAttributesSet&gt; &lt;dvt:shapeAttributes component=&quot;GRAPH_TWODMARKER&quot; clickable=&quot;true&quot; clickListener=&quot;#{clickListener.processClick}&quot;/&gt; &lt;/dvt:shapeAttributesSet&gt; &lt;/dvt:barGraph&gt;
  • public void click(ClickEvent event) {ComponentHandle handle = event.getComponentHandle();if (handle instanceofDataComponentHandle){DataComponentHandledhandle = (DataComponentHandle)handle;Long clickedValue =(Long)dhandle.getValue(DataComponentHandle.UNFORMATTED_VALUE);ReferenceObjectSetros = graph.getReferenceObjectSet();ReferenceObjectro = ros.getReferenceObject(0, true);ro.setLineValue(clickedValue);}}
  • public void click(ClickEvent event) {ComponentHandle handle = event.getComponentHandle();if (handle instanceofDataComponentHandle){DataComponentHandledhandle = (DataComponentHandle)handle;Long clickedValue =(Long)dhandle.getValue(DataComponentHandle.UNFORMATTED_VALUE);Use the clickedValue}}
  • Give end users the ability to zoom in on and scroll through a data set that may be too large or complex to fit comfortably within the area allocated to the graph using the &quot;zoomDirection&quot; attribute. Zoom and scroll may be enabled for horizontal and or vertical axes. The &quot;scrollbarPresenceGroups&quot; attribute provides control over when a scroll bar appears for the group axis: the horizontal axis in Bar graphs, for instance. The &quot;scrollbarPresenceX1&quot;, &quot;scrollbarPresenceY1&quot;, and &quot;scrollbarPresenceY2&quot; attributes control the appearance of scroll bars for the various data axes.
  • Give end users the ability to zoom in on and scroll through a data set that may be too large or complex to fit comfortably within the area allocated to the graph using the &quot;zoomDirection&quot; attribute. Zoom and scroll may be enabled for horizontal and or vertical axes. The &quot;scrollbarPresenceGroups&quot; attribute provides control over when a scroll bar appears for the group axis: the horizontal axis in Bar graphs, for instance. The &quot;scrollbarPresenceX1&quot;, &quot;scrollbarPresenceY1&quot;, and &quot;scrollbarPresenceY2&quot; attributes control the appearance of scroll bars for the various data axes.
  • for (var level in markers) { for (vari = 0; i &lt; markers[level].length; i++) { var details = markers[level][i]; markers[level][i] = new google.maps.Marker({ title: details.level, position: new google.maps.LatLng( details.location[0], details.location[1]), clickable: false, draggable: true, flat: true }); }
  • public void handleEvent(Object payload){ //cast the payload to the ClickEvent. Note that the ctx event //handler could have used a typed argument instead of &quot;Object&quot;, //in which case a) an error would be raised if the value in the //payload is of a wrong type and b) a casting in the method is //not required. //There are good arguments for the use of both approaches. The one //using an Object argument for example allows you to gracefully //handle possible type cast exceptions instead of handling it //using the configured ADF or ADFc exception handlers. ClickEventclickEvent = (ClickEvent) payload; //determine the area that the user clicked on if (clickEvent.getComponentHandle() instanceofDataComponentHandle){ DataComponentHandledch = (DataComponentHandle) clickEvent.getComponentHandle(); //get the selected row key from the graph (click event) Key rwKey = (Key) dch.getValue(DataComponentHandle.ROW_KEY);
  • Process
  • A picture-paints-a-1000-words

    1. 1. ADF DVTA Picture Paints a 1000 Words<br />ODTUG Kaleidoscope 2011 – Long Beach, California<br />Luc Bors, AMIS, The Netherlands<br />
    2. 2. Overview<br />The DVT Component in ADF Architecture<br />Using DVT for data analysis<br />Interactive Graphs<br />Maps<br />XAJA<br />
    3. 3. DVT in ADF Architecture<br />Desktop<br />Browser-Based<br />Metadata Services (MDS)<br />JSF<br />JSP<br />Office<br />ADFSwing<br />Mobile<br />View<br />ADF Faces<br /> JSF<br />Struts<br />ADF Controller<br />ADF Binding<br />Model<br />Business Services<br />EJB<br />BAM<br />ADFbc<br />Portlets<br />BI<br />BPEL<br />Web Services<br />Java<br />Data Services<br />
    4. 4. Before It gets complicated<br />Creating Basic Graphs is easy<br />
    5. 5. Using DVT for data analysis<br />From plain numbers to interactive data analysis<br />
    6. 6. A Needle in a Haystack<br /><ul><li>Supply ?
    7. 7. Demand ?
    8. 8. … ?</li></li></ul><li>Use Gauges as an indicator<br />Coloring based on threshold values<br />Usually hardcoded values<br />Use EL for more flexibility<br />Maybe add ‘critical level’ attributes to data model<br /><dvt:thresholdSet ><br /> <dvt:thresholdthresholdMaxValue="#{row.CriticalStockLevel}" <br />fillColor="#d62800"/><br /> <dvt:thresholdthresholdMaxValue="#{row.CriticalStockLevel + (row.CriticalStockLevel * 5)}" <br />fillColor="#ffff00"/><br /> <dvt:thresholdthresholdMaxValue="#{row.CriticalStockLevel + (row.CriticalStockLevel * 10)}" <br />fillColor="#00ff00"/><br /></dvt:thresholdSet><br />
    9. 9. Use Gauges as an indicator<br />
    10. 10. Bar Graphs : Beyond the Defaults<br />Default coloring can be confusing<br />Default coloring can be ugly<br />Overwrite Default colors<br /><dvt:seriesSetdefaultColor="#0000ff"><br />
    11. 11. Bar Graphs : Beyond the Defaults<br /><ul><li>10 ?
    12. 12. 500 ?
    13. 13. … ?</li></li></ul><li>Bar Graphs : Beyond the Defaults<br />To add Selected Series Highlighting<br />Create Graph and Swap Bars<br />Use a Custom ClickEvent<br />
    14. 14. Bar Graphs : Beyond the Defaults<br />Use a Custom ClickListener<br />In Listener iterate, compare and highlight<br />clickListener="#{backingBeanScope.barGraphBean.clickHandler}"<br />//iterate over the row data<br /> for (inti = 0; i < rowCount; ++i) {<br />// when row is found, color it RED<br />barGraph.getSeriesSet().getSeries(rwIndex, true).setColor(Color.RED);<br />// when row is NOT found, color it BLUE<br />barGraph.getSeriesSet().getSeries(rwIndex, true).setColor(Color.BLUE);<br />
    15. 15. Bar Graphs : Beyond the Defaults<br /><ul><li>250 !</li></li></ul><li>Stock level origin : Sales overview<br />Why are these levels as they are ?<br />Can we display actual ‘sales’ for the selected item in a bar graph ?<br />
    16. 16. Grouping Sales : Sales overview <br />Create a graph based on a ‘read only’ viewObject that produces the query result<br />select <br />products_base.product_id, <br />sum(quantity) total , <br />product_nameprd, <br />order_datedt<br />from <br /> orders<br />, order_items<br />, products_base<br />where <br />……….<br />group by <br />……..<br />
    17. 17. Bar Graph : the Basics<br />Per day, the amount ordered for this item in this warehouse<br />2<br />1<br />3<br />
    18. 18. Grouping Sales : Sales overview <br />Display sold items as percentage of total<br />What was the ‘percentage sold’ in a given week ?<br />
    19. 19. Grouping Sales : Sales overview <br />Create a graph based on a ‘read only’ viewObject that produces the query result<br />select <br /> sum(quantity) total <br />, product_nameprdnam<br /> ,to_char(order_date, 'IW') week<br />from <br /> orders, <br />order_items, <br />products_base<br />Where<br />……<br />group by <br />…..<br />
    20. 20. Pie Graphs<br />Add some ‘flashy’ behaviour<br /><dvt:pieGraph id="pieGraph1"<br /> value="#{bindings.OrderTotalsPie1.graphModel}"<br />subType="PIE" threeDEffect="true"<br />animationOnDisplay="flipLeft" animationDuration="2000"<br />clickListener="#{pieClickListenerBean.processClick}"<br />imageFormat="FLASH" seriesRolloverBehavior="RB_HIGHLIGHT"<br />seriesEffect="SE_GRADIENT" dynamicResize="DYNAMIC_SIZE"<br />interactiveSliceBehavior="explode"visualEffects="AUTO"><br /> <dvt:background><br /> <dvt:specialEffectsgradientDirection="GD_RADIAL"<br />fillType="FT_GRADIENT" gradientNumStops="4"/><br /> </dvt:background><br /> <dvt:graphPieFrame/><br /> <dvt:seriesSet><br /> <dvt:series/><br /> </dvt:seriesSet><br /> <dvt:legendAreaautomaticPlacement="AP_NEVER" position="LAP_TOP"/><br /> <dvt:sliceLabelautoPrecision="off" scaling="auto"<br />textType="LD_PERCENT"/><br /> <dvt:pieLabel rendered="false"/><br /> </dvt:pieGraph><br />
    21. 21. Pie Graphs<br />What is behind the information in the Pie ?<br />public void clickListener (ClickEvent event){<br />ComponentHandle handle = event.getComponentHandle();<br />System.out.println(handle.getName()+" is clicked.");<br /> }<br />
    22. 22. Do you remember this one ?<br />Per day, the amount ordered for this item in this warehouse<br />Let get some more detail here….<br />
    23. 23. Time Selector : Component info<br />Using the TimeSelector Component to ‘drill down’<br />TimeSelectorComponent can select date ranges in graph<br />Can be difficult to use with existing datamodels<br />Needs date range with no gaps<br />Option: Create a view to fill in date gaps<br />
    24. 24. Time Selector : Example (1)<br />Add timeSelector component to Graph<br />Use the TimeSelectorListener, for instance to use start and end dates in a filter.<br /><dvt:timeSelector<br />timeSelectorListener="#{timeSelectorBean.processTimeSelector}“<br />explicitStart="#{timeSelectorBean.startDate} <br />explicitEnd="#{timeSelectorBean.endDate}“<br /> mode="EXPLICIT" fillColor="#ff7d7d“<br />borderColor="#ff0000" id="tsl1“<br />fillTransparent="true"/><br />public void processTimeSelector(TimeSelectorEventtimeSelectorEvent) {<br /> Date sdate = new Date(timeSelectorEvent.getStartTime());<br /> Date edate = new Date(timeSelectorEvent.getEndTime());<br /> // convert dates and use them<br />OperationBinding ob = bindings.getOperationBinding("ExecuteWithParams");<br /> Map params = ob.getParamsMap();<br />params.put("b_startDate", Minorderdate);<br />params.put("b_endDate", Maxorderdate);<br />ob.execute();<br />
    25. 25. Time Selector : Example (2)<br />Show what customers placed order in that particular time frame.<br />
    26. 26. Make graphs Interactive<br />Listeners do the Trick<br />ZoomListeners<br />ScrollListeners<br />ClickListeners<br />
    27. 27. Interactive Graphs : add References<br />How to use the ClickListener to change or add a <dvt:referenceObject /><br />Bind Graph to bean<br />Get Handle to getReferenceObjectSet();<br />Change the ReferenceObject<br />
    28. 28. Interactive Graphs : Update Data<br />In Click Listeners you can do almost anything you like<br />Get to the Data value (if needed)<br />Display or…<br />Process<br />Long clickedValue = (Long)dhandle.getValue(DataComponentHandle.UNFORMATTED_VALUE);<br />
    29. 29. Interactive Graphs<br />scrollbarPresenceGroups<br />ZoomListener<br /> public void zoomListener (ZoomEvent event){<br /> double zoomMin = event.getAxisMin(ZoomEvent.Y1AXIS);<br /> double zoomMax = event.getAxisMax(ZoomEvent.Y1AXIS);<br />intgroupStart = event.getAxisStartGroup(ZoomEvent.O1AXIS);<br />intgroupCount = event.getAxisGroupCount(ZoomEvent.O1AXIS); <br />System.out.println("Y1 Axis range "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax));<br />System.out.println("O1 Axis starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount));<br /> }<br />
    30. 30. Lets take a closer look : Zooming<br />ZoomListener<br /> public void zoomListener (ZoomEvent event){<br /> double zoomMin = event.getAxisMin(ZoomEvent.Y1AXIS);<br /> double zoomMax = event.getAxisMax(ZoomEvent.Y1AXIS);<br />intgroupStart = event.getAxisStartGroup(ZoomEvent.O1AXIS);<br />intgroupCount = event.getAxisGroupCount(ZoomEvent.O1AXIS); <br />System.out.println("Y1 Axis range "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax));<br />System.out.println("O1 Axis starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount));<br /> }<br />
    31. 31. Interactive Graphs<br />ScrollListener<br />The listener interface for receiving scroll events on the graph. The event triggers when an axis of a graph is scrolled. Here is an example of scrollListener implementation that displays the range of the Y1 Axis and the O1 Axis - <br />public void scrollListener (ScrollEvent event){<br /> double zoomMin = event.getAxisMin(ScrollEvent.Y1AXIS);<br /> double zoomMax = event.getAxisMax(ScrollEvent.Y1AXIS);<br />intgroupStart = event.getAxisStartGroup(ScrollEvent.O1AXIS);<br />intgroupCount = event.getAxisGroupCount(ScrollEvent.O1AXIS); <br />System.out.println("Y1 Axis has a range from "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax));<br />System.out.println("O1 Axis has starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount));<br /> }<br />
    32. 32. Do you remember this one ?<br />Where do these customers live ? <br />Lets use a map to plot them<br />
    33. 33. Geographical Map<br />Create a viewObject to provide the data. <br />SELECT<br />…………..<br /> adr.ADDRESS1, <br />adr.CITY, <br />………….<br />adr.POSTAL_CODE, <br />adr.COUNTRY_ID, <br />ord.ORDER_TOTAL ,<br />………<br />FROM <br /> ORDERS ord, <br /> PERSONS per, <br /> ADDRESSES adr<br />WHERE <br />
    34. 34. Geographical Map<br />Points is plotted to a Map <br />
    35. 35. Geographical Map<br />Adding Circles <br />Use MapviewerJavascript API combined with ADF Javescript API<br /><ul><li>This is not documented. PM asked me to file ER for this !</li></li></ul><li>Alternative Approach : Google Maps<br />Consider using Google Maps to have a more Rich API for Map integration and interaction.<br />Google Maps API has good documentation<br /><ul><li>Use ADF Javascript API to interact with Google Maps</li></li></ul><li>Alternative Approach : Google Maps<br /><af:clientListener method="clickCol" type="click"/><br /><af:clientAttribute name="whCoord” value="#{sessionScope.warehouseCoordinatesBean.locations}"/><br /><af:clientAttribute name="adr" value="#{row.Address1}"/><br /><af:clientAttribute name="city" value="#{row.City}"/><br />
    36. 36. Thematic Map : New in 11g R2<br />Create Map<br />Create Layers<br />
    37. 37. Thematic Map : New in 11g R2<br />Relevant states are highlighted<br />Drilldown <br />Drillup<br />Reset<br />Zoom<br />
    38. 38. Interactive DashBoard Demo<br />DEMONSTRATION<br />
    39. 39. Feeding the graphs<br />Stock Level changed by:<br />Services ?<br />Batch Process ?<br />…. ?<br />How to inform application ?<br />
    40. 40. Active Graphs : Push DB Changes<br />What are the options ?<br />Use ADS via Databinding ?<br />Use ADS via Active Data Proxy ?<br />Use Polling ?<br />
    41. 41. Active Graphs : Push DB Changes<br />Use Database ChangeNotification<br />grant change notification to <user>;<br />Set AutoRefresh ‘true’ for ViewObject<br />Use Shared ApplicationModule<br />Use Poll component<br />
    42. 42. Active Graphs : Push DB Changes<br />
    43. 43. DashBoard DATA PUSHDemo<br />DEMONSTRATION<br />
    44. 44. Contextual Events<br />ADF Code Corner Example 17<br />To Refresh a Region Based on A Graph Click Event in an other Region<br />public void handleEvent(Object payload){ <br />//cast the payload to the ClickEvent. <br />ClickEventclickEvent = (ClickEvent) payload; <br />DataComponentHandledch = <br /> (DataComponentHandle)clickEvent.getComponentHandle(); <br />//get the selected row key from the graph (click event) <br />Key rwKey = (Key) dch.getValue(DataComponentHandle.ROW_KEY); <br />
    45. 45. Summary<br />Graphs not only display data<br />Interact with Graphs and Maps<br />Use Graphs and Maps clever and whenever needed<br />Get the best out of your Graphs and Maps<br />
    46. 46. Final Notes<br />A Picture Paints a Thousand Words…<br />…..And even then there is more to tell<br />Contextual Events in Graphs<br />Saving Graphs as Image<br />Use Graphs in Reports<br />
    47. 47. A Picture Paints a 1000 Words<br />ODTUG Kaleidoscope 2011 – Long Beach, California<br />Please Fill Out Your Evaluations<br />Luc Bors, AMIS, The Netherlands<br />Luc.Bors@amis.nl<br />LucBors@gmail.com<br />Follow me on Twitter : @lucb_<br />

    ×