Monday, July 11, 2011

Bullet Graphs with SVGo



Bullet Graphs

Here is the output of bulletgraph -- an implemetation of Few's Bullet Graphs using SVGo. Like pmaps, bulletgraph reads a XML representation of the data, unmarshals the input into data structures, and produces the bullet graph from the structures. The input looks like this:

<bulletgraph>
<bdata title="Revenue 2005" subtitle="USD (1,000)"
scale="0,300,50" qmeasure="150,225" cmeasure="250" measure="275"/>
</bulletgraph>

Each bdata element produces a graph according to its attributes (titles, scales, and measures)

The program has various options to control colors of the various components (data color, comparative color, target color), and the indicator showing the target measure can either be the conventional vertical line or a circle. The -help option shows all of the option flags, with an example XML definition.

bulletgraph -help

Usage: bulletgraph [options] file...

-bc="rgb(200,200,200)": bar color
-bg="white": background color
-bh=48: bar height
-cc="black": comparative color
-circle=false: circle mark
-dc="darkgray": data color
-f=18: fontsize (px)
-g=30: gutter
-h=800: height
-help=false: usage and example
-showtitle=false: show title
-t="Bullet Graphs": title
-w=1024: width

Example Defintion:

<bulletgraph top="50" left="250" right="50">
<bdata title="Revenue 2005" subtitle="USD (1,000)" scale="0,300,50" qmeasure="150,225" cmeasure="250" measure="275"/>
<bdata title="Profit" subtitle="%" scale="0,30,5" qmeasure="20,25" cmeasure="27" measure="22.5"/>
<bdata title="Avg Order Size" subtitle="USD" scale="0,600,100" qmeasure="350,500" cmeasure="550" measure="320"/>
<bdata title="New Customers" subtitle="Count" scale="0,2500,500" qmeasure="1700,2000" cmeasure="2100" measure="1750"/>
<bdata title="Cust Satisfaction" subtitle="Top rating of 5" scale="0,5,1" qmeasure="3.5,4.5" cmeasure="4.7" measure="4.85"/>
</bulletgraph>
Thanks to Richard Masci for the example usage suggestion.