Before You Begin

This 10-minute tutorial shows you how to add basic charts to a web application.

Background

Charts enable you to display your data visually, as an alternative to the table or list format.

In this tutorial, you'll add and configure a bar chart and an area chart. Oracle Visual Builder provides many kinds of chart and gauge components that allow a web page to display data in different ways.

What Do You Need?

• Access to Oracle Visual Builder
• A supported browser
• Completion of the previous tutorial

Add a Bar Chart to the Summary Page

In this step, you'll add a bar chart to display regional sales data for the past few years.

1. Click the Web Applications tab in the Navigator.
2. If necessary, expand the chartwebapp, Flows, and main nodes, then click main-start.

   

3. In the Components palette, locate the Heading component under Common and drag it onto the page.
4. In the Heading's Properties pane, enter Summary in the Text field.
5. Scroll down to the Chart section and drag a Bar Chart to the canvas area below the heading.

   

6. In the Properties pane, click Add Data to open the Add Data Quick Start.

   

7. On the Locate Data page of the Quick Start, select Summary under Business Objects and click Next.

   

8. On the Map Fields page:
   • Select sales to add it to the Values (Y Axis) field.
   • Select year to add it to the Categories (X Axis) field.
   • Expand the regionObject and items nodes (item[i] is expanded automatically). Select name to add it to the Colors (Series) field.

   

   Click Next.

9. On the Define Query page, click Finish. The chart is displayed.
   

   

10. Click the General tab in the Properties pane. In the X Axis, Title field, change year to Year. In the Y Axis, Title field, change sales to Sales.

    

    Click the Legend button, then in the Legend, Title field, change name to Region. Click Bar Chart to return to the main General tab.
11. In the pages list, right-click the main-start page and select Rename from the menu.
12. In the Rename dialog box, enter main-summary in the ID field and click Rename.
13. Click the main-summary page to reopen it, then scroll to the Common components and drag a Label component into the grid between the heading and the chart.

    

14. In the Text field for the Label, enter Sales by Region.

Add and Configure an Area Chart

Now you'll add an area chart to display regional sales data for the last twenty-five years.

1. Scroll down to the Chart section of the Components palette, drag an Area Chart to the canvas area of the Summary page, and drop it next to the bar chart. You may need to scroll to the right or widen your browser window to see it all.
2. Click Add Data to open the Add Data Quick Start.
3. On the Locate Data page of the Quick Start, select Sales under Business Objects and click Next.
4. On the Map Fields page:
   • Select sales to add it to the Values (Y Axis) field.
   • Select year to add it to the Categories (X Axis) field.
   • Expand the regionObject and items nodes (item[i] is expanded automatically) and select name to add it to the Colors (Series) field.

   Click Next.

5. On the Define Query page, click Finish. The chart is displayed.
6. Click the General tab for the chart. In the X Axis, Title field, change year to Year. In the Y Axis, Title field, change sales to Sales.
7. Click the Legend button, and in the Legend, Title field, change name to Region. Click Area Chart to return to the main General tab.
8. Now click the Style button. In the Style Defaults, Line Type list, select Curved, then click Area Chart to return to the main General tab.

   

9. In the General tab, under Stack Values, select On.
10. Drag a Label from the Common section of the Components Palette to the grid row just above the area chart.
11. In the Text field for the Label, enter Sales. The charts look as follows: