Oracle by Example brandingAdding Bar and Area Charts in Oracle Visual Builder Cloud Service

section 0Before You Begin

This 10 minute tutorial is the second 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 a bar chart and an area chart.

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 Charts to the Summary Page

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

  1. Open the page menu and select the Summary page if you are not already there.
    Oracle Visual Builder Cloud Service Home page
    Description of the illustration vbcs_s1_1.png
  2. 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.
    Add bar chart
    Description of the illustration vbcs_s1_2.png
  3. In the bar chart pop-up box, select:
    • Business Object: Summary
    • Bar Values (Y Axis): Sales
    • Categories (X Axis): Year
    • Colors (Series): Region
    Bar chart pop-up
    Description of the illustration vbcs_s1_3.png
    Click the OK icon to create the chart.

section 2Configure the New Chart

  1. In the Properties tab of the Bar Chart Properties Inspector, click Legend and Titles.
    Bar chart properties
    Description of the illustration vbcs_s2_1.png
  2. In the Legend and Titles page, set the Title to Sales by Region.
    Bar chart title
    Description of the illustration vbcs_s2_2.png
  3. The Summary page should look like the following image. You may need to adjust the size of the chart.
    Summary page with bar chart
    Description of the illustration vbcs_s2_3.png

section 3Add and Configure an Area Chart

  1. 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.
    Add area chart
    Description of the illustration vbcs_s2_4.png
  2. In the pop-up box, select the following details:
    • Business Object: Sales
    • Bar Values (Y Axis): Sales
    • Categories (X Axis): Year
    • Colors (Series): Region
    Area chart pop-up
    Description of the illustration vbcs_s2_5.png
    Click the OK icon to create the field.
  3. Click the Properties tab in the Area Chart Properties Inspector, then set the Display to Vertical Stacked.
    Area chart display properties
    Description of the illustration vbcs_s3_1.png
  4. In Area Line, Select Curved.
    Area chart line style
    Description of the illustration vbcs_s3_2.png
  5. Click Legend and Titles and set the title to Sales.
    Area chart title
    Description of the illustration vbcs_s3_3.png
  6. The Summary page now looks like the following image. You may need to adjust the size of the chart.
    Area chart
    Description of the illustration vbcs_s3_4.png