Enable JSON gzip compression on Apache

Check the deflate module is available:
Run this on command line:
apachectl -t -D DUMP_MODULES |grep deflate
Should show deflate_module (shared)

Then we just need to add a line to the deflate config:
sudo nano /etc/apache2/mods-enables/deflate.conf

Add the following line to the list:
AddOutputFilterByType DEFLATE application/json

Restart apache (sudo /etc/init.d/apache2 restart)
Test by requesting json output from server and inspecting the response headers in Developer Tools. Should see a content encoding header like “Content-Encoding:gzip”

Spatial data in SQL database

It’s possible to store spatial data in an SQL database like this…

create table TestTable
	Geo Geography,
	DateStamp SmallDateTime,
	Data float

insert into TestTable
geography::Parse('POINT(-2.25 51.55)'),
'2016-10-23 08:00',

from TestTable

Wriggle Discounts Super-Lister!

We have a pretty cool start-up here in Bristol called Wriggle whose aim is to help local restaurants fill free tables by offering discounts through the Wriggle mobile app (and now website). The additional advantage for these businesses is that people pay up front so it also avoids the problem of “no-shows”. It’s a bit like Groupon but more local and with less spammy offer for underwear and beauty treatments.

The Wriggle app will show you what deals you can get near you but I wanted to know what the best deal is in terms of the discount itself so I built a quick Angular application – The Wriggle Discounts Super Lister! – that pulls the data from Wriggle’s underlying API and allows me to resort the data by % saving or saving in ┬ús. I can also sort by popularity to see what deals other people are snatching up (mostly Pizzarova at the moment!) or by deals that are running out that I might want to snap up before they’re gone.

Just another random little toy project! Click on the screenshot to check it out. I’m particularly proud of the loading gif…

wriggle discount super lister

Dotted or dashed gridlines on nvd3 plots

To style your gridlines on your nvd3 plots (or Angular-nvd3) you can use simple css styles in the line object within your plot.

For example, to make the gridlines a dotted line, we could use the following styling:

.nvd3 .tick line {
    stroke-dasharray: 1,1;

Or to do a dashed line with 4 pixel long dashes separated by gaps of 2 pixels, we can do this:

.nvd3 .tick line {
    stroke-dasharray: 4,2;

We can of course use the same methods to apply lots of other stylings to our gridlines such as opacity (looks good on dark backgrounds), different colors, etc.

Custom tooltips in Angular-nvD3

This applies to the Angular-nvD3 charting directive for Angular JS.

To create custom tooltips rather than NVD3’s built-in “interactiveGuideline” we can do something like the following to create some HTML of our own to display within the tooltip. In this case I am pulling out the timestamp and value of the point from my dataseries (d.point is the current point being hovered over) and also the series name of the current series (d.series[0].key)…

$scope.options = {
    chart: {
        useInteractiveGuideline: false,
        tooltip: {
            contentGenerator: function(d) {
                var str = '';
                str += ('<div style="font-weight:bold; margin:auto; text-align:center;">' +d3.time.format('%Y-%m-%d %H:%M')(new Date(d.point.x)) + '</div>');
                str += ('' + d.series[0].key + ': ');
                str += ('' + d.point.y +'');
                return str;

Disable line toggle when clicking on legend in NVD3

Being able to turn on/off different series on a graph by clicking on them in the legend is a pretty neat feature of NVD3 but sometimes we don’t want the user to be able to do it.

Hidden away in the documentation is the little toggle to help us do this, a property on the legend object called “updateState”.
All we need to do is set legend.updateState = false and clicking on the legend will no longer do anything.

Or in Angular-nvd3 we add it to our chart options like this:

$scope.chartOptions = {
    chart: {
        legend: {   
            updateState: false
    ... other properties ...

“No ‘Access-Control-Allow-Origin’ header is present” error

When trying to create API endpoints in PHP you might get an error message like this if you’re trying to access it from you development environment or a different machine:

XMLHttpRequest cannot load http://xxxxxx.com/yourpage.php. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://xxxrequestoriginxxx.com’ is therefore not allowed access.

Sounds complicated but the fix is usually simple, just add the following at the start of your php code:

header("Access-Control-Allow-Origin: *");

// All the rest of your code


Firebase Upgrade News from Google I/O

I haven’t had as much time as I’d like to play with Firebase recently but I was interested to read about the upgrades they announced yesterday at Google I/O.

First off, they’ve re-designed the UI into Google style:


But there’s a whole host of new features too…

Google Cloud Messaging has been re-branded Firebase Cloud Messaging (a vote of confidence in the Firebase brand). It’s free and unlimited and supports messaging on iOS, Android and web apps. They’ve also dropped in Firebase Notifications on top of that.

The new Firebase Analytics platform for iOS and Android draws heavily on Google Analytics and is sure to be a hit with app developers for ease of implementation (looks like you pretty much drop in a reference and it’s up and running) and they’ve made it easy to integrate your app with Google’s 2010 mobile ads acquisition AdMob.

Firebase Remote Config also looks really interesting for app devs, allowing you to change app configuration remotely without an app update and segmented by user groups. Nifty.

They are a few more interesting features too. It’s all in the announcement on the Firebase blog.

This page in the Firebase docs is a useful starting point for working out which features are useful to app developers or web developers.