Skip to main content

Posts

Open source HTML5 visualisation library to draw charts on the web (morris.js)

At work(ongoing,full-time contract) we use the Google Visualizaton  library for our various data visualisation needs. So naturally when I was building this tool to streamline the process of Post Traumatic Amnesia(PTA) assessment, my first thought was to use Google Visualization library for the tool's data visualisation needs. However that was only till I realised that the tool needs to work offline. Google Visualisation is a very good library but it only works when the the web app is online, so after some looking around I found a tool that works offline too i.e. morris.js . It uses the fantastic Raphael.js  library to render beautiful SVG based charts, on the web. Problem The objective is to visualise data in a web application, so it can be easily interpreted without having to go through raw numbers. The web application needs to be demoed on....say a laptop and the places where it could potentially be demoed may not have internet connectivity. It could also be in a plac...

Reading a Sqlite database using client-side javascript

Ever had one of those problems at work that seems almost impossible (i.e. very hard) to solve at first? well i did and not so long ago, and tuns out that there is a solution to it. Problem Read the contents of a  Sqlite  database client-side and present them in an HTML based GUI. So my first reaction was, even if there is a solution to this, it surely cant be very efficient reading an entire Sqlite database client-side? well those were the requirements and there were some genuine reasons to back up those requirements, so i had to stop whinging and direct my efforts towards an actual solution. Solution Turns out that there is a solution for this! Ever heard of  emscripten ? Funnily enough i had used it while doing my research to port the  OpenCV  library to javascript. Anyway there is  sql.js , which is a javascript port of the Sqlite database, which could do what i wanted it to do. The problem is the documentation of ...

Getting to know a completely new programming project

So since Feb this year, i have been assigned on a new project at work. This new project involves working with a variety of independent sub-projects for this client and the sheer variety of the sub-projects can sometimes be overwhelming. What has happened a few times is that, the client starts a new sub-project, hands it to us and says we need this application to do "X". Can you make it do that? So the task is assigned to me and I have a project with no documentation, no instructions but I need to get on with it and solve the issue as soon as i can. So how do i approach this? Since i work on a mac,  which basically has the very awesome terminal that amongst others, has this useful tool called grep.  How do i use it for my needs?  well say i have an  AngularJS  project, stored in a folder projFolder,  and i have no prior knowledge of how it is structured and i have to figure out why a controller does not navigate to route blog after a certain function ca...

Doing some SVG drawings on a web page (Raphael.js)

So for this tree based problem that i am currently trying to solve, one of the first perquisites was to get better at Recursion , the next thing to work out was, how do I draw shapes and lines on an HTML page? So prior to this my only experience with drawing on an HTML page was this simple badly presented snake game that i had created using the canvas. Anyway for this little project i decided to look around for some libraries that would allow me to draw some shapes and I found a couple of libraries such as Raphel.js and D3.js that would let me draw SVG shapes on a web page. After very briefly investigating them, it seemed that Raphaeljs would be a better fit for my problem and hence i began my SVG drawing journey with Raphael. Now when i think about this problem, i can think of it as a sequential list of little sub-problems that i need to individually solve before i can build my great grand tree drawing solution. This is a slightly larger problem and hence it will be spread ou...

Fun with Recursion: back to basics.

I am currently working on solving a problem that is about trees, lots and lots of them. Looking at this problem, the first thing I realised was that, while I can solve this problem using stacks, this is really a problem for which a recursive solution is a natural fit. Recursive problem solving is something that I have quite lost the hang of in recent years, using only iteration on a day to day basis. Hence I decided to go about rectifying it and learning what is essentially early uni years stuff. This is harder than it sounds, not because of the problem itself but because of how "dumb" I felt, given that this is really something that I should be naturally good at. Now once I got over my emotional issues and hours of self loathing, I actually had a strategy of how I can get better at recursion. The strategy was simple, forget about my work experience, the education, the scientific publications etc etc, all in all swallow my pride and start from...

Generating aesthetically pleasing colours that go well together

So the other day at work, my boss had another request for me, he wanted me to write some code that auto-generates a bunch of colours that go well together such that they could be used in a chart i.e something similar to what Google uses for their Google visualization API . So i wrote some code that generated decent enough colours and showed it to him, to which he responded, "is this what Google uses?" i was like no this is something we wrote, but he insisted that he wants exactly what Google uses and that is it. Now this was interesting as, Google provides a charting API for generating charts, but they don't exactly give access to the their colour generating algorithm. So to keep my boss happy, i came up with a little hack which solved our problem. You see the way to do this would be to generate a mock chart using the Google Visualization API and then extract the colours out of the chart itself. You see the chart is an SVG object and with the use of JQuery ( I assume ...

Transpose of a Google Visualization data table object

Since i spend a lot of time at my day job working with the Google Visualization  tools for the charting needs of my work, i figured it is inevitable that i will be requested to draw a chart with transposed data. ok...let us backtrack a little. So to draw a chart using the Google Visualization tools, the first step is to prepare a DataTable , which is a data structure provided by Google. The DataTable as the name suggests is simple table of rows and columns, hence it can be thought of a 2D matrix . Obviously now once you start to perceive your data as a matrix, what you can do with a matrix is only limited by the type of data stored in it. In this case the matrix operation of interest to me, was the transpose . Transpose is one of the simpler concepts of linear algebra, where by in a given matrix , rows become columns and columns become rows. Ok so now onto business? FYI, this is a quick and dirty solution and is in no way optimal. Since my need was to transpose a table that h...