Loading
Handling Events in the Treemap Chart
FusionCharts Suite XT lets you configure standard interactivity for items like tooltips and gradient legend through the treemap chart attributes. However, if you need to further extend the chart interactivity, you can tap into the JavaScript events for this chart, and then build your custom behavior over it.
In this section, you will be introduced to the various events that you can raise for the treemap chart.
FusionCharts Suite XT introduces the treemap chart starting v3.10.0, and supports the following events for this chart:
beforeDrillUpafterDrillUpbeforeDrillDownafterDrillDown
A treemap chart configured to demonstrate the treemap chart events is shown below:
The data to render this chart is given below:
{
{
type: 'treemap',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"plotborderfillcolor": "fff",
"plotborderthickness": "0",
"animation": "0",
"labelGlow" : "0",
"horizontalPadding" : "1",
"verticalPadding" : "1",
"caption": "Harry's SuperMart: Product-wise Revenue",
"subcaption": "Previous Year"
},
"data": [
{
"label": "Harry's SuperMart",
"value": "1000",
"fontcolor" : "fff",
"fillcolor": "#303030",
"data": [
{
"label": "Food Products",
"value": "400",
"fontcolor" : "fff",
"fillcolor": "#527a7a",
"data": [
{
"label": "Dairy",
"value": "80",
"fillcolor": "#99ffcc"
},
{
"label": "Cereals",
"value": "70",
"fillcolor": "#e5fff2"
},
{
"label": "Poultry",
"value": "150",
"fillcolor": "#00cc66"
},
{
"label": "Vegetables",
"value": "100",
"fillcolor": "#33ff99"
}
]
},
{
"label": "Non-food Products",
"value": "600",
"fontcolor" : "fff",
"fillcolor": "#404040",
"data": [
{
"label": "Apparel",
"value": "400",
"fontcolor" : "fff",
"fillcolor": "#666",
"data": [
{
"label": "Men's Wear",
"value": "150",
"fillcolor": "ff8080"
},
{
"label": "Women's Wear",
"value": "200",
"fillcolor": "#ff6666"
},
{
"label": "Children's Wear",
"value": "50",
"fillcolor": "#ffcccc"
}
]
},
{
"label": "Kitchenware",
"value": "150",
"fillcolor": "#e6b3ff"
},
{
"label": "Electronics",
"value": "50",
"fillcolor": "#eeccff"
}
]
}
]
}
]
},
"events": {
'beforeRender': function(evt, args) {
if (!document.getElementById('eventmessages')) {
// Create container div for radio controls
var controllers = document.createElement('div');
controllers.setAttribute('id', 'eventmessages');
controllers.innerHTML = "";
args.container.parentNode.insertAfter(controllers, args.container.nextSibling);
// set css style for controllers div
controllers.style.cssText = 'position:inherit; width:400px; height: 100px; border: 1px solid #cccccc; margin-top:10px;padding-left:5px; overflow: scroll;';
}
evt.sender.configureLink({
type: "treemap",
overlayButton: {
message: 'close',
fontColor: '880000',
bgColor: 'FFEEEE',
borderColor: '660000'
}
}, 0);
},
'beforeDrillDown': function(evt, args) {
document.getElementById('eventmessages').innerHTML = " Event - <b>beforeDrillDown</b> invoked<br>" + document.getElementById('eventmessages').innerHTML;
},
'afterDrillDown': function(evt, args) {
document.getElementById('eventmessages').innerHTML = " Event - <b>afterDrillDown</b> invoked<br>" + document.getElementById('eventmessages').innerHTML;
},
'beforeDrillUp': function(evt, args) {
document.getElementById('eventmessages').innerHTML = " Event - <b>beforeDrillUp</b> invoked<br>" + document.getElementById('eventmessages').innerHTML;
},
'afterDrillUp': function(evt, args) {
document.getElementById('eventmessages').innerHTML = " Event - <b>afterDrillUp</b> invoked<br>" + document.getElementById('eventmessages').innerHTML;
}
}
}
}Given below is a brief description of all the treemap chart events:
| Event Name | Description |
|---|---|
|
Triggered just before the chart is re-rendered when it is drilled down to a child node |
|
Triggered just after the chart is re-rendered when it is drilled down to a child node |
|
Triggered just before the chart is re-rendered when it is drilled up to the parent/root node |
|
Triggered just after the chart is re-rendered when it is drilled up to the parent/root node |