Home » ActionScript 3.0, Flex, Sharepoint

Flash builder 4 chart to display SharePoint 2010 list data

12 March 2011 One Comment
Share on Facebook

Flash Builder Charts are used to represent the data in graphical way. We are going to leverage the Flash Builder charting component to display data stored in sharepoint 2010 list. There are variety of Flash builder 4 charts available.

  • Area charts
  • Bar charts
  • Bubble charts
  • Candlestick charts
  • Column charts
  • HighLowOpenClose charts
  • Line charts
  • Pie charts
  • Plot charts
  • Multiple data series
  • Multiple axes

We are going to create Flash builder chart by consuming SharePoint 2010 list data as data source. First download and setup SharePoint as3 connector.

Create a SharePoint List with following Specification:

1. Create a new SharePoint Custom List and name it as “SiteUsage”. Add three custom columns by names “Website”, “Usage” and “Month”, all three columns are of type “Single line of text”. Please check with the following figure, you can enter your own values.

SharePoint 2010 charting - Flex charting

Note: The Column name “Title” in SharePoint 2010 list is edited as “Website”.

Entire Flash builder code and Explanation follows:

<?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" minWidth="955" minHeight="600" 

creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import com.sharepoint.SharePointConnector;
			import com.sharepoint.events.SharepointEvent;
			import com.sharepoint.services.*; 

			import mx.controls.Alert;

			private var _sharepoint:SharePointConnector;
			[Bindable] private var xml:XMLList;

			private function init():void
			{
				_sharepoint = new SharePointConnector();

				_sharepoint.connect( "http://ea.sharepoint.designscripting.com/teams/CONNECTOR/" );
				_sharepoint.addEventListener( SharepointEvent.CONNECTED, handleConnectedEvent );
			}

			private function handleConnectedEvent( e:SharepointEvent ):void
			{
				Alert.show( "Sharepoint Connected:::"+e.connected );

_sharepoint.getList( loadedXML, "%7B86FE2F59%2D4DF4%2D4098%2DA8C3%2D42E65DA1EE5C%7D", "FilterField1=Month&FilterValue1=March2011")
			}

			private function loadedXML(_xml:XML):void{
				xml = _xml.data;

			}

		]]>
	</fx:Script>
	<s:Panel>
<mx:ColumnChart	id="column" dataProvider="{xml.children()}">
	<mx:horizontalAxis>
		<mx:CategoryAxis categoryField="@LinkTitle"/>
	</mx:horizontalAxis>
	<mx:series>
		<mx:ColumnSeries
			yField="@Usage"
			displayName="@Usage"
			/>
	</mx:series>
</mx:ColumnChart>
	</s:Panel>
</s:Application>

2. Connect to SharePoint List by passing the SharePoint site URL.

_sharepoint.connect( "http://ea.sharepoint.designscripting.com/teams/CONNECTOR" );

3. Retrive and query the SharePoint List by “March2011″ month, using the getList method of SharePoint Connector class.

_sharepoint.getList( loadedXML, "%7B59784B34%2D9AE6%2D4866%2DA9D0%2D73D5A2185955%7D", 

"FilterField1=Month&FilterValue1=March2011");

Note: Please read tutorial of Retriving SharePoint 2010 list data.

4. Create a column chart in Flash Builder 4 and supply the result XML data as DataProvider.

<mx:ColumnChart	id="column" dataProvider="{xml.children()}">
	<mx:horizontalAxis>
		<mx:CategoryAxis categoryField="@LinkTitle"/>
	</mx:horizontalAxis>
	<mx:series>
		<mx:ColumnSeries
			yField="@Usage"
			displayName="@Usage"
			/>
	</mx:series>
</mx:ColumnChart>

Note: The Column name “Title” in SharePoint 2010 list is edited as “Website” and in the code it is refered as LinkTitle.

Output of the chart:

The Chart will now display the Usage on the Y Axis and name of Websites on the X Axis.

Flex chart output

Conclusion:

Creating Flash Builder charts by cosuming the SharePoint list is very easy using the SharePoint Connector class. If you find difficult please go through the SharePoint Connector Actionscript classes or comment below.

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


One Comment »

  • sirajudeen said:

    Hi sharvan

    Everything fine expect the query not working pls check it…..

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.