These days I'm about to develop growth chart module for my current project enhancement. In this growth chart, I need to merge two chart series called area chart and bar chart to display patient percentile. In Coldfusion Chart, if we're trying to merge two chartseries, x-axis of both must be same records. If not, our chart might be displayed wrong data.

Here is my sample coding of CFChart.

view plain print about
1<cfchart
2 format="png"
3    xaxistitle="Age (mth)"
4    yaxistitle="HEAD"
5    chartwidth="500"
6    chartheight="500"
7 gridlines="6"
8 showborder="no">
9        <cfchartseries
10            type="bar"
11            paintstyle = "light"
12            seriescolor="000000"
13            seriesLabel="Patient's Information">
14            <cfchartdata item="3" value="10">
15        </cfchartseries>                
16        <cfoutput query="Getgrowth" group="PERCENTILE">
17            <cfset i = i + 1>
18            <cfset serColor = ListGetAt(ListCOLOR, i)>
19            <cfchartseries
20                type="area"
21                markerStyle="diamond"
22                seriescolor="#serColor#"
23                seriesLabel="#convertOrdinal(PERCENTILE)#">
24                <cfoutput><cfchartdata item="#AGE#" value="#GETDATA#"></cfoutput>
25            </cfchartseries>
26        </cfoutput>
27</cfchart>

And the result will come as follow,

Above screen-shot, you will see black bar is displaying "7 times" and chart display is quite wrong. Because the value of black bar is displaying first and the value of another chartseries is displaying second. That's not what I want to be. What I want to be is to display black bar only one time according the first series of black bar.

It's because two x-axis of two chart series aren't different record count. That's why I've put the query of second series to the first chart series as follow.

view plain print about
1<cfchartseries
2    type="bar"
3    paintstyle = "light"
4    seriescolor="000000"
5    seriesLabel="Patient's Information">
6    <cfoutput query="Getgrowth" group="AGE">
7        <cfif Getgrowth.age EQ 4>
8            <cfchartdata item="#AGE#" value="10">
9        <cfelse>
10            <cfchartdata item="#AGE#" value="0">
11        </cfif>
12    </cfoutput>
13</cfchartseries>

After that, rendering my file and the outcome will be as follow.

This entry was posted on September 20, 2011 at 9:32 PM and has received 1410 views. There are currently 0 comments. Print this entry.