Talk:Charting Module

From ExtractValue Wiki

The Charting Module refers to a set of functions designed to produce good looking, interactive charts. Although not a sub-module of the Performance Module, the Charting Module will be used by it.

Contents 1 Business Description 2 Specs 2.1 Introduction 2.2 Assumptions 2.3 Technical Information 3 Version 1.0: Performance Chart Specs 3.1 1.0 Primary Type of Data 3.2 Charting Intervals 4 Version 2.0: Compare Function 5 Version 3.0: Portability 5.1 Technical Requirements 6 Files 7 Related Articles 8 Category Tree 9 Old specs 9.1 Old Specs 10 Conversations 11 Notes 12 Emails 13 XML-RPC

Business Description

Deliver fast and interactive charts that move as fast as the markets do; compare markets and managers on the same playing field; and embed a custom chart directly into your website, blog or e-mail.

Specs

These Specs were finalized by Austinguu 18:47, 22 August 2008 (UTC)

Introduction

Correlo.com is a website which is being developed and launched by Extract Value. The site will deal with varying investment markets, including stocks, bonds, commodities futures, mutual funds, Commodity Trading Advisors (CTAs), hedge funds, and more. It is a portal for everyday investors to log on to research companies and view their performance data. This function specification will detail the performance chart which is to be developed with Adobe Flex.

This document will detail the technical specifications required for the development of the Performance Chart for Correlo.com. The performance chart will be similar in functionality Google Finance’s stock viewing chart.

Assumptions

This design assumes that the following statements are true:

1. The Performance Chart will be developed with Adobe Flex.
2. The application will go through different development phases noted by Version number beginning with 1.0 to 2.0 and so on.
3. Each version must be delivered to be reviewed by Extract Value before proceeding to the next Version.
4. Version 1.0 of the chart is expected to be designed in a minimalist fashion in terms of features. This is to take development time in to account with the hope that a basic functioning chart will be created as soon as possible.
5. The chart must be designed with scalability in mind. Many features will be added in immediately as well as in future versions.
6. The data will be accessible via external API.

Technical Information

1. API Information
   1. The chart will be invoked and provided with a data set of performance numbers. The performance numbers are a percentage and reflective of that data set's ROR (rate of return). Generally, the start date should be the data set's beginning date to the end of the data set, normally to be defaulted to the current date. A performance for each month should also be displayed. The chart should display in units of percentages as whole numbers.
   2. The functionability of the chart need not have an XML-RPC client built in since the web application already has one built in. The chart simply needs to be able to communicate with the application via a PHP script, URL or however means the Flex expert advises to communicate with the PHP application.
   3. The application itself will be developed in a PHP MVC framework using either CodeIgniter or it's sister framework Kohana.

Question
 1a. The module is calling the API, we should define in the specification the data type/structure?
Answer
 1b. The module will NOT have an XML-RPC client built in it. It will be provided the data by the application itself. This is being determined (see discussion tab).

Question
 2a. The Flex developer needs to suggest whether or not to have the XML-RPC class built in and why (please take into consideration scalability across different sites, speed, etc.)
Answer
 2b. Jason Taylor has strongly suggested that [WebORB] be utilized for this, and thus, it has been decided to utilize it as such.

Version 1.0: Performance Chart Specs

1.0 Primary Type of Data

• The Performance Chart will show a Product, Order or Portfolio's performance chart over time.

Figure 1.0, which is taken from Google Finance, is the model for how the chart should display.

• Figure 1.1 annotates components of the chart.
  • The numbered items below will reference the Red Boxes in Figure 1.1.

1. The y-axis labels of the Primary Data Set are based on values.
   1. The decimal places of the Primary Data Set may change depending on the Product Type. For example, stocks will be quoted as 53.16 and Investment Managers as 1.032.
   2. In the future, we may account for even more disparate values for unique situations. For example, the Corn commodity futures market is quoted as 1288'4, which literally translated to 1288 and 4/8ths.
2. The y-axis labels of the Secondary Data Set are also based on values.
   1. When viewing the performance of stocks, commodities, currencies, or options, the Secondary Data Set will be Volume.
   2. When viewing the performance of investment managers, the Secondary Data Set will be Assets
   3. The decimal places of the Primary Data Set may change depending on the Product Type. For example, stocks will be quoted in Millions per Day (mil/1d) while Commodities will be quoted in number of contracts, a whole number.
3. The endpoint of the timeline defaults to the last data point of the Product.
4. The Secondary Data Set is displayed in a Chart Format.
   1. By default, the chart format will be a bar chart.
5. The Secondary Data Set will be labeled according to the Product Type. As in a previous example, stocks will be quoted in "mil/1d" while Commodities will be quoted in "contracts/1d".
6. The Zoom feature will work exactly as on Google Finance.
   1. By default, the zoom will be at 1y.
   2. YTD means "Year to Date" and is the performance of the Product since the beginning of the year.
7. Please refer to Version 3.0 Compare Function.
8. The Date feature will work exactly as on Google Finance.
   1. The End Date will be the last data point
   2. By default, the Beginning Date will be 1 year before the last data point
   3. 

      

      Figure 1.4: On MouseOn
      When the mouse is on the Date Range of the Beginning Date or the End Date (Figure 1.4)., then the Date Range will be highlighted and can be changed.;
   4. 

      

      Figure 1.5: On MouseClick on Date Range
      When the Beginning Date or the End Date is clicked (Figure 1.5)., then the Date Range will change to the YYYY-MM-DD format and can be changed.
      1. Changing the values will change the date range; and
      2. Changing the value to an inappropriate date will not change the date range;
9. This is the "Heads Up Display (HUD)". The HUD has three properties.
   1. 

      

      Figure 1.3: On MouseOut
      When the mouse is not on the chart at all (Figure 1.3). In this instance, the Value is displayed alongside the RoR, which is in parentheses;
   2. 

      

      Figure 1.6: On MouseOver
      When the mouse is on the line graph of the Primary Data Set and not the Secondary Data Set (Figure 1.5), the HUD displays the Date, Primary Data Set Value, and Secondary Data Set value.
10. These are Quick Comparisons.
    1. On Click, they will add a Comparison.
    2. When unchecked, they will remove the Comparison.
    3. By default, the following Products will be here: S&P 500, GSCI, and Bonds.
11. Using this field, a User can search for a Comparison. Selecting one will add a checked box for the Comparison and the Comparison name to the right.
    1. Unchecking the Comparison box will also remove the Comparison.
12. When users zoom out to yearly view, the graph should show daily data points from the most recent 365 days, then weekly data points for all data prior.
13. When zoomed into daily or 5-day view, the graph should show minute-by-minute data points.
    1. We should be able to view daily data when zoomed in, even for past data (e.g. greater than 1 year old).
14. The area below the charted line should be filled in (shaded blue).

Charting Intervals

• Charting intervals depend on the timeframe being viewed (see the thumbnail for an example)
  • Timeframes range from:
    • Hourly - when less than 24 hours appear
    • Daily - when more than 24 hours appear
    • Monthly - when more than 30 days appear
    • Quarterly - when more than 6 months appear
    • Annually - when more than 12 months appear

Version 2.0: Compare Function

• Figure 2.0, which is taken from Google Finance, is the model for how the Comparison Chart should display.
• Figure 2.1 annotates components of the Comparison Chart.
  • The numbered items below will reference the Red Boxes in Figure 2.1.

The compare function allows for the comparison of different Products, Orders, or Portfolios. Note that the Comparison Chart does not use the secondary chart at the bottom (Volume or Asset, etc).

1. The Beginning Date of the Max Date Range will change to reflect a least common denominator of the Beginning Time.
   1. For example, if Company A started in Jan 1, 2000 and Company B started in Jan 1, 2003, then the Comparison Chart must start at 2003. If three Products are used, then the Comparison Chart must start at the most recent Beginning Time of the three.
2. All values must be normalized to a Non-Compounded Rate of Return with a shared starting point. The shared starting point is the interval before the Beginning Date of the Date Range; and the value of the shared starting point will always be 0%.
   1. For example, Figure 2.1 shows a Beginning Date of Aug 21, 2007. The Non-Compounded Rate of Return of the interval before Aug 21, 2007, which is 11:59:59.999 of Aug 20,2007 (if it does not fall on a weekend or holiday), will be 0.00%.
3. Mousing over the Chart will display the Rate of Return of the particular interval.
   1. For example, the Interval in Figure 2.1 is daily and therefore the Daily RoR will be displayed.
4. Unchecking the comparisons will change the Comparison Chart back to the Performance Chart of the Product's, Order's or Portfolio's Primary Data Set.

austinguu 01:28, 7 November 2008 (UTC) says:
The RoR needs be cumulative so that the rate of return of
each data point should be added to the last data point.

Version 3.0: Portability

1. Be able to put the Charting Module in widgets. This will be accomplished through iFrames or Javascript. The application must be domain independent so that it can be redrawn on an infinite number of domains.

Technical Requirements

1. Users will have the option of inserting Javascript code onto their personal websites that will allow the chart to display on their domain.
2. The application must be domain independent so that when it does get displayed onto another site via Javascript, the functionalities of the flex application will still function as normal (zooming, etc)
3. The Javascript will be dynamically generated so that a user can cut-n-paste the javascript. Initially, a form will be presented to the user and based on the user inputs for customizing the chart, the Javascript will be generated.
4. The user inputs requested from the user will include options similar to the following:
   1. Width
   2. Height
   3. Investment funds to compare
   4. Et cetera

Files

Flex 3 Charting Module - Work Completed to Date

Related Articles

• Performance Module
• Spreadsheet Module
• Superportal
• Product

Category Tree

Old specs

Old Specs

1. The upper right-hand corner displays the timeframe being viewed.
2. The line graph displays the Product’s performance with the dates along the x-axis and percent change along the y-axis.
3. The line graph at the along the bottom of the chart shows the percent changes over the timeframe. This must be able to be dragged in order to specify a user desired selection range.
4. The percentage number in the top right corner of the graph to the right of the date shows what the calculated overall percent change is over the timeframe specified.
5. The chart, when given a group ID, should access the API and display the company’s performance with various time frame specifications which can be selected by the end user. The start date is the company’s beginning work date to an end date. The chart should display in units of percentages as whole numbers.
6. The bar graph display located between the main chart and the line graph of the company’s performance will display the Assets Under Management (AUM).
7. Add in zoom function which allows for 5 different views as shown in Figure 1 of Appendix A
8. The five levels of zoom are: Max, 3y, 1y, 6m, 3m where y = year, m = month

Conversations

Austinguu 21:27, 4 September 2008 (UTC): for example, we repeatedly asked about performance issues but you guys have not brought up the issue of having too many data points [2:25:35 PM] Austin Guu: since we are using microsecond time stamped data, there are 31 556 926 seconds in a year. that's a lot of data points and will slow down the chart [2:25:52 PM] Austin Guu: so when the chart is at a yearly view, we will have to use daily data (365 data points) [2:25:57 PM] Austin Guu: do you understand? [2:26:16 PM] Joe: yes

Notes

Version 4.0: News Data Plot

Current plans do not include Version 4.0
Please do not include this in the project.

1. The boxed capital letters along the line graph in Figure 1 in Appendix A correspond to different news articles which Google has appear along a column on the right side of the chart. Clicking on the letters links the user to the news article corresponding to the date of the company’s performance.
2. The news articles displayed will be HTML and not party of the flex application. However, the application will need to communicate with the news articles so that when a user clicks on a letter on the graph, its corresponding news article will scroll into place and become highlights. Additionally, when a letter is clicked on in the news article list, its corresponding letter on the graph will come into focus/view.

Added by Austinguu 19:01, 27 August 2008 (UTC):
This link has useful info.  Right-click to view source.

Emails

Hello Omed,

Inline with the discussion Venky had with you yesterday, please find below Venky's comments regarding HTTPService and XML RPC:

1. HTTPService: In the case of HTTPService, HTTP request is sent to a php/asp/jhtml/perl script which would return a set of XML. In the case of sample available at the site

http://www.meutzner.com/blog/attachments/360/Flex_Finance_Step4.html, HTTPService is used retrieve the XML in the format as attached along with this email. Flex code converts the returned XML, convert it into a

ArrayCollection and feed it to AreaChart. The disadvantage in this case is the server side developers need to return the XML in the required format, otherwise Flex client code need to parse the XML, creation action script object, construct ArrayCollection class and feed it to AreaChart.

2. XMLRpc: XMLRpc client in flex can call a method on the server side and retrieve the data as action script objects(no need to parse the xml) and feed it to the AreaChart. The advantage is that server need not construct XML from the data retrieved from the database, instead server can serialize data as objects and send it back to the client and flex client can retrieve it as action script object.

Basically XMLRpc competes with Flex class RemoteObject(which communicates with Adobes balze ds server http://opensource.adobe.com/wiki/display/blazeds/BlazeDS on the server side). The advantage of XMLRpc is that server need not worry in returning data in the require XML format and instead can return objects as a response to the remote method call.

When I launched the application compiled from the source that previous I couldn't view the chart. I noticed the current code is using XML Rpc code from http://code.google.com/p/as3-rpclib/. The latest update to

http://code.google.com/p/as3-rpclib/downloads/list is April 16th.

Thanks and regards

Joe Abeth

Sybrant Technologies

Hi Joe,

Thank you for the research, this information is imperative for our technical team to know and understand.

I still need to know, however, the performance advantage of httpservice versus xmlrpc. Also, please include the difference in hours and ultimately the bottom line price that will be the difference between the two methods. Please take into consideration the existing source code and XMLRPC client built it when sending me the new quote.

Thanks Omed

XML-RPC

Hi All, XMLRpc code in the existing source is basically taken from the source available at http://code.google.com/p/as3-rpclib/.. You can also see the copyright notice in the ExtractCharter/src/com/ak33m/rpc/xmlrpc/XMLRPCObject.as which is same as the source and binary SWC library available at http://code.google.com/p/as3-rpclib/.. The existing XMLRpc code doesn't retrieve the data from the server and feed to to AreaChart to display. Hence there is no chart displayed when chart displayed is ran from existing source.

As far as performance is concerned there is no overahead in constructing the XML on the server side and parsing the XML on the flex client side in the case of XMLRpc. I am not sure how the server side need to be implemented in the case flex client used XMLRpc. There are few tutorials, samples etc available in this link http://code.google.com/p/as3-rpclib/w/list. I am going through it to see how the server side module needs to be implemented when flex client uses XMLRpc.

Estimation is 5 days when XMLRpc is used and 7 days when HTTPService is used. In both the cases client development can really make progress only when server side component is ready to return the required chart data in the right format. In the mean time till the server side component is ready, client can use local data on the client side to see if the AreaChart works as expected.

Regards,

Venky