Adding Pie Charts and Modifying Queries in Oracle Visual Builder Cloud Service

Oracle by Example brandingAdding Pie Charts and Modifying Queries in Oracle Visual Builder Cloud Service

section 0Before You Begin

This 10 minute tutorial is the third in the Visualizing Data module.

Background

Oracle Visual Builder Cloud Service is a visual development tool for creating web and mobile applications by simply dragging and dropping UI components onto a page. You don't need any programming experience to develop an application.

In this tutorial, you will add and configure two pie charts. You will also modify the second chart's query.

The images in this tutorial sequence show the standalone version of Oracle Visual Builder Cloud Service. If you are using the Oracle Integration Cloud version, you will see an additional menu at the top of each page that lets you switch between Visual Builder and Integration Cloud.

Top menu
Description of the illustration vbcs_oic_menu.png

What Do You Need?

  • Access to Oracle Visual Builder Cloud Service
  • A supported browser (see Known Issues for Oracle Visual Builder Cloud Service for more information)

section 1Add a Pie Chart

Now you will add a pie chart to the application. This 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.
    Select sales regions page
    Description of the illustration vbcs_s1_1_piechart_page.png
  2. Drag and drop a pie chart to the canvas area of the Sales Regions page.
    Add a pie chart
    Description of the illustration vbcs_s1_2_piechart1_add.png
  3. In the pop-up box, select the following details:
    • Business Object: Region
    • Slice Values: Population
    • Slice Colors: Name
    Pie chart pop-up
    Description of the illustration vbcs_s1_3_piechart1_dialog.png
    Click the OK icon to create the chart.
  4. In the Properties tab of the Pie Chart Properties Inspector, set the Slice Label Content to Percent.
    Pie chart slice label
    Description of the illustration vbcs_s1_4_piechart1_slice.png
  5. Set the title to Population by Region.
    Set pie chart title
    Description of the illustration vbcs_s1_5_piechart1_title.png

section 2Add Another Pie Chart

Now you will add a second pie chart to the application. This will be used to display different information about the same regions, making it easier to compare the data.

  1. 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.
    Add a pie chart
    Description of the illustration vbcs_s2_1_piechart2_add.png
  2. In the pop-up box, select:
    • Business Object: Sales
    • Slice Values: Sales
    • Slice Colors: Region
    Pie chart pop-up
    Description of the illustration vbcs_s2_2_piechart2_dialog.png
    Click the OK 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.
  3. In the Properties tab of the Pie Chart Properties Inspector, set the Slice Label Content to Percent.
    Pie chart slice label
    Description of the illustration vbcs_s2_3_piechart2_slice.png
  4. Set the title to Sales by Region.
    Set pie chart title
    Description of the illustration vbcs_s2_4_piechart2_title.png
  5. Set the Subtitle to 2015.
    Set subtitle
    Description of the illustration vbcs_s2_5_piechart2_subtitle.png
    Click Back icon to return to the Property Inspector.
  6. Click the Data tab of the Property Inspector.
    Pie chart data property inspector
    Description of the illustration vbcs_s2_6_piechart2_data.png

section 3Modify the Second Chart's Query

  1. Because the second 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.
    Pie chart query edit button
    Description of the illustration vbcs_s3_1_piechart2_queryedit.png
  2. In the Default Query pop-up box, select Year from the drop-down.
    Pie chart default query
    Description of the illustration vbcs_s3_2_piechart2_query_dropdown.png
  3. Set the default query value to 2015.
    Pie chart default query
    Description of the illustration vbcs_s3_3_piechart2_query_value.png
    Click the OK icon to update the query.
  4. The Sales by Region pie chart now displays data only from 2015. You may need to adjust the size of the chart.
    Pie charts
    Description of the illustration vbcs_s3_4_piecharts_added.png
    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.