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.

Tags: Developer, flash, User Experience

This entry was posted on Thursday, April 29th, 2010 at 1:22 pm and is filed under Advertisers, News, Publishers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.