Setting a Layout for the Type of Charts, Common Properties of Charts

6. Setting a Layout for the Type of Charts


6.1. The Common Properties of Charts

Based on the axis in charts, charts are divided into two categories. The one is the Cartesian chart that has axes and the other is the polar chart that has no axis (Pie and Doughnut charts belong to this category).

The properties of Cartesian charts are listed below.

Property	Value	Description
horizontalAxis	CategoryAxis, LinearAxis, DateTimeAxis, LogAxis Object	Specifies the horizontal axis (X axis)
verticalAxis	CategoryAxis, LinearAxis, DateTimeAxis, LogAxis Object	Specifies the vertical axis (Y axis)
horizontalAxisRenderers	Axis3DRenderer, Axis2DRenderer	Specifies the renderer of the horizontal axis.
verticalAxisRenderers	Axis3DRenderer, Axis2DRenderer	Specifies the renderer of the vertical axis.
series	Series of Charts (ex:Column3DSeries, Line2Dseries, etc)	Specifies the series of charts
backgroundElements	GridLines	Specifies the background of the inner area of an axis.
showDataTips	true | false	Whether or not the tooltip is displayed when mouse over
paddingTop	Number	Specifies top margins
paddingBottom	Number	Specifies bottom margins
paddingLeft	Number	Specifies left margins
paddingRight	Number	Specifies rigth margins
itemClickJsFunction	JavaScript function name	Specifies the function to be called by charts when you clik the item.
dataTipJsFunction	JavaScript function name	Specifies the function for a user-defined tooltip
width	Number | %(percentage)	Specifies a horizontal size
height	Number | %(percentage)	Specifies a vertical size
gutterLeft	Number	Specifies the left margin of the axis
gutterRight	Number	Specifies the rigth margin of the axis
gutterTop	Number	Specifies the top margin of the axis
gutterBottom	Number	Specifies the bottom margin of the  axis

<Table 10: The Common Properties of Cartesian Charts>

The properties of Polar charts are listed below.

Property	Value	Description
innerRadius	0.0 ~ 1.0(default:0.0)	Specifies the size of the empty space like the center of a doughnut chart. As the value reaches to 1.0, the size of the empty space grows. (0.0 = pie chart)
showDataTips	true | false(default:false)	Whether or not the tooltip is displayed when mouse over
explodable	true | false(default:true)	Whether or not a piece of the doughnut (or pie) chart pops up when mouse click.
series	PieGradationSeries, Pie3DSeries	Specifies the series of charts
width	Number | %(percentage)	Specifies the horizontal size
height	Number | %(percentage)	Specifies the vertical size
itemClickJsFunction	JavaScript function name	Specifies the function to be called by charts when you clik the item.
dataTipJsFunction	JavaScript function name	Specifies the function for user-defined tooltip

<Table 11: The Common Properties of Polar Charts>

6.2. The Axis of Cartesian Charts

Except Pie and doughnut chart, all charts (=Cartesian charts) have X axis (= horizontal axis) and Y axis (= vertical axis).

There are two types of axes. The one is the category type and the other is the numerical type. In categroy type, there is only one axis, CategroyAxis. CategoryAxis is used to define a form of text strings. If you cannot   quantify something or someone but you want to make groups then you can use CategoryAixs. For example, you can use the fields of axis as text strings such as departments (=Management Division, Research Department, etc) and month (=january, febuary, etc). In numerical type, there are three types of axes, LinearAxis, LogAxis and DateTimeAxis. LinearAxis is for continuous data (that is the general numerical values), LogAxis is for logarithmic functions and DataTimeAxis is to express the date & time format.

The properties for the each axis are listed below.

Axis	Property	Value	Description
CategoryAxis	categoryField	Field name of data (ex:Month)	Specifies the field names of data. This is mandatory to create a category axis.
	displayName	String	Specifies the text string appeared in the tooltip. If you don’t specify this value, the name of the category field will appear in tooltip.
	Title	Stirng	Specifies the title of an axis
	labelJsFunction	JavaScript function name	Specifies the user-defined function to custome the text string of a label
LinearAxis	Interval	Number	Specifies the gap between two consecutive  labels
	displayName	String	Specifies the text string appeared in the tooltip.
	Minimum	Number	Specifies the minimum of the axis label.
	Maximum	Number	Specifies the maximum of the axis label.
	Title	Stirng	Specifies the title of an axis
	labelJsFunction	JavaScript function name	Specifies the user-defined function to custome the text string of a label
DateTimeAxis	dataUnits	milliseconds, seconds, minutes, hours, days, weeks, months, years	Specifies a unit of data
	labelUnits	milliseconds, seconds, minutes, hours, days, weeks, months, years	Specifies a unit of label
	Title	Stirng	Specifies the title of an axis
	Interval	Number	Specifies the interval between two consecutive labels. If the space is too narrow to display, the value can be ignored
	dataInterval	Number	Specifies the interval between two consecutive data. If you specify as   dataUnits=”second” and the actual interval between two consecutive data is 3 seconds, you have to specify as dataInterval=4. It means that rMateChart treats every 3 seconds as a unit and renders it at 4th location. (based on the chart types, this property can be ignored)
	displayName	String	Specifies the text string appeared in the tooltip.
	displayLocalTime	false|true(default:false)	Whether or not the local time zone is used. If the value is false, Greenwich Mean Time will be used.
	labelJsFunction	JavaScript function name	Specifies the user-defined function to customize the text string of a label
LogAxis	interval	the multiplier of 10	Specifies the interval between two consecutive labels.
	minimum	Number	Specifies the minimum of the axis label.
	maximum	Number	Specifies the maximum of the axis label.
	title	Stirng	Specifies the title of an axis
	displayName	String	Specifies the text string appeared in the tooltip.
	labelJsFunction	JavaScript function name	Specifies the user-defined function to custome the text string of a label

<Table 12: The Properties for Axes>

6.2.1. An Example of CategoryAxis and LinearAxis

In the below example, CategoryAxis is defined as a horizontal axis. The value of CategoryField must be the same as the item name of the data in charts. In this example, the Month field in data is used as a category name of the horizontal axis. If you do not define the axis, the default axis will be LinearAxis.

<rMateChart backgroundColor="0xFFFFEE" cornerRadius="12" borderStyle="solid"><Options><Caption text="Anual Report"/></Options><Column3DChart showDataTips="true">
 <horizontalAxis>  // CategoryAxis is defined as a horizontal axis<CategoryAxis categoryField="Month" title="Category Axis" /></horizontalAxis>
 <verticalAxis>  // LinearAxis is defined as a vertical axis<LinearAxis maximum="3500" title="Linear Axis"/></verticalAxis><series><Column3DSeries yField="Profit" displayName="Profit"><showDataEffect><SeriesInterpolate /></showDataEffect></Column3DSeries></series></Column3DChart></rMateChart>

<Example 21: Using CategoryAxis and LinearAxis>

6.2.2. An Example of DateTimeAxis and LogAxis

<rMateChart backgroundColor="0xFFFFEE" cornerRadius="12" borderStyle="solid"><Options><Caption text="Anual Report"/> </Options><Line2DChart showDataTips="true">
<horizontalAxis> // DataTimeAxis is defined as a horizontal axis<DateTimeAxis dataUnits="days" labelUnits="days" title="DateTime Axis" interval="3" displayName="Date" displayLocalTime="true"/> </horizontalAxis>
<verticalAxis> // LogAxis  is defined as a vertical axis<LogAxis title="Log Axis" interval="10" minimum="10" maximum="10000" /> </verticalAxis><series><Line2DSeries xField="Date" yField="Profit" displayName="Profit"/></series></Line2DChart></rMateChart>

<Example 22: Using DateTimeAxis and LogAxis>

• Important : If you use DataTimeAxis, you have to specify the DateTime field in the Series (=Line2Dseries, Column3Dseries..).

For example in column charts, if you want to use DateTimeAxis as a horizontal axis, you have to specify xField (in case of bar charts which use DateTimeAxis as a vertical axis, yFiled should be specified). xField represents the data field name of the corresponding time zone. It can be understood that xField is the same as cateogoryField in CategoryAxis but you have to specify it as the attribute of series (not the attribute of DateTimeAxis).

Click here for detail information & Demos