XUI: Extensible User Interface Framework

Pie Chart

The following figure is an example of a standard pie chart generated by Xchart.

Figure 1: Pie Chart Example

1. Defining the chart type

Setting the chart type requires setting the “type” attribute in the “xchart” element. In the following code example, the type is set to “piechart”. For line chart and bar chart, the type should be set to “linechart” and “barchart” respectively.

<xchart type="piechart" id="mychart1" title="Time Report" 

	  background-color="#CCCCCC" width="100%" height="100%">

		…….

</xchart>

2. Defining the chart data

The “segment” child element is the basic unit of Xchart and represents each slice of a pie chart. The “value” attribute is used to set the value of a segment. Labeling the xchart segment uses the “text” attribute. The value of each segment is displayed as a percentage of total values. The proportions of each segment are also shown compared to the whole.

<xchart type="piechart" id="mychart1" title="Time Report"

		background-color="#CCCCCC" width="100%" height="100%">

	<segment text="Design" value="35"/>

	<segment text="Analysis" value="25"/>

	<segment text="Development" value="48"/>

	<segment text="Testing" value="30"/>

	<segment text="Deployment" value="20"/>

	<segment text="Administrative Task" value="8"/>

</xchart>

In the code example above, the pie chart is composed of six (6) different components that represent “Design”, “Analysis”, “Development”, “testing”, “Deployment”, and “Administrative Task”.

3. Setting the Title and Styles

To set the title of a chart, the “title” attribute of Xchart is used. To set the size of the pie, the “radius” attribute, set in pixels, needs to be defined.

<xchart type="piechart" id="mychart1" title="Time Report" radius=”100"

	background-color="#CCCCCC" width="100%" height="100%">

	…….

</xchart>

In the example above, the title of the pie chart is “Time Report”, background color is set to gray (#CCCCCC), and width and height are both set to 100% of it’s container. The radius is set to 100 pixels.

Back to: Application Guide