In this section we’ll focus on adding additional data visualization components to our dashboard.
Adding a Sunburst
Sunburst component shows drillable data along two dimensions – one represented by the size and another by the color of each element in the circle.
1. In the structure pane select the Sunburst showDetailItem and set the stretchChildren property to first.
2.
3. From the Data Controls accordion drag the DeptStats1 collection into the Sunburst accordion on your page and choose to create Sunburst.
4. In the Create Sunburst dialog that pops up, with the DeptStats1 selected set the Value field to the countEmployeeId field, set the Label to the DepartmentName and press the green + button to add a new Group Rule using AvgSalary as the group by value as well as the legend label.
5. Check the checkbox next to the Employees collection to include their details in your sunburst as the second level. Set the Value to be Salary and the Label to be LastName.
6. Press the green + button to add a new Group Rule using DeptId as the group by value.
7. Click ok to release the dialog. In the JDeveloper toolbar, click save all and then click the rebuild button . Now reload the page in your browser.
8. Your page will now include the sunburst component showing departments and employees in each one.
9. Let’s enable drilling on the component. Select the dvt:sunburst in the structure pane and set the DisplayLevelsChildren to 0. This will tell the sunburst to open with just the top level node.
10. In the structure pane expand the dvt:sunburst->switcher->facet to locate the dvt:sunburstNode for the countEmployeeId – set the Drilling property to be insert.
11. Save you page and reload the browser.
12. Initially the page will show up with just the departments. Note that you can choose a
department and drill down to the employees by pressing the little + sign that appears on the slice.
You can allocate more space to the sunburst component by maximizing the area allocated to the accordion with the splitter pulled all the way up.
Also note that the sunburst component can be rotated by dragging its edge with the mouse.
Adding a Hierarchy Viewer
The hierarchy viewer allows you to easily navigate a hierarchy of data visually.
1. Select the Hierarchy af:showDetailItem in the structure pane and set the stretchChildren property to first.
2. From the Data Controls palette drag the DeptStats1 collection to the empty Hierarchy accordion and choose to create a Hierarchy Viewer.
3. In the dialog that pops-up accept the default Vertical Top Down option for the layout of the component and click OK.
4. In the Create Hierarchy Viewer dialog check the box next to the Employees node – note that you can drag and drop properties between the panel cards to create your own layout. For example you can drag the LastName property to the first folder and the
hiredate to panel card 2, and then delete panel card 1. You can also provide a title for each one of the cards.
5. Click OK to release the dialog.
6. With the dvt:hierarchyViewer still selected in your structure pane, set the following properties: Descendent Levels = 0, Nodes Per Level=4.
7. In the JDeveloper toolbar click Save All and then the rebuild button . Then reload your page in the browser.
8. If you’ll expand the second accordion you’ll see the hierarchy viewer. At the bottom of each node you’ll notice an arrow that will allow you to expand this node to see its children.
9. Expand the control panel at the right of the component to allow you to zoom in and out and change the layout of the component at runtime.
Note that you can further customize the size of each node, and the text used by directly manipulating those in the JDeveloper IDE.
Adding a Thematic Map
The thematic map allows you to show data that relates to location and areas. We’ll first need to define an additional query that gets us the data and then display it on a world map.
1. Select the model project in the projects section, right click and choose New->ViewObject
2. Set the name for the view object to be MapData and the Data Source to be Custom SQL Query, then click Next.
1. Copy the following SQL into the Select box, and then click the Test and Explain to verify your syntax is correct:
select c.country_code, count(e.employee_id)
from employees e, departments d, locations l , countries c where e.department_id=d.department_id
and d.location_id=l.location_id and c.country_id=l.country_id group by country_code
Continue advancing in the wizard using the Next button until you get to step 6. Check the Key Attribute checkbox for the CountryCode attribute.
5. Click Next to get to step 8 of the wizard and check the Add to Application Module checkbox.
Then press Finish.
6. Back in the dashboard.jsf web page visual editor expand the Map Accordion and set the StretchChildren attribute to first
7. From the Data Controls palette drag the MapData1 view to the Map accordion and drop it as a Thematic Map…
8. In the dialog that pops up choose the World->World countries map and click ok.
9. In the Create Data Layer dialog choose CountryCode for the Location field and click OK.
10. In the structure pane expand and drill down the dvt:tematicMap until you get to the dvt:areaLocation and choose that node.
11. In the property inspector select a new FillColor by choosing the wheel to the right of the field.
Click the save all toolbar button and then the make button and reload the page in your browser. The page now include a map that highlight the countries where employees are working.