Creating Database Application Components

This course explores how you can add various components to your database applications.

Learning Objectives

  • Learn how to use charts, calendars, and maps in your Oracle APEX applications

Intended Audience

  • Anyone who wants to enhance their knowledge of Oracle APEX


We recommend that you take this course as part of our Oracle APEX: Foundations learning path.


Welcome to the Oracle APEX Foundations course. Today in this lesson on Creating Database Application Components, I will be talking about charts. My name is Apoorva, and I am a Senior Product Manager for Oracle APEX. Let's get started. In this lesson, you will learn the different types of reports you can create within an APEX application. Later, you will also learn to create and use charts within your application. Oracle APEX supports charts based on the Oracle JavaScript Extension Toolkit, Data Visualizations, also known as Oracle JET. Oracle JET empowers developers by providing a modular open source toolkit based on modern Javascript CSS3, and HTML file design and development principles. The Oracle JET data visualization components include customization charts, gauges, and other components that you can use to present flat or hierarchical data in a graphical display of data analysis. To learn more about Oracle JET, see the Oracle JET homepage at the following URL. The screen shows the sample charts application in Oracle APEX.

Charts provide dozens of different ways to visualize a data set, including area, bar, boxplot, combination, bubble, funnel, line, line with area, pie, pyramid, range, scatter, and so on. Each Oracle JET visualization supports animation, accessibility, responsive layout, internationalization, test automation, and a range of interactivity features. We recommend that you go ahead and explore the sample charts application in your workspace. This lesson covers an example of native charts in Oracle APEX that you build using Oracle JET visualizations. You can add a chart by running a built-in wizard or creating it manually in the Page Designer. In the Page Designer, you can add a chart region to an existing page by using either of the following ways; drag the chart from the gallery in the central pane, drag the chart from the gallery menu, and drop it at the desired location. Or you can right click on 'Chart' to view a context menu and select 'Add To' and then select the desired location. The slide shows an example of an area chart and the SQL query used to generate the chart series.

Once you build a native chart, you can then use the chart attributes to format and customize the style of your charts. Let's learn how to create an area chart using the create page wizard. First, navigate to your application homepage. Here I have a demo application already created. Then click on 'Create Page', select 'Chart', select a chart type. In this example, we select Area. For Page Definition, specify a page name, and accept the remaining default. Specify your data source for the chart series. You can choose from Local database, REST Enabled SQL Service or REST Data Source. In this example, we accept the default local database, then we specify the source type.

In this example, select SQL Query. Now, enter the SQL query in the editor provided below. Expand Navigation. Specify your navigation preference. In this example, we turn off the Breadcrumb and turn on the navigation switch. We accept the remaining defaults and click on 'Next'. For column mapping, the options that display will vary depending upon the chart type selected. For an area chart, you have Orientation. This is where you can select the orientation of the chart. Selecting Vertical displays the data items of the chart vertically. For example, the bars on the bar chart will display vertically. Selecting Horizontal displays the data items of the chart horizontally. In this example, we will go ahead with vertical. For Label Column, select the column name to be used for defining the labels of the X axis on the chart. In this example, we select PRODUCT_NAME. Then for the Value Column, select the column name to be used for defining the values in this chart. In this example, select QUANTITY. Click on 'Create Page'.

Your area chart is now created. Click 'Save' and run page. Here you can see a single series area chart displayed as a page. In this example, this example shows creating a single series. To create multiple series, navigate to the Page Designer, and in the rendering tree, locate your chart series. Light click and create new series and follow the wizard instructions to create multiple series. To summarize, in this lesson, you learnt how to create and use charts within your APEX application. I hope you learnt something useful. Thank you for watching.

About the Author
Oracle University
Training Provider
Learning Paths

Oracle University, the learning and training arm of Oracle, is a leader in cloud education, providing modern digital training, certification, and learning solutions across Oracle’s entire product portfolio that enable our customers to master their Oracle Cloud solutions and maximize their investments. Over 2 million certified professionals worldwide have placed their trust Oracle University to reach their learning goals. Learn about Oracle University.

Covered Topics