11.5 Creating Charts

App Builder supports two types of charts: Charts (based on the Oracle JavaScript Extension Toolkit (Oracle JET) Data Visualizations) and AnyChart Charts.

App Builder supports the following charts:

• Chart - Chart support in Oracle Application Express is based on the Oracle JET Data Visualizations. Oracle JET empowers developers by providing a modular open source toolkit based on modern JavaScript, CSS3, and HTML5 design and development principles. The Oracle JET data visualization components include customizable charts, gauges, and other components that you can use to present flat or hierarchical data in a graphical display for data analysis. Each Oracle JET visualization supports animation, accessibility, responsive layout, internationalization, test automation, and a range of inter activity features. The charts provide dozens of different ways to visualize a data set, including bar, line, area, range, combination, scatter, bubble, polar, radar, pie, donut, funnel, and stock charts..

• AnyChart Chart - AnyChart chart support is based on a third party charting solution provided by AnyChart. This is a flexible Flash and JavaScript (HTML5) based solution that enables developers to create animated and compact interactive charts. AnyChart charts have been categorized as a legacy component and may be deprecated in the future release.

Developers can view chart examples by installing the Sample Charts sample application.

The following is a sample chart from Sample Charts sample application.

Description of the illustration GUID-D2F0935D-7EDB-47B6-90C1-F59E7961D3C1-default.png

The chart includes the following attributes:

• Extra Y axis - Displays the title Y2 Axis Title, and associated with Shop C series of data.

• Split Dual Y Axis - Displays two series of data, Store A and Acme Store, stacked and associated with the Y axis, and the third series of data, Shop C, associated with an extra Y axis and rendered as a separate chart below the other two series of data.

Expand the Bar Chart Information region at the bottom of the page to view information on the chart.

Add a chart to a new page by running the Create Page Wizard.

To add a chart on a new page:

1. On the Workspace home page, click the App Builder icon.
2. Select an application.
3. Click Create Page.
   The Create Page Wizard appears.
4. For Create a Page:
   1. (Optional) User Interface - Select a user interface for the page.
   2. Select a page type - Select Chart.
5. For Chart Type, select a chart type.

   Note:

   If you select Gantt, you are prompted to select a Gantt chart type.

6. For Page and Region Attributes:
   1. Page Number - Enter a page in which the chart object is to appear.
   2. Page Name - Enter a page name.
   3. Page Mode - Select a page mode.

      • Normal - The page displays as a normal Application Express application page.

      • Modal Dialog - The page displays as a modal dialog. A modal dialog is an overlay window which remains active and focused until the end user closes it. The underlying page is grayed out which prevents the end user from interacting with the rest of the page until the dialog closes.

   4. Breadcrumb - Select whether you want to use a breadcrumb navigation control on your page.
   5. Click Next.
7. For Navigation Preference, specify the type of navigation to include on this page and click Next. The navigation options (for example, navigation menu or tabs) depends upon the current application theme.

   Tip:

   The steps that follow assume you selected an Oracle JET chart. If you select a non-Oracle JET chart (for example, Gantt) the steps that follow may differ. Follow the on-screen instructions.

8. For Source, do one of the following:

   • If the Chart source is a Table:

     1. Source Type - Select Table.

     2. Table/View Owner - Select the owner of the table on which you are building the chart.

     3. Table/View Name - Select the table or view on which the chart is based.

     4. Page Items to Submit - Enter a comma separated list of page items on the current page to be set into session state when the chart data gets read with a separate request.

     5. Maximum Rows - Enter the maximum number of rows you want to use to display the chart.

     6. Click Next.

   • If the Chart source is a SQL Query:

     1. Source Type - Select SQL Query.

     2. SQL Query - Enter the SQL SELECT statement to be used for the chart. The SQL SELECT statement must include at least two columns.

     3. Page Items to Submit - Enter a comma separated list of page items on the current page to be set into session state when the chart data gets read with a separate request.

     4. Maximum Rows - Enter the maximum number of rows you want to use to display the chart.

     5. Click Next.

9. For Column Mapping:
   1. Select the columns to be mapped to the chart. The options that display vary depending upon the chart type selected. To learn more about an attribute, click the field-level Help.
   2. Click Next.
10. Click Create.

Run the Create Page Wizard to add a new page with a chart using a remote database reference.

To add a chart on a new page:

1. On the Workspace home page, click the App Builder icon.
2. Select an application.
3. Click Create Page.
   The Create Page Wizard appears.
4. For Create a Page:
   1. (Optional) User Interface - Select a user interface for the page.
      This attribute only displays for applications using older themes and for which Desktop and Mobile User Interfaces have been defined.
   2. Select a page type - Select Chart.
5. For Chart Type, select a chart type.

   Note:

   If you select Gantt, you are prompted to select a Gantt chart type.

6. For Page and Region Attributes:
   1. Page Number - Enter a page in which the chart object is to appear.
   2. Page Name - Enter a page name.
   3. Page Mode - Select a page mode.

      • Normal - The page displays as a normal Application Express application page.

      • Modal Dialog - The page displays as a modal dialog. A modal dialog is an overlay window which remains active and focused until the end user closes it. The underlying page is grayed out which prevents the end user from interacting with the rest of the page until the dialog closes.

   4. Breadcrumb - Select whether you want to use a breadcrumb navigation control on your page.
   5. Click Next.
7. For Navigation Preference, specify the type of navigation to include on this page and click Next. The navigation options (for example, navigation menu or tabs) depends upon the current application theme.

   Tip:

   The steps that follow assume you selected an Oracle JET chart. If you select a non-Oracle JET chart (for example, Gantt) the steps that follow may differ. Follow the on-screen instructions.

8. For Source, select and then configure a remote database reference:
   • For REST Enabled SQL Service:

     1. Location - Select REST Enabled SQL Service.

     2. REST Enabled SQL Service - Select a REST Enabled SQL reference.

   • For Web source:

     1. Location - Select Web Source.

     2. Web Source Module - Select a Web Source Module.

9. For Source Type, do one of the following:

   • If the Chart source is a Table:

     1. Source Type - Select Table.

     2. Table/View Owner - Select the owner of the table on which you are building the chart.

     3. Table/View Name - Select the table or view on which the chart is based.

     4. Page Items to Submit - Enter a comma separated list of page items on the current page to be set into session state when the chart data gets read with a separate request.

     5. Maximum Rows - Enter the maximum number of rows you want to use to display the chart.

     6. Click Next.

   • If the Chart source is a SQL Query:

     1. Source Type - Select SQL Query.

     2. SQL Query - Enter the SQL SELECT statement to be used for the chart. The SQL SELECT statement must include at least two columns.

     3. Page Items to Submit - Enter a comma separated list of page items on the current page to be set into session state when the chart data gets read with a separate request.

     4. Maximum Rows - Enter the maximum number of rows you want to use to display the chart.

     5. Click Next.

10. For Column Mapping:
    1. Select the columns to be mapped to the chart. The options that display vary depending upon the chart type selected. To learn more about an attribute, click the field-level Help.
    2. Click Next.
11. Click Create.

Add a chart by creating it manually in Page Designer.

To add a chart to an existing page in Page Designer:

1. View the page to contain the chart in Page Designer.
2. In the Gallery at the bottom of the central pane, click Regions and locate Chart.

   The Gallery lists all controls or components you can add to a page. Passing the cursor over a control or component displays a tooltip that describes it.

3. From the Gallery, right-click Chart to view a context menu. Select Add To and then the desired location.

   Tip:

   You can also click Chart in the Gallery and drag it to the appropriate location in the Layout tab.

   Page Designer indicates what actions are required next.

4. (Optional) Click the Messages tab in the central pane.

   The Messages tab displays a red or yellow badge indicating messages you need to address. The Message tab displays two types of messages:

   • Errors - Error messages display in red. Selecting an error message displays the associated attribute in red in the Property Editor. You must address errors before a page can be saved.

   • Warnings - Warning messages display in yellow. Selecting a warning message displays the associated attribute in yellow in the Property Editor. You must address errors before a page can be saved. Note you can save a page without addressing warning messages.

5. Do one of the following to locate the required fields highlighted in the Property Editor groups:

   • Search for the group or attribute - Enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

   • Use Go to Group - Click the Go to Group icon and select the group. To return Property Editor to the default display, click the Go to Group icon again and select Expand All.

6. Edit the required region attributes.

   Tip:

   To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

7. (Optional) Select the location of the database you want to use. Options include:
   • Local Database - Data is sourced from a local database. (This location is selected by default.)
   • Remote Database - Data is sourced from a remote database, where the connection is defined using REST Enabled SQL Reference.
   • Web Source - Data is sourced from a RESTful web service defined using Web Source Modules.
8. Edit the chart attributes:
   1. In the Rendering tab, select the Attributes node.

      The Property Editor displays Attributes.

   2. Edit the required chart attributes.
9. Edit the series:
   1. In the Rendering tab, select the Series node.

      The Property Editor displays Series.

   2. Enter the series SQL query and define its associated column mappings for the chosen chart type.
10. Edit the axes:

    Tip:

    The Axes node only displays for chart types that support axes (such as area, bar, bubble, combination, line, line with area, polar, radar, range, scatter, and stock).

    1. In the Rendering tab, select the Axis node.

       The Property Editor displays Axis.

    2. Edit the required axis attributes and define any data formatting to be applied to the axis values.
11. Click Save or Save and Run Page.

You can alter how a chart displays by editing chart attributes in Page Designer.

• Editing Chart Attributes
  
• Switching Chart Type
  
• Enabling Automatic Refresh
  

Control the look and feel of a chart by adding custom JavaScript.

1. View the page in Page Designer:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Select a page.
   Page Designer appears.
2. In the Rendering tab, locate the region containing the chart and select the Attributes node.
   The Property Editor displays attributes for the page. Attributes are organized in groups.
3. To find a group or attribute:

   • Search for the group or attribute - Enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

   • Use Go to Group - Click Go to Group and select the group. To return the default display, click Go to Group again and select Expand All.

4. Find Advanced.
5. In JavaScript Code, enter the code to customise your chart.

   For example:

   function( options ){
       // Setup a callback function which gets called 
      // when data is retrieved, it allows to manipulate the series
       options.dataFilter = function( data ) {
   
           // e.g Set the first series of chart to the colour red
           data.series[ 0 ].color = "red";
       };
       // Set chart initialization options
       // e.g. Set chart type to Line
       options.type = "line";
       return options;
   }
   

6. Click Save.

   Tip:

   For more information on supported chart options, see "ojChart" in JSDoc pages for the Oracle JavaScript Extension Toolkit (JET).