Drawing Bar Charts with 3D Effects

   


Drawing Simple Line Graphs

Consider the line graph in Figure 10.6.

click to expand
Figure 10.6:   A simple line graph.

The SVG document in Listing 10.6 demonstrates how to render a simple line graph.

Listing 10.6  simpleLineGraph1.svg

start example
<?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"> <!-- steps omitted for brevity --> <!-- *** STEP 7: render line graph *** --> <g transform="translate(80,30)"> <

path

d="m0,280 l40,-40 40,-80 40,40 40,-80 40,40 40,-120 40,-40 40,80 40,-80 40,120" style="fill:none;stroke:green;fill-opacity:1;"/> </g> </svg>
end example

Remarks

The SVG code in Listing 10.6 leverages the code for the labeled grid in order to create a line graph. The copy of Listing 10.6 on the accompanying CD-ROM contains the complete code for rendering the corresponding bar chart. The first six steps in Listing 10.6 contain the same code as the previous examples, so they will not be covered in detail again. Step 7 of the SVG code contains the key idea for creating a line graph; that is, an SVG polygon element that specifies the points on the line graph. You might be surprised to learn that creating a line graph is much simpler than a bar graph; the line graph is rendered with fewer than ten lines of code!



   
   


Drawing Multiple Line Graphs

Consider the line graphs in Figure 10.7.

click to expand
Figure 10.7:   Multiple line graphs.

The SVG document in Listing 10.7 demonstrates how to render a set of line graphs.

Listing 10.7  multiLineGraph1.svg

start example
<?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"> <!-- *** STEP 7: render line graphs *** --> <!-- Company Name: Alpha --> <g transform="translate(80,30)"> <path d="m0,240 l40,0 40,-40 40,40 40,-80 40,40 40,-120 40,-40 40,80 40,-80 40,120" style="fill:none;stroke:red;fill-opacity:1;"/> </g> <!-- Company Name: Beta --> <g transform="translate(80,30)"> < path d="m0,280 l40,-40 40,-80 40,40 40,-80 40,40 40,-100 40,80 40,80 40,-80 40,120" style="fill:none;stroke:green;fill-opacity:1;"/> </g> <!-- Company Name : Gamma --> <g transform="translate(80,30)"> <path d="m0,220 l40,-80 40,-20 40,100 40,-20 40,40 40,-120 40,-40 40,80 40,-80 40,120" style="fill:none;stroke:blue;fill-opacity:1;"/> </g> <!-- *** STEP 8: company legend *** --> <g transform="translate(500,100)"> <text id="verticalLabel" x="0" y="0" fill="red" font-size="18"> LEGEND </text> <rect fill="red" x="0" y="40" width="20" height="20"/> <text id="verticalLabel" x="40" y="60" fill="red" font-size="18"> Alpha </text> <rect fill="green" x="0" y="80" width="20" height="20"/> <text id="verticalLabel" x="40" y="100" fill="green" font-size="18"> Beta </text> <rect fill="blue" x="0" y="120" width="20" height="20"/> <text id="verticalLabel" x="40" y="140" fill="blue" font- size ="18"> Gamma </text> </g> </svg>
end example

Remarks

The SVG code in Listing 10.7 extends the previous example by showing you how to render multiple line graphs in the same SVG document. You can find the complete code for in the folder for this chapter on the accompanying CD-ROM.

Step 7 of the SVG code consists of three SVG polygon elements that render the actual line graph for three fictional companies named Alpha, Beta, and Gamma.

Step 8 of the SVG code consists of a legend that consists of three colored squares that correspond to the three fictional company names . The color of each square is the association between each company and its corresponding line graph.

You can use different colors in conjunction with the various attributes of the SVG line element (such as the stroke-dasharray and stroke-width) in order to render line graphs that create a nice contrasting effect.