Layouts in rMateChart

5. The Layout


5.1. The Role of Layouts in rMateChart

rMateChart generates charts by parsing the XML statements of layouts. Once the layout is transmitted to a swf file which matches with the desired chart type. Please refer to <Figure 2: The List of Chart Types>.  rMateChart draws charts and displays the value of data by using the built-in classes of the rMateChart components.

The following diagram shows the above process.

<Figure 5: rMateChart’s Operation Diagram>

5.2. Creating a Layout

Every layout of rMateChart must start with <rMateChart> tag and end with </rMateChart> tag. The layout is divided into three nodes such as Options, Charts (Column, Bar, Pie, etc) and Style nodes. In the Options node, you can set Caption, SubCaption and Legend of charts. In the Style node, you can apply CSS styles to charts. We will take a look at the Option nodes and Style nodes in this chapter.

For the Charts node, you can refer to chapter “6. Setting a Layout for the Type of Charts”.

As mentioned before in this document, the layout is basically written in XML format.

rMateChart allows you to access objects through the ID. The following example is the common method without using the ID. <fill> tag is an attribute of ColumnSeries in Charts node and SolidColor is an attribute  of <fill> tag. It can be expressed as below.

<rMateChart>
<Column3DChart showDataTips="true">
         .
             .
             .
        <series>
           <Column3DSeries yField="Profit">
               <fill>
                  <SolidColor color="0xFF0000">
               </fill>
           </Column3DSeries>
        </series>
     </Column3DChart>
</rMateChart>

<Example 13: Setting Attributes by Using the Common Method>

Accessing objects by the ID provides a more convenient way for writing a layout. Once you define a SolidColor instance using the ID, you can use this ID to refer to the SolidColor instance whenever you want to access the instance. Please see the below example.

<rMateChart>
<SolidColor id="color1" color="0xFF0000"/>
<Column3DChart showDataTips="true">
.
            .
                  .
       <series>                 // ID must be enclosed between curly brackets ({,})
        <Column3DSeries yField="Profit" fill="{color1}"/>
           <Column3DSeries yField="Cost" fill="{color1}"/>
       </series>
</Column3DChart>
</rMateChart>

<Example 14: Setting Attributes by Using ID>

You can see a good example of setting attributes by using ID. Please refter to <Example 69: A Layout for Dual-Axes> in “8.4.4” chapter . This example shows how different series can refer to their correspnding axes.

When we create a layout (regardless of types of charts), the Chart and Series terms will be used frequently. The following table is to summarize the concepts of the 2 terms.

Term	Description	Remark
Chart	It represents the visual parts of charts. It defines the appearances of charts like axes, background, size, etc. The most important role is to specifiy the position (coordinates) of the series.	ColumnChart, Column3DChart, PieChart, Pie3DChart, BarChart, etc
Series	It represents actual data. If you have three numeric data to express in charts, you must define three series for each data.	ColumnSeries, Column3DSeries, BarSeries, Pie3Dsereis, etc

<Table 4: The Descriptions of Chart and Series>

5.3. Setting up the rMateChart Tag in Layouts
The rMateChart tag indicates the beginning and the end of the layout. You can decorate charts with color, border and style by using the properties of the rMateChart tag.

Property	Value	Description
backgroundColor	RGB(default: 0xFFFFFF)	Specifies backgroud colors
backgroundAlpha	0.0 ~ 1.0(default:1.0)	Specifies background transparency
borderStyle	none | solid | inset | outset (default:none)	Specifies border lines
borderColor	RGB(default: 0xB7BABC)	Specifies border colors
borderThickness	Number (default:1)	Specifies border thicknesses.
cornerRadius	Number(default:0)	Specifies the roundness of the corders borders
paddingTop	Number(default:0)	Specifies top margins
paddingBottom	Number(default:0)	Specifies bottom margins
paddingLeft	Number(default:0)	Specifies left margins
paddingRight	Number(default:0)	Specifies right margins

<Table 5: The Properties of the rMateChart Tag>

<rMateChart cornerRadius="12" borderStyle="solid" backgroundColor="0xFFFF77"><Options><Caption text="Anual Report" />
......
</rMateChart>

<Example 15: A Layout to Use the Properties of the rMateChart Tag>

5.4. Setting up the Options Tag in Layouts

The Options tag in layouts is optional, not mandatory. This tag can be used to add a title, subtitle or legend in charts.

<rMateChart> <Options> <Caption text="Annual Report"/>  // Title <SubCaption text="2008"/>  // Subtitle<Legend/>  // Legend </Options> <Column3DChart showDataTips="true" width="100%" height="100%" >            <series> <Column3DSeries yField="Profit" displayName="Profit"> .                .                . </Column3DChart></rMateChart>

<Example 16: A Layout to Use the Options Tag>

<Figure 6: A Chart with the Title, Subtitle and Legend Created by Using the Options Tag>

5.4.1. Adding Titles and Subtitles

<Example 16: A Layout to Use the Options Tag> shows a layout for a Column3D chart. In this example, you can see how to add a title to charts by using the text attribute of <Caption> tag.

The following table shows the properties of the Caption and SubCaption tags.

Property	Value	Description
text	String	Specifies the title or subtitle
fontSize	number (default : Title=12, Subtitle=10)	Specifies the font size of the text.
fontWeight	bold | normal (default: bold)	Whether or not the style of the text is bold
fontStyle	normal | italic (default:normal)	Whether or not the style of the text is italic
textDecoration	none | underline (default: none)	Whether or not the style of the text is underline
color	RGB color value (default: 0x000000)	Specifies text colors
textAlign	center | left | right (default:center)	Specifies the position of the text
paddingLeft	number (default : 0)	Specifies left margins
paddingRight	number (default : 0)	Specifies rigth margins
paddingTop	number (default : 0)	Specifies top margins
paddingBottom	number (default : 0)	Specifies bottom margins

<Table 6: The Properties of the Caption and Subcaption Tags>

5.4.1. Adding the Legends

The legend for charts is usually used in multi-Series (multiple data representation) charts to write a subject for each data series.

In order to use legends you must define the displayName attribute of the series (if the chart you are creating is a Column3D chart, the name of the series is <Column3Dseries>) in charts. The value of the displayName attribute will be printed as the name of the legend.

The following table shows the descriptions of the properties of the Legend tag.

Property	Value	Description
position	bottom | left | right | top (default : bottom)	Specifies where the legend is shown
direction	horizontal | vertical (default:horizontal)	Specifies the direction of the each item in legends.
hAlign	center | left | right (default : center)	Specifies the horizontal alignment
vAlign	middle | top | bottom (default : middle)	Specifies the vertical alignment
labelPlacement	right | left | top | bottom (default:right)	Specifies where the text is placed based on the color marker
markerWidth	number (default : 10)	Specifies the width of color marker
markerHeight	number (default : 15)	Specifies the height of color marker
backgroundColor	RGB (default:0xFFFFFF)	Specifies background colors
color	RGB (default:0x000000)	Specifies text colors
fontSize	number (default:12, subtitle:10)	Specifies the font size of the text
fontWeight	bold | normal (default : bold)	Whether or not the style of the text is bold
fontStyle	normal | italic(default:normal)	Whether or not the style of the text is italic
textDecoration	none | underline(default: none)	Whether or not the style of the text is underline
useVisibleCheck	true | false (default:true)	Whether or not the check box is visible.
paddingLeft	number (default : 0)	Specifies left margins
paddingRight	number (default : 0)	Specifies rigth margins
paddingTop	number (default : 0)	Specifies top margins
paddingBottom	number (default : 0)	Specifies bottom margins
verticalGap	number (default : 6)	Specifies the margin gap of the vertical spacing between two items in legends.
horizontalGap	number (default : 8)	Specifies the margin gap of the horizontal spacing between two items in legends.

<Table 7: The Properties of the Legend Tag>

<Example 17: The Properties of Legend Tag>

5.4.3. Using the Data-Editor

 Data-Editor is located at the bottom of charts. If you click a cell in Data-Editor, the corresponding are of the chart will be checked. You can also modify a specific data in Data-Editor by double-clicking the cell. The modified data is applied to the chart instantly.

To display Data-Editor at the bottom of the chart, you have to add “useDataEditor=true” in the flashVars variable. Please refer to “4.1. Setting flashVars”  for further information.

Once you add “useDataEditor=true” to flashVars, you can specify the properties of Data-Editor by using the DataEditor tag. The following table shows the descriptions of the DataEditor tag.

Property	Value	Description
text	String	Specifies the text
fontSize	number(default : 12, subtitle: 10)	Specifies the font size of the text
fontFamily	Font name	Specifies the font name of the text.
fontWeight	bold | normal (default: bold)	Whether or not the style of the text is bold
fontStyle	normal | italic(default:normal)	Whether or not the style of the text is italic
textDecoration	none | underline(default: none)	Whether or not the style of the text is underline
color	RGB (default: 0x000000)	Specifies text colors
textAlign	center | left | right (default:center)	Specifies the alignment of the text
showOnInit	Boolean(default:false)	Whether or not the data editor is displayed with intial load
reverseRow	Boolean(default:false)	Whether or not the rows are displayed as reverse order of the chart’s
minColumnWidth	Number(unit of pixel, default:40)	Specifies the minimum size of the column width
editorHeight	Number(unit of pixel, default:100)	Specifies the height of Data-Editor
headerHeight	Number(unit of pixel, default:22)	Specifies the height of header-row in Data-Editor.
showHeaders	Boolean(default:true)	Whether or not the header is displayed
alternatingItemColors	RGB array	Specifies the background color of the row unit. (Must be added as an array of two or more RGB)
headerColors	RGB array	Specifies the background color of the header row. (Must be added as an array of two or more RGB)
horizontalGridLines	Boolean(default:false)	Whether or not the horizontal grid line is displayed
horizontalGridLineColor	RGB	Specifies the color of the horizontal grid line
verticalAlign	top, middle, bottom(default:top)	Specifies the vertical alignment of the cell
verticalGridLines	Boolean(default:true)	Whether or not the vertical grid line is displayed
verticalGridLineColor	RGB	Specifies the color of vertical grid line
borderColor	RGB	Specifies border colors
borderStyle	none, solid, inset, outset (default:solid)	Specifies border styles
borderThickness	Number(unit of pixel)	Specifies border thicknesses (borderStyle : solid)
selectionColor	RGB	Specifies the background color of the selected cell or the row
rollOverColor	RGB	Specifies background colors when mouse over

<Table 8: The Properties of the DataEditor Tag>

<Figure 7: A Chart with the DataEditor Tag>

5.5. Setting up the Style Tag (Appling CSS) in Layouts

<Style> tag is a pre-defined style sheet of charts. To apply <Style> tag to charts, you must follow the rules below.

① You must define <Style> node as a child of <rMateChart> node.
② The style name must be started with dot (.) and the first character of the style name must be lowercase.
③ The properties of the style must be started with the left curly bracket ({) and ended with the right curly bracket (}).
④ The colon (:) should be placed between the attribute name and the attribute value and at the end of a property definition the semicolon (;) should be placed.

The following table shows a correct example and a wrong example of the Style tag.

Correct example	Wrong example
<rMateChart>    <Options>        ... <Style>             .rMateChartStyle             {             backgroundColor:0xFFFFFE;             borderColor:0x77EE9E;             cornerRadius:12;             borderThickness:3;             borderStyle:solid;             }</Style> </rMateChart>	<rMateChart>    <Options>        ... <Style>             ChartStyle             [             backgroundColor:0xFFFFFE;             borderColor:”0x77EE9E”;             cornerRadius,12;             borderThickness:3;             borderStyle:’solid’;             ]</Style> </rMateChart>

<Example 18: A Layout with the Style Tag>

In the above example, we defined “.rMateChartStyle” as a Style node. The following example shows how to apply the above style to a chart.

<rMateChart styleName="rMateChartStyle"> <Options> <Caption text="Annual Report"/> </Options>
         ......     <Style> .rMateChartStyle { backgroundColor:0xFFFFFE; borderColor:0x77EE9E; cornerRadius:12; borderThickness:3; borderStyle:solid; }</Style>
</rMateChart>

<Example 19: Applying a <Style> Node to a Chart>

In the above example, rMateChartStyle is defined as a style of <rMateChart> node. To apply a <Style> node to charts, you have to set the attribute name of the styleName attribute in <rMateChart> node to the name of <Style> node as below.

styleName=”the style name you defined”. i.e) styleName=”rMateChartStyle”

The following table shows the descriptions of the properties of <Style> tag.

Name	Property	Lookup table	Remark
rMateChart	backgroundColor backgroundAlpha borderStyle borderColor borderThickness cornerRadius paddingTop paddingBottom paddingLeft paddingRight	<Table 5: The Properties of the rMateChart Tag>
l         Caption l         SubCaption l         Chart(ex:ColumChart)	fontSize fontWeight fontStyle textDecoration color fontFamily textAlign paddingLeft paddingRight paddingTop paddingBottom	<Table 6: The Properties of the Caption and Subcaption Tags>	The Chart refers to all the charts in rMateChart like Column3DChart, Pie3DChart, Bubble3Dchart, etc
l         Chart’s Series l         Chart’s axisTitleStyleName	fontFamily fontSize fontStyle fontWeight labelAlign(Column, Bar Series Only) labelPosition		The Properties and the valid values of axisTitleStyleName are the same as the Caption’s.

<Table 9: The Properties of the Style Tag>

The labelAlign attribute in series is used only for column series and bar series. The valid values of this attribute are “top | middle | bottom” for column series and “left | center | right” for bar series.

The following example shows how to use <Style> tag.

<rMateChart styleName="rMateChartStyle"> <Options> <Caption text="Annual Report" styleName="captionStyle"/> <SubCaption text="RiaMore Soft" styleName="subCaptionStyle"/> </Options> <DateFormatter id="dateFmt" formatString="M/D"/> <NumberFormatter id="numFmt"/> <Line2DChart showDataTips="true" styleName="chartStyle" axisTitleStyleName="chartAxisStyle"> <horizontalAxis> <DateTimeAxis id="hAxis" dataUnits="days" labelUnits="days" formatter="{dateFmt}" title="DateTime Axis"  interval="2" displayName="Date" alignLabelsToUnits="false" displayLocalTime="true"/>  </horizontalAxis> <verticalAxis>        <LogAxis id="vAxis" title="Log Axis" formatter="{numFmt}" interval="10" minimum="10" maximum="10000"/> </verticalAxis> <series> <Line2DSeries xField="Date" yField="Revenue" displayName="Revenue"> <showDataEffect>  <SeriesInterpolate/>  </showDataEffect> </Line2DSeries> </series> </Line2DChart> <Style> .rMateChartStyle   // Style definition - rMateChart { backgroundColor:0xFFFFFE; borderColor:0x77EE9E; cornerRadius:12; borderThickness:3; borderStyle:solid; } .captionStyle  //Style definition - Caption { fontSize:12; fontFamily:Tahoma; fontWeight:bold; color:0x777777; } .subCaptionStyle  //Style definition - Subcaption { fontSize:11; fontStyle:italic; color:0x777777; } .chartStyle  //Style definition - Chart { fontSize:11; fontStyle:italic; color:0x0000FF; } .chartAxisStyle  // Style definition - Axis title { fontSize:13; fontWeight:bold; color:0xFF00FF; } </Style></rMateChart>

<Example 20: a Layout with a <Style> Node>

<Figure 8: A Chart with a <Style> Node>

Click here for detail information & Demos