XUI: Extensible User Interface Framework

Bar Chart

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

Figure 2. Bar chart example

1. Defining the chart type

To create a bar chart, the “type” attribute of Xchart should be set to “barchart”, as shown in the example code below.

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

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

	…….

</xchart>

2. Defining Grid and Tick values

The “grid” and “tick” values are determined by four attributes: maximum, minimum, major-tick-spacing, and minor-tick-spacing. The “major-tick-spacing” attribute is required to draw either a grid or bar chart. When the maximum value is not defined or one or more values set in the segment is greater than the maximum value, the maximum value will be automatically calculated and appear as the largest tick value in the grid. Similarly, when the minimum value is not defined or one or more values set in the segment is less than the minimum value, the minimum value will be calculated and appear as the smallest tick value in the grid.

<xchart id="bar1" type="barchart" title="Time Report" background-color="#CCCCCC"

	  maximum="50" major-tick-spacing="10" minor-tick-spacing="2"
 
	  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 example above, six major ticks will be drawn from 0 to 50 and each major tick will have five minor ticks.

3. Defining Simple Bar Chart Data

The “segment” child element is the basic unit of Xchart and represents each bar of the chart. The “value” attribute is used to set the numerical value used in the bar char. The “text” attribute is used to label the bar in a simple bar chart, as shown in the example code below.

<xchart id="bar1" type="barchart" title="Time Report" background-color="#CCCCCC"

	  maximum="50" major-tick-spacing="10" minor-tick-spacing="2" 

	  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>

4. Setting the Title and Style

To set the title of a chart, the “title” attribute of Xchart is used. The background color, width, and height can be set using attributes: background-color, width, and height respectively. You can change the rotation angle of the label of the category axis by setting the “category-axis-rotation” attribute.

<xchart id="bar1" type="barchart" title="Time Report" background-color="#CCCCCC"

		major-tick-spacing="10" minor-tick-spacing="2" width="100%" 

		height="100%" 

		category-axis-rotation="40">

In the example above, the title of the chart is “Time Report”, background color is set to gray (#CCCCCC), and width and height are set to 100% of the container. The rotation angle of the label of the category-axis is 40 degrees.

Next: Line Chart
Back to: Application Guide