Scientific Graphing with Flex

Anyone who has ever asked me "Why would you want to use a player based solution instead of AJAX?" has likely gotten an ear-full of talk about real-time drawing of vector graphics and the bitmap manipulation APIs. These capabilities are truly what differentiate Flash/Flex and Silverlight(WPF/e) from AJAX and DHTML solutions. They open up entirely new realms of possibilities for your applications. The vector drawing and image manipulation capabilities lay the foundation for rich experiences. These capabilities enable everything from rich charting, tweens and animations, to video playback. In essence, they provide the gateway to the next level of interactivity, analytical power, and engaging experiences.

Let's take a simple piece of code in AS3, and build upon that:

var g : Graphics = this.graphics;
g.moveTo( 25, 25 );
g.lineTo( 25, 50 );

This example is about as basic as you can get. It simply draws a line from the point (25,25) to the point (25,50). Despite the simplicity of this code, it is extremely powerful. The feature-rich charting capabilities of the Flex framework rely heavily upon code that originates from this basic scenario. It all boils down to being able to draw vector graphics at run time. Even better, you have the power to build custom graphing or charting components yourself; you are not limited to what is provided by the Flex framework.

Last night, I randomly had the idea... "I wonder how hard it would be to create a scientific graphing component in Flex...". Back in high school, the TI-82 was an indispensable tool if you wanted to pass algebra, trigonometry, and calculus classes. I have always been fascinated by geometry and graphing, so this is just a natural progression for me. In a matter of hours this morning it had come to life. The great part is that this entire application was built in less than 250 lines of code (including whitespace).



You can check it out here:

• http://www.cynergysystems.com/blogs/blogs/andrew.trice/graphing/main.html

In the bottom right corner, there is a text area where you can enter equations. You can have it display multiple at a time. You just need to enter the "x-side" of the equation. For example, to graph the equation y=x, you would just need to enter "x". To graph the equation y=x*x, you would just enter "x*x". Here are the rules:

• Use the operators "+", "-", "*", "/"
• You can use parentheses "(" and ")"
• You can use math functions such as (but not limited to) "Math.sin(x)", "Math.cos(x)", and "Math.sqrt(x)".

There are a few bugs in there, but hey, I just threw this together this morning. It's not quite as robust as my trusty TI-82; this is just to show what can be done using a player-based runtime. I believe that this is a perfect of example of what you can do to create rich applications. The Flash platform enables us to quickly and easily build powerful real-time analytical tools to meet our business needs... Talk about a competitive advantage.