Outline

ICollectionView data
CSV Data
Data with children property or customTreeDataDescriptor
Filter Path

Rendering

Displaying Properties
Advanced Properties

Ring Chart Legend
Events

Ring Chart Events
Ring Chart Legend Event

Introduction

RingChart is used to present data in form of rings. Just like a pie chart, RingChart shows relationship of a part to a whole.
RingChart is a ready-to-use Flex component that can be easily integrated in any Flex or Air application to provide a powerful data analysis tool and can be parameterized using a large set of properties.

Back to Top

Integration

RingChart can be integrated easily in any Flex application. You will only need to:

import the SWC containing the RingChart component
insert it in the MXML code
specify the dataProvider (XML, CSV, ArrayCollection ...)
specify the main parameters (getDataAsSeries)
specify other optional parameters (radius, innerRadius, gapBetweenRings, gapBetweenWedges ...)

When integrating the component, non specified options will be replaced internally by default ones (Default Item Color, Default Tooltip...).

Basic Integration Sample

Back to Top

Data Provider

RingChart, as any other Kap Lab component, was designed to handle any type of data input using an internal data parsing model. It enables advanced interpretation of any data source through a filtering option that can be applied on the CSV files and ICollectionView instances.

ICollectionView instances including XML, ArrayCollection
Objects with children property or with a custom TreeDataDescriptor
CSV files.

ICollectionView data

An ICollectionView is a view onto a collection of data. All Classes implementing the ICollectionView interface (XML, XMLListCollection, ArrayCollection) are handled by the RingChart
The data provided to the component can be parsed as its structure. In fact, data can defined in these two following ways:

As series: Each object in an ArrayCollection or each tag in a XML will contain the data displayed on the wedges of a serie the RingChart.
Not as series: Each object in the ArrayCollection or each tag in a XML will contain the data displayed on the different wedges in all the series of the object.

RingChart provides a property getDataAsSeries. The property is set to false as a default value. The developer has to set it to true if he wants to parse his data in a serial structure.

When manipulating a provider where data is not set as series, the user must set the wedgeLabel property so that RingChart knows how to affect names to the different wedges.

ICollectionView Integration Sample

Manipulating a provider containing data as series

MXML Data Source

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#CCCCCC" layout="absolute" xmlns:ns1="fr.kapit.ringchart.*" >
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
   			
                         [Bindable]
   			 private var revenues:ArrayCollection = new ArrayCollection([
   			 {Total:137607008000, Axxa:65995000000, EADS:34206000000},
   			 {Total:153802000000, Axxa:72099000000, EADS:39434000000},
                         {Total:158752000000, Axxa:86857000000, EADS:39123000000}
                         ]);   			
		]]>
	</mx:Script>

		<ns1:RingChart id="myRingChart" 
                                     dataProvider="{revenues}" 
                                     getDataAsSeries="true"
                                     radius="200"
                                     radialDisplacement="30" 
                                     width="100%" height="100%"  
                                     viewTooltips="true" viewLabel="true"
                />
	
</mx:Application>

Output

Manipulating a provider containing data not set as series

MXML Data Source

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#CCCCCC" layout="absolute" xmlns:ns1="fr.kapit.ringchart.*" >
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
   			
                         [Bindable]
   			 private var revenues:ArrayCollection = new ArrayCollection([
   			 {name:"Total", year05:137607008000, year06:153802000000, year07:158752000000},
   			 {name:"Axxa", year05:65995000000, year06:72099000000, year07:86857000000},
                         {name:"EADS", year05:34206000000, year06:39434000000, year07:39123000000}
                         ]);   			
		]]>
	</mx:Script>

		<ns1:RingChart id="myRingChart" 
                                     dataProvider="{revenues}" 
                                     getDataAsSeries="false"
                                     wedgeLabel="name"
                                     radius="200"
                                     radialDisplacement="30" 
                                     width="100%" height="100%"  
                                     viewTooltips="true" viewLabel="true"
                />
	
</mx:Application>

Output

Back to Top

CSV Data

CSV Files are organized in rows and columns using a CSV delimiter. A data field has a row index and column index, generally described in a String format while it can represent a Date, a Number or other content. RingChart handles CSV parsing, reconstruction and data content interpretation via a set of options. In this part we will show how RingChart meets your needs for CSV content visualization.
RingChart provides some extra optional properties to provide an advanced CSV data input parsing. These properties and methods are following:

filterPath : used to extract needed data from the CSV file;
csvDelimiter : used to indicate the delimiter of the CSV file(by default it is set to ";")
withHeaders : used to indicate if the first row should be considered as column headers (by default is set to true);
recordDelimiter : used to indicates the delimiter of a field (if it exists). It is generally used when data field content contains CSVDelimiter string as in such situations CSV parsing produces wrong results. By default, the recordDelimiter property is "" and can be modified when needed.
reportingFunction: used to transform the data fields arrays into a real data by applying standard or custom functions.

It is advised to visit the Components Data Input section of all Kap Lab components to get more details about the data parsing properties and functions.

Same as an ICollection data, the user has to differentiate between the data being set as series or not.

When manipulating a provider where data are not set as series the user must set the wedgeLabel property so that RingChart knows how to affect names to the different wedges.

CSV File Integration Sample

Manipulating a CSV File containing data not set as series

CSV Data Source

name;year05;year06;year07
Total;137607008000;153802000000;158752000000
Axa;65995000000;72099000000;86857000000
EADS;34206000000;39434000000;39123000000

MXML Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#CCCCCC" layout="absolute" xmlns:ns1="fr.kapit.ringchart.*" creationComplete="onCreationComplete()">
	<mx:Script>
		<![CDATA[
			[Embed(source="CSV",mimeType="application/octet-stream")]
   			private var CSV:Class;
   			
   			private function onCreationComplete():void
   			{
   			    var byteArray:ByteArray = new CSV() as ByteArray;
			    var content:Object = byteArray.readUTFBytes(byteArray.length);
			    myRingChart.dataProvider = String(content);
   			}
   		]]>
     </mx:Script>
     
		<ns1:RingChart 	id="myRingChart"  
		                 wedgelabel="name"
		                 getDataAsSeries="false"
		                 radialDisplacement="30" 
		                 radius="200"
		                 width="100%" height="100%" 
		                 viewTooltips="true" 
		                 viewLabel="true" />
	
</mx:Application>

Output

Manipulating a CSV File containing data set as series

CSV Data Source

Total;Axa;EADS
137607008000;65995000000;34206000000
153802000000;72099000000;39434000000
158752000000;86857000000;39123000000

MXML Application


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#CCCCCC" layout="absolute" xmlns:ns1="fr.kapit.ringchart.*" creationComplete="onCreationComplete()">
	<mx:Script>
		<![CDATA[
			
			[Embed(source="CSV",mimeType="application/octet-stream")]
   			private var CSV:Class;
   			
   			private function onCreationComplete():void
   			{
   				var byteArray:ByteArray = new CSV() as ByteArray;
				var content:Object = byteArray.readUTFBytes(byteArray.length);
				myRingChart.dataProvider = String(content);
   			}
		]]>
	</mx:Script>

		<ns1:RingChart id="myRingChart"  
                                     radialDisplacement="30" 
                                     radius="200"  
                                     getDataAsSeries="true"
                                     width="100%" height="100%" 
			             viewTooltips="true"
                                     viewLabel="true" 
			  />
	
</mx:Application>

Output

Back to Top

Data with children property or customTreeDataDescriptor

In some application cases like administration or introspection applications , the user wants to parse and display the content the internal data structures.RingChart, thanks to an internal data parsing model, allows such functionalities to answer this use case.

The developer should only give the reference to its object instance and a custom Tree Data Descriptor (via the treeDataDescriptor property (see common Data Input section to more details) allowing custom navigation inside the object. This feature is applied for object with no children property.

The options used for ICollectionView instances described previously can be also applied to this kind of data format.

Back to Top

Filter Path

Filter Path is the most important field when user wants to apply filter on the data provider.
the filterPath can be used with different data kinds ArrayCollection, XML, CSV)

Filter Path Integration Sample

Back to Top

Rendering

In this section we will describe the different properties and features provided by RingChart in order to let the developer customize his application.

Displaying Properties

innerRadius : used to indicates an inner radius, by default it is set to 0;
outerRadius : used to indicates an outer radius, by default it is calculated using the height and the width of the component's container;
distanceBetweenRings : used to specifiy the distance between the different rings. By default it is set to 0;
distanceBetweenWedges : used to specifiy the distance between wedges in each ring. By default it is set to 0;
viewLabel: used to disable/enable the label displaying;
viewToolTip : used to disable/enable the tooltip displaying;
viewPercentage : used to disable/enable percentage displaying over the wedge;

Back to Top

Advanced Properties

radialDisplacement : used to indicate to the RingChart the distance to use when expanding a wedge on clicking on it;
selectedWedge: used to select all the wedges that describes a same entity. To select a specific wedge on a serie users have to specify both selectWedge and selectedSerie;
selectedSerie : used to select a serie

Back to Top

Ring Chart Legend

In order to describe what RingChart is displaying the user can instantiate a RingChartLegend.

Legend Integration Sample

Back to Top

Events

Ring Chart Events

RingChart dipatches events that can be captured by the developer to specify a custom behavior. These events ensure an easy deployment and interaction with the component.
The dispatched events are listed in the following table:

Event	Description
click	Dispatched when a wedge is clicked
rollOver	Dispatched when the mouse is rolled over a wedge
rollOut	Dispatched when the mouse is rolled out of a wedge

Ring Chart Legend Event

This event is dispatched by the legend instance when rolling over it. This permits an interaction between the legend and the native application.

Event	Description
nodeRollOver	Dispatched when the mouse is rolled out over an item in the legend

Back to Top

Developer Guide

Introduction

Integration

Data Provider

ICollectionView data

CSV Data

Data with children property or customTreeDataDescriptor

Filter Path

Rendering

Displaying Properties

Advanced Properties

Ring Chart Legend

Events

Ring Chart Events

Ring Chart Legend Event

Join the Lab

Buy Commercial Edition

and Support

Related Projects

Latest Updates: 2010/07/12

Top News

Kap2Flex & Klovis new releases

ConfluenceFx release 1.0!

Need Information?

Explore

Why Kap Lab ?

Developer Guide

Introduction

Integration

Data Provider

ICollectionView data

CSV Data

Data with children property or customTreeDataDescriptor

Filter Path

Rendering

Displaying Properties

Advanced Properties

Ring Chart Legend

Events

Ring Chart Events

Ring Chart Legend Event

Join the Lab

Account

Buy Commercial Edition

and Support

Related Projects

Latest Updates: 2010/07/12

Top News

Kap2Flex & Klovis new releases

ConfluenceFx release 1.0!

Need Information?

Explore

Why Kap Lab ?