Skip to content

Oracle Application Express (APEX) region Plug-in for D3 collapsible tree chart with multiple parents.

License

Notifications You must be signed in to change notification settings

grlicaa/D3CollapsibleTreeChart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

D3 Collapsible Tree Chart

Demo

A demo application is available on apex.oracle.com https://apex.oracle.com/pls/apex/f?p=67842

Preview

Preview image

Change log

V 6.0.2

  • Added inline .js and .css files (APEX 20.2 deprecated those files)
  • Fixed dynamic action "dblclick"
  • Added dynamic action "keydown"
  • Added on link (text) click event trigger "onClick"
  • Added dynamic documentation
  • Fixed issue #3

V 6.0.1

  • Found in applications: Sample Charts
  • added option Multiple parents

About

Plugin was build due to collaboration with APEX R&D

Install

  • Import plug-in "region_type_plugin_com_oracle_apex_d3_coll_tree.sql" into your application.
  • Add region on page and define SQL source.

Documentation

Must define

Here are few options you need to define carefully.

Page items to submit

If this is null tree don't work.

sample1

Number of rows

If this number is lower than ROWNUMBER of your SQL Query additional rows does not get presented on tree. sample7

Colors

To set custom colors you need to define color value field in SQL query. Sample picture : sample1

Next in attributes section find "Color Scheme" and choose Query Column. Here you can define Legend Color Mapping like in a picture sample below:

sample2

Multiple parents

sample6 Setting for this is simple, just put one field "Parent" with multiple column delimited values like "10:20:30"

sample3 sample4 You can even use Selectlist 2 Plug-in for adding multiple parents. sample5

Dynamic actions

This plugin plays well with Oracle APEX Dynamic action such as "refresh" region. In background plugin also triggers "apexbeforerefresh" and "apexbeafterfresh" actions.

Custom events

In this plugin we have 5 declarative inline events, which are triggered on specific action. All of events are returning "data" object of current triggering node. Sample of data object :

{ "ID": "22",
  "CHILD_PARENT": "22_19",
  "SIZEVALUE": 10,
  "DEPTH": 3,
  "COLORVALUE":"green",
  "LABEL": "Task E",
  "INFOSTRING": null,
  "LINK": null,
  "ROWNUM": 0,
  ...
  }

To get that data inside following events use next JavaScript expression :

  • Command : this.data
  • Test with : console.log("event data :", this.data);
Events list
  • D3Chart_Initialized

    This action is triggered when D3 is fully initialized.

  • D3Chart_MouseClick

    When user clicks on tree node circle.

  • D3Chart_MouseDblClick

    When user double clicks on tree node circle.

  • D3Chart_MouseOut

    When user move mouse on tree node circle.

  • D3Chart_MouseOver

    When user move mouse out of tree node circle.

  • D3Chart_Keydown

    When user use keyboard inside node element this event is triggered.

Additional events

In case you need buttons like expand or collapse all you can use following code to achieve that.

$("#REG_NAME").trigger( "com_oracle_apex_d3_tree_collapse" );
$("#REG_NAME").trigger( "com_oracle_apex_d3_tree_expand"   );

APEX Versions

  • Oracle Application Express 5.x
  • Oracle Application Express 18.x
  • Oracle Application Express 19.x
  • Oracle Application Express 20.x

About

Oracle Application Express (APEX) region Plug-in for D3 collapsible tree chart with multiple parents.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages