Scrollable and Touch-Friendly Flex Charts

After I posted Flex Charts on the iPad, a few people asked me how to enable some specific gestures on these charts to make them small screen-friendly. One specific question was: “How can we make a chart scrollable to show a lot of data on a smaller screen while making sure the vertical axis is always visible?”. Here is a very simple implementation. You can customize and polish it in many different ways. For example, you could use AnimateProperty on the Axis minimum and maximum properties to animate the scrolling.

Use the mouse to scroll the chart columns left and right. On a touch screen, you can do the same thing using gestures.

Here is the code (I’ll have to do something about the pink!):

<?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"
			   creationComplete="completeHandler()">

	<fx:Script>
		<![CDATA[
			protected var lastX:Number = 0;

			[Bindable] protected var viewportMax:Number = 10;

			protected function completeHandler():void
			{
				// Simulate values
				var results:Array = [];
				for (var i:int=0; i<50; i++)
				{
					results[i] = Math.random() * 100;
				}
				chart.dataProvider = results;
			}

			protected function mouseDownHandler(event:MouseEvent):void
			{
				lastX = event.stageX;
				systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
				systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			}

			protected function mouseMoveHandler(event:MouseEvent):void
			{
				var delta:Number = (lastX - event.stageX) / chart.width * viewportMax;
				if (hAxis.minimum + delta < 0)
				{
					hAxis.minimum = 0;
					hAxis.maximum = viewportMax;
				}
				else if (hAxis.maximum + delta  > chart.dataProvider.length - 1)
				{
					hAxis.maximum = chart.dataProvider.length - 1;
					hAxis.minimum = hAxis.maximum - viewportMax;
				}
				else
				{
					hAxis.minimum += delta;
					hAxis.maximum += delta;
				}
				lastX = event.stageX;
			}

			protected function mouseUpHandler(event:MouseEvent):void
			{
				systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
				systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseUpHandler);
			}

		]]>
	</fx:Script>

	<mx:ColumnChart id="chart" top="10" left="10" right="10" bottom="10"
					mouseDown="mouseDownHandler(event)">
		<mx:series>
			<mx:ColumnSeries />
		</mx:series>

		<mx:horizontalAxis>
			<mx:LinearAxis id="hAxis" minimum="0" maximum="{viewportMax}"/>
		</mx:horizontalAxis>

	</mx:ColumnChart>

</s:Application>

  • Luciano

    Great snippet!! I’m going to play with that.
    //Oh! that pink need some flowers around

  • Nice. Thanks. Can you share how yo implement the zoom in a zoom out on the chart as well?

  • Hi Christophe,

    Great example as always; I’ve just spotted a typo though line 55.
    I believe you meant to remove the Event listener on the MOUSE_UP event.

    Thanks for sharing,
    Seb

  • Joseph

    I am curious to know, if we use in FB4.5 a Spark List component for a Mobile App ,would we need to do anything extra for the user to scroll with their finger, bounce effects etc; are out of the box or should be implemented manually?

    Thanks for this great snippet Christophe!

  • James

    http://www.adobe.com/products/flex/mobile/ states “Flash Builder 4.5 includes full support for building ActionScript applications for Apple iOS. Flex support is planned to be available later in 2011.”

    Pardon my ignorance, but what is the difference between ActionScript support for iOS, which is available, and Flex support that is planned. Thanks.

  • Frédéric

    Actually you can build ActionScript project for IOS with only pure actionscript language, no mxml and no flex components. In june Flash builder 4.5.1 will be release with the Flex framework for IOS.

  • Vaibhav Shah

    Hi,

    Thank you very much for the example. This is precisely what I was looking for.
    But my X axis is a Category axis (not numeric) and therefore I cannot set the “mimum” and “maximum” for Category axis as you specified for Linear axis. So all my data gets cramped up so as to fit in the tiny screen of Ipad.
    Any suggestion for workaound?
    Thank you

  • Vaibhav Shah

    Found the solution:
    Posting for someone else. It is not possible on category axis (for non-numeric data) as we cannot define a “maximum” for the same, so did a workaround.

    Created an array with values being the string that i have (Portfoli names in my eg) to show on X axis

    [Bindable] public var results:Array = [];
    for (var i:int=0; i<data.data.length; i++)
    { results[i] = data.data[i].name;
    }

    write a label function for your linear axis

    public function labelfunction(label:Object, prevValue:Object, labelItem:Object):String {

    var i:Number = Number(label);

    return results[i];

    }

    The series is:

  • Vaibhav Shah

    I cannot add the series, so its the same woth our xField of ColumnSeries as results
    and labelFunction of horizontalAxis as labelFunction=”labelfunction”

  • Kiran Desai

    Hi, can some one please tell me how to implement dual slider in flash builder?
    is it possible to add jquery and slider through jquery?
    i have code for dual slider in jquery and tried integrating it with flash builder 4.5
    but it does not recognize the script function starting $
    i wrote it similar to the way we write scripts in .mxml file.
    stil no use..

    can anyone guide me ..

    Thanks in advance,

    Kiran

  • Very nice ! I remember the same thing in 2009 : http://www.iwobanas.com/2009/07/scrolling-and-zooming-chart-with-chartscroller/ (with zooming included also …)

    Adobe should include it in the mobile framework !

  • Thanks, this blog is very good!!

  • zach

    Good job. Is it possible to change the fill color from one solid color to a pattern liked hashed column…

  • Good job. Is it possible to change the fill color from one solid color to a pattern liked hashed column…

  • the box or should be implemented

  • perfect ı like it

  • Everything is produced quality

css.php