Getting Started

Pictogram Chart is used to represent data using symbols (icons, pictures..). As a pictorial graph, Pictogram Chart uses relative size or duplicates the same symbol of icon to compare different data. The Pictogram Chart is enhanced by many features that make it easy to use and make it a rich skinable component.

Pictogram Chart can be integrated easily in any MXML application. The user only needs to:

< ?xml version="1.0" encoding="utf-8"?>
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" xmlns:pictogramChart="fr.kapit.pictogram.*">
	
	< fx:Declarations>
		< fx:XML id="dp" xmlns="">
			< Countries>
			< Country code="FR" name="France" value="55"/>
			< Country code="USA" name="America" value="62"/>
			< Country code="TN" name="Tunisia" value="21"/>
			< Country code="EGY" name="Egypt" value="31"/>
			< Country code="GR" name="Germany" value="57"/>
			< Country code="IT" name="Italy" value="23"/>
			< Country code="UK" name="United Kingdom" value="59"/>
			< /Countries>
		< /fx:XML>
	< /fx:Declarations>
	
	< s:Group width="100%" height="100%">
		< pictogramChart:PictogramChart dataProvider="{dp}" 
						   valueField="@value"
						   metaDataField="@name"
						   cellGridPercentHeight="80" cellGridPercentWidth="50" 
						   width="100%" height="100%">
	
		< /pictogramChart:PictogramChart>
	< /s:Group>
	
< /s:Application>

The KapLab Pictogram Chart extends a SkinnableContainer, so it can handle a skin class which have an optional skin part, the contentScroller. The scroller will be used for panning purposes. Generally, the contentScroller is defined in the Pictogram Chart skin with the contentGroup as viewport.

The Pictogram Chart as a spark component is able to work with layouts. By default, it uses the TileLayout. Many styles (colors, paddings...) are associated to this default layout. It is advised to refer to the ASDOC for more details about Styles. The user can also define his own layout and set it to the Pictogram Chart component. In the following code, we will try to show how to define a user defined layout for the Pictogram Chart component

< ?xml version="1.0" encoding="utf-8"?>
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" xmlns:pictogramChart="fr.kapit.pictogram.*">
	
	< fx:Declarations>
		< fx:XML id="dp" xmlns="">
			< Countries>
			< Country code="FR" name="France" value="55"/>
			< Country code="USA" name="America" value="62"/>
			< Country code="TN" name="Tunisia" value="21"/>
			< Country code="EGY" name="Egypt" value="31"/>
			< Country code="GR" name="Germany" value="57"/>
			< Country code="IT" name="Italy" value="23"/>
			< Country code="UK" name="United Kingdom" value="59"/>
			< /Countries>
		< /fx:XML>
	< /fx:Declarations>
	
	< s:Group width="100%" height="100%">
		< pictogramChart:PictogramChart dataProvider="{dp}" 
						   valueField="@value"
						   metaDataField="@name"
						   cellGridPercentHeight="80" cellGridPercentWidth="50" 
						   width="100%" height="100%">
	
			<pictogramChart:layout>
				<s:TileLayout 
					columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight" requestedColumnCount="3" requestedRowCount="3"/>
			</pictogramChart:layout>
		< /pictogramChart:PictogramChart>
	< /s:Group>
	
< /s:Application>