FLEX Custom Chart December 17, 2007
Posted by tomgutz in Flex.Tags: Adobe Chart, Chart Markers, Charting, Custom Chart, Flex, Flex Chart, Flex Custom Chart, Flex Google Finance Chart, LinkedIn
trackback
This is my version of Google Finance Charts. If you have played with the Google Finance Chart and my Custom Flex Chart, you will notice that the interaction is almost the same, although, the looks are not. I could capture exactly how it looks like and the way it behaves, however, it will take a little more of time to do that. I some how gone to the direction of completing to what was only required by the company I am working for.
There are some dynamic elements on the chart that are a bit smart. Those are the vertical and horizontal markers. Both adjust themselves to avoid overlapping. This is completely true for the horizontal ones and partially true at the moment for the vertical markers. This is because i set the threshold to partially overlap by setting the intersection area to more than zero. But if I set it to zero then it would not even try to overlap at all.
The chart is still on a work and progress though. The chart on the background of the Date Range Selector is still to be integrated. Andas for now its kind of useless. The min dimension of the chart still has to be set. Currently it still has a bug that if you compress the its height to a minimum somewhere 100-150 pixels it would somehow go into a infinite loop inside the code. This happens since it keeps on evalutating where the horizontal markers should be placed.
Overall, for this to be competed, it will still take 2 more weeks of office work to properly style and make the interaction act more smoothly.
Hi there, I’m trying to find a way to include flags like you have done in your custom chart. I need to find a way to flag important dates on a horizontal date/time axis. Could you share how you have accomplished this?
Hi Scott,
Aside from custom izing the components of the charts I did actually made a composite component in which I put layers of Canvas that actually contains the flags to make them draw outside of the lineChart itself. Although, this is just one way and definitely there are others ways to do it. But I chose this path for a number of reasons with regards to my requirements. There tricky part is on how to keep track of the zie of the drawable regions of the chart.
And about how to add elements on the charts itself. You could visit this site which i find pretty helpful when i was implementing my chart component.
http://www.quietlyscheming.com/blog/charts/easy-custom-charts/
Good Luck!
that sample is very cool!!!… i like the label in the end of each vertical marker. Can you share this point please?
I placed a canvas component on top of the chart and have it plot the vertical markers. Each markers are component itself that has the marker label as well as value but each can be turned off depending on the requirements. Instead of using the normal X and Y coordinates, i offset it the X to be the center of the flag and Y to be the bottom most of the flag. So when i plot it on the Vertical Marker Canvas i dont need to recompute the proper coordinates.
The vertical marker Canvas has properties that is linked to the main graph so it knows the coordinates or proper plotting on the chart. And most evens fired from changes on the graph for instance resize, dragging, etc are being tracked by this Canvas so it could update/refresh the markers that are present on it.
Overall the Vertical Markers Canvas on top of the chart does the hard part of keeping it in sync with the chart. Although it is delayed by a bit, the animation makes up for it.
Hope this helps.
HI again tomgutz .. i am try to develop but i need some help ..please can you share the code about these vertical markers? thanks!!
Undisposed says : I absolutely agree with this !
Hi tomgutz,
Just like the others, I would love to see the code for the vertical markers if you would be willing to share it.
Thanks,
Chris
I found a very similar example of financial stock charts: http://www.stock-forecasting.com
Looks good. They use product of amCharts as I understood.
Hi tomgutz,
I’m working on an app just like this.. i tried adding and removing series off the chart by pushing and poping chart.series array but chart is not getting updated… can u help me ???
Hi Tomgutz,
This is a really nice component – good work! I’m really interested in how you achieved the smooth drag effect on the chart. The two approaches I’ve seen by other Google Finance-esque charts are:
(1) Change the underlying dataset adding one value at one end and taking one off the other, giving the effect of a moving chart (although obviously not smoothly)
(2) Using the axes maximum/minimum to control the position of the chart. While the chart movement is smooth, line ‘edges’ are only drawn between points within the chart, so you always
have a gap between the last point and the edge of the chart.
I have a couple of posts on FlexCoders talking about the problem at [1]. Your chart doesn’t seem to be using either of these approaches — is it possible for you to share how you do it? Even just a hint would be really interesting!
Many thanks,
Matt.
[1] http://www.mail-archive.com/flexcoders@yahoogroups.com/msg96841.html
I used two charts layered. One is just for the axis and using the other chart as a background. The other chart within the chart does not have the axis drawn. So changing the x/y coordinates while you change the min/max X-axis range does the trick
I will post they new one soon as I have finished taking it off from out production application. It solves a log of rendering issues and looks better
Hi
Its a fantastic chart,
How you display customize dates on the horizontal axis. Could you please share code?
Example:
Suppose I have following array collection…
private var db:ArrayCollection = new ArrayCollection( [
{ Date: "22-Sep-08", Profit: 2000},
{ Date: "22-Sep-08", Profit: 2000},
{ Date: "22-Sep-08", Profit: 2000},
{ Date: "23-Sep-08", Profit: 2000},
{ Date: "23-Sep-08", Profit: 2000},
{ Date: "23-Sep-08", Profit: 2000},
{ Date: "23-Sep-08", Profit: 2000},
{ Date: "24-Sep-08", Profit: 2000},
{ Date: "24-Sep-08", Profit: 2000}]);
here I want to show unique date entry on the horizontal label axis means same dates doesn’t display on the horizontal labels only one entry should be display for the date.
How it is possible could anyone please help….
thanks in advance….
Vijay
It is possible to plot that since the chart still has the same dataprovider property. But i customized it and added more data values, for instance the vertical/horizontal markers. so right now the dataprovider for the usual mx xharts accepts the new class object i created.
hi , this is very nice i have need of to make custom chart . hw can i got source code of your custom chart . plz tell me i am waiting. thanks
i dont distribute the code because i developed it for the company and im binded for its confidentiality.
How ca I make mores lines on the graphe like you? They are different .xml ?
Thanks
you will need to customized and more functionalities from what the flex charting provides. Although there are some codes out there to make it simpler. Sad thing for you is i dont distribute this code. but ill be willing to share it for a price.