Building Lightweight, Mobile-Ready Charts with FXG

Using system resources effectively is always on developers minds, particularly when building mobile applications. In “Hero”, many components will be optimized for mobile devices. Traditional full-featured charting components, however, may still be heavy on a mobile phone. The good news is that in addition to the MX charting components, Flex also makes it easy to create custom and lightweight components for specific use cases.

As an example, here are four very simple charts built with just a few lines of FXG. They are by no means complete components: just a starting point to show one way of doing simple charts on mobile devices.

The first example is a simple Line Chart. For example, it could represent the value of an investments portfolio over the last twelve months. See the source code below.

A simple Area Chart:

A simple real time chart plotting value changes on a time axis. For example, it could represent real time market data.

Another real time example:

Here is the source code for the first chart. You can download the project with the four charts here.

<?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"
			   applicationComplete="generateData()" width="480" height="400" backgroundColor="#474747">

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			protected var items:ArrayCollection;

			protected function generateData():void
			{
				items = new ArrayCollection;
				for (var i:int=0; i<12; i++)
				{
					items.addItem(30000 + Math.random() * 20000);
				}
				drawChart();
			}

			protected function drawChart():void
			{
				var pathData:String = "";
				for (var i:int=0; i<items.length; i++)
				{
					var yTo:Number = chart.height - items[i] / 60000 * chart.height;
					var xTo:Number = chart.width / 11 * i;
					pathData += (i==0?"M ":" L ") + xTo + " " + yTo;
				}
				path.data = pathData;
			}

		]]>
	</fx:Script>

	<s:SkinnableContainer id="chart" backgroundColor="#505050" top="8" left="8" right="8" bottom="36">
		<s:Path id="path">
			<s:stroke>
				<s:SolidColorStroke weight="1" color="#FFFFFF" />
			</s:stroke>
		</s:Path>
	</s:SkinnableContainer>

	<s:Button label="Change Data" click="generateData()" left="8" bottom="8"/>

</s:Application>

  • Pingback: Flex learner | Blog | Building Lightweight, Mobile-Ready Charts with FXG()

  • Farid Valipour

    Dear Friend
    Thanks and appreciate.

    it’s simple and powerful idea.

    BR
    Farid Valipour

  • Guillaume

    Hi Christophe,

    That’s an interesting use of the Path object. But I always wondering how we can interact with this object. Imagine you have 2 charts on top of each other and you want to detect the mouseOver/click/..etc. on each chart. It seems impossible. You can just interact with the component that house the Path, which is actually a rectangle :(
    Is there a way to only detect these kind of events on a ‘custom shape’ path ?
    ty,
    G

  • @Guillaume – You could put each Path in its own Group with a click event. Set mouseEnabledWhereTransparent=”false” on the Group to only receive mouse events when the mouse is over shapes in the Group.

  • Guillaume

    @Steven – Thanks for the hint, I ‘ll give it a try.
    G

  • Pingback: Swf.hu 2.0 – flash és webfejlesztés » Heti linkajánló 2010/39()

  • Awesome, thanks!

  • Pingback: AH: Inspecting and creating a custom Spark GraphicElement - Andy Hulstkamp. Seedlings for RIAs()

  • @guillaume for interaction, you can use the container mouse position, the X-Y should give you the same data than the graph …

  • very good this pagevery good this page

  • Pingback: Flexpert to the rescue | Drawing charts in a Flex 4.5 mobile application()

  • Tadeusz

    I love it !

  • Victor

    Thanks a lot for this example!

  • I’ll try thanks.

  • Thanks very good example

  • Thanks for Article!!! I try …. ;-)

  • Absolutely awesome! I´m lovin´ it!

  • The most cost effective boot Adidas is giving this coming year for girls can be an built-in raise boot, your adiCROSS Watts, that amounted to simply $67.Ambigu zero. Should you be looking for that entire the sport of golfing boot delivering the highest in security as well as manage, it’ll sadly cost you a minimum of a $100.Ambigu zero quickly following handling and shipping. Heading barefoot is one of the unique pleasures involving donning footwear. There is no better minute than anytime that stuffy or uncomfortable shoes or boots finally comes off also as your toes turn out to be free. I actually like going without footwear when attainable yet need to have sneakers through a while. Putting on sneakers with the task is one area on the flip side have to have a lot more total overall flexibility following hours.

  • Thank you for your tutorials and blogs.

  • for example i want to list all cities in db
    and when clicked the city name, listing a that city persons.

css.php