Google Finance with Flex from Silvafug last night
While the presentation was exciting and fun to do, I think my last minute prep, and the fact I haven't spoken in public for many many many years resulted in a less than stellar walk-through of the functionality involved. However, the experience and feedback gained from last night was HUGE. I realized how I can improve the presentation 1000% percent, and plan on doing so before I give my talk in Seattle at 360Flex on August 13th (at least that's the tentative date.
Today I'm posting the app for everyone to play around, but am holding off on posting the code until Seattle (I don't want to steal my own thunder). However, I fully intend to release both the code-base, and an associated swc file for everyone to use, and integrate their own data into this type of interface. Hopefully this might entice the fence-sitters to attend 360 in August if you're interested in this kind of stuff.
I will say that it's not complicated stuff... and everyone and anyone should be able to insert their own data, or adapt the UI to fit their own project needs.
So here's the app... (click the image to view)
Great presentation last night. Unfortunately I didn't get a chance to follow up with you before I left, but I would love to give you some feedback. Please shoot me an email and we can chat.
Thanks!
-Jeremy
It looks just awesum! No words to explain it. I was using your google chart navigator for my application. I just wanted the same effect like how it looks.I know that google uses the flash and ajax to bring these effects. Never know we can build these in flex. I am waiting for your code now. ;)
i found a small bug in your app! if you take the slider to the extreme right or left and then drag the chart, the entire app gets stuck when both the ends of the slider meets. I think you can avoid this by locking the slider once the user sets it, like the way google does.
Thanks for the bug notification... I'll make sure to get that fixed.
Code release will be August 13th if you're in Seattle at 360Flex... I think I'll hold off on doing a code release on my blog for a week or two after that to entice people to come to 360 (there are many other reasons you should attend anyway).
my email id is: write2jaga@yahoo.com
I am trying to get an overlayed bar with alpha transparency like this example: http://flexapps.macromedia.com/flex/brocade/app.mx...
Do you know if this is a custom component or are there any properties for this type of behavior?
Thank you very much.
http://meutzner.com/examples/flex_finance/Flex Finance PPT.ppt
Copy and paste to browser to download...
The example you're referring to in the brocade demo can be seen here...
http://www.stretchmedia.ca/code_examples/offset_ca...
For the fill, just use a SolidColor value with the alpha value set appropriately.
Brendan
Here's the link for the chart to work correctly...
http://meutzner.com/examples/flex_finance/Flex Finance%20PPT.ppt
You had an extra space in that link...
Great presentation!
Patrick
http://meutzner.com/examples/flex_finance/Flex%20Finance%20PPT.ppt
Does anyone know if Google used flex or not for theirs?
Brendan
at mx.collections::ListCollectionView/getItemAt()
at Flex_Finance_Step5/::chartMouseOut()
at Flex_Finance_Step5/::updateMainData()
at Flex_Finance_Step5/::updateBox()
at Flex_Finance_Step5/__slider_change()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at com.dougmccune.baseClasses::SliderBase/com.dougmccune.baseClasses:SliderBase::setValueAt()
at com.dougmccune.baseClasses::SliderBase/com.dougmccune.baseClasses:SliderBase::commitProperties()
at mx.core::UIComponent/validateProperties()
at mx.managers::LayoutManager/::validateProperties()
at mx.managers::LayoutManager/::doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/::callLaterDispatcher2()
at mx.core::UIComponent/::callLaterDispatcher()
i got this when i moved the left slider at the beginning, good work Brendan, need the code.. Thanks
As you may have guessed, I'm just getting familiar with Flex and what it can do, but I am very impressed so far.
A developer in my office is now just getting his feet wet for the first time today.
One site that tipped me off to the graphing potential, also had this "chart sampler".
http://demo.quietlyscheming.com/ChartSampler/app.h...
Does this sampler represent graphing ability that is more or less "native" to Flex?
By that I mean they can be created with just a bit of XML?
Or would the graph shows require quite a bit of custom
development to get the effects and capabilities demonstrated?
Thanks!
Brian
Attending is not an option as I don't live in the USA, and it would also definately be great to have a look see sooner than later.
Thanks,
Brian
You will build the chart by yourself, from his explanations, and it will help you also to improve your Flex skills.
Brendan, you're probably one of the best Flex evangelist around. Your demo really proves the quality of the Flex technology to a broader audience than developers and architects. I showed it to the business, and after that, we're going to put money and resources in Flex technology. Well done!
Thanks for contributing in making Web technologies better.
Cyril Gambis
source... please.
Do you know if there are other 360Flex events planned in US. I can't go to this one but I would certainly go to it if it did happen in NY.
I am really interested to the source code for my project. Ican't wait that you post source code on your blog!
good luck for your presentation
Pierre
I had a closer look to your (awsome) chart and I noticed that the tick and vertical gridline don't match exactly with corresponding points on the graph
I tried to create a simple version of the chart and I have the same bug, Do you have an idea of where this bug come from ?
Line chart always starts plotting at the "zero" pt of the x-axis (i.e. the 1st plotting pt will be found along the y-axis line) but column chart does NOT plot on the "zero" pt.
Similar observation found for the ending pt. Thus if you observe closely, the column chart appear squeezed towards the middle of the screen when c.f. the line chart.
<mx:ColumnSeries visible="false" maxColumnWidth=" -- same value as the volumn graphe --" xField="date" yField="close" />
7 more days to go... :) Waiting for it.
Yeah, it's not going to be exact. The measurement for the divided boxes is based on the ratio of datapoints to width of graph. The boundary values in the top right that get updated on drag are 100% accurate to what is shown in the top view, but it's pretty tough to get those divided boxes to be perfect. A small price to pay... no? But that's a good point to bring up, and maybe in the future (or if somebody else wants to take a crack) I'll look at a better solution for that. Code's getting posted on Monday!
Its Monday, Waiting for the code!!! :) When are you posting it?
i am looking for the way to render a chart like seen on http://app.lightstreamer.com/DojoDemo/ .
i want to give the horizontal axis a definite timearea, eg. 09.00 to 16.45 and let the real time stockquote tick in realtime. the chartarea should fill up more and more from left to right.
the realtime data is solved also filling up the chart, but for now there is always the complete charting area used by the data. i didn´t found something useful in the documentation how to solve this.
i would be glad, if anybody has an idea or tip for me...
thanks
uwe
congrat !!!
possible to download the source code ? :)
http://www.meutzner.com/blog/attachments/360/Flex_...
Just right click to view source...
"So what?" you ask. So, it wastes time, makes people appear less intelligent than they are and is not something I want your kids to grow up hearing for those reasons.
Oddly enough, I have a blog entry (link above) that speaks to this very (wrong) mostly Northern California phenomena.
but use plot series for the Large and Low bands (still including volume)...
Make it into a Timeline like http://simile.mit.edu/timeline/... It would work great for all sort of things like Blogs, Financial Data. Quite the challenge but I would love to see
it and know that I would totally use it. And if you really into charting,
I would love to see microcharting done in Flex as well like http://www.bonavistasystems.com/OnlineDemoReports...., but interactive
This is really a great work. I like it. & thanks for opening the source...
I do not know much about the Flex. Just a question - What is requirement on the web server to deploy this kind of Charts?
Your feedback is appreciated. Thanks in advance.
-Deepak
Any web server will do as it just serves up the compiled swf file. The swf file then runs in the browser's flash player.
-Tom
I found the Charting components you have used in your code is not part of free Flex SDK.
Does it need to be purchase separately?
Thanks,
Deepak
Does anyone figure out any solution or workaround on the bug in aligning the Slider thumb and divider box?
Thankd,
Deepak
The only thing I don't want about the flex charting is that when the horizontal Axis minimum range you have is some where in between two points such that one is not within the view, which means the point is dropped as well as the line connecting it with the visible point.
It was strange when I tried using hard coded ArrayCollection instead of populating them with HTTP service request .
It didnt showed nything !!
I m wondering what could be wrong ? Has ny one tried smthng similar ?
I populated an arraycollection as :
////////////////
(A)
var tmpDataArray:Array = new Array();
tmpDataArray.push({date:2006-06-02,
open:38.68,
high:38.85,
low:38.46,
close:38.72,
volume:6657600});
tmpDataArray.push({date:2006-06-03,
open:48.68,
high:48.85,
low:48.46,
close:48.72,
volume:6657600});
var tmpData:ArrayCollection = new ArrayCollection(tmpDataArray) ;
/////////////////
(B)
var tmpData:ArrayCollection = event.result.root.data;
What is the difference between A & B ? B works but not A ,what cud go wrong ?
Ny help please ?
This is great stuff. Thanks for sharing.
Do you have plans to update the code for Flex 3?
Gilbert
if (i != 0)
{
mainChart.series[0].getChildAt(i + 1).showRenderer(false);
mainChartVolume.series[0].getChildAt(i).showRenderer(false);
}
And it should work , work for me for Adobe Flex Builder 3
[url=http://www.flashlightcool.com/]Tactical Flashlight[/url]
[url=http://www.flashlightcool.com/]Flashlight[/url]
[url=http://www.flashlightcool.com/]Led Flashlight[/url]