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. "
Legacy charts in Oracle Application Express are based on the AnyChart HTML5 Chart Component and the AnyChart Flash Chart Component.
Topics:
HTML5 chart and Flash chart 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.
Topics:
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.
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.
This section describes the supported syntax for creating charts in App Builder.
Topics:
You define a chart in App Builder using a wizard. For most chart wizards, 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
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
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 ...
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 ...
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 ...
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 ...
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
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.
See Also:
This section describes how to create and edit charts in Page Designer.
Topics:
Once you have created a chart, you can alter its display by editing chart attributes in Page Designer.
Note:
The deprecated chart type SVG cannot be edited using Page Designer.
To edit chart attributes:
Note:
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:
SVG, Flash, 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.
Topics:
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:
Developers can create and manage charts in Component View.
Topics:
See Also:
Managing Pages in Legacy Component ViewOnce 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:
Once you have created a chart, you can alter its display by editing chart attributes on the Chart Attributes page.
To access the Chart Attributes page:
See Also:
SVG, Flash, 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 updates the chart to reflect changes in the underlying data within a specified time interval.
To enable asynchronous updates:
To create a Refresh dynamic action:
Previous releases of Oracle Application Express supported the creation of SVG charts. Although existing SVG charts are still supported, Oracle Application Express no longer supports the creation of new SVG charts.
Tip:
You can only edit SVG charts in Component View.
Topics:
This section describes restrictions that apply when upgrading SVG charts to HTML5 and also describes the instructions for upgrading.
You can automatically upgrade single or multiple SVG charts to HTML5.
Topics:
SVG charts can be upgraded with the following restrictions:
Only number formats defined in axis format strings are migrated. Date and time formats are ignored.
Number format elements containing the following are migrated:
0,9,D,G,, (comma),. (period),$,C,L,FM
The label for each series in the HTML5 chart is derived from each series' column alias. This differs from SVG charts, where the label for each series is derived from the Series Name attribute.
In SVG charts, only the labels for the first series are used for the x-axis. In HTML5 charts, this has been enhanced so that all data appears, even if the data's label does not occur in the first series.
To upgrade an SVG chart to HTML5:
When you create a SVG chart, Oracle Application Express renders it based on cascading style sheet (CSS) classes associated with the current theme. You can change the appearance of a chart by referencing another CSS or by overriding individual classes in the CSS section of the Edit Attributes page
The following sample contains the CSS classes for the dial chart in Sample Application. This example contains all the available CSS classes. Class names appear in boldface.
text{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;} tspan{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;} text.title{font-weight:bold;font-size:14;fill:#000000;} text.moredatafound{font-size:12;} rect.legend{fill:#EEEEEE;stroke:#000000;stroke-width:1;} text.legend{font-size:10;} #background{fill:#FFFFFF;stroke:none;} rect.chartholderbackground{fill:#ffffff;stroke:#000000;stroke-width:1;} #timestamp{text-anchor:start;font-size:9;} text.tic{stroke:none;fill:#000000;font-size:12} line.tic{stroke:#000000;stroke-width:1px;fill:none;} #dial{stroke:#336699;stroke-width:2px;fill:#336699;fill-opacity:.5;} #dial.alert{fill:#FF0000;fill-opacity:.5;} #dialbackground{stroke:#000000;stroke-width:none;fill:none;filter:url(#MyFilter);} #dialcenter{stroke:none;fill:#111111;filter:url(#MyFilter);} #dialbackground-border{stroke:#DDDDDD;stroke-width:2px;fill:none;filter:url (#MyFilter);}#low{stroke-width:3;stroke:#336699;} #high{stroke-width:3;stroke:#FF0000;} #XAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;} #YAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;writing-mode:tb;} .XAxisValue{font-size:8;fill:#000000;} .YAxisValue{font-size:8;fill:#000000;text-anchor:end;} .nodatafound{stroke:#000000;stroke-width:1;font-size:12;} .AxisLine{stroke:#000000;stroke-width:2;fill:#FFFFFF;} .GridLine{stroke:#000000;stroke-width:0.3;stroke-dasharray:2,4;fill:none;} g.dataholder rect{stroke:#000000;stroke-width:0.5;} .legenditem rect{stroke:#000000;stroke-width:0.5;}
Table 24-15 describes all supported CSS classes. Note that certain classes only apply to specific chart types.
Table 24-15 Available SVG Chart CSS Classes
Class | Description |
---|---|
|
Defines the appearance of text that displays in a chart. |
|
Defines the appearance of text that displays in a chart. |
|
Overrides the default chart text. Use this class for title text. |
|
Defines the appearance of more datafound text. |
|
Creates the rectangular box that holds the chart legend. To remove the legend border, change rect.legend{fill:#CCCC99;stroke:none;} |
|
Defines the text that appears in the chart legend. |
|
Creates the entire background for the SVG plug-in. For a solid white background with no border, change #background{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;} |
|
Not applicable to pie and dial charts. Creates the background of the rectangle that holds the chart data. For a clear background, change rect.chartholderbackground(display:none;) |
|
Only applicable if the Asynchronous Update chart attribute is set to Yes. Controls the appearance of the update timestamp test. To disable the display of the timestamp, use defines "#timestamp{display:none;}" See Also: "Enabling Asynchronous Updates" |
|
Dial charts only. Defines the numbers on a dial chart. |
|
Dial charts only. Defines the graduation mark that displays directly beneath the number on a dial chart. |
|
Dial charts only. Defines the value that displays on the dial chart. |
|
Dial charts only. Defines a value (called an alert value) that renders in a dial chart using a different display. |
|
Dial charts only. Creates the background of a dial chart. |
|
Dial charts only. Creates the center of the dial on a dial chart. |
|
Dial charts only. Works with |
|
Dial charts only. Defines the historical low watermark of the data being displayed on a chart. |
|
Dial charts only. Defines the historical high watermark of the data being displayed on a chart. |
|
Defines the title that appears on the x-axis |
|
Defines the title that appears on the y-axis. |
|
Defines the value that appears on the x-axis. |
|
Defines the value that appears on the y-axis. |
|
Similar to the axis value. |
|
Defines the text element that displays if no information is available. |
|
Indicates zero on charts that have negative values. |
. |
Creates the horizontal and vertical lines on the chart. |
|
Applies a blanket style to all data that displays in the chart. |
|
Applies a blanket style to all rectangular items in the legend. |
You can reference a custom cascading style sheet for a chart using the CSS section of the Chart Attributes page. When you reference an external CSS, you can reference it entirely or simply override specific styles.
To reference a custom chart CSS:
You can override specific styles within the default CSS, using the Custom CSS, Inline attribute on the Chart Attributes page.
To override specific styles within the default CSS:
Previous releases of Oracle Application Express supported the creation of HTML charts. Although existing HTML charts are still supported, Oracle Application Express no longer supports the creation of new HTML charts with the Create wizards. A new HTML chart region type plug-in is available for download from OTN. This plug-in enables users to create HTML chart regions in their applications.
Topics:
See Also:
"Region Type Plug-ins, HTML Chart at:
http://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-plug-ins-182042.html#region
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.
There are additional chart settings that cannot be controlled using the standard attributes on the Chart attributes page. To further control the look and feel of a chart, you can use custom XML.
To use custom XML:
Tip:
For more information on supported chart XML formats, see the Online XML Reference at: