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>

18 Responses to Building Lightweight, Mobile-Ready Charts with FXG

  1. Farid Valipour September 24, 2010 at 4:52 am #

    Dear Friend
    Thanks and appreciate.

    it’s simple and powerful idea.

    BR
    Farid Valipour

  2. Guillaume September 25, 2010 at 1:57 am #

    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

  3. Steven Shongrunden September 27, 2010 at 12:55 am #

    @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.

  4. Guillaume September 27, 2010 at 3:25 am #

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

  5. luiz tarabal October 1, 2010 at 2:53 am #

    Awesome, thanks!

  6. Thomas October 20, 2010 at 8:45 am #

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

  7. porno November 11, 2010 at 10:58 am #

    very good this pagevery good this page

  8. Tadeusz December 30, 2010 at 7:05 am #

    I love it !

  9. Victor March 26, 2011 at 6:03 pm #

    Thanks a lot for this example!

  10. Bendito, Ahorro April 18, 2011 at 9:36 am #

    I’ll try thanks.

  11. Remedi, Estanterias April 20, 2011 at 9:49 am #

    Thanks very good example

  12. massagegeraete.com February 19, 2012 at 4:09 pm #

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

  13. Steve Sessel March 17, 2012 at 4:17 pm #

    Absolutely awesome! I´m lovin´ it!

  14. 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.

Trackbacks/Pingbacks

  1. Flex learner | Blog | Building Lightweight, Mobile-Ready Charts with FXG - September 23, 2010

    […] Continue reading here: Building Lightweight, Mobile-Ready Charts with FXG […]

  2. Swf.hu 2.0 – flash és webfejlesztés » Heti linkajánló 2010/39 - September 27, 2010

    […] Building Lightweight, Mobile-Ready Charts with FXG Mobil telefonokon egyszerűen használható FXG vonal diagramok készítése. […]

  3. AH: Inspecting and creating a custom Spark GraphicElement - Andy Hulstkamp. Seedlings for RIAs - October 8, 2010

    […] For the FXG-Path building approach see the great lightweight charts by Christophe […]

  4. Flexpert to the rescue | Drawing charts in a Flex 4.5 mobile application - December 15, 2010

    […] But we have to live with it now and find another solution. Christophe Coenraets wrote an excellent blog post about using FXG to draw some lightweight charts in a mobile Flex application, but after some […]

Leave a Reply

css.php