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

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:
LineAreaCandleStickOHLCBarPie
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 year…

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…