26.2 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.
Parent topic: Managing Application Legacy Components
26.2.1 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.
26.2.1.1 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.
Parent topic: About Chart Legacy Types
26.2.1.2 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.
Parent topic: About Chart Legacy Types
26.2.2 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)
Parent topic: Managing Legacy Charts
26.2.2.1 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
Parent topic: Creating SQL Queries for Legacy Charts
26.2.2.2 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
andhigh_value
are the historical low and high values.
For example:
SELECT dbms_random.value(500, 1200), 1300, dbms_random.value(100, 200) FROM DUAL
Parent topic: Creating SQL Queries for Legacy Charts
26.2.2.3 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 ...
Parent topic: Creating SQL Queries for Legacy Charts
26.2.2.4 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 ...
Parent topic: Creating SQL Queries for Legacy Charts
26.2.2.5 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 ...
Parent topic: Creating SQL Queries for Legacy Charts
26.2.2.6 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 ...
Parent topic: Creating SQL Queries for Legacy Charts
26.2.2.7 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
Parent topic: Creating SQL Queries for Legacy Charts
26.2.3 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.
Parent topic: Managing Legacy Charts
26.2.4 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:
See Also:
Parent topic: Managing Legacy Charts
26.2.5 Editing Legacy Charts
Edit legacy charts in Page Designer.
Parent topic: Managing Legacy Charts
26.2.5.2 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:
See Also:
Parent topic: Editing Legacy Charts
26.2.5.3 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.
Parent topic: Editing Legacy Charts
26.2.5.3.1 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:
Note:
Parent topic: Enabling Asynchronous Updates
26.2.5.3.2 Creating a Refresh Dynamic Action in Page Designer
Parent topic: Enabling Asynchronous Updates
26.2.6 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.
Parent topic: Managing Legacy Charts
26.2.7 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:
Tip:
For more information on supported chart XML formats, see the AnyChart XML Reference at:
Parent topic: Managing Legacy Charts