 So, the first question is why HTML5 stock charts? So, how many of you are really interested in stocks in general? And you have been following stock charts I believe so. So, most of the stock charting libraries that are available are typically flex or java based and there was really no alternative. There was SVG, but there was little limited in capabilities. Then the HTML5 canvas element has got most of the things that are required to do 2D plotting and with WebGL it is also for 3D plotting, but that is not something we are concerned about. Good thing about it is it is dynamic, it is scriptable. So, we can make use of JavaScript for doing all our charting. There is another thing that there are some really excellent JavaScript plotting libraries some of you might have used those. For example, if lot is something I have used and jqplot is another one that I have used, but they are more for plotting typical more like scientific data or other type of data and not very specifically mean for stock charting. When I am when I say what specifically mean by stock plotting what it means is there are certain requirements that a typical stock plotting application will require. So, you have something called as an open, high, low, close charts and you also have something called as overlays or indicators typically like exponential moving averages and so on. And you also need some interactivity as in you want to be able to add indicators to the plot you want to see on different time scales. So, those kind of that kind of availability is not available in some of those libraries. So, that is something that I also decided to do. I was mainly interested in stocks for the stock charts for Indian markets and they were not really good charting applications that I could come across and a lot of it was data problem. So, I had to do solve that as well, but that is something that we are not going to talk about it. So, there was clearly a case for doing something with HTML5. I knew already a bit about JavaScript because I had used jQuery in the past and Flex was not kind of intuitive to me. So, I decided this looks like a good something to try in HTML5. So, this is a library that I have developed which is essentially for plotting the chart data. It is still early and it does not have a well defined API. So, if somebody has to use it, you have to dig a little bit into code and use it. And there is an application that I have developed that demonstrates the use of this library. So, with all the straight away going to the demonstration of that application. But before we go, let us look at what we want from a stock plotting library. So, typically if you see any stock data is a time series data of open, high, low, close and volume data. So, you need an ability to plot at least one of these types of plots which is like line plot, open high, low plot and there is something called as candlesticks. Then also you need ability to zoom into some data, zoom out of that data and pan across the time scales on that data. Then you need some more ability like to be able to add trend lines, retracement lines. These are little specific technical terms to stock charting. Let us not worry about it right now. And you also need some kind of support for indicators or overlays as they are called which are typically like exponential move. How many people are aware of these things exponential moving averages, right? So, it is basically I will just quickly explain what this is or we will just explain as we have a demo. And this is something that I was particularly interested in in doing something that could care ideally from tick data to all the web to monthly data. So, you have a tick data with you, you have a library that takes care that makes use of the tick data and you could just plot it from a from a minute chart to a 5 minute chart to a to all the web to a monthly chart. So, let us see, let us get, let us see about this. So, we of course do not have an access to internet, but I have this application running on my local news. So, some of the data that you might see might be old, but that is still ok. So, essentially what this is, this is an application that that I am discussing about. So, the UI is very primitive because as I am not so much concerned about the UI, but it should still show all the kind of interactivity that is possible with this kind of an application. So, most of this application is written in Python Django. So, this is not node.js, there is something in node.js that we will talk about little later. Basically we have this input for ticker symbol and most of the DOM manipulation is taken care of using the jQuery. So, basically here we select a ticker symbol we might be interested in. This seems to be my favorite. So, what we have now is a plot of the data of the state bank of India. Now, if we really look if we look at it what is happening really on the network what we get here is essentially we get a JSON object that is nothing but a series of timestamp open high, low close, a series of open high, low close. Then if we really look at what is happening little inside, then we will see there is an object called as plot, there is an object is it visible? Not quite right, never mind there is an object called plot. So, this is basically when we open this URL we get this object called plot initialize. This object if we try to inspect a little bit about this object. So, this object is basically what it does it does an initialization of an HTML canvas page. I think that should be visible right? Yeah, that is what is more important. Then we have something called a chart parameters object, then which we have something called as a context object. So, these are the internal browser objects the canvas and the context object. Then we define the define certain objects that are mean for manipulating data. That are mean for manipulating data those objects are called as current object. So, the current object essentially if you look at it holds what is called as indicators we will worry about those indicators. Then there is this object called open high, low close which is the actual data that we got just now from the from making a network call and then there are these objects. So, what essentially happens is when we make a network call this is an object that gets initialized and it has all of these sub objects that get initialized as well. Now what we want to do here is this is a daily plot of the daily plot of state bank of India chart. What we want to do here is we want to have a weekly plot. We just change the time scales from daily to weekly and that is it all we have to do it does not do any network call because all the all the data all the all the computation that is required to be happening happens at the client side. There is no network call involved in this and you could simply as well scale it to a monthly data and then you could again change back to daily data as well. So, the interesting thing that happens about this is let us say let us from daily data when we move to weekly data and if we again inspect the object what happens is the current object is only changed to monthly data and everything else just remains the same. Then there are basically one thing that needs to be kept in mind. So, the only network call that we make in this is when we get the JSON data everything else happens on the client side. So, there is there is no other network call that happens. Then you could change that chart to a bar chart or a candlestick chart. Sometimes you want to be able to print this chart. So, you want a better background. So, these are just bells and whistles. Let us not worry about this. So, there is something interesting I want to talk about. Then here you find something called as mode. So, the mode that we support is one of the two modes one is called as either a pan or zoom mode. So, in the pan and zoom mode what we can do is we can just pan across the time scale and then there is something called as a trend line mode. So, this is an elementary support for what I call it as trend line. So, you would be able to add trend lines to the chart in this mode. This support is quite elementary. It is not as good as I would want it. So, this is something I am working on. So, these are the modes. Another important thing of any charting application is typically if you see the distance between this is a linear chart. This is a linear support. The distance between 1000 and 1250 is same as 1250 and 1500. So, if you want to change the distance from linear to logarithmic all you have to do is this. Again there is no network called involve all the computation happens on the client side. Typically, logarithmic charts are used for data on a very large time scale. So, weekly may not be a right, but on a monthly time scale this logarithmic data makes lot of sense. And then we have the support for what is called as zoom in and zoom out. So, basically you can focus on more specific area of the chart. This is a kind of interactivity that is not typically available with most of the normal plotting libraries that you get, like jqplot or flot that I discussed just now. Then there is something more that a typical charting application will have support for something what is called as an indicator or an overlay. So, the indicators are something like an EMA close. So, basically it is an exponential moving average. So, what is an exponential moving average? This essentially says that this is an exponential moving average of close prices for last 20 periods. So, the thin line that you see is essential. So, what it basically means there is a moving window and the thing about the exponential average is the exponential moving average is more sensitive to the latest prices. So, there are different kind of overlays that are supposed a simple moving average is just some of closing prices divided by 20. So, this is how you can add indicators and delete indicators from the chart. So, this is the kind of interactivity that I was discussing about when I said that this was not readily available. So, this is something that I went ahead and did. I am going to talk little bit about what is inside the library and why certain design decisions were made. So, the data is supported is in the JSON format. So, everything here is essentially a timestamp. An array of timestamp open, high, low, close and an optional volume. So, volumes are not, volumes sometimes are not available. Then the timestamps are essentially unix timestamps. I am sure many of you are aware of what are unix timestamps. So, one good advantage of having unix timestamp is you just have to deal in one format. For example, data could be 12 January 2011. It could be 12 January 2011, 5 p.m. or anything like that. So, we convert all of that into a unix timestamp and deal with it and these being numbers they are very easy to deal with. So, that you can easily take percent hundred, you can easily take percent thousand, percent eighty six, four hundred. So, that is the idea. And these being numbers also helps in scaling across the same. So, for example, if you have let us say a minute data or you have this data from minutes and you want to scale it to an hourly. So, what you really have to do is really take collective 60 candles and take their data. So, that is how you can easily scale using this unix timestamp. So, that makes it much more easy. So, how do you really use it? So, we define the object that we described has got what is called as a read function. So, basically this tries to read data and then there is a function that is called as plot function. So, this plot function is typically called whenever any parameters or anything changes. So, excuse me, we want to make sure that plot function is really lightweight. We do not want it to be very heavy. So, basically it initializes the canvas element. If the canvas element was not already there, then all the margins that you saw in this are needed to be initialized like the margin at the top and then the margin for the volume etcetera. So, all these margins are initialized in the plot function and sets the basic objects and its properties that we saw like the current object, timestamp etcetera. So, and we have to make sure that this is a lightweight function because every time any parameter or any data changes we are making use of plot. Even when we are panning or zooming, we are essentially what we are doing is repetitive calls to plot on an event listener. So, we have to make sure that this is not a very expensive operation. So, what we do for that is we define something called as a plot window. So, a plot window typically if you see in a typical use case, you would rarely see more than a couple of hundred candles or a couple of hundred time series data. Even that is pretty rare, but typical use case is like 50. And what we want to do for these 50 is we need to know the x y axis bounds for this. That should also include the indicators or overlays that we have added. We also need to scale to log or linear depending upon user interactivity. Also remember log is a very expensive operation, it is not a simple mathematical operation or easily available. So, this is an expensive operation. So, we have to make sure that we do not do a log operation on a 10 k data size array, we have to do it on minimum as minimum as possible. So, we typically define a window, do all these operations inside this log, inside this window and then just plot the window. So, all the all this heavy work is done for not more than 50 or 100. That we define that determines the bound depending upon where our x axis bounds are. So, these are some of the design choices that I have made that I have made doing this. This is something else that I wanted to talk about. So, I will just keep a brief background. So, I was just having a chat with a guy and he said that this library is cool, can I do it for real time plotting. I said yes, it should theoretically be possible, it is not really difficult. And then we were just discussing he had some data, but that was a very static data and only 50, so 50 or so kind of data. So, I said oh that is not fun. So, there is something called as a random walk. So, basically what they say is the stock prices typically follow what is called as a random walk. So, essentially what it means is the movement of stock prices is random and the current price is only a function of last price. So, I said that could be a good idea. So, I just quickly googled for a random walk something that could give me a random walk on a javascript. So, I found out and put together using node.js and something this was really fast that I could put together using node.js. I actually intended to show it live and unfortunately I did not have it ready on my laptop, but I will just show you how the app works essentially and that makes use of node.js and socket.io. Okay, so what we are basically going to do in that application is we are going to generate a stock chart data using a random walk process. We will just show quickly see what the code is like and use that data on the client side javascript to generate real-time chart using the DICP library. So, I am not sure whether we will be able to see that live, but I am just trying to show what we are going to what how the app looks like. Okay, this is so is it visible? So, basically we have heard enough about node and socket.io. So, I am not going to talk more about it. This first line that you are looking at is just to tell the node that where to look for some of these library if not if they are not present in the current directory. Okay, then this is the random walk function. So, what it basically does is there is a there is this normal random that is defined in my library and wall is for the volatility. So, it just finds a normal random, it finds a multiplier and the next price is the multiplier of the previous price which is which we call it as seed. Okay, and somebody is going to talk in detail about express. So, I do not want to get into the details and frankly I do not know much about it myself. So, this is something I just could quickly hack up in like half an hour. So, essentially this is just a configuration for our create so for an express server and what we are here going to do is basically we define a function called delay here. So, every 100 milliseconds what we are going to do is we are going to call this emit price function. We are going to call this emit price function that is going to change a value of a global variable to some value using a normal random walk and then we are essentially going to what we are going to essentially do is there is there is going to be an event called take on a socket on a socket socket that we create and we are just going to throw that throw that price to the client. Okay, and this is just the initialization stuff and the application listens on port number 8002. All right, and this is how the client function looks like some basic initialization. What is what is of interest to us here is this is a function called tick. Okay, so this is a function that gets called on on every tick event that happens on socket IO. So, what it is essentially trying to do is build the candles on the fly of one candle will be of typically of 25 data points. It's accumulating those candles of 25 data points into this and just plotting. I wish I could show you you would be able to appreciate this really well after that. I don't have the node packet manager with me so as a consequence I'll have to figure out how to add those sockets that are your parts in my so I wasn't quite prepared for that so I can show you. So, this is essentially what I wanted to show on node.js application for real-time talk charts. Yeah, so this is pretty much what I had to talk about in this library. So, yeah, if you have any questions or something. Well, you don't really create Canvas. Yes, unfortunately for this kind of application there is no other choice. Okay, because what's happening is when you panel zoom here it's not just you know that one area of Canvas that gets changed. Sometimes even the access gets changed. Okay, sometimes the whole data set gets changed. So, this is still expensive, yes, but this is something we can't get rid of. Yes, yeah, I am not really aware of. I'll have to look at it. But it will be, I did a benchmarking long-term back but it wasn't the Canvas painting that was the most expensive from what I remember. I need to do a little bit of benchmarking again, but it wasn't the one. So, what we want to do, what we try to do here is, yes, that is expensive and that will always be somewhat expensive. What we don't want to do is we don't want to add computational overheads to that. For example, let's say typically this data is typically is like 1k or 2k data points and sometimes very easily 10k is a very normal use case. So, in that kind of data points we don't want to go and take log and we are anyway essentially going to throw away 9, 9, 50 of those. So, first what we do is we define the x-axis bound that in turn determines the y-axis bound and then we re-plot the Canvas. So, that's that's how we do it. I've tried it using path. There is something there is a there is a way to do it. The way to do it is actually it's write basically write an event listener that basically gets your mouse that gets your mouse position that gets you a mouse position. I think I can show you how just a minute. Yes, something like this, you want the value at these points. So, the way to do it is basically find your offset in the canvas of that data point of your mouse position. Let's say your x-axis is let's say 200 and your mouse position is like at 150 and your entire x-axis range is whatever let's say 10 on some scale or some function. So, this is going to be 7.5. You're not going to get it dead accurate but reasonably accurate. It doesn't matter. So, the way to do it is okay the way to do it I would say is let's say you get your x and y coordinates and get your actual x and y values okay. Put those x and y values in a function and you really see whether you are within certain bounds whether you are close to that line. This is very little else that you can do because you know the granularity that you have a label is one pixel and nothing nothing less right? Yeah, okay, okay, get an equation for a path that's like completely outside the scope of this. I mean you have a path and you want to get an equation for the path is that no no that's I don't think I have never tried that and I don't think that's it that's really that simple all right okay thank you