..the apex plugin directory

an initiative of

Add your APEX4.0 Plugin info

Describe your Plugin’s features. You can upload the Plugin’s code and documentation, or, alternatively, submit the URLs to your Website, GitHup Repository or Blog.

You are here:
Follow us on Twitter
Region Plugin D3 Treemap Chart Plugin

D3 Treemap Chart Plugin

Categories: Region Plugin
Author: Carsten Czarski


Beginning with APEX 5.0, D3 Sunburst, Treemap and Bubble chart plugins with deeper APEX integration are available in the packaged application "Sample Charts".So, in APEX 5.0, the corresponding plugins from apex-plugin are obsolete.

This plugin provides a Treemap Chart based on the D3js framework. Treemap charts allow to visualize two values by area sizes and colors and provide a good overview on data distribution. This plugin is based on the treemap chart example by the D3js author Mike Bostock.

Plugin features:

  • Generate a Treemap Chart based on the SQL query in the Region source
    • The data hierarchy (columns ID and PARENT_ID) is being detected automatically; if PARENT_ID is
      missing or if it contains nonexistent values, the nodes are being considered as root nodes.
    • Plugin honors the Page Items to Submit attribute
    • Plugin honors the Escape Special Characters attribute (this applies to the "Infobox" which is displayed on Mouseover)
  • The Plugin is AJAX aware
    • Honors the apexrefresh event - you can refresh the chart with a Dynamic Action
    • The Plugin provides an Auto Refresh mode
    • Plugin posts events to the APEX Dynamic Action Framework. So you can create dynamic Actions (e.g. to refresh other APEX components) based on the following plugin events.
      • Mouseover
      • Mouseout
      • Mouse Click
      • Chart initialized

  • CSS and responsive Features
    • The plugin is responsive and changes its size according to the device's display size
    • All components (Areas, Infoboxes, highlighted areas) can be augmented with own CSS classes


Date added: 15.12.2014
Views: 5928
Votes: 4
Reviews: 9
Min. APEX Version:
Share on Facebook
Digg! Share on Digg
Save This Page
download apex plugin
If something is not correct please report it here: Report Listing
Do you have a question about this Plugin? Want to write a Review or Comment?
Login first.
Reviews / Questions / Comments are e-mailed to the author of the Plug-in.
Re: add node dynamic
by Carsten Czarski
on September 8, 2015
Hi Dirk,

this is not possible with the plugin, but with APEX. Upon click, the plugin sends an event, which you can react on with a Dynamic Action. In the Dynamic Action you could execute some PL/SQL code adding new rows (=> new nodes) und finally you refresh the plugin region ...

Hope this helps

add node dynamic
by Uebing
on September 7, 2015
for test i use Sample Chart (16)

In the first Step I want to add a new node when I click on a tree node.
Is it possible? and how?

I found 3djs.org "# selection.append(name)" .
How to use it?

We want use only 1 size
by Yuriy
on August 10, 2015
It requires a lot of time.
Can you do this for some money?
We want use only 1 size:
and height=100px
Re: How to freeze cells?
by Carsten Czarski
on August 10, 2015
Hi Yuriy,

here's the D3.js standard example for the Treemap Chart

You need to get familiar with the D3.js framework; you need then to adjust the JS code of the D3.js plugin.

Best regards

by Yuriy
on August 10, 2015
so where we can set fixed width and height for 1 cell?
We want use only 1 size:
and height=100px
so where we can set fixed width and heig
by Yuriy
on August 10, 2015
so where we can set fixed width and height for 1 cell?
Re: How to freeze cells?
by Carsten Czarski
on August 10, 2015
Hi Yuriy,

this is something the Plugin currently does not support. The actual positions and sizes of the cells are being calculated by the D3.js Treemap Layout function. The following call does all the work and is being used by the Plug-In as kind of a "Black Box".

var pack = d3.layout.treemap()
.size([width, height])
.sort(function (a,b) {return b.rownum - a.rownum;})
.value(function(d) { return d.SIZEVALUE; })
.children(function(d) {return d.children;})

So "freezing" the cells would mean to use a different D3.js layout function, which is possible, but which means also significant effort.

Hope this helps

How to freeze cells?
by Yuriy
on August 10, 2015
Hello. We test D3 Treemap Chart Plugin [Plug-in].
How can we do that all the cells were the same size and that they are not moving, and maintains its position on different monitors? We want cell field
May 13, 2015
The Entry has been updated in the meantime!
Opening the link on the same window
by Renato Nobre
on April 30, 2015

Is it possible to open the link on the same window ?

I am trying to change the adv config of Json link_target_window from "link_target_window": "_blank", to something like
"link_target_window": "_self",
But no sucess.

Powered by Sigsiu.NET RSS Feeds

Disclaimer: The APEX Plugins on this site are not supported by Oracle Support Services.

If you have a question about a Plugin or need support: Login and select the plugin detail page. At the bottom you can enter your Question / Review / Remark.
Your message will be sent to the author of the plugin.