Worked Example – Middle East Oil

Improving the typography

Now we can add the properties to set up the various fonts correctly:

' More of the same, with better labels
 grapl.New 0,0,432,324
 grapl.FrameStyle = "Wiped"
 grapl.Margins    = array(42,36,80,36)
 grapl.Style       = "Forcezero,Horizontal,Values,Redraw"
 grapl.YLabels     = Col_Country
 grapl.LabelFont   = "AR,11,Black"
 grapl.ValueFont   = "ARB,12,Black"
 grapl.ValueFormat = "#,##0"
 grapl.ValueStyle  = "Inside,Transparent"
 grapl.Barchart Col_Barrels
 Response.Write grapl.RenderVML

Here is what this one looks like ...

The main difference is in the addition of the value labels (set to appear inside the bars if possible, with no knockout to background colour) and the font settings for the values and labels. However you may have noticed that the y-axis tickmarks are placed on the bars, but the finished design has them between the bars. Also we must add horizontal gridlines:

' Sort out the Y-axis
 grapl.New 0,0,432,324
 grapl.FrameStyle = "Wiped"
 grapl.Margins    = array(42,36,80,36)
 grapl.Style       = "Forcezero,Horizontal,Values,Redraw"
 grapl.YLabels     = Col_Country
 grapl.LabelFont   = "AR,11,Black"
 grapl.ValueFont   = "ARB,12,Black"
 grapl.ValueFormat = "#,##0"
 grapl.ValueStyle  = "Inside,Transparent"
 grapl.YStyle      = "Gridlines,Between,Labmid"
 grapl.Gap         = 0.3
 grapl.Barchart Col_Barrels
 
 Response.Write grapl.RenderVML

The y-axis style has now been set up explicitly, and the gap between the bars has been closed up a little. This figure is given as the ratio between the bar width and the gap, so the chart will adapt well to being run from a database query where the number of bars might not be known in advance.