Develop new interactive Flash/Flex graph for financial site

We would like to produce an interactive Flash graph that displays information about investment performance over time for several people. In its simplest form, the graph shows the performance of a user's investments over time. That is, the X axis is time, and the Y axis is percentage change from the investment value at the beginning of the selected time period. The user should also be able to overlay a different set of data, which is his "investment allocation", over time. This is a value between 0% and 100% which may change each day. The user has "friends" on this site, and should be able to display performance and allocation data for himself along with that of friends. So the interface will also include a scrollable list of friends to the left of the performance graph. All of the data will be supplied by an external server and fetched as XML data over HTTP. See Deliverables for more detail. ## Deliverables In its simplest form, the graph shows the performance of a user's investments over time. Given a fixed starting point in time, and data about performance investment, this shows a simple line graph, something like what you see on Google Finance when you compare performance of multiple stocks: [login to view URL] There is exactly one data point for each day in the time period. The time period should be flexible, via a scroll bar at the bottom of the graph (again, like Google Finance). [See Picture 2] That is, the X axis is time, and the Y axis is percentage change from the investment value at the beginning of the selected time period. The graph always starts at 0% at the left. The user may use a horizontal slider below the graph to change the start or end of the time period covered by the graph -- again, much like Google Finance. The user should also be able to overlay a different set of data, which is his "investment allocation", over time. This is a value between 0% and 100% which may change each day. This will not be drawn as another line, but will be in the background as a "temperature graph": that is, the graph's background color will change from completely transparent, to a partially transparent blue color, depending on the value of the allocation. For example, if the user's allocation were 0% for the first 10 days of the time period shown on the graph, that portion of the graph would be shown normally, with a white background. If the allocation were 50% for the next 10 days, that portion would be overlaid with a lightly-transparent blue background (i.e., alpha of 30%). If the allocation were 100% for the next 10 days, then that portion of the graph would be overlaid with a more opaque blue background (i.e., alpha of 60%). [See Picture 3] The user has "friends" on this site, and should be able to display performance and allocation data for himself along with that of friends. So the interface will also include a scrollable list of friends to the left of the performance graph. See attached screen shot for layout requirements. The user should be able to select up to 3 friends whose data should be displayed on the same graph as is own (four lines total). When only showing investment performance, the graph merely shows multiple lines on the same graph, corresponding to the user's performance and that of his friends. When the user also wishes to display allocation over time (see description of temperature graph background above), the graph changes somewhat significantly. Instead of showing one graph with several lines, it shows several graphs, stacked vertically, each containing one user's performance (as a line) and allocation (as a temperature graph in the background). These narrower graphs should be the same width and display in the same rectangular space as the graph described above (again, see attached screen shot for layout parameters). [See Picture 4] All of the data will be supplied by an external server and fetched as XML data over HTTP. This includes the list of friends, their investment returns, and their allocations over time. We will define the format and create the server that returns these values. We have some existing source code for other similar graphs we can provide, if it is of any help, but it is not required. Above I've referenced some simple illustrations that indicate roughly what we have in mind for the graphs. I have also attached a screen shot of another graph on our site, merely to show the colors and style we are using. It would be nice if it had a similar style, but we can tailor that later. [See Picture 1] So the deliverables would be all source code, compiled as ActionScript 3 code in a Flash .swf file, which implements the following functionality: - Contains a list of friends, and the ability to scroll through them, and toggle which ones will display on the graph. This list of friends should look like the list of contacts on google's Gchat within Gmail. Each name should appear next to a grey ball, unless that user is selected to be shown, in which case the ball takes on a color. The color of the ball matches that user's line color on the performance graph at right of the list - Display one user's investment performance over time (as a percentage change), in a line graph like that seen on Google Finance - Allow user to change start and end time by using a horizontal slider, like that seen on Google Finance - Show the user's historical allocation as a "temperature graph" in the background of the line graph - Display multiple users' investment return data over time on the same graph - Display multiple users' investment return data and allocation information over time as several small graphs - The visual look and feel should be basically consistent with the other Flash graphs which we will supply for reference (and for source code, as desired) - This project does not involve any work on the backend servers that generate the data - In the case of multiple graphs, each will have a different color, corresponding the the color bubble next to the name fo the user's data it is displaying - When scrolling over the graph, a popup box (like that in the reference files) shows the name of the user, the date at the position of the cursor, the % allocation on that date, and the performance of the user's investments on that day. ## Platform We develop in ActionScript 3, Flex Builder 3. We're targeting compatibility with major, modern browsers, like Firefox 2+ and IE 6+.