You are viewing documentation for an older version. For current documentation - click here.

The funnel chart from FusionWidgets XT pack allows you to configure various properties using XML/JSON data. Here, we'll see a few of them:

Let's see each of them one by one.

Drawing 2D funnel chart

When you draw a normal funnel chart, it renders as 3D, with a context menu allowing you to switch between 2D & 3D mode. However, if you intend to render the funnel as 2D itself, you can set:

<chart ... is2D='1' ...>
{ "chart" : { "is2d" : "1" ... } }

This will result in:



See it live!

When in 2D mode, you can customize the border properties of the funnel using:

<chart ... is2D='1' showPlotBorder='1' plotBorderThickness='2' plotBorderAlpha='100' plotBorderColor='CCCCCC' >
{ "chart":{..."is2d":"1", "showplotborder":"1", "plotborderthickness":"2", "plotborderalpha":"100", "plotbordercolor":"CCCCCC" } }

This will result in:

 
Adding shadow to 2D Plot
 
Using Styles, you can add shadow to 2D funnel chart as under:
 
<chart caption="Conversion Ratio" subcaption="May 2007" showPercentValues="1" decimals="1" baseFontSize="11" useSameSlantAngle="1" is2D="1" showPlotBorder="1" plotBorderThickness="2">
<set label="Website Visits" value="385634"/>
<set label="Downloads" value="175631"/>
<set label="Interested to buy" value="84564"/>
<set label="Contract finalized" value="35654"/>
<set label="Purchased" value="12342"/>
<styles>
<definition>
<style type="shadow" name="myShadow"/>
</definition>
<application>
<apply toObject="DATAPLOT" styles="myShadow"/>
</application>
</styles>
</chart>
{
  "chart": {
    "caption": "Conversion Ratio",
    "subcaption": "May 2007",
    "showpercentvalues": "1",
    "decimals": "1",
    "basefontsize": "11",
    "usesameslantangle": "1",
    "is2d": "1",
    "showplotborder": "1",
    "plotborderthickness": "2"
  },
  "data": [
    {
      "label": "Website Visits",
      "value": "385634"
    },
    {
      "label": "Downloads",
      "value": "175631"
    },
    {
      "label": "Interested to buy",
      "value": "84564"
    },
    {
      "label": "Contract finalized",
      "value": "35654"
    },
    {
      "label": "Purchased",
      "value": "12342"
    }
  ],
  "styles": {
    "definition": [
      {
        "type": "shadow",
        "name": "myShadow"
      }
    ],
    "application": [
      {
        "toobject": "DATAPLOT",
        "styles": "myShadow"
      }
    ]
  }
}
 
This will result in:
 
 
Showing labels at center

You can opt to show the funnel labels at center of the chart using:

<chart ... showLabelsAtCenter='1' ...>
{ "chart" : {... "showlabelsatcenter" : "1" ... } }

This will result in:

 
Showing labels in legend

Starting FusionWidgets XT, you can choose to place the labels in a separate legend box. You can click on the legend items to slice in and slice-out the respective funnel item as shown below:

To show the legend (and hide the labels beside the funnel) set:

<chart .. showLegend='1' showLabels='0'...>
{ "chart" : {... "showlegend" : "1", "showlabels": "0" ... } }

You can also place the legend at the right by setting the value of the legendPosition attribute to RIGHT:

<chart .. showLegend='1' legendPosition='RIGHT' showLabels='0'...>
{ "chart" : {... "showlegend" : "1", "legendposition": "RIGHT", "showlabels": "0" ... } }

The legend will be placed on the right as shown below:


 
Drawing filled funnel slices (in 3D mode)

By default, in a 3D funnel chart, the slices show up as hollow ones. You can make them filled by setting:

<chart .. isHollow='0' ...>
{ "chart" : {... "ishollow" : "0" ... } }

This will result in:



See it live!
 
Drawing all slices with same slant angle (when plotting streamlined data)
 
By default, when plotting streamlined data, the chart uses variable funnel slice width to visually depict filtering process, as shown below:
 


See it live!

However, if you need the same slant angle for all of them, you can set:

<chart useSameSlantAngle='1' ...>
{ "chart" : {... "usesameslantangle" : "1" ... } }

This will result in:



See it live!
 
Showing values as percentage of 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 previous slice (instead of the first slice) by setting:

<chart ... percentOfPrevious='1' ..>
{ "chart" : {... "percentofprevious" : "1" ... } }

This will result in:

 
As you can see above, each funnel slice's percent value is now calculated with respect to the previous slice's value (and not the first one).
 
Slicing out individual funnel slices

You can slice out individual funnel slices by setting:

<set ... isSliced='1' ..>
{ "chart" : {... "issliced" : "1" ... } }

This will result in (here, we've sliced the yellow slice):

 
However, when you slice out individual slices from XML/JSON data, the slicing interaction won't work.