Oh man. Take a look at this example I whipped up last night. This takes the google-finance-esque charting example from Brendan Meutzner and steps it up a notch. Now we’ve got two sets of charts, overlapping each other so we can easily compare the data. Drag the selected range of either of the charts using the sliders on the bottom portion and you’ll understand what I’m talking about.
This took me literally 3 hours to whip up. Hot damn. Show me an example like this in AJAX that didn’t take months to create. Hell, just show me an AJAX example at all.
This is a real application, not just a pretty demo. My girlfriend is a clinical psychology Ph.D. student at UC Berkeley. She’s running some psych studies and needs to compare data they captured from different subjects in the study. So as I’m talking to her last night and she’s describing what she’s trying to do, I think, gee, that sounds like it would be a sweet little Flex app. (In case anyone’s wondering, the sample data I published here is not from real subjects, so don’t get all privacy-advocate uppity on me) So I get to play with fun charts in a real-world scenario, and UC Berkeley gets some free Flex work.
Anyway, click the screenshot below (or this link) to launch the example. Right click to view source, or view source here.
20 thoughts on “Why I LOVE Flex – Charting example”
Very nice! Thanks for posting the source code.
very cool.. it also needs a way to move both sliders at the same time, and a way to sync the sizes (so if you make one large then you can make the other one the same size)? Or maybe a way to lock the two (so when you resize one it resizes the other, when you move one it moves the other)?
Great work as usual Doug. From a user experience standpoint it might be beneficial to have a slide handle between the red and blue slides on the bottom that would drag both simultaneously. And if you made the key values for the upper chart color coded (red and blue) it would make the data more legible at a glance (The Edward Tufte in me coming out). Keep the inspiring examples coming! -b
ps: when you gonna release the fire/smoke/water sample code? 😉
I don’t know, you had better be careful… You might have to rename your blog “Not so Quietly Scheming”. GREAT stuff! 😉
Pingback: Análisis Bursátil con Adobe Flex Charting « tessekkur viene de tessekkur ederim
Hey!! it´s very nice
Today in Spain, madeinflex.com guys make a presentation about Flex Charting…
Edgar M. Rivera demo, its an app that compare two tickers of spanish stock market
…only think one app with both examples,,,
It´s really powerfull
Thanks for source
example url: http://www.carlosrovira.com/charts/
Me llamo luisa.
Me encanta flex?
Quien es flex.
OOO si si.
me encanta flex.
el es muy fantastico.
adios chicos. y chicas.
muy bueno adjiso
your O(n) algorithm to find the data tip ball point licks balls.
I meant Brendan Meutzner’s algorithm, its good to see u took it out.
I would have hated to see any more of that O(n) code get passed around when an obvious O(n^(1/2)) search option is available.
If you read this ever, im wondering whats the max amount of data entries you can put into the dataProvider and still have it work as smooth as it does now?
it seems like the answer for how many datapoints the flex linechart/cartiesianchart/areachart can handle rendering smoothly with scrolling the data range selector is about 300-400.
this is with 4gb ram, core duo, windows vista machine, and no other flash player content open.
now i wonder can adobe air render this data faster then flash player?
I downloaded the code and tried to compile it in flex builder 3. I got the following error
Could not resolve to a component implementation. BerkeleyPsych/src ChartComponent.mxml line 92 1240247695975 121
Any suggestions as to what I might be doing wrong.
this was the error
Could not resolve flexlib:HSlider to a component implementation. BerkeleyPsych/src ChartComponent.mxml line 92 1240247695975 121
did not remove the less than greater than tags around flexlib:HSlider in the previous post
This is a great example. Is there a way to always show the slider datatips? Or at least show them when you’re dragging the horizontal divider boxes instead of only when you’re dragging the slider.
I am having the same problem where I get the error — Could not resolve flexlib:HSlider to a component implementation. — please help.
I love it. So little code. So much cool.
thx for this example!
but i can’t download the Source code.
Can you email me for this source code? My email : firstname.lastname@example.org
thanks so much!
Comments are closed.