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.


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.


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:

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

ES6 Babel Transforms : Code Injection and Increase in File Size

This post aims to give a rough idea on the increase of file size after applying babel transforms to ES6 JavaScript. These figures depend highly on your style of writing code since each extra space leads to an additional byte. However, the transform comparisons will give you an idea on how they are treated by babel and how much of additional code will be injected in your file. 
These file sizes are non-uglify, non-gzipped and without any method of compression on OSX. let - var3 bytes for the first rename. 4 bytes for each subsequent rename.const - varSave 1 byte per declaration.
Class Tranforms852 bytes for using simple class declaration with a constructor. Adds two new functions, namely, _createClass and _classCallCheck.

2114 bytes for creating and extending a class.

Extending a class adds two more functions let us have a look at them, namely,
_get and _inherits.

Arrow => functions20 bytes per usage, depends on the usage as well.

Template StringsA little less than 4 bytes per variable cal…

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…

The secret life of the OnePlus 3

So I bought the OnePlus 3 on launch day; it has been about a week since. Buying products on launch day is a practise I am personally against and don’t recommend, but end up falling for more often than not. More comprehensive reviews and bugs surface only after a few weeks from the public release; this time however, things were a little different. Reviews by both The Verge and MKBHD were released as soon as the launch event ended. For me, reviews by The Verge are nothing more than in-depth first impressions. It seems as if they don’t really use the phone as a daily driver or even for more than a day but instead they have some really talented people who produce great content and sometimes catch things that others don’t in the first go. MKBHD on the other hand has always been very reliable- he uses each phone as his daily driver for at least a week before publishing a review. The OnePlus3 got rave reviews by both and was marked to be nearly perfect.
The interesting bit however is that O…