Project: Plug-ins-Plus : Interactive JET Charts Pro

Table of Contents

Introduction

Interactive JET Charts Pro is an Oracle APEX dynamic action plug-in enabling end-users to customize existing JET charts.

Allow your end-users to interact with JET charts in ways they haven't before. Let them define how chart data is visualized and save customizations for future use. With Interactive JET Charts Pro you allow your end-users to download charts as images with single click, change how charts look and maintain personalized chart reports like in an interactive report!

Features at a Glance

Download chart as an image

The plug-in can create and download a PNG image from the current state of the existing JET chart.

Compatible with 7 Oracle APEX JET charts

The plug-in supports 7 basic Oracle APEX JET charts: bar, line, area, line with area, combination, pie, and donut.

37 Customizable JET attributes

The plug-in exposes 37 (in total) JET chart attributes to be customized by the end-user by using the plug-in interface (radio buttons, checkboxes, text fields and color pickers). Attributes to customize vary depending on chart type.

Citizen development

End-users can save any customization applied to the Oracle APEX JET charts using the plug-in interface without needing any assistance from Oracle APEX application developers.

Accessible

The plug-in interface can be handled by the keyboard only.

Translatable

The plug-in interface elements such as menu entries, settings and labels can be translated using Oracle APEX globalization text messages.

Requirements

The table below describes the requirements that were used to define the plug-in’s scope.

Requirement

Interactive JET Charts

1

Export current Oracle APEX JET chart as an image.

(tick)

The plug-in converts the Oracle JET chart into a PNG image and downloads it.

2

Allow customizing Oracle APEX JET chart attributes.

(tick)

The plug-in exposes 37 (in total) JET chart attributes to be customized by the end-user.

3

Allow end-users to preserve customizations applied to Oracle APEX JET charts.

(tick)

The plug-in allows the user to save any Oracle JET chart customizations in the specified table.

4

Support translating the plug-in interface elements.

(tick)

The plug-in uses Oracle APEX Globalization Text Messages to translate labels used by the plug-in.

5

Support handling the plug-in interface with the keyboard only.

(tick)

The plug-in interface is accessible using only the keyboard.

6

Allow APEX developers to track end-users interactions with the plug-in.

(tick)

The plug-in exposes 6 events that can be handled using Oracle APEX dynamic actions

The plug-in

Interactive JET Charts Pro is a dynamic action plug-in enabling end-users to customize and define Oracle APEX JET chart reports.

Functionality

The plug-in enables customizing Oracle APEX JET charts with the plug-in interface exposing JET chart attributes.

Download

When selected, the plug-in generates a PNG image and forces the download of it.

Settings

When selected, the plug-in generates an interface allowing chart attribute customization. The customization can be done using 37 (in total) JET chart attributes. Applied customizations can be saved using Reports \ Save functionality.

Reports

The plug-in allows end-users to save customizations done to a named chart report.

Reports \ Save

When selected, the plug-in generates an interface that allows the user to save any customizations applied to a chart. The plug-in calls a save procedure (defined in the plug-in application attributes) and displays a developer-defined message on success.

Reports \ Reset

When selected, the plug-in restores chart attributes to the initial state defined by the application developer.

Reports \ Delete

When selected, the plug-in deletes the currently selected chart report. The plug-in calls a delete procedure (defined in the plug-in application attributes) and displays a developer-defined message on success.

When a chart report is not selected the delete functionality is disabled.

Reports \ Sub-menu

When selected, the plug-in displays a sub-menu with entries Save, Reset, Delete (the plug-in functionalities), and, below a separator, a list of saved reports. Selecting a saved report results in loading the saved customization to a chart.

Dynamic Action

The plug-in implements the Oracle APEX dynamic action plug-in API.

Application Attributes

Application attributes are set immediatley after installing the plug-in and can be changed in Shared Components \ Component Settings. The plug-in exposes 3 application attributes that are used to save, fetch, and delete end-user defined chart reports.

Procedure - Save chart report

An example implementation is part of the sample application supporting objects. Learn more in the Sample Application section.

The procedure saves the current changes applied to the Oracle APEX JET chart when the end-user selects the plug-in Reports \ Save functionality. The procedure must implement the following parameters and insert the plug-in data into a defined table.

Parameter

Direction

Type

Description

pi_user

IN

VARCHAR2

The current end-user username.

pi_region_id

IN

VARCHAR2

Chart region id (static id if defined).

pi_report_name

IN

VARCHAR2

The report name given by the end-user.

pi_keys

IN

VARCHAR2

A colon-separated list of JET chart attributes to be saved.

pi_values

IN

VARCHAR2

A colon-separated list of JET chart attribute values to be saved.

po_message

OUT

VARCHAR2

Message to be displayed after successfully saving a chart report.

po_status

OUT

BOOLEAN

If true, a message is displayed using apex.message.showPageSuccess. Otherwise, a message is displayed using apex.message.showErrors.

Procedure - Fetch chart reports

An example implementation is part of the sample application supporting objects. Learn more in the Sample Application section.

The procedure fetches all saved Oracle APEX JET chart reports for the current user. The procedure must implement the following parameters and select an existing chart report’s data from a defined table.

Parameter

Direction

Type

Description

pi_user

IN

VARCHAR2

The current end-user username.

pi_region_id

IN

VARCHAR2

Chart region id (static id if defined).

po_reports

OUT

VARCHAR2

A colon-separated list of the plug-in chart reports names

po_keys

OUT

VARCHAR2

A colon-separated list of the JET chart attributes to be saved.

po_values

OUT

VARCHAR2

A colon-separated list of the JET chart attribute values to be saved.

Procedure - Delete chart report

An example implementation is part of the sample application supporting objects. Learn more in the Sample Application section.

The procedure deletes the selected saved Oracle APEX JET chart report for the current user. The procedure must implement the following parameters and it deletes a existing chart report's data from a defined table.

Parameter

Direction

Type

Description

pi_user

IN

VARCHAR2

The current end-user username.

pi_region_id

IN

VARCHAR2

Chart region id (static id if defined).

pi_report_name

IN

VARCHAR2

The report name given by the end-user.

po_message

OUT

VARCHAR2

Message to be displayed after successfully deleting a chart report.

po_status

OUT

BOOLEAN

If true, a message is displayed using apex.message.showPageSuccess. Otherwise, a message is displayed using apex.message.showErrors.

Standard

Standard attributes define what APEX components will be exposed via dynamic action affected elements. The plug-in uses 2 standard attributes: For Region and Affected Element Required.

Attribute

Supported

For Item(s)

(error)

For Button

(error)

For Region

(tick)

For jQuery Selector

(error)

For JavaScript Expression

(error)

For Triggering Element

(error)

For Event Source

(error)

Affected Element Required

(tick)

Check "Fire on Initialization"

(error)

Has "Stop Execution on Error" Attribute

(error)

Has "Wait For Result" Attribute

(error)

Has "Initialization JavaScript Code" Attribute

(error)

Custom Attributes

Custom Attributes are attributes exposed for the APEX page designer. The plug-in doesn’t expose any custom attributes.

Help in the Application Builder

The plug-in attributes are exposed along with help text built into the application builder for the plug-in application components.

Example help for the Component Settings \ Procedure saving chart report

Events

The plug-in exposes six events that can be bound using Oracle APEX dynamic actions.

Events Data

The table below describes each property of the event data. Each event has access to event data using this.data. Chart Report Deleted, Chart Report Downloaded and Chart Report Saved events expose one extra property.

Property

Description

this.data.button

A jQuery reference to the button that triggers a dynamic action implementing the plug-in.

this.data.chart

A jQuery reference to the JET chart DOM element (having class .oj-chart).

this.data.current

The name of the current chart report. If none is selected then property current equals undefined.

this.data.region

Result of the apex.region function executed in the context of dynamic action's affected elements (region).

this.data.regionId

A static or dynamic id of the APEX region containing the JET chart.

this.data.reports

An array of objects describing the end-users saved chart reports.

Each chart report has 2 properties: name and settings.

this.data.uniqueId

The unique jQuery id that is used to identify all DOM elements created by the plug-in. The plug-in elements have the data-id attribute with a value set to a unique id.

this.data.deleted

The name of the deleted report.

Available only for event Chart Report Deleted

this.data.base64

A base64 string of the downloaded png image.

Available only for event Chart Report Downloaded

this.data.saved

The name of the saved report.

Available only for event Chart Report Saved

Chart Plug-in Ready

If the dynamic action implementing the plug-in has the Fire On Initialization attribute set to Yes then the event is triggered after page loads and the chart is rendered. Otherwise, the plug-in fires the event after the end-user clicks on the button triggering the dynamic action implementing the plug-in. The event is triggered once.

Chart Report Changed

The event is triggered each time the plug-in chart report is selected. The event is also triggered along with save and delete functionality of the plug-in. If chart customization is saved as the Primary report then the event is also triggered on plug-in initialization.

Chart Report Deleted

The event is triggered when the plug-in saved chart report is deleted.

Chart Report Downloaded

The event is triggered when end-users download the image of the JET chart.

Chart Report Reset

The event is triggered when the plug-in restores the initial settings of the JET chart defined by the application developer.

Chart Report Saved

The event is triggered when the end-user saves the plug-in chart report.

Supported Oracle APEX JET charts

The plug-in supports 7 basic chart types.

Chart type

Description

Supported

Area

Area charts are useful for comparing trends of cumulative values over time, such as breakdowns of sales trends.

(tick)

Bar

Bar charts are useful for comparing values across categories, or over time.

(tick)

Box Plot

Box plot charts are useful for analyzing the distribution of data, displaying the minimum, quartiles, median, and maximum values of groups of numerical data. Box plots are also called Box and Whisker diagrams.

(error)

Bubble

Bubble charts define data items using x, y, and z values, making them useful for viewing relationships between 3 dimensions. The third dimension is represented by the size of the bubble.

(error)

Combination

Combination charts allow bar, line, and area series to be displayed on the same chart. The most common use case is lines with bars or lines with stacked bars.

(tick)

Status Meter Gauge

Status Meter gauges are used to display a metric value in relation to the minimum and maximum possible values for that metric.

(error)

Donut

Donut charts are a pie chart with a hole in the middle. They are useful for visualizing parts of a whole.

(tick)

Funnel

Funnel charts are useful for viewing data for stages of a process, such as the stages of a sales process. The area of a funnel slice is proportional to the value for the corresponding stage.

(error)

Gantt

Gantt charts are useful for displaying project schedules, displaying bars that indicate the start and end date of tasks.

(error)

Line

Line charts are useful for visualizing trends in a set of values over time and comparing these values across series.

(tick)

Line with Area

Line with Area charts are the same as line charts, with the area below each line filled in.

(tick)

Pie

Pie charts are useful for visualizing parts of a whole.

(tick)

Polar

Polar charts have a radial y-axis and a tangential x-axis. Polar charts can be rendered as bar, line, area, combination, scatter, or bubble chart series types.

(error)

Pyramid

Pyramid charts are useful for visualizing hierarchical, proportional and foundation-based relationships, process steps, organizational layers or topics interconnections. The area of a pyramid slice is proportional to its value for the corresponding stage.

(error)

Radar

Radar charts are polar charts with a polygonal grid shape, rather than a circle surround. They are supported for line and area chart series types.

(error)

Range

Range charts display maximum and minimum (high / low) values for each entry, using either bars or area.

(error)

Scatter

Scatter charts define data items using x and y values, making them useful for viewing relationships between 2 dimensions.

(error)

Stock

Stock charts are useful for displaying information about a stock on a time axis. Unique to stock charts is the candlestick Stock Render As property, which allows for displaying open, close, high, low information for the stock price.

(error)

Oracle JET chart attributes supported by the plug-in

The table below presents which Oracle APEX JET chart attributes can be customized using the plug-in. The JET chart attributes are grouped into 7 groups and can be customized using the plug-in interface.

General

Property

Bar

Line

Line with Area

Area

Combination

Pie

Donut

Label position

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

Orientation

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Sorting

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

Stack

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Stack Label

(tick)

(error)

(error)

(error)

(tick)

(error)

(error)

Type

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Legend

Property

Bar

Line

Line with Area

Area

Combination

Pie

Donut

Legend position

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

Legend rendered

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

Legend title

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

X-axis

Property

Bar

Line

Line with Area

Area

Combination

Pie

Donut

Major tick line color

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Major tick line style

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Major tick line width

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Render major tick

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

X axis title

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

X axis visibility

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Y-axis

Property

Bar

Line

Line with Area

Area

Combination

Pie

Donut

Major tick line color

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Major tick line style

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Major tick line width

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Render major tick

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Y axis title

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Y axis visibility

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Pie

Property

Bar

Line

Line with Area

Area

Combination

Pie

Donut

3D effect

(error)

(error)

(error)

(error)

(error)

(tick)

(tick)

Inner radius

(error)

(error)

(error)

(error)

(error)

(tick)

(tick)

Other color

(error)

(error)

(error)

(error)

(error)

(tick)

(tick)

Other threshold

(error)

(error)

(error)

(error)

(error)

(tick)

(tick)

Selection effect

(error)

(error)

(error)

(error)

(error)

(tick)

(tick)

Series customization

Property

Bar

Line

Line with Area

Area

Combination

Pie

Donut

All Series visibility             

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

Line style              

(error)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Line type             

(error)

(tick)

(tick)

(tick)

(error)

(error)

Marker Shape              

(error)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Marker visible              

(error)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Series color             

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

Series label position              

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

(tick)

Series type              

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Slice explode

(error)

(error)

(error)

(error)

(error)

(tick)

(tick)

Zoom and Scroll

Property

Bar

Line

Line with Area

Area

Combination

Pie

Donut

Zoom and scroll

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Zoom overview

(tick)

(tick)

(tick)

(tick)

(tick)

(error)

(error)

Saving, fetching and deleting chart reports

The plug-in requires 3 procedures and 1 table to be successfully implemented in an Oracle APEX application. Procedure APIs are described in The plug-in \ Dynamic Action \ Attributes \ Application Attributes section. These procedures are used to save, fetch, and delete chart reports in/from the specified table.

Chart report

The chart report is the plug-in concept to store changes made with the plug-in to the Oracle APEX JET chart. The table below describes the information needed to successfully save a chart report.

Property

Description

Example

Username

To distinguish between user’s reports

bostrowski

Chart id

To identify an Oracle APEX chart region

Using the static id is recommended if chart reports should be transferable between different environments.

bar

report name

To identify a chart report

Example report

The JET chart attribute path

Oracle JET chart attribute path that has been customized.

legend.rendered

The JET chart attribute value

Oracle JET chart attribute value that been customized.

on

Procedures

The procedures are executed by the plug-in PL/SQL API when the end-user invokes the Reports \ Save and Reports \ Delete actions or on page load to fetch saved reports. These procedures accept arguments describing the chart report and must be implemented by the APEX developer when the plug-in is installed for the first time.

The example PL/SQL code for saving, fetching, and deleting chart reports is part of the sample application and can be previewed in the UC_JET_CHART_API package.

Table

The table storing saved reports should meet the following requirements:

  • should be accessible from Oracle APEX parsing scheme,

  • should be able to store (at least) the information described in The plug-in \ Saving, fetching and deleting chart reports \ Chart report section

An example table is part of the sample application and can be previewed in Oracle APEX application builder \ SQL Workshop \ Object Browser \ Tables \ UC_JET_CHANGES.

Translations

The plug-in componenets such as context-menu entries and JET chart settings labels are translatable. Translations have to be implemented using Oracle APEX Globalization \ Text Messages (the Used in JavaScript attribute has to be set to Yes).

To make the translation process easier, the plug-in is using Oracle APEX debug mode to display translation codes in places of default labels. To enable live preview of translations codes follow these steps:

  1. Enable debug mode for the application

  2. On the developer toolbar click Debug

  3. Open the plug-in context menu

  4. Open the second level Debug entry

  5. Click the Show translations entry

To disable live preview of translation codes, disable APEX Debug mode or select entry Debug / Hide translations.

Text Messages

Translation Text Code

Default text

UC_JET_MENU_DELETE

Delete

UC_JET_MENU_DOWNLOAD

Download

UC_JET_MENU_REPORTS

Reports

UC_JET_MENU_RESET

Reset

UC_JET_MENU_SAVE

Save

UC_JET_MENU_SETTINGS

Settings

UC_JET_MSG_DELETE_REPORT

Are you sure you want to delete "%0" report?

UC_JET_POPUP_BTN_APPLY

Apply

UC_JET_POPUP_BTN_CANCEL

Cancel

UC_JET_POPUP_BTN_DOWNLOAD

Download

UC_JET_POPUP_BTN_SAVE

Save

UC_JET_POPUP_HEADER_SAVE

Save as

UC_JET_POPUP_HEADER_SETTINGS

Customize chart

UC_JET_POPUP_LABEL_ALL_SERIES

All series

UC_JET_POPUP_LABEL_CHART_TYPE

Type

UC_JET_POPUP_LABEL_COLOR

Color

UC_JET_POPUP_LABEL_GROUP_CUSTOMIZE_SERIES

Customize Series

UC_JET_POPUP_LABEL_GROUP_DONUT

Donut

UC_JET_POPUP_LABEL_GROUP_GENERAL

General

UC_JET_POPUP_LABEL_GROUP_LEGEND

Legend

UC_JET_POPUP_LABEL_GROUP_PIE

Pie

UC_JET_POPUP_LABEL_GROUP_XAXIS

X Axis

UC_JET_POPUP_LABEL_GROUP_YAXIS

Y Axis

UC_JET_POPUP_LABEL_GROUP_ZOOM

Zoom

UC_JET_POPUP_LABEL_LEGEND_POSITION

Legend position

UC_JET_POPUP_LABEL_LINE_STYLE

Line Style

UC_JET_POPUP_LABEL_LINE_TYPE

Line Type

UC_JET_POPUP_LABEL_MARKER_DISPLAYED

Marker Visible

UC_JET_POPUP_LABEL_MARKER_SHAPE

Marker Shape

UC_JET_POPUP_LABEL_ORIENTATION

Orientation

UC_JET_POPUP_LABEL_SERIE_SELECT

Select series

UC_JET_POPUP_LABEL_SERIE_TYPE

Type

UC_JET_POPUP_LABEL_SERIE_VISIBLE

Visibility

UC_JET_POPUP_LABEL_SORTING

Sorting

UC_JET_POPUP_LABEL_STACK

Stack

UC_JET_POPUP_LABEL_STACK_LABEL_RENDERED

Stack label rendered

UC_JET_POPUP_LABEL_XAXIS_RENDERED

X axis visibility

UC_JET_POPUP_LABEL_XAXIS_TITLE

X axis title

UC_JET_POPUP_LABEL_YAXIS_RENDERED

Y axis visibility

UC_JET_POPUP_LABEL_YAXIS_TITLE

Y Axis title

UC_JET_POPUP_LABEL_ZOOMANDSCALE

Zoom and Scroll

UC_JET_POPUP_SAVE_LABEL_REPORTNAME

New report

UC_JET_POPUP_SAVE_LABEL_SELECTREPORT

Save as

UC_JET_POPUP_SAVE_OPTION_NEWREPORT

New report

UC_JET_POPUP_SAVE_OPTION_REPORTPRIMARY

Primary

UC_JET_SAVE_ERROR_REPORT_NAME_EXISTS

Report name already exists.

UC_JET_SAVE_ERROR_REPORT_NAME_PRIMARY

Report name is reserved.

UC_JET_SAVE_ERROR_REPORT_NAME_REQUIRED

Report name is required.

UC_JET_SETTINGS_LABEL_3D

Make chart 3D

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_LINECOLOR

Line color (Major Tick)

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_LINESTYLE

Line Style (Major Tick)

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_LINESTYLE_DASHED

Dashed

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_LINESTYLE_DOTTED

Dotted

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_LINESTYLE_SOLID

Solid

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_LINEWIDTH

Line width (Major Tick)

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_RENDERED

Render major tick

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_RENDERED_AUTO

Auto

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_RENDERED_OFF

Off

UC_JET_SETTINGS_LABEL_AXIS_MAJORTICK_RENDERED_ON

On

UC_JET_SETTINGS_LABEL_AXIS_RENDERED_OFF

Off

UC_JET_SETTINGS_LABEL_AXIS_RENDERED_ON

On

UC_JET_SETTINGS_LABEL_CHART_ORIENTATION_HORIZONTAL

Horizontal

UC_JET_SETTINGS_LABEL_CHART_ORIENTATION_VERTICAL

Vertical

UC_JET_SETTINGS_LABEL_CHART_SORTING_ASCENDING

Ascending

UC_JET_SETTINGS_LABEL_CHART_SORTING_DESCENDING

Descending

UC_JET_SETTINGS_LABEL_CHART_SORTING_OFF

Off

UC_JET_SETTINGS_LABEL_CHART_STACK_LABEL_OFF

Off

UC_JET_SETTINGS_LABEL_CHART_STACK_LABEL_ON

On

UC_JET_SETTINGS_LABEL_CHART_STACK_OFF

Off

UC_JET_SETTINGS_LABEL_CHART_STACK_ON

On

UC_JET_SETTINGS_LABEL_LABELPOSITION

Label position

UC_JET_SETTINGS_LABEL_LABELPOSITION_ABOVEMARKER

Above Marker

UC_JET_SETTINGS_LABEL_LABELPOSITION_AFTERMARKER

After Marker

UC_JET_SETTINGS_LABEL_LABELPOSITION_AUTO

Auto

UC_JET_SETTINGS_LABEL_LABELPOSITION_BEFOREMARKER

Before Marker

UC_JET_SETTINGS_LABEL_LABELPOSITION_BELOWMARKER

Below Marker

UC_JET_SETTINGS_LABEL_LABELPOSITION_CENTER

Center

UC_JET_SETTINGS_LABEL_LABELPOSITION_INSIDEBAREDGE

Inside Bar Edge

UC_JET_SETTINGS_LABEL_LABELPOSITION_NONE

None

UC_JET_SETTINGS_LABEL_LABELPOSITION_OUTSIDEBAREDGE

Outside Bar Edge

UC_JET_SETTINGS_LABEL_LABELPOSITION_OUTSIDESLICE

Outside Slice

UC_JET_SETTINGS_LABEL_LEGEND_POSITION_AUTO

Auto

UC_JET_SETTINGS_LABEL_LEGEND_POSITION_BOTTOM

Bottom

UC_JET_SETTINGS_LABEL_LEGEND_POSITION_END

End

UC_JET_SETTINGS_LABEL_LEGEND_POSITION_START

Start

UC_JET_SETTINGS_LABEL_LEGEND_POSITION_TOP

Top

UC_JET_SETTINGS_LABEL_LEGEND_RENDERED

Legend rendered

UC_JET_SETTINGS_LABEL_LEGEND_RENDERED_AUTO

Auto

UC_JET_SETTINGS_LABEL_LEGEND_RENDERED_OFF

Off

UC_JET_SETTINGS_LABEL_LEGEND_RENDERED_ON

On

UC_JET_SETTINGS_LABEL_LEGEND_TITLE

Legend title

UC_JET_SETTINGS_LABEL_OVERVIEW_RENDERED

Zoom overview

UC_JET_SETTINGS_LABEL_OVERVIEW_RENDERED_OFF

Off

UC_JET_SETTINGS_LABEL_OVERVIEW_RENDERED_ON

On

UC_JET_SETTINGS_LABEL_PIE_3D_OFF

Off

UC_JET_SETTINGS_LABEL_PIE_3D_ON

On

UC_JET_SETTINGS_LABEL_PIE_INNERRADIUS

Inner radius

UC_JET_SETTINGS_LABEL_PIE_OTHERTHRESHOLD_COLOR

Other color

UC_JET_SETTINGS_LABEL_PIE_OTHERTHRESHOLD_VALUE

Other threshold

UC_JET_SETTINGS_LABEL_PIE_SELECTIONEFFECT

Selection Effect

UC_JET_SETTINGS_LABEL_PIE_SELECTIONEFFECT_EXPLODE

Explode

UC_JET_SETTINGS_LABEL_PIE_SELECTIONEFFECT_HIGHLIGHT

Higlight

UC_JET_SETTINGS_LABEL_PIE_SELECTIONEFFECT_HIGHLIGHTANDEXPLODE

Highlight and Explode

UC_JET_SETTINGS_LABEL_PIE_SLICEEXPLODE

Slice explode

UC_JET_SETTINGS_LABEL_SERIE_LINE_STYLE_DASHED

Dashed

UC_JET_SETTINGS_LABEL_SERIE_LINE_STYLE_DOTTED

Dotted

UC_JET_SETTINGS_LABEL_SERIE_LINE_STYLE_SOLID

Solid

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_AUTO

Auto

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_CSE

Centered Segmented

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_CST

Centered Stepped

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_CURVED

Curved

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_NONE

None

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_SEGMENTED

Segmented

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_STEPPED

Stepped

UC_JET_SETTINGS_LABEL_SERIE_LINE_TYPE_STRAIGH

Straight

UC_JET_SETTINGS_LABEL_SERIE_MARKER_DISPLAYED_AUTO

Auto

UC_JET_SETTINGS_LABEL_SERIE_MARKER_DISPLAYED_OFF

Off

UC_JET_SETTINGS_LABEL_SERIE_MARKER_DISPLAYED_ON

On

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_AUTO

Auto

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_CIRCLE

Circle

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_DIAMOND

Diamond

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_HUMAN

Human

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_PLUS

Plus

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_SQUARE

Square

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_STAR

Star

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_TRIANGLEDOWN

TriangleDown

UC_JET_SETTINGS_LABEL_SERIE_MARKER_SHAPE_TRIANGLEUP

TriangleUp

UC_JET_SETTINGS_LABEL_SERIE_SELECT_NULL

- Select Series -

UC_JET_SETTINGS_LABEL_SERIE_TYPE_AREA

Area

UC_JET_SETTINGS_LABEL_SERIE_TYPE_BAR

Bar

UC_JET_SETTINGS_LABEL_SERIE_TYPE_LINE

Line

UC_JET_SETTINGS_LABEL_SERIE_TYPE_LINEWA

Line with Area

UC_JET_SETTINGS_LABEL_SERIE_VISIBILITY_OFF

Hidden

UC_JET_SETTINGS_LABEL_SERIE_VISIBLE

Visible

UC_JET_SETTINGS_LABEL_ZOOMANDSCROLL_DELAYED

Delayed

UC_JET_SETTINGS_LABEL_ZOOMANDSCROLL_DELAYEDSCROLLONLY

Delayed Scroll Only

UC_JET_SETTINGS_LABEL_ZOOMANDSCROLL_LIVE

Live

UC_JET_SETTINGS_LABEL_ZOOMANDSCROLL_LIVESCROLLONLY

Live Scroll Only

UC_JET_SETTINGS_LABEL_ZOOMANDSCROLL_OFF

Off

Sample application

Interactive JET Charts Pro is delivered with a sample application which describes all of the plug-in’s features with example implementations. Install the application on APEX 19.2 (or above) and learn about the plug-in capabilities on live examples.

Supporting Objects

The sample application uses additional objects such as a table, UC_JET_CHANGES, to store the end-users chart customizations and the UC_JET_CHART_API package provides 3 procedures to handle the table and the plug-in package.

Installation scripts

While installing the application you will be asked to install supporting objects. Supporting objects are required to successfully run the sample application. See the table below to learn what will be installed after installing supporting objects.

Script name

Description

Create table UC_JET_CHANGES

The script creates table UC_JET_CHANGES which is used by the sample application to store the end-user chart settings as chart reports, table sequence, and the table trigger.

Create package UC_JET_CHART_API

The script creates package UC_JET_CHART_API which is used by the sample application plug-in to save, delete and fetch chart reports. The sample application plug-in uses procedures from this package.

Create package UC_INTERACTIVE_JET_CHARTS

The script creates the plug-in package UC_INTERACTIVE_JET_CHARTS.

Package UC_JET_CHART_API

create or replace package body "UC_JET_CHART_API" is 
  /* 
    Sample application is available for all users without loging into application. 
    Because of that APP_SESSION is used to identify the current user. 
 
    Important notes: 
      - use static id for charts if the end-user charts will be transferred between different environments. 
      - you can use APP_PAGE_ID to distinguish charts with same static id 
 
  */ 
 
  g_app_session varchar2(100) default v('APP_SESSION'); 
   
  procedure saveReport( 
    pi_user        IN  VARCHAR2, 
    pi_region_id   IN  VARCHAR2, 
    pi_report_name IN  VARCHAR2, 
    pi_keys        IN  VARCHAR2, 
    pi_values      IN  VARCHAR2, 
    po_message     OUT VARCHAR2, 
    po_status      OUT BOOLEAN 
  ) 
  is 
    v_keys    WWV_FLOW_GLOBAL.VC_ARR2; 
    v_values  WWV_FLOW_GLOBAL.VC_ARR2; 
 
    v_out_message varchar2(32767); 
    v_out_status  boolean := false; 
  begin 
    apex_debug.info( '%s Execute "saveReport"    ', '###'                   ); 
    apex_debug.info( '%s ... (in) user        = "%s" ', '###', pi_user        ); 
    apex_debug.info( '%s ... (in) region_id   = "%s" ', '###', pi_region_id   ); 
    apex_debug.info( '%s ... (in) report_name = "%s" ', '###', pi_report_name ); 
    apex_debug.info( '%s ... (in) keys        = "%s" ', '###', pi_keys        ); 
    apex_debug.info( '%s ... (in) values      = "%s" ', '###', pi_values      ); 
 
    v_keys   := apex_string.string_to_table( pi_keys ); 
    v_values := apex_string.string_to_table( pi_values ); 
 
    --delete all for current chart 
    delete from  
      UC_JET_CHANGES  
    where  
      username = g_app_session 
      and REPORT_NAME =  pi_report_name 
      and region_id = pi_region_id 
    ; 
 
    --insert new settings 
    for i in 1..v_keys.count LOOP 
 
      insert into UC_JET_CHANGES( 
        USERNAME, 
        REGION_ID, 
        REPORT_NAME, 
        PROPERTY_NAME, 
        PROPERTY_VALUE       
      ) values( 
        g_app_session, 
        pi_region_id, 
        pi_report_name, 
        v_keys(i), 
        v_values(i) 
      ); 
 
    end loop; 
 
    v_out_status  := true; 
    v_out_message := 'Report "'||pi_report_name||'" saved.'; 
 
    apex_debug.info( '%s ... (out) status  = "%s" ', '###', apex_debug.tochar( v_out_status )  ); 
    apex_debug.info( '%s ... (out) message = "%s" ', '###', v_out_message ); 
 
    po_message := v_out_message; 
    po_status  := v_out_status; 
 
    apex_debug.info( '%s End of "saveReport" ', '###'); 
  end saveReport; 
 
  procedure deleteReport( 
    pi_user        IN  VARCHAR2, 
    pi_region_id   IN  VARCHAR2, 
    pi_report_name IN  VARCHAR2, 
    po_message     OUT VARCHAR2, 
    po_status      OUT BOOLEAN 
  ) 
  is 
    v_out_message varchar2(32767); 
    v_out_status  boolean := false; 
  begin 
 
    apex_debug.info( '%s Execute "deleteReport"    ', '###'                 ); 
    apex_debug.info( '%s ... (in) user        = "%s" ', '###', pi_user        ); 
    apex_debug.info( '%s ... (in) region_id   = "%s" ', '###', pi_region_id   ); 
    apex_debug.info( '%s ... (in) report_name = "%s" ', '###', pi_report_name ); 
 
    --delete all for current chart 
    delete from  
      UC_JET_CHANGES  
    where  
      username        = g_app_session 
      and REPORT_NAME = pi_report_name 
      and region_id   = pi_region_id 
    ; 
 
    v_out_message := 'Report "'||pi_report_name||'" deleted.'; 
    v_out_status  := true; 
 
    apex_debug.info( '%s ... (out) status  = "%s" ', '###', apex_debug.tochar( v_out_status )  ); 
    apex_debug.info( '%s ... (out) message = "%s" ', '###', v_out_message ); 
 
    po_message := v_out_message; 
    po_status  := v_out_status; 
 
    apex_debug.info( '%s End of "deleteReport" ', '###'); 
  end deleteReport; 
 
  procedure getReports( 
    pi_user      IN  VARCHAR2, 
    pi_region_id IN  VARCHAR2, 
    po_reports   OUT VARCHAR2, 
    po_keys      OUT VARCHAR2, 
    po_values    OUT VARCHAR2 
  )  
  is 
    v_keys    WWV_FLOW_GLOBAL.VC_ARR2; 
    v_values  WWV_FLOW_GLOBAL.VC_ARR2; 
    v_reports WWV_FLOW_GLOBAL.VC_ARR2; 
  begin 
     
    apex_debug.info( '%s Execute "getReports"    ', '###'               ); 
    apex_debug.info( '%s ... (in) user      = "%s" ', '###', pi_user      ); 
    apex_debug.info( '%s ... (in) region_id = "%s" ', '###', pi_region_id ); 
 
    select 
      REPORT_NAME, 
      PROPERTY_NAME, 
      PROPERTY_VALUE 
    BULK COLLECT INTO 
      v_reports, 
      v_keys, 
      v_values   
    from 
      UC_JET_CHANGES 
    where  
      1 = 1 
      and ( 
        username = g_app_session 
        or username = 'ADMIN_DEFINED' 
      ) 
      and region_id = pi_region_id 
    ; 
 
    apex_debug.info( '%s ... Rows cnt = "%s"       ', '###', v_keys.count    ); 
    apex_debug.info( '%s ...... reports cnt = "%s" ', '###', v_reports.count ); 
    apex_debug.info( '%s ...... keys cnt    = "%s" ', '###', v_keys.count    ); 
    apex_debug.info( '%s ...... values cnt  = "%s" ', '###', v_values.count  ); 
 
    po_reports := apex_string.table_to_string( v_reports , ':' ); 
    po_keys    := apex_string.table_to_string( v_keys    , ':' ); 
    po_values  := apex_string.table_to_string( v_values  , ':' ); 
 
    apex_debug.info( '%s ...... (out) reports = "%s" ', '###', po_reports ); 
    apex_debug.info( '%s ...... (out) keys    = "%s" ', '###', po_keys    ); 
    apex_debug.info( '%s ...... (out) values  = "%s" ', '###', po_values  ); 
 
    apex_debug.info( '%s End of "getReports" ', '###'); 
  end getReports; 
 
end "UC_JET_CHART_API";

Pages

Home

The home page describes the plug-in in general and highlights the plug-in features at a glance.

Overview

The overview page describes the plug-in functionalities and presents all the Oracle JET chart attributes exposed via the plug-in interface in the context of supported chart types.

Translations

The translations page describes all translatable Text Message codes that are used to fully translate the plug-in interface. Additionally, the page describes how Oracle APEX debug mode can be used to simplify the translation process by clearly showing the text message code is used.

Live Demo

The live demo page implements the plug-in and describes the plug-in related topics such as exposed events and saving chart reports.

Usage Guide

This section describes implementing the Interactive JET Charts Pro in the sample application for a combination chart. The plug-in uses the UC_JET_CHART_API package to save, delete, and fetch the plug-in chart reports. The plug-in application attributes are defined as an image below.

In your application, you have to create a new table that will store the plug-in chart settings and a package (or standalone procedures) for the plug-in actions: save, fetch, and delete reports.

  • see the sample application table UC_JET_CHANGES and package UC_JET_CHART_API for an example implementation.

  • keep in mind that the sample application uses the APEX session to identify the current user. In your implementation use the procedure's parameter with the current user.

  • if you plan to migrate saved reports between different environments use APEX region Static ID (and optionally APP_PAGE_ID in procedures) to uniquely identify a chart

Introduction

In an example application, page 700 is defined. On the page, a combination chart is created. The region has the Static ID attribute set to combo, the region type is set to Chart, and chart type is set to Combination. The region source is set to SQL Query presented below.

select job, avg( sal ) value, 'Average' series from emp group by job, 'Average'
union
select job, min( sal ) value, 'Minimum' series from emp group by job, 'Minimum'
union
select job, max( sal ) value, 'Maximum' series from emp group by job, 'Maximum'

The chart settings are set to default and chart Series Column Mapping is defined as on an image below.

Implementing the plug-in

To successfully implement the plug-in a new button and dynamic action must be created.

Create the plug-in button

  1. Right-click on Combination region and select Create Button

  2. Set Identification \ Button Name to BTN_CUSTOMIZE_COMBO

  3. Set Identification \ Label Name to Customize chart

  4. Set Layout \ Button Position to Edit

  5. Set Behavior \ Action to Defined by Dynamic Action

Dynamic Action

  1. Create a new dynamic action

  2. Change the dynamic action’s name to Customize JET Chart

  3. Set When \ Event to Click

  4. Set When \ Selection Type to Button

  5. Set When \ Button to BTN_CUSTOMIZE_COMBO

The dynamic action definition in the page designer is presented below:

Dynamic Action - True Action

The default true action of the newly defined dynamic action is Show.

  1. Select the default true action Show

  2. Change Identification \ Action to United Codes Interactive JET Charts [Plug-in]

  3. Set Affected Elements \ Selection Type to Region

  4. Set Affected Elements \ Region to Combination

  5. Set Execution Options \ Fire on Initialization to Yes

  6. Save the page

The plug-in dynamic true action is presented below:

Test the Implementation

  1. Open page 700 in browser

  2. Click button BTN_CUSTOMIZE_COMBO

The plug-in is ready to use. The result of clicking the triggering button invokes the plug-in menu.

Selecting Settings from the plug-in menu opens the customization interface: