ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Dual Horizontal Bar Chart and Labels
Posted by JamieD on Nov-01-2010 22:42
| Reply | Monitor
Attachments:
Hello again,

I'm looking to implement a chart type I've seen used within Statistic Sweden's publications, it's a male/female occupation breakdown, similar to a population pyramid, but without the gap between male and female, and with the labels for the charts displayed in the middle of the bars.  I've included a chart with the similar information, but without moving the male/female layers.

We're writing this in classic asp.  I was wondering if the only option is to use addtext to place the labels, or if there's a programmatic way to do it that I'm not thinking of.
occupations.png

  Re: Dual Horizontal Bar Chart and Labels
Posted by Peter Kwan on Nov-02-2010 00:33
| Reply | Monitor
Attachments:
Hi JamieD,

If you do not need the gap the separate the two charts, you can combine them into a single chart. It is something like the "Positive Negative Bars" sample code, but the bars are horizontal instead of vertical.

For the labels in the middle of the chart, I think it is possible to add them without using addText, but I think using addText is the simplest method. (I start by modifying the "Gradient Bar Chart" sample code.)

Hope this can help.

Regards
Peter Kwan
test.png
test.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' The data for the bar chart
data = Array(1350, 1600, 1950, 2300, 2700)
data2 = Array(-1350, -1600, -1950, -2300, -2700)

' The labels for the bar chart
labels = Array("2001", "2002", "2003", "2004", "2005")

' Create a PieChart object of size 600 x 380 pixels.
Set c = cd.XYChart(600, 380)

' Use the white on black palette, which means the default text and line colors are white
Call c.setColors(cd.whiteOnBlackPalette)

' Use a vertical gradient color from blue (0000cc) to deep blue (000044) as
' background. Use rounded corners of 30 pixels radius for the top-left and
' bottom-right corners.
Call c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), &H0000cc, _
    &H000044))
Call c.setRoundedFrame(&Hffffff, 30, 0, 30, 0)

' Add a title using 18 pts Times New Roman Bold Italic font. Add 6 pixels top and
' bottom margins to the title.
Set title = c.addTitle("Annual Revenue for Star Tech", "timesbi.ttf", 18)
Call title.setMargin2(0, 0, 6, 6)

' Add a separator line in white color just under the title
Call c.addLine(20, title.getHeight(), c.getWidth() - 21, title.getHeight(), _
    &Hffffff)

' Tentatively set the plotarea at (70, 80) and of 480 x 240 pixels in size. Use
' transparent border and white grid lines
Call c.setPlotArea(70, 80, 480, 240, -1, -1, cd.Transparent, &Hffffff).set4QBgColor(&Hffcccc, &Hffcccc, &Hccccff, &Hccccff)

' Set 4 quadrant mode, with both x and y axes symetrical around the origin
Call c.setAxisAtOrigin(cd.XAxisAtOrigin, cd.YAxisSymmetric)

' Swap the axis so that the bars are drawn horizontally
Call c.swapXY()

' Add a multi-color bar chart layer using the supplied data. Use bar gradient
' lighting with the light intensity from 0.75 to 2.0
Call c.addBarLayer(data, &Hff9999)
Call c.addBarLayer(data2, &H9999ff)

' Show the same scale on the left and right y-axes
Call c.yAxis().setLabelFormat("{value|,.~}")
Call c.syncYAxis()

' Set the bottom y-axis title using 10pt Arial Bold font
Call c.yAxis().setTitle("USD (millions)", "arialbd.ttf", 10)

' Set y-axes to transparent
Call c.yAxis().setColors(cd.Transparent)
Call c.yAxis2().setColors(cd.Transparent)

' Disable ticks on the x-axis by setting the tick color to transparent
Call c.xAxis().setTickColor(cd.Transparent)

' Set the label styles of all axes to 8pt Arial Bold font
Call c.xAxis().setLabelStyle("arialbd.ttf", 8)
Call c.yAxis().setLabelStyle("arialbd.ttf", 8)
Call c.yAxis2().setLabelStyle("arialbd.ttf", 8)

' Adjust the plot area size, such that the bounding box (inclusive of axes) is 30
' pixels from the left edge, 25 pixels below the title, 30 pixels from the right
' edge, and 25 pixels from the bottom edge.
Call c.packPlotArea(30, title.getHeight() + 25, c.getWidth() - 30, c.getHeight() - _
    25)

Set p = c.getPlotArea()
For i = 0 To Ubound(labels)
    Call c.addText(p.getLeftX() + p.getWidth() / 2, p.getTopY() + p.getHeight() * (i + 0.5) / (UBound(labels) + 1), _
        labels(i), "arialbd.ttf", 8, cd.TextColor, cd.Center).setBackground(&H40000000)
Next

' Output the chart
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>

  Re: Dual Horizontal Bar Chart and Labels
Posted by JamieD on Nov-09-2010 22:30
| Reply | Monitor
Fantastic, yeah, that was the approach I was wondering if I could employ (the pos/neg chart), but wanted to get your opinion.  Thanks again for the help!

  Re: Dual Horizontal Bar Chart and Labels
Posted by JamieD on Dec-02-2010 21:01
| Reply | Monitor
Attachments:
Hi again Peter, pretty much have it now, but the last thing that's been tripping me up is a simple one, I'm sure: how to adjust the scale.

As you can see, it's providing a lot of "padding" on the sides of the plot area, which I've tried to modify using setAutoScale, but that seems to only affect the blue region.  Any suggestions?  I've been wondering if setAutoScale isn't the right solution for this sort of situation, but I also can't see in the sample how that spacing is maintained..

Thanks again!

Jamie
occupations2.png

  Re: Dual Horizontal Bar Chart and Labels
Posted by Peter Kwan on Dec-03-2010 02:53
| Reply | Monitor
Hi JamieD,

Note that you chart currently is configured as horizontally symmetrical, that is, the zero point must be in the middle of the chart. Suppose your blue data is from 0 - 99, and your pink data is from 0 to 2, the pink side will still occupy the same space as the blue side.

If you do not want to chart to be symmetrical about the zero point, please remove cd.YAxisSymmetric (remove the parameter, or replace with 0).

If you want less padding, you may use setAutoScale. For example:

Call c.yAxis().setAutoScale(0, 0, 0)

With the above code, there would be no padding, except the padding for terminating the axis at a label position. (For example, if your data range is 0 to 97.3758, ChartDirector may extend the axis scale to 0 - 100, before 100 is a label position.)

If you do not want to extend the axis to a label position, you may use:

Call c.yAxis().setRounding(False, False)

Hope this can help.

Regards
Peter Kwan

  Re: Dual Horizontal Bar Chart and Labels
Posted by JamieD on Dec-04-2010 04:08
| Reply | Monitor
Fantastic, worked like a charm.

Of course, there's a different question about a line chart that I might have to write about as well.