Price Scanning With HTML Tables

In the next release of iGrapher the main new feature will be a much needed hovering price scanner. So as you scroll over the chart, it'll give you an indication of the price of the stock on that date, as seen in the image above.

To implement this we would need to create a table the size of a point, colour it, then moved it along the position of the mouse while over the graph.

So we first create a class to encapsulate the scanners function so we can easily iterate it's functionality over as many stocks currently drawn on the graph.

function PriceScanner(index) { this.table = document.createElement( 'table' ); this.td = document.createElement( 'td' ); this.border = "4px solid " + graphColours[index]; this.table.cellPadding = 0; this.table.cellSpacing = 0; this.table.style.position = 'absolute'; this.table.style.left = 1; this.table.style.top = 1; var priceScannerTBody = document.createElement( 'tbody' ); var priceScannerTR = document.createElement( 'tr' ); this.table.appendChild( priceScannerTBody ); priceScannerTBody.appendChild( priceScannerTR ); priceScannerTR.appendChild( this.td ); canvasParent.appendChild( this.table ); } var priceScanners;

Next in our mousemove event we run the scanner update function if it's over the graph canvas, after recording our mouse x and y coordinates.

Then in our scanner update function for all the stocks drawn on the graph, we pick out the price index that's closest to the mouse coordinate, work out the draw point and set the table's left and top attributes to point to the same point. Then set the border of the table to be it's "this.border" property. When the mouse goes off the chart we stop calling the update function and the border back to "" so it disappears from our view.

Also in the next release we've freshed up the design a little throwing in some outset tables and buttons, fixed a few niggly bugs todo with scrolling and resizing at unusual occasions and included the minute to minute data to the graph slider at the bottom, so when you slide it to the right it'll go to today's movements.

iGrapher

From x to i

A few days ago, when we tried logging into the ftp account to roll out a new update, we'd got a password incorrect error. We emailed the host, but there was no reply. Then we noticed that the site was gradually being re-branded... We'd been hijacked!

The thing is, since we started this project as a self-development exercise to extend our knowledge on the financial sector. We never actually considered it branching out and becoming popular (at least so soon). But, ever since we gained recognition on the internets (mostly thanks to apple), we immediately began being targeted for a takeover.

We still saw this project as in it's infancy, and refused to consider any offers. However, our web hosting company saw otherwise. Since it had let us use it's web space and domain for free (thanks), it also meant that they owned the legal rights to it. Well, on that day, they decided to hold us for ransom.

So...

Out with the old and in with the new? Development on this financial visualisation project will now continue on iGrapher.com, hope you like the name, it's very apple-centric, but, I guess it works.

In our next update we'll be implementing history downloading optimisations and extending currency exchange history data.

iGrapher