Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

  • beforeDrillUp
  • afterDrillUp
  • beforeDrillDown
  • afterDrillDown

A treemap chart configured to demonstrate the treemap chart events is shown below:

FusionCharts will load here..

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

beforeDrillDown

Triggered just before the chart is re-rendered when it is drilled down to a child node

afterDrillDown

Triggered just after the chart is re-rendered when it is drilled down to a child node

beforeDrillUp

Triggered just before the chart is re-rendered when it is drilled up to the parent/root node

afterDrillUp

Triggered just after the chart is re-rendered when it is drilled up to the parent/root node

Top