10. Bar Graphs : Beyond the Defaults Default coloring can be confusing Default coloring can be ugly Overwrite Default colors <dvt:seriesSetdefaultColor="#0000ff">
14. Bar Graphs : Beyond the Defaults Use a Custom ClickListener In Listener iterate, compare and highlight clickListener="#{backingBeanScope.barGraphBean.clickHandler}" //iterate over the row data for (inti = 0; i < rowCount; ++i) { // when row is found, color it RED barGraph.getSeriesSet().getSeries(rwIndex, true).setColor(Color.RED); // when row is NOT found, color it BLUE barGraph.getSeriesSet().getSeries(rwIndex, true).setColor(Color.BLUE);
15.
16. Grouping Sales : Sales overview Create a graph based on a ‘read only’ viewObject that produces the query result select products_base.product_id, sum(quantity) total , product_nameprd, order_datedt from orders , order_items , products_base where ………. group by ……..
17. Bar Graph : the Basics Per day, the amount ordered for this item in this warehouse 2 1 3
18. Grouping Sales : Sales overview Display sold items as percentage of total What was the ‘percentage sold’ in a given week ?
19. Grouping Sales : Sales overview Create a graph based on a ‘read only’ viewObject that produces the query result select sum(quantity) total , product_nameprdnam ,to_char(order_date, 'IW') week from orders, order_items, products_base Where …… group by …..
21. Pie Graphs What is behind the information in the Pie ? public void clickListener (ClickEvent event){ ComponentHandle handle = event.getComponentHandle(); System.out.println(handle.getName()+" is clicked."); }
22. Do you remember this one ? Per day, the amount ordered for this item in this warehouse Let get some more detail here….
23. Time Selector : Component info Using the TimeSelector Component to ‘drill down’ TimeSelectorComponent can select date ranges in graph Can be difficult to use with existing datamodels Needs date range with no gaps Option: Create a view to fill in date gaps
24. Time Selector : Example (1) Add timeSelector component to Graph Use the TimeSelectorListener, for instance to use start and end dates in a filter. <dvt:timeSelector timeSelectorListener="#{timeSelectorBean.processTimeSelector}“ explicitStart="#{timeSelectorBean.startDate} explicitEnd="#{timeSelectorBean.endDate}“ mode="EXPLICIT" fillColor="#ff7d7d“ borderColor="#ff0000" id="tsl1“ fillTransparent="true"/> public void processTimeSelector(TimeSelectorEventtimeSelectorEvent) { Date sdate = new Date(timeSelectorEvent.getStartTime()); Date edate = new Date(timeSelectorEvent.getEndTime()); // convert dates and use them OperationBinding ob = bindings.getOperationBinding("ExecuteWithParams"); Map params = ob.getParamsMap(); params.put("b_startDate", Minorderdate); params.put("b_endDate", Maxorderdate); ob.execute();
25. Time Selector : Example (2) Show what customers placed order in that particular time frame.
27. Interactive Graphs : add References How to use the ClickListener to change or add a <dvt:referenceObject /> Bind Graph to bean Get Handle to getReferenceObjectSet(); Change the ReferenceObject
28. Interactive Graphs : Update Data In Click Listeners you can do almost anything you like Get to the Data value (if needed) Display or… Process Long clickedValue = (Long)dhandle.getValue(DataComponentHandle.UNFORMATTED_VALUE);
29. Interactive Graphs scrollbarPresenceGroups ZoomListener public void zoomListener (ZoomEvent event){ double zoomMin = event.getAxisMin(ZoomEvent.Y1AXIS); double zoomMax = event.getAxisMax(ZoomEvent.Y1AXIS); intgroupStart = event.getAxisStartGroup(ZoomEvent.O1AXIS); intgroupCount = event.getAxisGroupCount(ZoomEvent.O1AXIS); System.out.println("Y1 Axis range "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax)); System.out.println("O1 Axis starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount)); }
30. Lets take a closer look : Zooming ZoomListener public void zoomListener (ZoomEvent event){ double zoomMin = event.getAxisMin(ZoomEvent.Y1AXIS); double zoomMax = event.getAxisMax(ZoomEvent.Y1AXIS); intgroupStart = event.getAxisStartGroup(ZoomEvent.O1AXIS); intgroupCount = event.getAxisGroupCount(ZoomEvent.O1AXIS); System.out.println("Y1 Axis range "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax)); System.out.println("O1 Axis starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount)); }
31. Interactive Graphs ScrollListener 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 - public void scrollListener (ScrollEvent event){ double zoomMin = event.getAxisMin(ScrollEvent.Y1AXIS); double zoomMax = event.getAxisMax(ScrollEvent.Y1AXIS); intgroupStart = event.getAxisStartGroup(ScrollEvent.O1AXIS); intgroupCount = event.getAxisGroupCount(ScrollEvent.O1AXIS); System.out.println("Y1 Axis has a range from "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax)); System.out.println("O1 Axis has starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount)); }
32. Do you remember this one ? Where do these customers live ? Lets use a map to plot them
33. Geographical Map Create a viewObject to provide the data. SELECT ………….. adr.ADDRESS1, adr.CITY, …………. adr.POSTAL_CODE, adr.COUNTRY_ID, ord.ORDER_TOTAL , ……… FROM ORDERS ord, PERSONS per, ADDRESSES adr WHERE
39. Feeding the graphs Stock Level changed by: Services ? Batch Process ? …. ? How to inform application ?
40. Active Graphs : Push DB Changes What are the options ? Use ADS via Databinding ? Use ADS via Active Data Proxy ? Use Polling ?
41. Active Graphs : Push DB Changes Use Database ChangeNotification grant change notification to <user>; Set AutoRefresh ‘true’ for ViewObject Use Shared ApplicationModule Use Poll component
44. Contextual Events ADF Code Corner Example 17 To Refresh a Region Based on A Graph Click Event in an other Region public void handleEvent(Object payload){ //cast the payload to the ClickEvent. ClickEventclickEvent = (ClickEvent) payload; DataComponentHandledch = (DataComponentHandle)clickEvent.getComponentHandle(); //get the selected row key from the graph (click event) Key rwKey = (Key) dch.getValue(DataComponentHandle.ROW_KEY);
45. Summary Graphs not only display data Interact with Graphs and Maps Use Graphs and Maps clever and whenever needed Get the best out of your Graphs and Maps
46. Final Notes A Picture Paints a Thousand Words… …..And even then there is more to tell Contextual Events in Graphs Saving Graphs as Image Use Graphs in Reports
47. A Picture Paints a 1000 Words ODTUG Kaleidoscope 2011 – Long Beach, California Please Fill Out Your Evaluations Luc Bors, AMIS, The Netherlands Luc.Bors@amis.nl LucBors@gmail.com Follow me on Twitter : @lucb_
Editor's Notes
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.
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'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'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'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'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'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) <dvt:pieGraph id="pieGraph1" value="#{bindings.OrderTotalsPie1.graphModel}"subType="PIE" threeDEffect="true"animationOnDisplay="flipLeft" animationDuration="2000"clickListener="#{pieClickListenerBean.processClick}"imageFormat="FLASH" seriesRolloverBehavior="RB_HIGHLIGHT"seriesEffect="SE_GRADIENT" dynamicResize="DYNAMIC_SIZE"interactiveSliceBehavior="explode" visualEffects="AUTO"> <dvt:background> <dvt:specialEffectsgradientDirection="GD_RADIAL"fillType="FT_GRADIENT" gradientNumStops="4"/> </dvt:background> <dvt:graphPieFrame/> <dvt:seriesSet> <dvt:series/> </dvt:seriesSet> <dvt:legendAreaautomaticPlacement="AP_NEVER" position="LAP_TOP"/> <dvt:sliceLabelautoPrecision="off" scaling="auto"textType="LD_PERCENT"/> <dvt:pieLabel rendered="false"/> </dvt:pieGraph>
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 <dvt:shapeAttributes /><dvt:barGraph > <dvt:shapeAttributesSet> <dvt:shapeAttributes component="GRAPH_TWODMARKER" clickable="true" clickListener="#{clickListener.processClick}"/> </dvt:shapeAttributesSet> </dvt:barGraph>
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 "zoomDirection" attribute. Zoom and scroll may be enabled for horizontal and or vertical axes. The "scrollbarPresenceGroups" attribute provides control over when a scroll bar appears for the group axis: the horizontal axis in Bar graphs, for instance. The "scrollbarPresenceX1", "scrollbarPresenceY1", and "scrollbarPresenceY2" 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 "zoomDirection" attribute. Zoom and scroll may be enabled for horizontal and or vertical axes. The "scrollbarPresenceGroups" attribute provides control over when a scroll bar appears for the group axis: the horizontal axis in Bar graphs, for instance. The "scrollbarPresenceX1", "scrollbarPresenceY1", and "scrollbarPresenceY2" attributes control the appearance of scroll bars for the various data axes.
for (var level in markers) { for (vari = 0; i < 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 "Object", //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);
