Viewing posts from 2014

Sparklines via PHP

Around 5 years ago I built a simple sparkline generation script in PHP. It wasn't very good, the lines were shaky even with antialias. During last weekend I thought I'd rebuild it from scratch to see how much better it would be second time around.

A few hours later and it was complete, the lines were thick, antialiased and almost identical in quality to the Google Image Charts version. I also added browser caching using the ETag header.

The key bit of logic that I failed to think of 5 years ago was to create the original sparkline larger than the desired size, then scale down by the same factor. The resizing naturally makes the lines smoother than imageantialias and imagesetthickness ever could.

Sparkline Examples

It's as easy as this to use:

<img src='sparkline.php?size=80x20&data=2,4,5,6,10,7,8,5,7,7,11,8,6,9,11,9,13,14,12,16&back=fff&line=5bb763&fill=d5f7d8' />

I use sparklines in a lot of my work related projects, as it's an intuitive way to display stats that only require a quick glance. Normally I'd use the Google Image Charts but has been depreciated since April 2012, and will become fully defunct in April 2015. Whilst there is the newer Google Charts library which uses HTML5, SVG, and JavaScript I prefer to use the image-only method for a leaner project with less bloat.

Check out the code on Github

20-Jun-2014 at 12:26pm

Vanillr Issue Tracker

Last year I started a little side project building an issue tracker called Vanillr. The idea was that it would be super simple, allow multiple projects with multiple users, and hosted at

The need arose from having different projects on the go at the same time and having to collect bug, questions, and feature requests from various sources such as BaseCamp, Skype, and email. I personally needed a place to collect all these and have a more detailed history for each project.

Vanillr Issue Tracker Overview

Below is the selector to filter the importance of the issue and the type of issue too.

Vanillr Issue Tracker Filter

I only got as far as the designs and building the shell until I ran out of time and shelved the project, however I will be refreshing this project in 2014 to get something up and running for myself, and hopefully for others to use too.

23-Jan-2014 at 1:50pm

Similar Posts using the Jaccard Index

Today, I've added a Similar Posts section when viewing an individual post, which is calculated using the Jaccard Index. The Jaccard Index is used to compare the similarity and diversity of data sets, and in my case the data sets are the post tags. The calculation is quite simple:

Jaccard Index

The reason why the Jaccard Index is so well suited for this is because it doesn't just calculate how many tags appear in each post, but instead it calculates this based on the total number of tags in both posts. An example would be that posts matching 4 out of 5 tags would appear higher than posts matching 5 out of 20 tags.

My database structure is pretty typical in the way that I have one table for posts and another for tags, which are linked via the post ID. When viewing a post I already have the set of tags to compare the other posts to, so from these tags I can generate the SQL via:

$tags = array('tag1','tag2','tag3');
$sql = "SELECT `posts`.* FROM `posts`,`tags` WHERE  `posts`.`id` = `tags`.`post_id` AND `tags`.`post_id` != '{CURRENT_ID}' GROUP BY `posts`.`id` ORDER BY SUM(IF(" . implode('||', array_map(create_function('$a', 'return "`tags`.`tag`='" . $a . "'";'), $tags)) . ",1,0))/(COUNT(`tags`.`tag`)+" . count($tags) . ") DESC LIMIT 0,3";

Which will produce the following SQL:

SELECT `posts`.* FROM `posts`,`tags` WHERE `posts`.`id` = `tags`.`post_id` AND `tags`.`post_id` != '{CURRENT_ID}' GROUP BY `posts`.`id` ORDER BY SUM(IF(`tags`.`tag`='tag1'||`tags`.`tag`='tag3'||`tags`.`tag`='tag3',1,0))/(COUNT(`tags`.`tag`)+3) DESC LIMIT 0,3

When this SQL is run it will return the top 3 posts (excluding the current post) in order of the tag similarity score. You can see it in action when viewing any individual post on my blog.

08-Jan-2014 at 4:11pm