Drawing Bar Charts | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Drawing Bar Charts with 3D Effects

Consider the three-dimensional bar graph shown in Figure 10.5.

click to expand
Figure 10.5: A bar graph with a three-dimensional effect.

The SVG document in Listing 10.5 demonstrates how to draw a bar graph with a three-dimensional effect.

Listing 10.5 barGraph3D1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">    <svg width="100%" height="100%">    <!-- *** STEP 1:  define grid pattern *** -->    <defs>      <pattern            width="40" height="40"           patternUnits="userSpaceOnUse">       <rect x="0" y="0"             width="40" height="40"             style="fill:none;stroke:blue;             stroke-width:1;fill-opacity:.5;"/>      </pattern>     <polygon               points="0,0 40,0 55,-10 15,-10"              style="fill:black;fill-opacity:.8;"/>   </defs>  <!-- steps omitted for brevity -->  <!-- *** STEP 7:  render histogram *** -->  <g transform="translate(80,30)">   <use xlink:href="#topShadow" x="0" y="200"/>   <polygon points="40,200 55,190 55,270 40,280"            style="fill:black;fill-opacity:.8;"/>   <rect x="0" y="200" width="40" height="80"         style="fill:green;stroke:green;fill-opacity:1;"/> </g> <g transform="translate(80,30)">   <use xlink:href="#topShadow" x="40" y="100"/>   <polygon points="80,100 95,90 95,170 80,180"            style="fill:black;fill-opacity:.8;"/>   <rect x="40" y="100" width="40" height="180"       style="fill:yellow;stroke:green;fill-opacity:1;"/> </g> <g transform="translate(80,30)">   <use xlink:href="#topShadow" x="80" y="180"/>   <polygon points="100,180 135,170 135,280 120,280"            style="fill:black;fill-opacity:.8;"/>   <rect x="80" y="180" width="40" height="100"        style="fill:green;stroke:green;fill-opacity:1;"/> </g> <!-- similar blocks omitted for brevity --> </svg>

Remarks

Listing 10.5 extends the previous example by adding the appropriate SVG elements in order to create a three-dimensional effect. As in previous examples, some of the code has been omitted for brevity, and you can find the complete code for in the folder for this chapter on the accompanying CD-ROM.

The first five steps of Listing 10.5 are similar to previous examples, so they will not be covered in detail in this example. The new code in the SVG defs element contains an SVG polygon element used for creating a shadow effect, as shown in the code fragment below:

<polygon           points="0,0 40,0 55,-10 15,-10"          style="fill:black;fill-opacity:.8;"/>

Step 7 of the SVG code consists of a set of SVG rect elements that render the actual bar graph. If you count the number of lines in Listing 10.5 and in Listing 10.4, you'll see that roughly the same amount of code is devoted to setting up the graphs. In this example, rendering a three-dimensional effect means that more code is required for rendering the actual graph than the amount of code for rendering the graph in Listing 10.3. In this example, the sum of the values of the height attribute and the y attribute in the SVG rect elements is 400. The SVG code for each SVG rect element in this step also contains the following code:

<use xlink:href="#topShadow" x="80" y="300"/>

The preceding SVG code references an SVG polygon element whose id attribute has value topShadow, which is defined in the SVG defs element of Listing 10.5. Its purpose is to add shading in order to create a three-dimensional effect.

This example is a simple illustration of enhancing the 'template' for the two-dimensional bar graph in order to create a three-dimensional effect. This 'component-based' approach to creating charts and graphs will enable you to leverage your existing code and develop a consistent coding style.