Skip to main content

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:
  1. It requires the installation of an additional plugin to run content on the browser.
  2. It is not compatible with any of the latest mobile operating systems. ( iOS and Android)

Hence, SVG was chosen to display charts on the uTrade Financial Analytics portal namely, Money uTrade. The API being developed by me, is completely using the JavaScript language and the Raphaeljs library. Raphael allows us to draw objects on the web browser in SVG (vector graphics), uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object we create is also a DOM object, so we can attach JavaScript event handlers or modify them later. Raphaƫl currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

There are a couple of charting libraries available which allow you to integrate charts easily on your webpage but the most notable one is the HighCharts. I have been looking at a custom implementation of the price series time plot using HighCharts as my aim to replace. The implementation has a basic part which allows the custom plotting of multiple charts on the same canvas and an advanced set of features which make the price series implementation highly interactive.

The basic release of my charting API includes drawing of five different types of charts:
  1. Line
  2. Area
  3. Bar
  4. Candlestick
  5. OHLC 
It accepts an input object which provides all the parameters for drawing. The following features are included in the basic release which need to be defined:
  1. Placeholder - Name of the DIV which will hold the entire charting canvas
  2. Title - Text to be displayed as the header of the canvas
  3. Legend - Visual list of all the series which have been plotted in their respective color code.
  4. X and Y Axis with the following customizable features -
      • dateFormat, if it is a time axis. It supports the date formatting by Steven Levithan.
      • x and y coordinates of the top-left, defined in percentage.
      • width of the axis.
      • axisColor can be defined as a hex code.
      • thickness of the axis line.
      • axisOpacity defines the opacity of the axis line.
      • label displays the text which describes the axis.
      • labelsize defines the text size of the label.
      • TickColor contains the hex code of the color of ticks on the axis.
      • TickLength is the length of each tick on the axis in pixels.
      • TickThick is the thickness of each tick.
      • TickNum sets the number of ticks to be displayed.
      • TickOffset is the distance between the axis and the tick labels.
      • TickTxtSiz defines the size of the text in the tick labels.
      • TicTextRot defines the rotation angle of the text in tick labels.
      • LabelOffset defines the distance between the axis label and the axis line.
      • LabelRot defines the angle of rotation of the label text.
  5. Series contains all the data series which have to be plotted on the previously defined axis and their descriptive parameters, namely :
      • type currently support 'line','area','bar','candle' and 'ohlc'.
      • color defines the color of the chart line of this data.
      • showInLegend  'true' or 'false' checks whether or not to display the series in the legend.
      • datatype tells the format of input data in this series.
      • data contains the data which needs to mapped and drawn at that point.
      • fulldata contains the entire data without any manipulations.
      • xaxis  contains the id of the X Axis on which the series needs to be plotted.
      • yaxis contains the id of Y Axis on which the series needs to be plotted.
      • barWidth/ boxWidth applicable for bar type and candlestick charts.
Series can be plotted on any X and Y axis. Each X axis can have multiple Y axis and vice versa.
Drag & Select to Zoom

The advanced release is still under development and is mostly price series chart specific. It currently supports the following features:
  1. A Crosshair display which supports user-defined colors and thickness.
  2. A Value Tracker which snaps to the nearest point and displays its value on both axis.
  3. Zooming by click and drag selection on the chart.
  4. Zooming to different time ranges via buttons or input fields.
  5. Panning using a reference Axis which is plot of the all the X values of main series in input data. It contains markers which denote the zoom level/end points of the chart that is drawn.
  6. Dynamic resizing of the entire canvas and all the charts according to the size of the window.
  7. Dynamic conversion of chart types - candle, ohlc, area.
  8. (In development) Manipulation of input data to fit chart of any size and hence removing the upper limit constraint of number of value points that can be plotted on a chart of given length.
Since, the code is currently not open-source and still in development I will not be able to push it on github. However, making the source code open is in the pipeline according to my project manager. As of now, I can only share screenshots of an example implemented using the API.
Candlestick Chart
Area type Chart
OHLC type Chart

Date Picker tool to select range 
Drag to Select


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…