Drawing Labeled Rectangular Grids | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Drawing Bar Charts

Consider the bar graph shown in Figure 10.4.

click to expand
Figure 10.4: A bar graph.

The SVG document in Listing 10.4 demonstrates how to draw a bar graph.

Listing 10.4 barGraph1.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>   </defs> <!-- *** STEP 2:  render background grid *** --> <g transform="translate(80,30)">   <rect fill="url(#gridPattern)"         style="stroke:red;fill-opacity:.2"         x="0" y="0" width="400" height="280">   </rect> </g> <!-- *** STEP 3:  vertical text labels *** --> <g transform="translate(30,300)">   <text  x="20" y="0"         transform="rotate(-90)"         fill="red"         font-size="18">         Number of PCs Sold (millions)   </text> </g> <!-- *** STEP 4:  label vertical axis *** --> <g transform="translate(50,280)">   <text  x="0" y="0"         fill="blue" fill-opacity="1"         font-size="18">10</text> </g> <g transform="translate(50,240)">   <text  x="0" y="0"         fill="blue" fill-opacity="1"         font-size="18">15</text> </g>  <!-- details omitted for brevity ---> <!-- *** STEP 5:  horizontal axis label *** --> <g transform="translate(160,350)">   <text  x="0" y="0"         fill="red" fill-opacity="1"         font-size="18">         Current Year (Base = 2000)   </text> </g> <!-- *** STEP 6:  label horizontal axis *** --> <g transform="translate(80,330)">   <text  x="0" y="0"         fill="blue" fill-opacity="1"         font-size="18">00</text> </g> <g transform="translate(120,330)">   <text  x="0" y="0"         fill="blue" fill-opacity="1"         font-size="18">01</text> </g> <g transform="translate(160,330)">   <text  x="0" y="0"         fill="blue" fill-opacity="1"         font-size="18">02</text> </g> <g transform="translate(200,330)">   <text  x="0" y="0"         fill="blue" fill-opacity="1"         font-size="18">03</text> </g> <!- details omitted for brevity --> <!-- *** STEP 7:  render histogram *** --> <g transform="translate(80,30)">   <rect x="0" y="200" width="40" height="80"         style="fill:green;stroke:green;fill-opacity:1;"/> </g> <g transform="translate(80,30)">   <rect x="40" y="100" width="40" height="180"      style="fill:yellow;stroke:green;fill-opacity:1;"/> </g> <!-- details omitted for brevity --> <g transform="translate(80,30)">   <rect x="360" y="230" width="40" height="50"      style="fill:yellow;stroke:green;fill-opacity:1;"/> </g> </svg>

Remarks

The SVG code in Listing 10.4 is similar in nature to the code in Listing 10.2. 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. You can see how the SVG code has been labeled with comments that make it easier to understand as well as simplify code maintenance.

Step 1 of Listing 10.4 contains an SVG defs element for defining a grid-like pattern that is used to render a background grid for the graph.

Step 2 renders the background grid patten.

Step 3 of the SVG code contains a rotated line segment and a rotated text string that labels the vertical axis.

Step 4 of the SVG code renders a set of short horizontal line segments as the 'hash' marks for the vertical axis.

Step 5 of the SVG code renders a text string that labels the horizontal axis.

Step 6 of the SVG code renders a set of short vertical line segments as the 'hash' marks for the horizontal axis.

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 this file, you'll see that almost three-quarters of the code is devoted to setting up the graph, and roughly one-quarter of the code is for rendering the actual graph itself. The set of SVG rect elements in Listing 10.4 is similar to the set in Listing 10.3. In this case, the sum of the values of the height attribute and the y attribute in the SVG rect elements is 400.

You have now reached the point where you can create a bar graph that can be adapted to a variety of situations. One way to embellish this graph is to create a three-dimensional effect, which is the subject of the next example.