.NODE

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!



   





Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362
Similar book on Amazon

Flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net