Series Chart
A series chart displays related data as a group. Both the line chart
and bar chart support series data. The following figures show examples
of series charts.
Figure 1. Series bar chart example
Figure 2. Series line chart example
To create a series chart, you should group related segments using the
“group” element, as shown in the code example below. The “label”
attribute of the “group” element is used to label the grouped
data. The “series” attribute of the “segment”
element is used to provide the label for each data series.
<xchart id="bar1" type="barchart" title="Time Report" background-color="#CCCCCC"
major-tick-spacing="10" minor-tick-spacing="2" width="100%"
height="100%">
<group label="Design">
<segment value="10" series="Developer1"/>
<segment value="20" series="Developer2"/>
<segment value="30" series="Developer3"/>
<segment value="40" series="Developer4"/>
</group>
<group label="Analysis">
<segment value="15" series="Developer1"/>
<segment value="25" series="Developer2"/>
<segment value="35" series="Developer3"/>
<segment value="45" series="Developer4"/>
</group>
<group label="Develop">
<segment value="20" series="Developer1"/>
<segment value="30" series="Developer2"/>
<segment value="30" series="Developer3"/>
<segment value="40" series="Developer4"/>
</group>
<group label="Testing">
<segment value="25" series="Developer1"/>
<segment value="35" series="Developer2"/>
<segment value="30" series="Developer3"/>
<segment value="40" series="Developer4"/>
</group>
<group label="Deploy">
<segment value="30" series="Developer1"/>
<segment value="40" series="Developer2"/>
<segment value="30" series="Developer3"/>
<segment value="40" series="Developer4"/>
</group>
</xchart>
Next: Localization and XChart
Back to: Application
Guide
|
