Flex Chart Range Selector - Google Finance'ish

Posted At : March 9, 2007 4:05 PM | Posted By : Brendan Meutzner
Related Categories: Flex Charting, Flex 2 Components, General, Flex Development

So I noticed some posts re: this type of component on flexcoders the other day, and being that I was bored at work on this sunny Friday afternoon, decided to give it a whirl. Right click to view source inside app...

http://www.stretchmedia.ca/code_examples/chart_range_selection/main.html

After I finished putting this together (in all of 45 minutes) I was as giddy as a little kid because it's just so damn COOL... Yeah, it doesn't have all the bell's and whistles that the graphing on Google Finance has, but still, can you imagine how long this effect would have taken to do in Flash?

Three words... "I love Flex"...

Have to give credit to Ely Greenfield (for his data generation function, and let's face it, for being The Man) as well as Doug McCune for his Dual Slider component (which is better than the one I did, which is why I used it here).

Comments (370) | Print | Send | del.icio.us | Linking Blogs

Related Blog Entries

Google Finance with Flex Code (August 14, 2007)

Comments

[Add Comment]

WOW WOW WOW ...
This is GREAAAAAAAAAAAAAAAAAAAAAAAT.
Great Job.
Sean.

# Posted By Sean | 3/10/07 7:59 PM

i agree !!
indeed a GREAT JOB

# Posted By Ofir | 3/11/07 12:38 AM

Very cool! Thank you

# Posted By Mike | 3/11/07 4:33 AM

Excellent! Very well done, I loved that functionality on Google Finance, and I love it even more when the source is available!

Thanks mucho to all who contributed!

# Posted By Ryan Pieszak | 3/11/07 9:49 AM

This is soooo cool. I can't wait to use it for some charts!

# Posted By Nate | 3/12/07 8:41 AM

Thanks, Brendan
This example is going to help a lot of people, who admire to make apps something like the google finance charts! Way to Go!
Excellent Work Man!
Cheers,
Arthur

# Posted By arthur | 3/14/07 5:54 AM

This is really cool - great work.
I am intersted in seeing how the axis data also changes based on the pan/selection. It would be cool to also have that in your sample.

great work

# Posted By vijay | 3/15/07 2:35 PM

The chart data is maintained/changed through the updateMainData() method which simply slices a subset of data from the full amount based on the slider values... it's in the code :-) Did I misunderstand your question?

# Posted By Brendan Meutzner | 3/15/07 3:07 PM

oh - I meant it would be nice to see the values rendered on the axis - would make the demo even more impressive -

# Posted By Vijay | 3/18/07 9:22 PM

Hi,
How would you change the data provider to a Java remote object (using remoting).
I can not get through it.

Thanks in advance.

# Posted By flecer | 3/19/07 2:31 AM

Very cool! I assume that it would also be possible to add an average line to the subset that is shown at the top... when the subset selection changes the average line (or std deviation line) could be updated. Lots of possibilities. Thanks for the code, I might just give it a hack.

# Posted By Luke McLean | 3/27/07 8:39 PM

awsum!! kudos for this
great work

# Posted By saurabh | 5/16/07 3:49 AM

This is AWESOME!

Question: Is there a way to add a second and third axis? Like having more than 1 set of data appear as an area chart. I'm curious to see if I can add a couple of line charts over this.

# Posted By Wingman21 | 5/29/07 7:27 PM

Hi!
Great job was made by you!
nice, nice, nice ;)

___
ESO, http://www.esoblog.info

# Posted By ESO | 6/17/07 11:41 PM

This is really cool - great work.
I am intersted in seeing how the axis data also changes based on the pan/selection. It would be cool to also have that in your sample.

# Posted By Denis | 7/6/07 2:55 AM

Hi,
How would you change the data provider to a Java remote object (using remoting).
I can not get through it.

# Posted By berda | 7/6/07 11:17 AM

For a better example of using this type of application, have a look at a further example I did based on the Google Finance application (which includes labels, annotations, mouseovers, improved drag effects, etc...)

http://www.meutzner.com/blog/index.cfm/2007/6/15/G...

Although I haven't released the code for this example yet, I plan to after presenting it at the Flex 360 Conference (http://360Flex.org) in Seattle August 13-15. There is a breeze posting of the SilvaFug meeting in June where I went through the functionality if you can't wait until August (http://www.silvafug.org).

# Posted By Brendan Meutzner | 7/6/07 11:29 AM

In order to hook up the sample app to a Java provider, you'd use the RemoteObject class to reference your Java class, define the proper method in that class which you'd call to return an array/list of POJO's (or some sort of structure) which you'd use as the data for the chart. I don't have an example of how to do this, but I'm sure there are plenty of examples out there on doing RemoteObject calls with Java.

# Posted By Brendan Meutzner | 7/6/07 11:32 AM

Adding multiple series to the chart would be easy enough to do... I think that Doug McCune (http://www.dougmccune.com) extended this example to have two area series showing... check out his blog for more info. It's important to note though, that if you do display multiple series, you'd need to make sure they all had the same dataprovider length. The pan/zoom feature does a splice on the array, and if your index values didn't match up, that would cause issues.

# Posted By Brendan Meutzner | 7/6/07 11:35 AM

I've seen a few different examples throughout the community in the past couple of months where people are using this functionality in their own apps. It'd be great if you are going to implement this, or the upcoming Google Finance type sample I'll be releasing, if you could shoot me a quick e-mail with a link (if you're able) to the app. I'd love to see what others are doing with it!

# Posted By Brendan Meutzner | 7/6/07 11:37 AM

This is fantastic. It proves what fantastic tool Flex is.

# Posted By Frank | 8/3/07 8:17 PM

Flex is great!!!

# Posted By Mike | 8/11/07 1:40 PM

Cool site! Thanks for sharing!

# Posted By Matching | 8/29/07 10:26 AM

Sometimes I cannot view the Flex chart on my finance.google.com webpage. I have this problem on the Microsoft Explorer browser - Any remedies?

# Posted By Kay | 10/18/07 6:02 PM

Thanks for sharing. Does anyone know how to put multiple data series in that one chart?

# Posted By dennis604 | 2/12/08 7:09 AM

programmatically ( it's not exact, but i believe it ll be something like this ) :
var myChart : LineChart = new LineChart();
var lineSeries:LineSeries;
var seriesData:Array = new Array();

lineSeries = new LineSeries;
lineSeries.yField = 'buyPrice';
lineSeries.xField = 'dateNo';
lineSeries.dataProvider = dataGraph1;
seriesData.push (lineSeries);

lineSeries = new LineSeries;
lineSeries.yField = 'buyPrice';
lineSeries.xField = 'dateNo';
lineSeries.dataProvider = dataGraph2;
seriesData.push (lineSeries);

myChart.series = seriesData

# Posted By andy | 3/3/08 10:35 PM

It's important to note though, that if you do display multiple series, you'd need to make sure they all had the same dataprovider length. The pan/zoom feature does a splice on the array, and if your index values didn't match up, that would cause issues.

# Posted By seo services | 3/21/08 1:30 AM

Great! http://groups.google.com/group/zoloft-buy

# Posted By zoloft | 4/15/08 10:09 AM

try download here - http://mp-3.name/artist6293/sublime/

# Posted By adfg | 5/6/08 11:52 PM

fantastic! http://www.propeller.com/member/cheapnelson

# Posted By Cheap | 5/7/08 12:01 AM

# Posted By Jider | 5/7/08 4:08 PM

Thanks you very much. It is very cool

# Posted By ThuaND | 5/7/08 8:14 PM

Good work. I love Flex as well.

# Posted By Flexr | 5/8/08 12:06 PM

<a href="http://www.rcroll.com/">helicopter</a>
<a href="http://www.rcroll.com/">airplane</a>
<a href="http://www.rcroll.com/">r/c</a>
<a href="http://www.rcroll.com/">rc</a>
<a href="http://www.rcroll.com/">rc helicopter</a>
<a href="http://www.rcroll.com/">rc airplane</a>
<a href="http://www.rcroll.com/">rc heli</a>
<a href="http://www.rcroll.com/">r c helicopter</a>
<a href="http://www.rcroll.com/">r c airplane</a>
<a href="http://www.rcroll.com/">airplane model</a>
<a href="http://www.rcroll.com/">remote control</a>
<a href="http://www.rcroll.com/">remote control helicopter</a>
<a href="http://www.rcroll.com/">remote control airplane</a>
<a href="http://www.rcroll.com/">radio control</a>
<a href="http://www.rcroll.com/">radio control helicopter</a>
<a href="http://www.rcroll.com/">radio control airplane</a>
<a href="http://www.rcroll.com/">electric helicopter</a>
<a href="http://www.rcroll.com/">electric airplane</a>
<a href="http://www.rcroll.com/">mini airplane</a>
<a href="http://www.rcroll.com/">mini helicopter</a>
<a href="http://www.rcroll.com/">controlled model</a>
<a href="http://www.rcroll.com/">airplanes</a>
<a href="http://www.rcroll.com/">helicopters</a>
<a href="http://www.rcroll.com/">helis</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series.h...">Esky 300 Series</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/CO-COMANCHE.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/C...">CO COMANCHE</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/CO-COMANCHE.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/C...">CO-COMANCHE</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/CO-COMANCHE.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/C...">Comanche Helicopter</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/CO-COMANCHE.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/C...">ESky Co-Comanche </a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/LAMA-V4.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/L...">esky V4 lama</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/LAMA-V4.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/L...">esky V4 lama</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/LAMA-V4.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/L...">helicopter V4 lama</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/LAMA-V4.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/L...">V4 LAMA</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/V3-LAMA.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/V...">esky V3</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/V3-LAMA.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/V...">esky V3 lama</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/V3-LAMA.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/V...">helicopter V3 lama</a>
<a href="http://www.rcroll.com/Helicopter/Esky/300-Series/V3-LAMA.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/300-Series/V...">V3 LAMA</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/500-Series.h...">Esky 500 Series</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/HONEY-BEE.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/500-Series/H...">EK1H-E004</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/HONEY-BEE.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/500-Series/H...">esky honey bee</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/HONEY-BEE.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/500-Series/H...">Honey Bee</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/HONEY-BEE-CP2.html">EK1H-E005</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/HONEY-BEE-CP2.html">esky honey bee cp2</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/HONEY-BEE-CP2.html">Honey Bee CP2</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/HONEY-BEE-CP2.html">HONEY-BEE-CP2</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/Honey-bee-king-2.html">Honey Bee King 2</a>
<a href="http://www.rcroll.com/Helicopter/Esky/500-Series/Honey-bee-king-2.html">Honey-bee-king-2</a>
<a href="http://www.rcroll.com/Helicopter/Esky/600-Series.html">Esky 600 Series</a>
<a href="http://www.rcroll.com/Helicopter/Esky/600-Series/Belt-CP.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/600-Series/B...">Belt CP</a>
<a href="http://www.rcroll.com/Helicopter/Esky/600-Series/Belt-CP.html" target="_blank">http://www.rcroll.com/Helicopter/Esky/600-Series/B...">Belt-CP</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Belt-driven-series.html">Belt driven Series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Belt-driven-series.html">Belt-driven Series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Belt-driven-series.html">helicopter Belt driven</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Belt-driven-series.html">Helicopter Belt Driven series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Belt-driven-series.html">helicopter Hm </a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Coaxial-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Coaxial-S...">Coaxial Series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Coaxial-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Coaxial-S...">Coaxial-Series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Coaxial-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Coaxial-S...">Helicopter coaxial series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Coaxial-Series/HM-53-1-2-4G.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Coaxial-S...">helicopter HM 53</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Coaxial-Series/HM-53-1-2-4G.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Coaxial-S...">HM 53</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Coaxial-Series/HM-53-1-2-4G.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Coaxial-S...">HM 53#1(2.4G)</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Super-deluxe-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Super-del...">Super deluxe Series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Super-deluxe-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Super-del...">Super-deluxe-Series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Super-deluxe-Series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Super-del...">Walkera Super-deluxe Series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Tail-motor-series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Tail-moto...">Tail motor series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Tail-motor-series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Tail-moto...">Tail-motor-series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Tail-motor-series.html" target="_blank">http://www.rcroll.com/Helicopter/Walkera/Tail-moto...">Walkera Tail motor series</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Tail-motor-series/HM-22-E.html">helicopter HM 22</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Tail-motor-series/HM-22-E.html">HM 22 E</a>
<a href="http://www.rcroll.com/Helicopter/Walkera/Tail-motor-series/HM-22-E.html">HM 22#E</a>
<a href="http://www.rcroll.com/HM-36.html" target="_blank">http://www.rcroll.com/HM-36.html">helicopter Hm 36</a>
<a href="http://www.rcroll.com/HM-36.html" target="_blank">http://www.rcroll.com/HM-36.html">HM 36</a>
<a href="http://www.rcroll.com/HM-36-B.html" target="_blank">http://www.rcroll.com/HM-36-B.html">helicopter Hm 36B</a>
<a href="http://www.rcroll.com/HM-36-B.html" target="_blank">http://www.rcroll.com/HM-36-B.html">HM 36 B</a>
<a href="http://www.rcroll.com/HM-5-10-2-4G.html" target="_blank">http://www.rcroll.com/HM-5-10-2-4G.html">helicopter Hm 5</a>
<a href="http://www.rcroll.com/HM-5-10-2-4G.html" target="_blank">http://www.rcroll.com/HM-5-10-2-4G.html">HM 5 10</a>
<a href="http://www.rcroll.com/HM-53-1-2-4G.html" target="_blank">http://www.rcroll.com/HM-53-1-2-4G.html">helicopter Hm 53</a>
<a href="http://www.rcroll.com/HM-53-1-2-4G.html" target="_blank">http://www.rcroll.com/HM-53-1-2-4G.html">HM 53</a>
<a href="http://www.rcroll.com/HM-60.html">helicopter Hm 60</a>
<a href="http://www.rcroll.com/HM-60.html">HM 60</a>
<a href="http://www.rcroll.com/HONEY-BEE.html" target="_blank">http://www.rcroll.com/HONEY-BEE.html">helicopter Honney</a>
<a href="http://www.rcroll.com/HONEY-BEE.html" target="_blank">http://www.rcroll.com/HONEY-BEE.html">helicopter Honney bee</a>
<a href="http://www.rcroll.com/HONEY-BEE.html" target="_blank">http://www.rcroll.com/HONEY-BEE.html">Honey Bee</a>
<a href="http://www.rcroll.com/LAMA-V4.html">helicopter Lama v4</a>
<a href="http://www.rcroll.com/LAMA-V4.html">LAMA V4</a>
<a href="http://www.rcroll.com/LAMA-V4.html">LAMA-V4</a>
<a href="http://www.rcroll.com/V3-LAMA.html" target="_blank">http://www.rcroll.com/V3-LAMA.html">Helicopter V3 LAMA</a>
<a href="http://www.rcroll.com/V3-LAMA.html" target="_blank">http://www.rcroll.com/V3-LAMA.html">V3 LAMA</a>

# Posted By helicopter | 5/8/08 7:00 PM