Drawing charts in a Flex 4.5 mobile application

Published on: December 15, 2010
Categories: AIR, Android, Flex
Comments: 4 Comments

So, I started working on my first AIR on Android application that’s on the Android market. It’s called SolarLogger and it’s a small application that allows you to monitor your solar panel installation using a SolarLog device.

If you’ve been here a while ago, you may remember that I had such a solarlogger component in my sidebar. But then I decided to remove it and turn it into a mobile application. Now, next to the standard gauge that displays the current power output, I’ve added a chart that displays the power output throughout the day. Below you can see an example of what it looks like on a sunny day. (screenshot taken from HTC Desire phone, hence the portrait orientation)

Mobile Graph

Unfortunately, in Flex 4.5 there are no charts available. That’s really a shame and I really do hope Adobe is going to put that in as well, because I can see multiple applications that use these charts. Oh well… 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 thorough testing I’ve found some redrawing issues with using the FXG and rotating the device.

The solution I came up with, is simply drawing the graph yourself using ActionScript. What you need is some container that provides you with a graphics property on which you can draw the graph, clear the current drawing and get cracking at it. In the code below you can clearly see that I’m drawing each line part of the graph manually, ending in a horizontal line until the end of the graph, filling the result with a semi-transparent color. Within this application, I’ve used a tag to get me the graphics property to draw on.

var d:Date = solarData.getItemAt(solarData.length - 1).date;
d.setHours(6, 0, 0, 0);
minTime = d.time;
d.setHours(22, 0, 0, 0);
maxTime = d.time;
 
group.graphics.clear()
group.graphics.lineStyle(2, 0X009900, 1);
group.graphics.moveTo(0, group.height);
group.graphics.beginFill(0x009900, 0.5);
 
var xPos:Number;
var yPos:Number;
for (var i:int = solarData.length - 1; i >= 0; i--)
{
	// Calculate the y coordinate on the value axis
	yPos = group.height - (solarData.getItemAt(i).P_MomentTotal / maxPower) * group.height;
	// Calculate the x coordinate on the time axis
	xPos = (solarData.getItemAt(i).date.time - minTime) / (maxTime - minTime) * group.width;
	group.graphics.lineTo(xPos, yPos)
}
group.graphics.lineTo(xPos, group.height);
group.graphics.lineTo(group.width, group.height);
group.graphics.endFill();

This way, you can draw whatever you want on your application without having to use heavy components or cracking your head on Bezier curves. The graph can be drawn on any device now and is still very much lightweight. If you want to download and try out the SolarLogger application on your Android device, you can use this QR code with your barcode scanner application. Enjoy!

Solar Logger

4 Comments - Leave a comment
  1. [...] This post was mentioned on Twitter by CurtStaubach, Ultra Red, FMC Washington DC, karannnnnnnnnnn3, aikisteve and others. aikisteve said: Just blogged: How to draw a chart in a Flex mobile application – http://bit.ly/e9jIkl [...]

  2. Yennick Trevels says:

    Actually Adobe didn’t include the chart and mx components in a Flex 4.5 mobile project, but it possible to add them if you really want to. Check out this blog post I made on the iDA MediaFoundry blog: http://www.ida-mediafoundry.be/labs/?p=156#more

  3. Hi Yennick,

    Thanks for mentioning this. But as you stated yourself, the charts are not optimised for mobile, so I wouldn’t recommend using them in an actual project.

    I’m just hoping Adobe will optimise the chart components as well in the next release, because I do see some very useful applications for that…

  4. Actually, the charts can be used as Yennick mentions, and they should work fine on mobile devices. Remember, charts aren’t built according to the Spark architecture, therefore they are already kind of optimized for mobile.

Leave a comment

Your email address will not be published. Required fields are marked *

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


Welcome , today is Monday, September 22, 2014