Why I LOVE Flex – Charting example

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

  1. mike says:

    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)?

  2. Bryan says:

    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? 😉

  3. Martin says:

    I don’t know, you had better be careful… You might have to rename your blog “Not so Quietly Scheming”. GREAT stuff! 😉

  4. Pingback: Análisis Bursátil con Adobe Flex Charting « tessekkur viene de tessekkur ederim

  5. 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

  6. Luisa says:

    OOO si si.


    me encanta flex.

    el es muy fantastico.

    adios chicos. y chicas.

    muy bueno adjiso

  7. 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?

  8. 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?

  9. Sankalp Kallakuri says:

    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.


  10. Sankalp Kallakuri says:

    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

  11. Martin says:

    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.

  12. carlos says:

    I am having the same problem where I get the error — Could not resolve flexlib:HSlider to a component implementation. — please help.

Comments are closed.