Posted by: tomgutz | December 17, 2007

FLEX Custom Chart

Flex custom charts
Custom Flex Chart

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.

Responses

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 !

Leave a response

Your response:

Categories