Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT allows you to configure several cosmetic and functional properties for the funnel chart.

In this section, you will be shown how you can:

Drawing a 2D Funnel Chart with Customized Borders

By default, a funnel chart renders as a 3D chart with a context menu that allows you to switch between the 2D and the 3D modes of display. However, you can configure a funnel chart to be rendered in the 2D mode when it first loads, without using the context menu. You can also customize the border properties of a funnel chart for an improved visual representation.

A funnel chart rendered in 2D with customized borders looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "labelDistance": "15", "plotTooltext": "Success : $percentOfPrevValue", "showPercentValues": "1", "theme": "fint", "is2D": "1", "showPlotBorder": "1", "plotBorderColor": "#333333", "plotBorderThickness": "1", "plotBorderAlpha": "50" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "labelDistance": "15",
        "plotTooltext": "Success : $percentOfPrevValue",
        "showPercentValues": "1",
        "theme": "fint",
        "is2D": "1",
        "showPlotBorder": "1",
        "plotBorderColor": "#333333",
        "plotBorderThickness": "1",
        "plotBorderAlpha": "50"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",
            "labelDistance": "15",
            "plotTooltext": "Success : $percentOfPrevValue",
            "showPercentValues": "1",
            "theme": "fint",

            //Draw 2D chart
            "is2D": "1",
            //Border Properties
            "showPlotBorder": "1",
            "plotBorderColor": "#333333",
            "plotBorderThickness": "1",
            "plotBorderAlpha": "50",

        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to render a 2D funnel chart with customized border properties:

Attribute Name Description

is2D

It is used to specify whether the funnel chart, on loading, will be rendered in the 2D mode. Setting this attribute to 1 renders the chart in 2D, setting it to 0 (default) will render the chart in 3D.

showPlotBorder

It is used to specify whether the plot border will be shown. Setting this attribute to 1 shows the plot border, setting it to 0 (default) hides it.

plotBorderColor

It is used to specify the hex code of the color that will be used to render the plot border, e.g. #333333.

plotBorderThickness

It is used to specify the thickness, in pixels, of the plot border, e.g. 3.

plotBorderAlpha

It is used to specify the transparency of the plot border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50.

Showing Labels at the Center of the Funnel Chart

A funnel chart configured to render labels at the center looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "is2D": "1", "plotTooltext": "Success : $percentOfPrevValue", "showLabelsAtCenter": "1", "plotFillAlpha": "70", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "is2D": "1",
        "plotTooltext": "Success : $percentOfPrevValue",
        "showLabelsAtCenter": "1",
        "plotFillAlpha": "70",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",
            "is2D": "1",
            "plotTooltext": "Success : $percentOfPrevValue",

            //Show labels at center
            "showLabelsAtCenter": "1",

            "plotFillAlpha": "70",
            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to render labels at the center:

Attribute Name Description

showLabelsAtCenter

It is used to specify whether the data labels should be shown in the center of the data plots. Setting this attribute to 1 will show the labels in the center, setting it to 0 (default) will show them on the right.

Showing Labels in the Legend for the Funnel Chart

You can opt to show the labels in the legend box instead of showing them with the data plots. To do this, you will have to show the legend box and hide the labels for the data plots.

A funnel chart with the labels rendered in the legend box looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "is2D": "0", "streamlinedData": "0", "showLegend": "1", "showLabels": "0", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "is2D": "0",
        "streamlinedData": "0",
        "showLegend": "1",
        "showLabels": "0",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",
            "is2D": "0",
            "streamlinedData": "0",

            //Show legend
            "showLegend": "1",
            "showLabels": "0",

            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to show labels in the legend:

Attribute Name Description

showLegend

It is used to specify whether the legend box will be shown for the chart. Setting this attribute to 1 will show the legend box, setting it to 0 (default) will hide it.

showLabels

It is used to specify whether the labels will be shown. Setting this attribute to 0 will hide the labels, setting it to 1 (default) will show them.

Configuring the Position of the Legend Box

By default, the legend box is placed at the bottom of the funnel chart. You can opt to change the position of the legend box and shift it to the right.

Given below is a brief description of the attribute used to configure the position of the legend box:

Attribute Name Description

legendPosition

It is used to specify the position of the legend box in the chart. Setting this attribute to RIGHT places the legend box to the right, setting it to BOTTOM (default) places it at the bottom.

Drawing Filled Funnel Slices (in 3D Mode)

By default, in a 3D funnel chart, the slices are rendered as hollow. You can opt to render them as filled.

A funnel chart rendered will filled slices looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "isHollow": "0", "isSliced": "1", "labelDistance": "15", "plotTooltext": "Success : $percentOfPrevValue", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "isHollow": "0",
        "isSliced": "1",
        "labelDistance": "15",
        "plotTooltext": "Success : $percentOfPrevValue",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",

            //Filled Funnel Slices
            "isHollow": "0",

            "isSliced": "1",
            "labelDistance": "15",
            "plotTooltext": "Success : $percentOfPrevValue",
            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to render filled funnel slices:

Attribute Name Description

isHollow

It is used to specify whether the funnel slices will be rendered as hollowed or filled. Setting this attribute to 0 will render the slices as filled, setting it to 1 (default) will render them as hollow.

Drawing All Slices with Same Slant Angle (When Plotting Streamlined Data)

By default, when plotting streamlined data, the chart uses variable funnel slice width - the slant angle - to visually depict the filtering process. However, you have an option to use the same slant angle for all funnel slices.

A funnel chart rendered with the same slant angle for all funnel slices looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "is2D": "1", "labelDistance": "15", "plotTooltext": "Success : $percentOfPrevValue", "showPercentValues": "1", "useSameSlantAngle": "1", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "is2D": "1",
        "labelDistance": "15",
        "plotTooltext": "Success : $percentOfPrevValue",
        "showPercentValues": "1",
        "useSameSlantAngle": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",
            "is2D": "1",
            "labelDistance": "15",
            "plotTooltext": "Success : $percentOfPrevValue",
            "showPercentValues": "1",
            //Use same slant angle
            "useSameSlantAngle": "1",
            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to configure the same slant angle:

Attribute Name Description

useSameSlantAngle

It is used to specify whether the funnel slices will be drawn using the same slant angle. Setting this attribute to 1 uses the same slant angle for all slices, setting it to 0 (default) uses a variable slant angle.

Showing Values as Percentage of the Previous Value

When showing values in percentage for each slice, you can ask the chart to calculate the percentage value of this slice w.r.t the previous slice (instead of the first slice).

A funnel chart configured to show percentage values w.r.t the previous slice looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "is2D": "1", "labelDistance": "15", "plotTooltext": "Success : $percentOfPrevValue", "showPercentValues": "1", "percentOfPrevious": "1", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "is2D": "1",
        "labelDistance": "15",
        "plotTooltext": "Success : $percentOfPrevValue",
        "showPercentValues": "1",
        "percentOfPrevious": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",
            "is2D": "1",
            "labelDistance": "15",
            "plotTooltext": "Success : $percentOfPrevValue",
            "showPercentValues": "1",

            //Values as percentage of previous value
            "percentOfPrevious": "1",

            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to show values as the percentage of the previous value:

Attribute Name Description

showPercentValues

It is used to specify whether the data values on the chart will be shown as percentage values or numerical values. Setting this attribute to 1 renders the data values as percent values, setting it to 0 (default) renders them as numerical values.

percentOfPrevious

It is used to specify if the percentage values for each slice will be determined w.r.t to the previous slice or the first slice. Setting this attribute to 1 will determine the percent values basis the previous slice, setting it to 0 (default) will determine them basis the first slice.

This attribute works only when the showPercentValues attribute is set to 1.

Slicing Out Individual Funnel Slices

At times, you may want important data to be highlighted so that it is easily noticed. In a funnel chart, you can slice out the funnel slice that represents any such important data.

A funnel chart with a slice sliced-out looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "is2D": "1", "labelDistance": "15", "plotTooltext": "Success : $percentOfPrevValue", "showPercentValues": "1", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000", "isSliced": "1" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "is2D": "1",
        "labelDistance": "15",
        "plotTooltext": "Success : $percentOfPrevValue",
        "showPercentValues": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000",
            "isSliced": "1"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",
            "is2D": "1",
            "labelDistance": "15",
            "plotTooltext": "Success : $percentOfPrevValue",
            "showPercentValues": "1",
            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000",
            //Funnel sliced out
            "isSliced": "1"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to slice out individual funnel slices:

Attribute Name Description

isSliced

It is used to specify whether a funnel slice will appear sliced out. Setting this attribute to 1 will slice out the slice, setting it to 0 (default) will not slice out the slices.

If this attribute is used as a part of the chart object, it is applicable to all slices of the funnel. If it used as a part of the data object, then it is applicable only to the slice(s) for which it is defined.

Configuring Hover Effects

A funnel chart with hover effects enabled looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website visits", "subcaption": "Purchase - Conversion analysis for last year", "decimals": "1", "is2D": "1", "labelDistance": "15", "plotTooltext": "Success : $percentOfPrevValue", "showPercentValues": "1", "showPlotBorder": "1", "PlotBorderAlpha": "0", "showHoverEffect": "1", "plotFillHoverColor": "#cccccc", "plotFillHoverAlpha": "60", "plotBorderHoverColor": "#333333", "plotBorderHoverAlpha": "60", "plotBorderHoverThickness": "2", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website visits",
        "subcaption": "Purchase - Conversion analysis for last year",
        "decimals": "1",
        "is2D": "1",
        "labelDistance": "15",
        "plotTooltext": "Success : $percentOfPrevValue",
        "showPercentValues": "1",
        "showPlotBorder": "1",
        "PlotBorderAlpha": "0",
        "showHoverEffect": "1",
        "plotFillHoverColor": "#cccccc",
        "plotFillHoverAlpha": "60",
        "plotBorderHoverColor": "#333333",
        "plotBorderHoverAlpha": "60",
        "plotBorderHoverThickness": "2",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website visits",
            "subcaption": "Purchase - Conversion analysis for last year",
            "decimals": "1",
            "is2D": "1",
            "labelDistance": "15",
            "plotTooltext": "Success : $percentOfPrevValue",
            "showPercentValues": "1",
            "showPlotBorder": "1",
            "PlotBorderAlpha": "0",

            //Hover effect
            "showHoverEffect": "1",
            "plotFillHoverColor": "#cccccc",
            "plotFillHoverAlpha": "60",

            "plotBorderHoverColor": "#333333",
            "plotBorderHoverAlpha": "60",
            "plotBorderHoverThickness": "2",

            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to configure the hover effect:

Attribute Name Description

showhovereffect

It is used to specify whether the hover effect will be enabled for the chart. Setting this attribute to 1 will enable the hover effect, setting it to 0 (default) will disable it.

plotFillHoverColor

It is used to specify the hex code of the color that will be used to fill the slice when the mouse pointer is hovered over it, e.g., #CCCCCC.

plotFillHoverAlpha

It is used to specify the transparency of the slice when the mouse pointer is hovered it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100.

plotBorderHoverColor

It is used to specify the hex code of the color that will be used to render the plot border when the mouse pointer is hovered over it, e.g., #333333.

plotBorderHoverAlpha

It is used to specify the transparency of the slice border when the mouse pointer is hovered it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 60.

plotBorderHoverThickness

It is used to specify the thickness, in pixels, of the slice border when the mouse pointer is hovered over it, e.g. 2.

Top