Before You Begin

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

Background

Oracle Visual Builder provides many kinds of chart and gauge components that allow a web page to display data in different ways.

In this tutorial, you'll add and configure two pie charts, specifying a query for the second chart.

What Do You Need?

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

Add a Pie Chart

1. In the Web Apps tree, under chartwebapp and Flows, click + (Create Page) next to the main node.
2. In the Create Page dialog box, enter salesregions in the Page ID field after the main- prefix, and click Create. The main-salesregions page opens in the Page Designer. (Like business object and field IDs, page names can't have spaces.)
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 Sales Regions in the Text field.
5. Scroll down to the Chart section and drag a Pie 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 Region under Business Objects and click Next.
8. On the Map Fields page,
   • Select population to load it to the Slice Values field.
   • Select name to load it to the Slice Colors field.

   Click Next.

9. On the Define Query page, click Finish. The chart is displayed.
10. Click the General tab for the chart, then click the Legend button. In the Legend, Title field, change name to Region, then click Pie Chart to return to the main General tab.
    

    

11. Scroll to the Common components and drag a Label component between the heading and the chart.
12. In the Text field for the Label, enter Population by Region.

Add Another Pie Chart and Specify a Query Value

Now you'll add a second pie chart to the application. This chart will 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, next to the first one.

   

2. Click the Quick Start tab if necessary, then 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 then click Next.
4. On the Map Fields page,
   • Select sales to load it to the Slice Values field.
   • Expand the regionObject and items nodes (item[i] is expanded automatically) and select name to load it to the Slice Colors field.

   Click Next.

5. On the Target side of the Define Query page, expand the uriParameters node and click the parameter q. (It stands for Query.)

   

6. In the text area under uriParameters.q, enter the following expression, then select the Expression option.
   

   "year='2019'"
   

7. Click Finish.
8. Click the General tab for the chart, then click the Legend button. In the Legend, Title field, change name to Region. Click Pie Chart to return to the main General tab.
9. Scroll to the Common components and drag a Label component between the heading and the chart.
10. In the Text field for the Label, enter Sales by Region, 2019. The chart is displayed. It shows data only for the year 2019. The two charts let you easily compare a region's population with its sales for that year. For example, you can see that the South region had sales proportionally greater than its share of the population.

    

11. To display data for a different year, click the JSON tab to view the page code. Change the q line to specify 2016 instead of 2019. (In the Sales business object, the year data is for every third year.)

    

12. Click the Page Designer tab to view the chart with the new data. In the General tab, change the label text for the chart to Sales by Region, 2016.