2.5.2. FunnelChart

The FunnelChart component allows you to create funnel/pyramid charts.

funnel chart
Figure 15. FunnelChart

XML name of the component: chart:funnelChart.

Data binding:
  1. You can assign a collection data container to the chart and then define the titleField and valueField attributes for the funnelChart element:

    <chart:funnelChart id="ratingChart"
                       align="MIDDLE_CENTER"
                       dataContainer="ratingDc"
                       height="200px"
                       labelPosition="RIGHT"
                       labelText="[[title]]: [[value]]"
                       marginRight="120"
                       maxLabelWidth="110"
                       marginTop="20"
                       titleField="mechanic"
                       valueField="count"
                       width="500px">
    </chart:funnelChart>
  2. Using the chart:data element.

    <chart:funnelChart id="ratingChart"
                       titleField="mechanic"
                       valueField="count">
        <chart:data>
            <chart:item>
                <chart:property name="mechanic" value="Jack"/>
                <chart:property name="count" value="1" type="int"/>
            </chart:item>
            <chart:item>
                <chart:property name="mechanic" value="Bob"/>
                <chart:property name="count" value="2" type="int"/>
            </chart:item>
            <chart:item>
                <chart:property name="mechanic" value="Sam"/>
                <chart:property name="count" value="3" type="int"/>
            </chart:item>
        </chart:data>
    </chart:funnelChart>
FunnelChart event listeners:
  • SliceClickListener – click on a slice in a pie chart.

  • SlicePullInListener – shift of a slice of a pie chart into the chart.

  • SlicePullOutListener – shift of a slice of a pie chart out of the chart.

  • SliceRightClickListener – right-click on a slice in a pie chart.

For more details, see AmCharts documentation.