1.6.2. FunnelChart

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

LIVE DEMO
funnel chart
Figure 3. FunnelChart

XML name of the component: chart:funnelChart.

Data binding:

  1. You can assign a datasource of a CollectionDatasource type to the chart and then define the titleField and valueField attributes for the funnelChart element:

    <chart:funnelChart id="ratingChart"
                   align="MIDDLE_CENTER"
                   datasource="ratingDs"
                   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.