A blog reader asked on the chart post yesterday about Funnel charts in ColdFusion 10. So, I whipped up a quick demo of the same.

View Demo (Refresh screen if demo doesn't load the first time)

You will see that there are two charts. The default render doesn't show the legend at a good place, and fortunately with ZingChart + CF10 functionality we are able to position it much better by specifying the legend attribute for cfchart.

Let's look at the code.

view plain print about
1<!--- Get Graph Data --->
2<cfquery name="selChartData" datasource="#Application.DataSource#">
3    SELECT
4        SUM(Total) As InvTotal,
5        Vendor
6    FROM
7        Invoices
8    GROUP BY Vendor
9    ORDER BY SUM(Total) DESC
10</cfquery>
11
12
13<cfscript>
14    legend = {
15        "x":0, //Position
16
        "y":450, //Position
17
        "layout":"2x", //Change layout to be 2 lines
18
        "width":350, //Set width
19
        "shadow":true //Show a shadow    
20
    };
21    
22    
23    background = {
24        "background-color":"##F7F8E0"
25    };
26    
27    
28
</cfscript>
29
30<!--- Normal Funnel, no mods --->
31<div style="width:550px;float:left;">
32<cfchart format="html" ID="InvoicesCF10FunnelDefault" title="Invoices by Vendor" height="500" width="500"
33    background="#background#">
    
34    <cfchartseries type="funnel" query="selChartData" itemcolumn="Vendor" valuecolumn="InvTotal" serieslabel="Total"
35    paintstyle="plain">

36    </cfchartseries>        
37</cfchart>
38</div>
39<div>
40<cfchart format="html" ID="InvoicesCF10FunnelChanged" title="Invoices by Vendor" height="500" width="500"
41    background="#background#" legend="#legend#">
    
42    <cfchartseries type="funnel" query="selChartData" itemcolumn="Vendor" valuecolumn="InvTotal" serieslabel="Total"
43    paintstyle="plain">

44    </cfchartseries>        
45</cfchart>
46</div>

As you can see, we have a legend sturcture withsome values to specify its behavior. Using this we are able to reposition it, change layout, give some shadow. There are other things you can do, find the full variety of options in the ZingChart documentation.