Charts and Gauges in Oracle Visual Builder Cloud Service

1. In the web browser, log in to Oracle Visual Builder Cloud Service.

2. On the Home page, click New Application and select Web.

3. In the Application Name page of the Create Application wizard, enter the following values:

   • Application Name: Charts Application

   • Description: Charts and gauges tutorial application


   The Application ID text field is automatically populated based on the Application Name.

   

   Click Next.

4. In the Application Template page of the Create Application wizard, select the Oracle Applications Cloud UI template (the default) and click Next.

   

5. In the Application Navigation page of the Create Application wizard, create the application tabs.
   

   By default, one tab with Home as its label is available. Replace the Home text in the Label field with Summary to rename the tab label. Click + Tab to create another label field and enter Sales Regions as the label.  Click + Tab to create a third label field and enter Sales Objectives as the label.

   

6. Click Finish.

Your Charts Application is now created and opens in the Page Designer.

In this section you will use Data Palette of the Data Designer to create three business objects. These will be used by the charts and gauges you create later.

1. If necessary, click the Main Menu icon in the top-left corner and select Page Designer.

   

2. In the Page Designer, click the Data palette.

   

3. Click + New Business Object.

   

4. In the pop-up box, enter Region.

   

5. Click the icon.

   The Region business object is created with some fields.

   

6. Click + New Field. In the pop-up box, enter the following details:

   • Default Display Label: Name

   • Field ID: name (automatically populated)

   • Field Data Type: Text (selected by default)

   

   Click the icon to create the field.

7. Click + New Field. In the pop-up box, enter or select the following details:

   • Default Display Label: Population

   • Field ID: population (automatically populated)

   • Field Data Type: Number

   

   Click the icon to create the field.

8. Click + New Business Object and create a Sales business object in the same way you created the Region business object (steps 3-5).

9. Click + New Field. In the pop-up box, enter the following details:

   • Default Display Label: Region

   • Field Data Type: Reference

   • Field ID: ref2Region (automatically populated)

   • Reference Business Object: Region (automatically populated)

   • Default Displayed Field: Name

   

   Click the icon to create the field.

10. Click + New Field. In the pop-up box, enter the following details:

    • Default Display Label: Year

    • Field ID: year (automatically populated)

    • Field Data Type: Number

    

    Click the icon to create the field.

11. Click + New Field. In the pop-up box, enter the following details:

    • Default Display Label: Sales

    • Field ID: sales (automatically populated)

    • Field Data Type: Currency

    

    Click the icon to create the field.

12. Click + New Business Object and create a Summary business object in the same way you created the Region business object (steps 3-5).

13. Click + New Field. In the pop-up box, enter the following details:

    • Default Display Label: Region

    • Field Data Type: Reference

    • Field ID: ref2Region (automatically populated)

    • Reference Business Object: Region (automatically populated)

    • Default Displayed Field: Name

    

    Click the icon to create the field.

14. Click + New Field. In the pop-up box, enter the following details:

    • Default Display Label: Year

    • Field ID: year (automatically populated)

    • Field Data Type: Text (selected by default)

    

    Click the icon to create the field.

15. Click + New Field. In the pop-up box, enter the following details:

    • Default Display Label: Sales

    • Field ID: sales (automatically populated)

    • Field Data Type: Currency

    

    Click the icon to create the field.

    You have now created the business objects and can import data.

In this section you will import data from a zip file to all business objects of the application.

Before you start, download the Chart_Application.zip file to your machine. Right-click this link and choose Save As to download the zip file. The zip file contains CSV files for the business objects of the Charts Application. Feel free to review the contents of the zip file.

Note: You cannot add new fields to a schema or edit their properties by importing data from a file. The names and data types of columns in the imported data must match the names and data types of columns in the schema.

1. Click the Main Menu icon in the top-left corner and click Data Designer.

   

2. Click the Data Manager tile.

   

3. Ensure that Development is selected in the Database menu.

   

4. Click Import from File.

   

5. In the Confirm Import Data dialog, click Upload a file, browse, and select the Chart_Application.zip file.

   

6. Click Import.

7. In the Import from File dialog, click OK.

   

8. You have now imported data to the application, and can create charts and gauges that display that data.

You will start by adding a bar chart and an area chart to the summary page.

1. Click the  Main Menu icon in the top-left corner and select Page Designer.

2. Open the page menu and select the Summary page if you are not already there.

   

3. Now you will create a bar chart that will display three years of sales data for different sales regions.

   Drag and drop a bar chart from the Component palette to the canvas area of the Summary page.

   

4. In the bar chart pop-up box, select:

   • Business Object: Summary

   • Bar Values (Y Axis): Sales

   • Categories (X Axis): Year

   • Colors (Series): Region

   

   Click the icon to create the chart.

5. In the Properties tab of the Bar Chart Properties Inspector, click Legend and Titles.

   

6. In the Legend and Titles page, set the Title to Sales by Region.

   

7. The Summary page should look like the following image. You may need to adjust the size of the chart.

   

8. Now you will add an area chart to display regional sales data for the last twenty-five years of sales.

   Drag an area chart to the canvas area of the Summary page, and drop it next to the bar chart.

   

9. In the pop-up box, select the following details:

   • Business Object: Sales

   • Bar Values (Y Axis): Sales

   • Categories (X Axis): Year

   • Colors (Series): Region

   

   Click the icon to create the field.

10. Click the Properties tab in the Area Chart Properties Inspector, then set the Display to Vertical Stacked.

    

11. In Area Line, Select Curved.

    

12. Click Legend and Titles and set the title to Sales.

    

13. The Summary page now looks like the following image. You may need to adjust the size of the chart.

    

Now you will add two pie charts to the application. These will be used to display different information about the same regions, making it easier to compare the data.

1. Open the page menu, and select the Sales Regions page.

   

2. Drag and drop a pie chart to the canvas area of the Sales Regions page.

   

3. In the pop-up box, select the following details:

   • Business Object: Region

   • Slice Values: Population

   • Slice Colors: Name

   

   Click the icon to create the chart.

4. In the Properties tab of the Pie Chart Properties Inspector, set the Slice Label Content to Percent.

   

5. Set the title to Population by Region.

   

6. Drag and drop a second pie chart to the canvas area of the Sales Regions page. You may need to adjust the size of the first chart before you do this.

   

7. In the pop-up box, select:

   • Business Object: Sales

   • Slice Values: Sales

   • Slice Colors: Region

   

   Click the icon to create the chart. The pie chart that you have just created has too many slices to be easily legible. You will adjust this later.

8. In the Properties tab of the Pie Chart Properties Inspector, set the Slice Label Content to Percent.

   

9. Set the title to Sales by Region.

   

10. Set the Subtitle to 2015.

    

    Click to return to the Property Inspector.

11. Click the Data tab of the Property Inspector.

    

12. Because this pie chart has so many slices, it's difficult to interpret. You will need to narrow the range of data it displays. Click the Default Query Edit button.

    

13. In the Default Query pop-up box, select Year from the drop-down.

    

14. Set the default query value to 2015.

    

    Click the icon to update the query.

15. The Sales by Region pie chart now displays data only from 2015. You may need to adjust the size of the chart.

    

    The two charts let you easily compare a region's population with its sales. For example, you can see that the South region has sales proportionally greater than its share of the population.

Now you will add some gauges.  A gauge visually represents a single value.  Here, you will add gauges that show sales as a percent of the sales objectives.

1. Open the page menu, and select the Sales Objectives page.

2. Drag and drop a List View on the Sales Objectives canvas. List View can be found in the Collection section of the Components palette.

   

3. In the Data page of the List Creation wizard, select Summary.

   

4. In the Layout page of the List Creation Wizard, select the Four Column layout, then click .

   

5. In the Mapping page, drag and drop Year on the first column of the list. Select Output Text from the component dialog.

   

6. Drag and drop Region in the second column.

7. Drag and drop Sales in the third column and select Output Currency from the component dialog. The fourth column is now on the next line, but you'll fix that soon. Click .

8. In the Object Actions page, click Off for all default actions and click .

   

9. In the Options page of the Table Creation wizard, click Finish.

   No additional action is required in the Options page.

10. Select the Year text field and click the Properties tab. Set the Label Position to None.

    

    Set the Region field and the Sales field to None in the same way. The fourth column is back on the first line now.

11. Drag a Circular Status Meter from the Gauge section of the Components palette to the fourth column of the Sales Objective list.

    

12. In the pop-up box, select or enter the following details:

    • Business Object: Summary (selected by default)

    • Value: Sales

    • Minimum Value: 0

    • Maximum Value: 16000

    

    Click the icon to create the field.

13. In the Property Inspector, set the Label Position to None.

    

14. Set the Value Label to %.

    

15. On the Data page, click to add a threshold. Thresholds are used to control the color of a gauge. As long as the value of the gauge's data is below a threshold, it will display the color selected for that threshold.
    

    For Threshold 1, enter a value of 15000, and select Orange for the color.

    

16. In the same way, add two more thresholds. Configure Threshold 2 with a value of 16000 and the color Green. Configure Threshold 3 with a value of 50000 and the color Blue.

17. The gauges visually represent each region's sales for a given year. Gauges that are orange show sales that fall below 94% of target. Green gauges indicate sales that are above this threshold, or that have met the sales objective. Blue gauges show results that have exceeded the sales objective.