Managing Legacy Charts

Legacy charts in Oracle Application Express are based on the AnyChart HTML5 Chart Component and the AnyChart Flash Chart Component.

Tip:

AnyChart charts are legacy application components. Although Oracle still supports legacy components, Oracle recommends creating new charts based on Oracle JET charts. See "Creating Charts. "

• About Chart Legacy Types
  HTML5 charts and Flash charts support in Oracle Application Express is based on the AnyChart HTML5 Chart Component and AnyChart Flash Chart Component. AnyChart is a flexible Flash and JavaScript-based solution that enables developers to create animated, compact, interactive charts.
• Creating SQL Queries for Legacy Charts
  Use the following syntax when creating legacy charts.
• Adding a Legacy Chart to a New Page
  Add a legacy chart to a new page using the Create Page Wizard.
• Adding a Legacy Chart in Page Designer
  Add a legacy chart to an existing page in Page Designer.
• Editing Legacy Charts
  Edit legacy charts in Page Designer.
• About Saving Flash Charts
  You can add support to save Flash charts locally.
• Using Custom XML with Flash and HTML5 Charts
  Further customize the look and feel of a legacy chart by adding custom XML.

About Chart Legacy Types

HTML5 charts and Flash charts support in Oracle Application Express is based on the AnyChart HTML5 Chart Component and AnyChart Flash Chart Component. AnyChart is a flexible Flash and JavaScript-based solution that enables developers to create animated, compact, interactive charts.

• About Legacy HTML5 Charts
  
• About Legacy Flash Charts
  

About Legacy HTML5 Charts

HTML5 chart support in Oracle Application Express is based on the AnyChart HTML5 Chart Component. HTML5 charts use a JavaScript chart engine, rendering the chart in SVG format. Flash cannot be rendered on most of the modern mobile devices, however you can now take advantage of our new HTML5 charting solution to incorporate charts in your mobile applications. HTML5 charts are compatible with popular browsers for the following mobile platforms:

• Android: Versions 3.1, 3.2, 4.0, 4.0.3, and 4.1

• IOS (iPhone, iPad, iPod Touch): Safari 3.2 and higher is required

Tip:

To learn more, see http://6.anychart.com/products/anychart/docs.

About Legacy Flash Charts

Flash chart support in Oracle Application Express is based on the AnyChart Flash Chart Component. Flash charts are rendered by a browser and require Flash player 9 or later. With AnyChart 6.0, Flash charts are rendered using the FLASH_PREFERRED rendering type. If Flash Player is not available on the device displaying the chart (for example, pages displayed on an iPhone), AnyChart automatically switches to the HTML5 chart engine and displays an SVG-based chart.

Creating SQL Queries for Legacy Charts

Use the following syntax when creating legacy charts.

• Legacy Chart Syntax
  
• Dial Chart Syntax (Flash and HTML5)
  
• Legacy Multiple Series Syntax (Flash and HTML5)
  
• Legacy Range Chart Syntax (Flash and HTML5)
  
• Legacy Scatter Chart Syntax (Flash and HTML5)
  
• Legacy Candlestick Chart Syntax (Flash and HTML5)
  
• Legacy Gantt Chart Syntax (Flash Only)
  

Legacy Chart Syntax

When define a chart, you select a chart type and provide a SQL query using the following syntax:

SELECT link, label, value
FROM   ...

Where:

• link is a URL.

• label is the text that displays in the bar.

• value is the numeric column that defines the bar size.

For example:

SELECT null, last_name, salary
FROM   employees
WHERE  DEPARTMENT_ID = :P101_DEPARTMENT_ID

Dial Chart Syntax (Flash and HTML5)

To create a dial chart, select a dial chart type and provide a SQL query using the following syntax:

SELECT value , maximum_value [ ,low_value [ ,high_value] ]
FROM   ...

Where:

• value is the starting point on the dial.

• maximum_value is the possible highest point on the dial.

• low_value and high_value are the historical low and high values.

For example:

SELECT dbms_random.value(500, 1200), 1300, dbms_random.value(100, 200)
FROM DUAL

Legacy Multiple Series Syntax (Flash and HTML5)

For column charts and line charts, you can define multiple series in one SQL query. The series names for these chart types are derived from the corresponding column aliases in the query. To define a multiple series chart, use the following syntax:

SELECT link, label, series_1_value [, series_2_value [, ...]]
FROM   ...

Legacy Range Chart Syntax (Flash and HTML5)

Range charts require two values for each bar. To create a range chart, create a chart and provide a SQL query using the following syntax:

SELECT link, label, low_value, high_value 
FROM   ...

Legacy Scatter Chart Syntax (Flash and HTML5)

Legacy scatter charts require an x value and y value for each point. To create a range chart, create a chart and provide a SQL query using the following syntax:

SELECT link, label, x_value, y_value 
FROM   ...

Legacy Candlestick Chart Syntax (Flash and HTML5)

Legacy candlestick charts require open, low, high, and close values for each candlestick. To create a candlestick chart, create a chart and provide a SQL query using the following syntax:

SELECT link, label, open, low, high, close
FROM   ...

Legacy Gantt Chart Syntax (Flash Only)

Project Gantt charts require a task name, task id, parent task id, actual start date, actual_end_date, and progress value for each task. Two optional values for planned start date and planned end date can also be used. To create a Project Gantt chart, create a Flash chart and provide a SQL query using the following syntax:

SELECT link, task_name, task_id, parent_task_id, actual_start_date, actual_end_date, progress
FROM   ...

Resource Gantt charts require a resource id, resource name, parent resource id, actual start date, and actual end date value for each task. To create a Resource Gantt chart, create a Flash chart and provide a SQL query using the following syntax:

SELECT link, resource_id, resource_name, resource_parent_id, actual_start_date, actual_end_date
FROM   ...

To represent parent-child hierarchical data on a Resource Gantt chart, provide a SQL query using START WITH..CONNECT BY syntax:

SELECT link,
           resource_id,
           resource_name,
           resource_parent_id,
           actual_start_date,
           actual_end_date,
FROM ...
START WITH resource_parent_id IS NULL
CONNECT BY PRIOR resource_id = resource_parent_id
ORDER SIBLINGS BY resource_name

Adding a Legacy Chart to a New Page

Add a legacy chart to a new page using the Create Page Wizard.

To add a chart on a new page:

Note:

Legacy AnyChart Charts are legacy application components. Although Oracle still supports legacy components, Oracle recommends creating new charts based on Oracle JET Data Visualizations instead.

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 (optional).
      This attribute only displays for applications using older themes and for which Desktop and Mobile User Interfaces have been defined.
   2. Page Type - Select Legacy Page and then AnyChart Chart.

      Tip:

      Component pages provides page-level functionality and can be added multiple times within a given application such as reports, forms, charts, or calendars. Feature pages provide application-level functionality and can only be added once per application.

5. For Chart Type:
   1. Chart Rendering - Select a chart type.
      To learn more about an attribute, see field-level Help.
   2. Chart Type - Specify a chart type. Depending upon the chart type, you may be prompted to make additional selections.
   3. Click Next.
6. For Chart Type - Select a chart type and click Next.
7. For Page and Region Attributes:
   1. Page Number - Enter a page number on which the chart is to be created.
   2. Page Name - Enter a page name.
   3. Page Mode - Select a page mode.

      To learn more, see field-level Help.

   4. Breadcrumb - Select whether to use a breadcrumb navigation control on your page, and which breadcrumb navigation control you want to use.
   5. Click Next.
8. 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.
9. For Chart Attributes, specify the appropriate attributes.

   Tip:

   The attributes that appear depend upon the chart type. To learn more about an attribute, see field-level Help.

10. For Source:

    Enter the query that will return the data to display the chart. Depending on the chart type, the required query format is different.

    1. Enter SQL Query or PL/SQL function returning a SQL Query - Specify the SQL query that will populate your chart. For examples, see see field-level Help.
    2. Specify a query by either:

       • Entering a SQL query in the field provided.

       • Clicking the Build Query button. When the Build Chart Query Wizard appears, follow the on-screen instructions.

    3. Perform Query validation/Save query without validation - Specify whether or not to validate the chart query. Queries should be validated whenever possible. However when referring to items in your session, this may not possible until running the page, in this case chose to save without validation.
    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. When No Data Found Message - Enter the text you want to use if the query does not return any rows.
    7. Specify relevant chart attributes.

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

11. Click Create.

See Also:

• "About Chart Legacy Types"

• "Creating SQL Queries for Legacy Charts"

Adding a Legacy Chart in Page Designer

Add a legacy chart to an existing page in Page Designer.

To add a legacy chart in Page Designer:

1. View the page to contain the chart in Page Designer.
2. In the Gallery click the Gallery menu and select Show Legacy Components.
3. In the Gallery, right-click Chart - AnyChart [Legacy], select Add To, and select the appropriate location.

   Tip:

   In the Gallery, you can also select Chart - AnyChart [Legacy] with the mouse and drag it to the appropriate location in the Layout tab.

   Page Designer indicates what actions are required next.

   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.

4. Edit the chart.
   Charts have three types of attributes: Region attributes, chart Attributes, and Series attributes.
   Attributes are organized into groups. To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

5. Edit the region attributes.
   1. In the Rendering tab, locate and select the chart.
      The Property Editor displays the chart region attributes
   2. Under Identification, edit the Title.
   3. Review and edit the other attributes.
6. Edit the chart Attributes.
   1. In the Rendering tab, locate the chart and select the Attributes node.
   2. Review and edit the attributes.
7. Edit the Series:
   1. In the Rendering tab, select the Series node.
   2. Edit the attributes under Source.
   3. Review and edit the other attributes.
8. Click Save.

See Also:

"Viewing a Page in Page Designer."

Editing Legacy Charts

Edit legacy charts in Page Designer.

• Editing Chart Attributes
  
• Switching an HTML5 Chart to a Flash Chart
  
• Enabling Asynchronous Updates
  

Editing Chart Attributes

To edit chart attributes:

1. View the page containing the calendar 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.

   Charts have three types of attributes: Region attributes, chart Attributes, and Series attributes. In the Property Editor, attributes are organized into groups. To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

2. To edit the region attributes.
   1. In the Rendering tab, locate and select the chart.
      The Property Editor displays the chart region attributes
   2. Review and edit the region attributes in the Property Editor.
3. To edit the chart Attributes.
   1. In the Rendering tab, locate the chart and select the Attributes node.
   2. Review and edit the chart Attributes in the Property Editor.
4. To edit the Series:
   1. In the Rendering tab, select the Series node.
   2. Review and edit the Series attributes in the Property Editor.
5. Click Save.

Note:

"Viewing a Page in Page Designer"

Switching an HTML5 Chart to a Flash Chart

Once you create an HTML5 chart, you can switch its rendering to Flash by editing chart attributes on the Chart Attributes page.

To switch an HTML5 chart to a Flash Chart:

1. View the page in Page Designer.
2. Edit the chart Attributes.
   1. In the Rendering tab, locate the chart and select the Attributes node.
   2. Review and edit the attributes.
   Attributes are organized into groups. To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

3. Find Appearance.
4. For Rendering, select Flash Chart.
5. Click Save.

See Also:

• "Viewing a Page in Page Designer"

• "Viewing Field-Level Help"

Enabling Asynchronous Updates

Flash and and HTML5 charts can monitor information by enabling the Asynchronous Update attribute on the Chart attributes page, or using a dynamic action with the Refresh action.

• Enabling the Asynchronous Update Attribute
  
• Creating a Refresh Dynamic Action in Page Designer
  

Enabling the Asynchronous Update Attribute

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

To enable asynchronous updates:

1. View the page in Page Designer.
2. In the Rendering tab, locate the chart and select the Attributes node.
   Attributes are organized into groups. To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

3. Find the Automatic Refresh group:
   1. For Automatic Refresh, select Yes..
   2. For Interval, specify the refresh interval, in seconds.
4. Click Save.

Note:

"Viewing a Page in Page Designer"

Creating a Refresh Dynamic Action in Page Designer

To create a Refresh dynamic action:

1. View the page in Page Designer.
2. Click the Dynamic Actions tab in the left pane.
3. Under Dynamic Actions, right-click Events and select Create Dynamic Action.

   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.

   Attributes in Page Designer are organized into groups. To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

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

   Tip:

   To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the central 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 execution.
   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 of using a specific selection type, see Help on the associated attribute.
   Next, define the action that to be performed if the event evaluates to True.
5. In the Rendering tab, select the first action under True. In the Property Editor, edit the following Action attributes:
   1. Identification, Action - Select Refresh.
   2. Affected Elements, Selection Type - Select Region.
   3. Affected Elements, Region - Select the region containing the chart.
6. Click Save.

Note:

"Viewing a Page in Page Designer"

About Saving Flash Charts

You can add support to save Flash charts locally.

To support the saving of an image, AnyChart requires the use of a server-side script that resides on http://www.anychart.com. When you attempt to save an image, the data is sent to the server in Base64 encoding. It is then decoded on the server and the decoded response is returned.

If you want to support the saving of charts locally, you must host the decoding script on your local server. The Flash chart would also require you use of the AnyChart JavaScript function getPNG. By default, the chart region uses embedded HTML tags and does not use any AnyChart JavaScript calls. To make use of the AnyChart JavaScript call, you must modify the region source of your Flash charts.

See Also:

"Saving chart as image or vector file" in AnyChart User's Guide for more information on adding support to save Flash charts locally.

Using Custom XML with Flash and HTML5 Charts

Further customize the look and feel of a legacy chart by adding custom XML.

To use customize XML to control the look and feel of a legacy chart:

1. View the page in Page Designer.
2. In the Rendering tab, locate the chart and select the Attributes node.
   Attributes are organized into groups. To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

3. Find Custom XML:
   1. Custom - Select Yes.
   2. XML - Enter the custom Chart XML for this chart. Please refer to the AnyChart XML Reference for further details:
4. Click Save.

Tip:

For more information on supported chart XML formats, see the AnyChart XML Reference at:

http://6.anychart.com/products/anychart/docs/