Stacked Bar Charts with csDrawGraph

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.

ASP stacked bar charts - default properties

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

Set Chart = Server.CreateObject("csDrawGraph.Draw")
Chart.AddGroupedData "Group1", "Item1", 17, "ff0000"
Chart.AddGroupedData "Group1", "Item2", 28, "00ff00"
Chart.AddGroupedData "Group2", "Item1", 7, "ff0000"
Chart.AddGroupedData "Group2", "Item2", 18, "00ff00"
Response.ContentType = "image/gif"
Response.BinaryWrite Chart.GIFStackedBar

ASP stacked bar charts - showing the values

The second example contains one extra line:

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.

ASP stacked bar charts - rotated through 90 degrees

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.

Chart.VerticalBars = false
Chart.MaxX = 200
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.

The trial component has a sample script included which contains all the properties and their default values. This can be useful when getting started with the component.

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

Download csDrawGraph here.


This site uses cookies for functionality, traffic analysis and for targeted advertising. Click the Accept button to accept our Cookie Policy. The Cookie Policy page offers configuration for a reduced set of cookies for this site.