- Where Did XML Come From?
- On to RSS
- Exploring SVG
- Using SVG to Render Company Data
- CDATA Sections
- Summary
- Additional Reading
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using SVG to Render Company Data
Now that you have a bit of XML under your belt, let’s talk about how SVG can be used to display data relationships via charts and graphs. The SVG in Listing 3 illustrates how simple SVG elements such as lines, rectangles, and text can be used to create charts and graphs. As you read the SVG, notice that each part of the graphic is enclosed in <g> tags. The <g> tag has no graphic effect but is important as a structuring element. By surrounding different logical parts of an SVG document with <g> start and end tags, we can leverage the power of hierarchies by decorating the <g> element with attributes that will apply to all the children of <g>. Note how in Listing 3 the g element includes attributes that are applied to all the subelements of g.
Listing 3 SVG for a bar graph.
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> width="1300" height="1300"> <desc>Developer Works Dynamic Bar chart Scaling Example</desc> <g transform="translate(50,50) scale(0.5)"> <!-- Now draw the main X and Y axis --> <g stroke-width="5" stroke="black"> <!-- X Axis --> <path d="M 0 1000 L 1000 1000 Z"/> <!-- Y Axis --> <path d="M 0 0 L 0 1000 Z"/> </g> <g fill="none" stroke="#B0B0B0" stroke-width="2" stroke-dasharray="2 4" text-anchor="end" font-size="30"> <path d="M 0 0 L 1000 0 Z"/> <path d="M 0 500 L 1000 500 Z"/> <text fill="black" stroke="none" x="-10" y="0" >5000</text> <text fill="black" stroke="none" x="-10" y="500" >2500</text> </g> <rect x="0.0" y="600.0" width ="100" height="400.0" style="fill:rgb(152,207,113);" /> <rect x="110.0" y="0.0" width ="100" height="1000.0" style="fill:rgb(56,108,49);" /> <rect x="220.0" y="840.0" width ="100" height="160.0" style="fill:rgb(250,175,146);" /> </g> </svg>
Listing 3 also includes a path element. As you might expect, path is used to draw paths on the screen. Path elements are notoriously tricky for humans to read, especially if the author or program generating the path takes advantage of concise path formats that reduce the text needed to define a path. Viewed in an SVG-aware browser, our XML will be result in the bar graph shown in Figure 3.
)
Figure 3 Bar graph based on SVG.