Viral Ad Network

If you are an advertiser you will probably have noticed that we completely re-built our campaign dashboards as part of our most recent updates.

As part of this push, we wanted an efficient way to insert basic Bullet charts into the dashboards.

These are simple charts to show how far a value has progressed towards it’s target as such [*]:

It sounds like a simple requirement, but there were many potential ways to generate them, and our dashboards have to be highly optimised to display quickly.

Implementation:

Here are the options I considered but ruled out:

• svg … but Internet Explorer doesn’t have support for svg.
• canvas (i.e. painting it client-side in javascript) … but Internet Explorer doesn’t have support for the canvas element.
• generate image server-side … requires an extra http request per chart, and delays load time.

This left me with two remaining options

• css / javascript / DOM manipulation …
• creating a flash / as3 movie …

I implemented both methods, but it very quickly became apparent that the javascript/css method was going to have more cross-browser issues than it was worth and be painful to test for bugs. We already require flash support on most dashboards, so I made a small flash movie.

Download (AS3 source, Binary .swf and example page):

BulletChart.swf comes in at around 1,300 bytes and should be cached by the user’s browser for further use – inserting the flashvars server-side allows you to cut down on http requests and compresses well if you have many charts on a page. It’s been thoroughly tested on Flash Player 10 and works on most versions of flash player 9.

viraladnetwork-bulletchart-1.0.tar.gz

License:

Our bulletchart is licensed under a BSD license, which allows you to use and modify it for commercial and non-commercial uses.

To Use:

Copy the .swf to your site and embed it as normal – you can use the following flashvars to configure the chart:

bartarget, barvalue, leftcolor, rightcolor, barcolor, targetcolor

To Compile from source (Linux/OSX/BSD):

Compilation requires the flex mxmlc compiler (which requires java). I believe this is the compiler used by flex builder etc, but windows users will have to play around.

It does not require the flash IDE.

# extract the archive
tar -xf viraladnetwork-bulletchart-1.0.tar.gz
# enter the new directory
cd bulletchart
# Modify the path to your flex compiler in the makefile
nano Makefile
# build the .swf
make

I hope people find this code useful while we’re waiting for the Internet Explorer team to release SVG support (SVG is expected in IE9 ).

Tim

[*] Most bullet charts show scale markers to display the current value on the chart itself, however we kept ours as clean as possible, and to leave the text in HTML for accessibility.

Reading through the RubberRepublic blog, I thought I’d point the whole of team rubber at the article on the semantics of the word “viral” when applied to marketing.

This is a very interesting topic to me. With my leniency towards very specific definitions, I’m going to start right from the start, and explain that I’m certainly not a believer in Wittgenstein’s views on natural language.

To me, it’s not unreasonable to define a strict subset of natural language with a single, well defined, 1-1 semantic value function for discussing technical matters (and I believe the definition of “viral” should fit into such a subset), in the same way that we define mathematical terms in first order logic (I’m not going to get into provability here).

i.e. I think that it’s possible, and reasonable, to define the meaning of individual words which are indisputable and fixed when talking in technical language.

For this reason, it really drives me up the wall when two people talk about something, use the same word, but are actually discussing different things.

An example is how we have recently changed the naming for our “Syndicated Ad Units” (Previously “Content Units”).

(more…)