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