Stacked Bar Charts with csDrawGraph in Cold Fusion

csDrawGraph can display data as stacked or grouped bar charts. These share most of the settings with ordinary bar charts although a different method is used to add the data values. AddGroupedData is used to add each data item. There can be several data items for each bar. As with the standard bar charts there are two possible orientations, controlled by the VerticalBars property. When VerticalBars is true (default) the bars are vertical, when false the bars are horizontal.

The value of each data item can optionally be shown by setting ShowStackedValue to true. The font, colour and size of this text can be controlled and there is some choice as to the location of this text.

The first example shows 4 items and 2 groups. Here is the code that draws this graph:

<cfcache action="flush">
<cfobject action="create" name="chart" class="csDrawGraph.Draw">
<cfset tempfile=ExpandPath(".") & "\" & CreateUUID() & ".gif">
<cfset Chart.AddGroupedData("Group1", "Item1", 17, "ff0000")>
<cfset Chart.AddGroupedData("Group1", "Item2", 28, "00ff00")>
<cfset Chart.AddGroupedData("Group2", "Item1", 7, "ff0000")>
<cfset Chart.AddGroupedData("Group2", "Item2", 18, "00ff00")>
<cfset chart.SaveGIFStackedBar(#tempfile#)>
<cfcontent type="image/gif" deletefile="yes" file=#tempfile#>

The second example contains one extra line:

<cfset Chart.ShowStackedValue = true>

This shows the values of each data item. These values could be placed outside the bars to left or right or rotated to read up the page. There is no check to make sure the label fits in the space so they are not suitable where small data values will be used.

The final example shows the chart with horizontal bars by setting VerticalBars to false. The axis lengths have also been changed from the default to make them a better fit.

<cfset Chart.VerticalBars = false>
<cfset Chart.MaxX = 200>
<cfset Chart.MaxY = 250>

These examples have been kept simple to show just 2 bars with 2 data items in each. More detailed charts can be produced.

There are also examples available of Standard Bar Charts, Pie Charts and Line Graphs.

Download csDrawGraph here.