Skip to main content

uCharts - Financial Charting API

A few months back, the first stable release of the charting API, that I have been working on was released. A part of the uTrade product portfolio, it has been aptly named uCharts. uCharts is a general purpose charting API with prime focus on financial markets and data. In this post, I will give a brief overview of the features, compatibility and scope of extensions.



Features

The API currently supports 6 types of charts:
  1. Line
  2. Area
  3. CandleStick
  4. OHLC
  5. Bar
  6. Pie

It has been designed in a manner that all aspects of the charts are user defined. Starting from the color of the charts, width of the candle bars till the number of ticks on each axis. Mentioning each element seems like a futile exercise. However, brushing over a few notable features seems more fruitful.


Aggregation Formula
The number of data points that can be displayed on a screen or inside a DIV is limited by its resolution. The number of pixels available can lead to a severe limitation especially where data ranges over a span of 3-5 years. This is common while displaying historical charts of any trading security. To mitigate this problem an aggregation formula has been integrated which fires up automatically when the number of pixels required to display the chart exceeds the number which is available. In a basic 2-value line chart, it simply averages out values till the point that the number of data points to be displayed can be accommodated. In other more complex data types, formulas like VWAP (Volume Weighted Average Price) are used. 

Select & Zoom
An intuitive UX feature which lets the user zoom in to a specific area, selected by the mouse. This is not a simple zoom in to a UI element. The data points inside the selected area are mapped to the original data-set and everything is recalculated. The aggregation formula works out the final visual points again to fit the entire chart area.


Dynamic Conversion of Chart Type

There is native support to convert chart types from one to another. Line, Area, CandleStick and OHLC charts can be converted interchangeably in to one another. This however depends on the availability of the type of data-set required for candle and ohlc.


Reference Axis
A small view of the entire input data-set in the form of a line chart. It has a visual indicator which depicts the position of the current points that are being displayed. User interaction on this Axis has been incorporated at all levels. The window depicting current data points that have been displayed can be dragged and the new position will reflect on the entire chart. End point markers depicting the limits of the visible chart can be moved individually to increase or decrease the number of points that are displayed.

Value Tracker and Multiple Y-Axis
A value tracker calculates the value of each data point nearest to the mouse position on the chart. This value tracker has a multiple Y-Axis support. Which means that we can link n-number of Y- Axis and data-sets to the same X-Axis and the value tracker will accommodate all of them. As a part of financial charting, this is especially useful while displaying different technical indicators.




Extensions

The API is fully extendable to support any new feature that may be required. A few extensions that I have developed and are currently being used are as follows:

Technical Indicators for Securities
Trends in the stock market can be assessed and predicted by employing the use of technical indicators. Each indicator performs a separate set of calculations on the data and displays a single line chart or a combination of multiple types of charts along with the main chart. Currently supports 50+ indicators which take user inputs to certain variable values. The number of indicators can be increased without any known limit and multiple indicators can be displayed at the same time limited only by the visual design.

Free-Form Drawing
It supports drawing lines on top of the chart. These can be restricted to move in one direction and to one Y-Axis. Poly-lines are also supported which connect one point to another or can be a visual overlapping of multiple single lines. This can be extended to support basic shapes like a circle, square etc.

Trading From Charts
Manual trading is known to benefit massively by the use of charts. Trading from charts takes user experience to another level by allowing to user to trade directly by interacting with the charts. A user can click on the chart to bring up the order form which automatically gets filled up with the security id and market of the chart being displayed. Another major advantage is that it also calculated the value on the position of the mouse where the click happens and fills it in the order form.

Qt Support with Native Interaction
This API has been developed in a way that it not only supports all web browsers and mobile platforms by rendering SVG. It also supports native integration with Qt based desktop applications. The rendering is done via Qwebkit but some API design decisions allow the Qt application to interact directly with the API without any external web call or server hits. The entire API can be included as a part of the Qt application and does not require the use of a web server.

This API is currently proprietary content of uTrade Solutions Pvt. Ltd. and can be licensed, purchased or used as a trial by getting in touch: http://utradesolutions.com/contact-us.html

However, if you are planing to build something similar on your own. Feel free to contact me, I am always interested in helping out and learning new use-case scenarios.


Popular posts from this blog

Charting API for Financial Markets - JavaScript (SVG)

A brief about the released version of this API is available here.

As a part of the last semester of my graduation program (Bachelor of Engineering in Information Technology), I have been interning with a start-up, namely uTrade Solutions.  uTrade™ Solutions is a financial trading technology company with various products including multi-asset trading platform, algorithms and analytics. Instead of walking through my experience of working in a start-up, I would directly move to a short discussion about my project. 

uTrade Solutions is working to develop a financial analytics portal and every financial analytics portal employs the use of advanced charting. To draw and display different types of charts on the web, there are two main options which are widely used and acknowledged. Namely, Adobe Flash and Scalable Vector Graphics (SVG) . 
Using Adobe Flash has two main disadvantages: It requires the installation of an additional plugin to run content on the browser.It is not compatible with a…

FusionCharts Automated Testing Tool

While working at FusionCharts, every release we were faced with a daunting task of black box testing. Daunting mainly because of the breadth and the depth of the product. This post talks only about black box testing. FusionCharts Product as a whole contains about roughly 90 charts and each chart can be visually tweaked with a set of about 300 chart options/attributes. Ignoring any further permutation and combination, we have right there around 90*300 test cases. Apart from chart options, api testing which consisted of events and methods was needed. Clearly automation was required, as our manual testing would cover only a very small sample set that too based on smart assumptions.

With this problem at hand, I broke it down as follows:
Headless Browser
- Visual Regression
- API TestingUser Browser
- Visual Regression
- API Testing We liked to call it the FusionCharts Automated Testing Suite.

Headless testing would be based of a headless browser and integrated in to our nightly builds. It was…