XUI: Extensible User Interface Framework

Line Chart

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

Figure 1. Line chart example

1. Defining a chart type

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

<xchart type="linechart" 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 line 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="myChart" type="linechart" 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 Line Chart Data

The “segment” is the basic unit of Xchart and represents each point of the line chart. The “value” attribute is used to set the numerical value of the point on the graph. The “text” attribute is used to label the coordinate in a simple line chart, as shown in the example code below.

<xchart id="myChart" type="linechart" 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. Set Title and Styles

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, as shown in the example below. You can change the rotation angle of the label of a category axis by setting the “category-axis-rotation” attribute. The size of point and the line color can be changed by setting the “line-color” and “point-size” attributes.

<xchart id="lineChart" type="linechart" title="Time Report" 

	background-color="#CCCCCC" line-color="green" 

	point-size="6" major-tick-spacing="10" minor-tick-spacing="2" 

	width="100%" height="100%">

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%. The rotation angle of the category-axis label is 40 degrees. The line color is set to green and the size of point is set to 6px.

Next: Series Chart
Back to: Application Guide