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







Comments

Popular posts from this blog

Nouveau - Summer Project

Implementing a software scripting engine on Fermi to achieve safe memory re-clocking. Fermi stands for Nvidia GPUs based on Fermi architecture. NVidia cards have long had the possibility to reclock at least some of the engines of its GPUs. Up to the geforce 7 (included), reclocking used to happen at boot time and usually didn't involve memory reclocking at all. It changed with geforce 8 (nv50) where almost all laptops got the capability to reclock both the VRAM and the main engines. This was introduced in order to lower power consumption when the GPU was mostly idle. The default boot clocks were usually in some intermediate state between the slowest and the fastest clocks. The reclocking process for these cards is mostly understood and Nouveau is not far from being safely reclock on the fly, even while gaming. Geforce 200 (nva3) introduced load-based reclocking on all the cards. This started being a real problem because the default boot clocks are a third to a half of the

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: Line Area CandleStick OHLC Bar 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

Two concepts to help upgrade our definition of science

Two concepts to help upgrade our definition of science.  Everybody agrees that there are a ton of things which people believe in to have some basis in science but don’t. This agreement is however limited to what somebody else believes in and not they themselves. Applying the scientific method to everything that we come across is not possible. We as individuals have neither the resources nor would our experience as a single data point count for anything more than an anecdote. There are two concepts to help us check if what we believe in would even qualify to be evaluated by the scientific method. The first is “correlation does not imply causation”. Just because two things are found to be correlated, it does not mean one is the cause of the other. The more popular version of it is a similar fallacy, an event that followed another was necessarily a consequence of the first event. For example, you bought a car on a Saturday and then later met with an accident. Drawing a conclusion th