View this example as SVG (Adobe or Firefox viewers)

Barcharts and Gantt charts are ideal candidates for simple gradient fills which work well in the Adobe viewer and in Firefox. As of early 2006, these will not show well in Opera! Here we have used three fill definitions from the same set:

You can experiment with various angles to get the most pleasing effect. Another good feature of the SVG design is that the filter definitions are only included once, and are then referred to by name for each object that uses them. This keeps the page very small and makes it really easy to play with the parameters in Notepad to see the effect of different angles and shadings. Here is the same chart again with a very minor set of modifications to the fill definitions:

View this example as SVG

Incidentally, because the gradients are simply defined to RainPro as 'tiles' they naturally fall out into the key, which again simply refers back to the original definition of the gradient.

 r„Gradient1
© Simple gradient fills on rectangles - background and barchart
 ch.DefineTile 17 '#backcloth'
 ch.DefineTile 23 '#fill1'
 ch.DefineTile 24 '#fill2'
© Get the SVG definitions run into the output stream
 ch.Include ‘grads
 ch.Set('Head' 'Experiments with Gradient Fills')('hf' 'ARB,18,White')
 ch.Set('bstyle' 'boxed,wiped')('BoxAttr' 0 17 2)('AxisAttr' 15 1 1.2)
 ch.Set('kfont' 'White')('lfont' '#FFFF88')
 ch.Set('pattern' 23 24)('Key' 'Gradient1,Gradient2')
 ch.Set('style' 'forcezero,horiz,stacked')
 ch.Bar 5 2½¼23
 PG„ch.Close

Summary

Barcharts are excellent candidates for simple linear gradients. The next page in this section looks at radial fills, which can have some quite startling effects when used with transparency and back-lighting.