ChartDirector 6.0 (ColdFusion Edition)

Shape Specification


Several ChartDirector API accept shape specification as arguments. For example, BarLayer.setBarShape and BarLayer.setBarShape2 can be used to specify shapes of bars in bar charts, while DataSet.setDataSymbol, DataSet.setDataSymbol4, PolarLayer.setDataSymbol, PolarLayer.setDataSymbol4, ThreeDScatterGroup.setDataSymbol and ThreeDScatterGroup.setDataSymbol4 be used to specify shapes of data symbols.

In addition to shapes, in certain chart types, ChartDirector also supports using images or custom draw objects for data representation. For example, see DataSet.setDataSymbol2, DataSet.setDataSymbol3, PolarLayer.setDataSymbol2, PolarLayer.setDataSymbol3, ThreeDScatterGroup.setDataSymbol2 and ThreeDScatterGroup.setDataSymbol3.

Built-In Shapes

Built-in shapes are specified as integers. The integers can be constants, or can be generated by a ChartDirector method for parameterized shapes. For example, a circle is represented by a constant CircleShape (=7). On the other hand, the number representing a polygon depends on the number of sides of the polygon. It is generated by calling the PolygonShape method, with the number of sides as an argument.

The following table illustrates the various ChartDirector shapes:



Shape IdValueDescription
SquareShape1Square shape. See (5, 1) above.
DiamondShape2Diamond shape. See (6, 1) above.
TriangleShape3Triangle shape pointing upwards. See (7, 1) above.
RightTriangleShape4Triangle shape pointing rightwards. See (1, 2) above.
LeftTriangleShape5Triangle shape pointing leftwards. See (2, 2) above.
InvertedTriangleShape6Triangle shape pointing downwards. See (3, 2) above.
CircleShape7Circle shape. See (1, 1) above.
GlassSphereShape15Glass sphere shape. See (2, 1) above.
GlassSphere2Shape16Bright glass sphere shape. See (3, 1) above.
SolidSphereShape17Solid sphere shape. See (4, 1) above.
StarShape[Method]Star shapes of various points. See (4, 2), (5, 2), (6, 2), (7, 2), (1, 3), (2, 3), (3, 3), (4, 3) above for stars with 3 to 10 points.
PolygonShape[Method]Polygon shapes symmetrical about a vertical axis with a vertex at the top center position. See (5, 3) and (7, 3) for polygons of 5 and 6 sides.
Polygon2Shape[Method]Polygon shapes symmetrical about a vertical axis but without any vertex at the top center position. See (6, 5), (1, 4), (2, 4) for polygons of 5, 6 and 7 sides.
CrossShape[Method]'+' shapes. See (3, 4), (4, 4), (5, 4), (6, 4), (7, 4), (1, 5), (2, 5) for '+' shape with arm width of 0.1 - 0.7.
Cross2Shape[Method]'X' shapes. See (3, 5), (4, 5), (5, 5), (6, 5), (7, 5), (1, 6), (2, 6) for 'X' shapes with arm width of 0.1 - 0.7.
ArrowShape[Method]Arrow shapes. See (3, 6), (4, 6), (5, 6), (6, 6), (7, 6), (1, 7), (2, 7), (3, 7), (4, 7), (5, 7), (6, 7), (7, 7) for arrows of various angle, head width, stem width and stem length.

Custom Shapes

In ChartDirector, custom shapes are specified as an array of integers x0, y0, x1, y1, x2, y2 ... representing the coordinates of the vertices of the custom polygonal shape.

The polygon should be defined in an area of 1000 x 1000 units, with the x- axis from -500 to 500 going from left to right, and the y-axis from 0 to 1000 going from bottom to top.

ChartDirector will automatically scale the polygon so that 1000 units will become to the pixel size as requested by the various ChartDirector API.

As an example, the shape of the standard diamond shape in ChartDirector is represented as an array with 8 numbers:

0, 0, 500, 500, 0, 1000, -500, 500