10.3 Creating Charts

App Builder includes built-in wizards for generating charts.

Topics:

See Also:

Managing Legacy Charts

10.3.1 About Supported Charts

App Builder supports two types of charts:

  • Chart - Chart support in Oracle Application Express is based on the Oracle JavaScript Extension Toolkit (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..

See Also:

"Working with Data Visualizations" in JavaScript Extension Toolkit (JET) Developing Applications with Oracle JET.

  • 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.

See Also:

"Managing Legacy Charts" and "Upgrading an Application to Include New Components"

10.3.2 Sample Charts

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

Description of GUID-D2F0935D-7EDB-47B6-90C1-F59E7961D3C1-default.png follows
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.

See Also:

"Installing a Packaged Application" for more information on installing the Sample Charts application

10.3.3 Adding a Chart to a New Page

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.

  4. For Create a Page:

    1. User Interface - Select a user interface for the page.

    2. Select a page type - Select Chart.

    3. Click Next.

  5. For Chart Type:

    1. Chart Type - Select a chart type.

      Tip:

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

    2. Click Next.

  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.

      To learn more, see field-level Help. See "Viewing Field-Level Help."

    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 if the chart source is a table or SQL query.

    If the Chart source is table:

    1. Source Type - Select Table.

    2. Table/View Owner - Select the owner of the table on which you are building a 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 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 will vary depending upon the chart type selected.

      To learn more about an attribute, see field-level Help. See "Viewing Field-Level Help."

    2. Click Next.

  10. Click Create.

10.3.4 Managing Charts

Developers can create and edit chart attributes in Page Designer.

Topics:

See Also:

"Viewing a Page in Page Designer"

10.3.4.1 Adding a Chart 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. 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. Edit the required region attributes.

    View all attributes in the Property Editor, select Show All.

    Tip:

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

  6. Edit the chart attributes:

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

      The Property Editor displays Attributes.

    2. Edit the required chart attributes.

  7. 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.

  8. Edit the axes:

    Tip:

    The Axes node will only be visible 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.

  9. Click Save or Save and Run Page.

10.3.4.2 Editing Chart Attributes in Page Designer

Once you have created a chart, you can alter its display by editing chart attributes in Page Designer. Oracle JET based charts cannot be maintained using the Legacy Component View.

To edit chart attributes:

  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 left pane, locate the chart in the Rendering tab.
  3. Under the chart, select the Attributes node.

    Property Editor displays chart Attributes.

  4. To view all attributes in the Property Editor, click Show All.
  5. To search for a group or an attribute, enter a keyword in the Filter Properties field.
  6. Edit the chart attributes.
  7. Click Save.

10.3.4.3 Switching Chart Type in Page Designer

Once you create a chart, you can switch its chart type by editing chart attributes.

To switch a chart type:

  1. View the page to contain the chart in Page Designer.
  2. In the Rendering tab, select the Attributes node.

    Property Editor - Attributes appears.

  3. Expand the Chart section.
  4. For Type, select the chart type you want to switch to. For example, Combination.

    To learn more about an attribute, see field-level Help.

  5. In the Rendering tab, select the Series node

    Property Editor - Series appears.

    1. Ensure all required Column Mapping columns have been defined.

      Note:

      Column mappings may differ for different chart types, so you must ensure all required column mappings are defined for the selected chart type.

    2. For Type, select the chart series type. For example, Bar Range.

      Note:

      Only certain chart types support combining different types of series on the same data plot. The Series Type attribute will only be visible for chart types combination, polar, radar, and range.

  6. Click Save or Save and Run Page.

10.3.4.4 Enabling Automatic Refresh

Charts can monitor information by enabling the Automatic Refresh attribute on the Chart attributes page, or using a dynamic action with the Refresh action.

Topics:

10.3.4.4.1 Enabling the Automatic Refresh Attribute

Enabling the Automatic Refresh attribute updates the chart to reflect changes in the underlying data within a specified time interval.

To enable automatic refresh updates:

  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 attributes display in the Property Editor.
  3. To view all attributes in the Property Editor, click Show All .
  4. Locate Automatic Refresh.

    Tip:

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  5. For Automatic Refresh, select Yes.
  6. Click Save .

10.3.4.4.2 Creating a Refresh Dynamic Action in Page Designer

To create a Refresh dynamic action:

  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. Click the Dynamic Actions tab in the left pane.
  3. Under Dynamic Actions, right-click Events and select Create Dynamic Action.

    Attributes for the dynamic action display in the Property Editor.

    Tip:

    The Messages tab displays a red or yellow badge to identify messages you need to address. Selecting a message displays the associated attribute in the Property Editor. You must address red error message before you can save.

  4. In the Property Editor, edit the following Dynamic Action attributes:

    Tip:

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

    1. Identification, Name - Enter a name of the dynamic action.

    2. Execution Options, Sequence - Specify the sequence for this component. The sequence determines the order of evaluation.

    3. When, Event - Specify the event that causes the dynamic action to fire.

    4. When, Selection Type - Select the type of page element or construct to be used to trigger the event. For examples, select the attribute in the Property Editor and click the Help tab in the center pane.

  5. In the Rendering tab, select the first action under True:

    1. Action - Select Refresh.

    2. Selection Type - Select Region.

    3. Region - Select the region containing the chart.

  6. Click Save.

10.3.5 Using Custom JavaScript with Charts

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

To use 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 attributes display in the Property Editor.
  3. To view all attributes in the Property Editor, click Show All .
  4. Locate 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).

See Also:

"Adding a Legacy Chart to a New Page"