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

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…

KDE - Authors //Promoting book writing in KDE

If you are in any way related to KDE even if you are just a user and think you can/want to help/join us then without giving a second thought fire an email to me. (supreetpal@gmail.com)




How it all began . .


Last October, Google invited proposals for a GSOC Doc Camp Sprint. The sprint was organised at their offices in Mountain View, California and luckily a team of KDE-Contributors got their proposal selected (I was one of them). Over there, we were teamed up with independent volunteers who were basically professional editors and were briefed about the whole plan. The layout was simple, we had to spend the first few hours outlining the chapters and target audience for our book, then spend the rest of the sprint working on the content. We had proposed to work on a beginner’s guide to KDE development, for developers. Most of the content required by us was available on the wiki but writing a book is a totally different approach than writing a wiki. Working 12+ hours a day , things were on w…