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

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 = '';
                //console.log(d);
                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 ...
}

Plotting Historical Parking Data Using Angular and NVD3

I was looking for a good and free charting component I could use in Angular. I’ve played around with some raw D3 in the past but I didn’t want to re-invent the wheel that much. Fortunately I found the NVD3 library which works on top of D3 to simplify common charting tasks line line charts, bar charts, etc and, even better, somebody’s already created an Angular directive on top of that.
…click here to read the rest…

Angular NVD3 daily x axis tick marks / labels

This took me too long to find the answer for so here it is.
How do you get the tick marks on the x-axis of a time-series chart to be on the hour or on the day with the Angular NVD3 directive?

Well you have to explicitly set the xScale to be a d3 time scale and then you can just set the xAxis to d3.time.days or d3.time.hours and it’ll magically work…

chart: {
    xScale : d3.time.scale(),
        xAxis: {
        ticks: d3.time.days,
        axisLabel: '',
        tickFormat: function(d) {
            return d3.time.format('%Y-%m-%d')(new Date(d));
        },
        showMaxMin: false,
    },
}

angular nvd3 daily tick labels

Make Beautiful Maps With Leaflet and Stamen Tiles

Combining the power of Leaflet JavaScript mapping library and Stamen’s map tiles to make beautiful interactive maps like this…

leaflet stamen map of bristol

For an Angular project I’m working on, I’m building a pretty standard map with map markers using Leaflet.js and the excellent angular-leaflet-directive. I was happily working away with the standard Open Street Map tiles but as I started to add my markers I decided the tiles were a bit too cluttered with labels, landmarks, etc and started looking for a cleaner option.

I’d seen Stamen’s Watercolor map tiles before on a design blog so thought I’d see if I could get them working. It was easy enough to just replace the Leaflet baselayer tiles URL to reference the Stamen map tiles instead and that looks really nice – I may use this as the default in my project – but because of the slightly impressionistic nature of the map images, I also wanted to give the user some way to hook into what they were looking at by adding the option to show some road names.

Fortunately Stamen had my back again with their Toner Labels map tiles which just contain country/road/street names but no map features. If I could overlay these labels on my Watercolor map images, I could have the best of both worlds!

This idea is simple but it took me a lot longer to implement than it should have. Partly due to my unfamiliarity with both Leaflet and the angular-leaflet-directive and partly due to the lack of good examples of how to layer multiple map tile sets and how to define layer options on multiple tile layers. As is often the case, the final code was quite simple once I worked out how to wire it all up.

I’ll be using this within a wider Angular app but I put together a simplified demo page for your viewing pleasure. Here’s an embedded demo or you can see it in all it’s full window glory here: Beautiful Leaflet Stamen Tiles Map Demo

Playing with Fire(base) – Three Way Data Binding

I’ve been playing with Angular and Firebase over the last few days. But it sounds better the other way round. I remember one of my school teachers getting angry with some other kid being naughty and shouting “you are playing with fire!”. Except the teacher was German so it was “you are playing wiz fire!”. We used to shout that at each other for a while after that. Kids, eh?

Anyway, one of the core principles in Angular is two-way data binding between the model and the view (in your MVC structure). The user changes the data in the view, it gets changed in the model. Some code changes the data in the model, it gets changed in the view. It’s pretty neat in practice and makes pages feel really dynamic as you interact with them.

So that’s two-way data binding but what if you could go another layer down and bind that to your database as well and have all three update whenever any one of them is changed? Well that’s what Firebase allows you to do through the AngularFire library. You just bind your model to a Firebase object and you get this:

three way data binding

(Normal Angular data binding is the bit within the browser window frame)

…click here to read the rest…