How to declare chart xml file in android

How to declare chart xml file in android

1. Introduction

aiCharts library offers an easy way to define chart's look and structure. It gives developer ability to define chart via XML file and reuse it in a very same way as default Android layout XML files. This is not mandatory to define parts of your chart UI in the XML, but we highly recommend it.

2. Configuring your Eclipse environment

Eclipse IDE is shipped with XML editor that you can use to view/edit chart XML declaration. In order to make editor correctly recognize chart structure, in eclipse go to Preferences > XML > XML catalog > Add and enter aiCharts.xsd schema location that is included in aiCharts SDK.

3. Declaring XML chart

In order to declare chart's structure, do following:
  • Describe chart in XML file (see XML structure below)
  • Add XML file to /res/xml/
  • In your layout, set the "chart" attribute of ChartView to @xml/<your_xml_file>
Target XML chart definition will be applied to ChartView upon layout inflation (in most cases, when Activity.setContentView() method is executed). Consider following chart XML sample:
<?xml version="1.0" encoding="UTF-8"?>
<chart>
	<title text="Chart XML Sample"/>
	<area grid="@drawable/bk_grid">
		<area.xaxis position="Top"/>
	</area>
	<series type="Column" showlabel="true" points="20, 10, 40, 30, 50"/>
	<legend dock="Right"/>
</chart>

This XML defines chart containing title, background (referenced to application resources drawable bk_grid.png), column series and legend. Assigning this XML to ChartView will result following output:

4. XML file structure

Logical XML chart structure is expressed via areas, series, legends and titles. Every element can be specified in XML file with its corresponding attributes. If any of elements is not mentioned in chart XML declaration, it will be automatically created by chart building engine.

Overall XML chart structure:

<?xml version="1.0" encoding="UTF-8"?>
<chart>
	<area>
		<area.xaxis/>
		<area.yaxis/>
	</area>
	<series/>
	<legend/>
	<title/>
</chart>
Please refer to description below for complete attributes supported by each element.

4.1.Area attributes

Area is child element of "chart". Following attributes are supported:
NameTypeDescription
gridDrawable resource idDefines drawable reference to image that aiCharts will use to rnder area's grid background
backgroundDrawable resource idDefines drawable reference to image that aiCharts will use to render area's background
nameStringDefines area name

4.2. XAxis and YAxis attributes

Both: the xaxis and yaxis elements are expected to be children of area element. Following attributes are supported:
NameTypeDescription
positionChartAxis.Position enum namesDefines axis position. Used to change default position of axis.
visiblebooleanDefines axis visibility. True by default.
labels_visiblebooleanDefines labels visibility. True by default. Used to restrict axis from drawing it's labels.
labels_modeChartAxis.LabelsMode enum namesDefines labels generation mode.
titleStringDefines axis title name
ticks_modeChartAxis.TickMarkMode enum namesDefines tick mode
ticks_sizeintegerDefines tick size. Used to customize axis appearance.
formatMessageFormat patternDefines labels format. Used for custom labels scenarios.
spacingintegerDefines distance between axis elements.
paddingintegerDefines distance between axis and area.
scrollbar_enabledbooleanDefines scrollbar visibility. False by default.
grid_linescolorintegerDefines grid lines color.
grid_visiblebooleanDefines grid visibility. True by default. Used to restrict axis from drawing it's grid.
scale_mindoubleDefines minimal value of axis scale
scale_maxdoubleDefines maximal value of axis scale
scale_intervaldoubleDefines interval between labels
scale_intervalTypeChartAxisScale.IntervalType enum namesDefines type of interval between labels

4.3. Series attributes

Series is a chart's building block that takes care of data visualization. General purpose of setting series in XML is to define series immutable parts (color, type, width, ect) Allowed attributes:
NameTypeDescription
nameStringDefines series name. Legend uses this name to display series data. Generally, there's no need to set this attribute if access series by name and legend is not required
areaStringDefines area name. Tells series which area must use it. If this attribute not set, first area will use this series and draw it
legendStringDefines legend name. This is typically used to allow several legends in a single area. Setting legend name, tells series which legend it belongs to.
typeStringDefines ChartType name
pointscomma separated double arrayDefines Y values of points. For most cases, this attribute may be used for static data representation.
backgroundDrawable resource idDefines background resource. This drawable can be assigned just as much as any other: @drawable/<resource_id>
filterbooleanEnables color filter for background drawable
markerDrawable resource idDefines marker drawable resource
showlabelbooleanDefines label visibility. Identifies whether labels belonging to this series should be visible
colorInteger color valueDefines series color
borderInteger color valueDefines series border color
linewidthIntegerDefines series border or line width. This attribute is treated differently depending on chart type
halignAlignment enum namesDefines series label horizontal position
valignAlignment enum namesDefines series label vertical position

4.4. Legend attributes

Legend is an element above, below or somewhere near the chart area which explains what is represented by series
NameTypeDescription
nameStringDefines legend name
backgroundDrawable resource idDefines background resource. This drawable can be assigned just as much as any other: @drawable/<resource_id>
dockChartLeyoutElement.Dock enum namesDefines legend position
visiblebooleanDefines legend visibility

4.5. Title attributes

Titles are used to make user more information about the chart, types of data, timeframes.
NameTypeDescription
textStringDefines title text
backgroundDrawable resource idDefines background resource. This drawable can be assigned just as much as any other: @drawable/<resource_id>
dockChartLeyoutElement.Dock enum namesDefines legend position
halignAlignment enum namesDefines image horizontal position
valignAlignment enum namesDefines image vertical position
visiblebooleanDefines title visibility
↑ Go to top