ChartDirector Ver 3.1 (PHP Edition Edition)

Circular Label Layout


  

This example demonstrates how to control the positions of sector labels in circular label layout, and to enable join lines to connect the labels to the sectors. PieChart.setLabelPos is used to achieve these effects. This example also demonstrates how to specify the format of the label using PieChart.setLabelFormat.

Source Code Listing

[File: phpdemo/circlelabelpie.php".]
<?php require_once("../lib/phpchartdir.php"); #The data for the pie chart $data = array(25, 18, 15, 12, 30, 35); #The labels for the pie chart $labels = array("Labor", "Licenses", "Taxes", "Legal", "Facilities", "Production"); #Create a PieChart object of size 300 x 300 pixels $c = new PieChart(300, 300); if ($HTTP_GET_VARS["img"] == "0") { #============================================================ # Draw a pie chart where the label is on top of the pie #============================================================ #Set the center of the pie at (150, 150) and the radius to 120 pixels $c->setPieSize(150, 150, 120); #Set the label position to -40 pixels from the perimeter of the pie (-ve #means label is inside the pie) $c->setLabelPos(-40); } else { #============================================================ # Draw a pie chart where the label is outside the pie #============================================================ #Set the center of the pie at (150, 150) and the radius to 80 pixels $c->setPieSize(150, 150, 80); #Set the sector label position to be 20 pixels from the pie. Use a join line #to connect the labels to the sectors. $c->setLabelPos(20, LineColor); } #Set the label format to three lines, showing the sector name, value, and #percentage. The value 999 will be formatted as US$999K. $c->setLabelFormat("{label}\nUS\${value}K\n({percent}%)"); #Set the pie data and the pie labels $c->setData($data, $labels); #Explode the 1st sector (index = 0) $c->setExplode(0); #output the chart header("Content-type: image/png"); print($c->makeChart2(PNG)); ?>


is not moved.
Note that unlike HTML tags, no double or single quotes are used in the tags. It is because CDML tags are often embedded as string literals in source code. The double or single quotes, if used, will conflict with the string literal quotes in the source code. Therefore in CDML, no quotes are necessary and they must not be used.

Also, unlike HTML tags, CDML uses the comma character as the delimiter between attributes. It is because certain attributes may contain embed spaces (such as the font file name). So space is not used as the delimiter and the comma character is used instead.

Blocks and Lines

In CMDL, a text string may contain multiple blocks. A block may contain multiple lines of text by separating them with new line characters ("\n") or with <*br*>. The latter is useful for programming languages that cannot represent new line characters easily.

For example, the line:

<*size=15*><*block*><*color=FF*>BLOCK<*br*>ONE<*/*> and <*block*><*color=FF00*>BLOCK<*br*>TWO<*/*>

will result in the following text rendered:


The above example contains a line of text. The line contains two blocks with the characters " and " in between. Each block in turn contains two lines. The blocks are defined using <*block*> as the start tag and <*/*> as the end tag.

Embedding Images

CDML supports embedding images in text using the following syntax:

<*img=my_image_file.png*>

where my_image_file.png is the path name of the image file.

For example, the line:

<*size=20*>A <*img=sun.png*> day

will result in the following text rendered:


ChartDirector will automatically detect the image file format using the file extension, which must either png, jpg, jpeg, gif, wbmp or wmp (case insensitive).

Please refer to BaseChart.setSearchPath or DrawArea.setSearchPath on the directory that ChartDirector will search for the file.

Blocks Alignment and Orientation

CDML supports nesting blocks, that is, a block can contain other sub-blocks. Attributes are supported in the <*block*> tag to control the alignment and orientation of the sub-blocks. The <*img=my_image_file.png*> is treated as a block for layout purposes.

For example, the line:

<*block,valign=absmiddle*><*img=molecule.png*> <*block*>Hydrazino\nMolecule<*/*><*/*>

will result in the following text rendered:


The the above starts <*block,valign=absmiddle*> which specifies its content should align with each others in the vertical direction using the absolute middle alignment. The block contains an image, followed by a space characters, and then another block which has two lines of text.

The following table describes the supported attributes inside <*block*> tag:

AttributeDescription
valign The vertical alignment of sub-blocks. This is for blocks that contain sub-blocks. Supported values are baseline, top, bottom, middle and absmiddle.

The value baseline means the baseline of sub-blocks should align with the baseline of the block. The baseline is the underline position of text. This is normal method of aligning text, and is the default in CDML. For images or blocks that are rotated, the baseline is the same as the bottom.

The value top means the top line of sub-blocks should align with the top line of the block.

The value bottom means the bottom line of sub-blocks should align with the bottom line of the block.

The value middle means the middle line of sub-blocks should align with the the middle line of the block. The middle line is the middle position between the top line and the baseline.

The value absmiddle means the absolute middle line of sub-blocks should align with the absolute middle line of the block. The absolute middle line is the middle position between the top line and the bottom line.
halign The horizontal alignment of lines. This is for blocks that contain multiple lines. Supported values are left, center and right.

The value left means the left border of each line should align with the left border of the block. This is the default.

The value center means the horizontal center of each line should align with the horizontal center of the block.

The value right means the right border of each line should align with the right border of the block.
angle Rotate the content of the block by an angle. The angle is specified in degrees in counter-clockwise direction.


);