Summary | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Download CD Content

Overview

This chapter demonstrates how you can use SVG elements for creating labeled bar charts and line graphs. SVG is extremely well suited for creating SVG documents whose contents are rendered as charts and graphs. Although the charts and graphs in this chapter are created manually and are based on hard-coded data, you can apply XSL stylesheets to XML documents in order to generate charts and graphs. As you will see later in Chapter 17, XSLT enables you to separate data from presentation, which is advantageous for transforming a set of frequently changing data into various types of graphs, including your own custom-formatted charts or graphs. Currently there are numerous books entirely devoted to XSLT (including several excellent ones); you can read the XSLT appendix in this book if you need to familiarize yourself with this topic. The book XSLT in 21 Days by Michiel van Otegem is a very good starting point, followed by Mastering XSLT by Chuck White. The book XSLT and Xpath on the Edge by Jeni Tennison provides an excellent source of XSL stylesheets.

The first part of this chapter starts with rendering bar sets. As simple as that may seem, bar sets form the basis for creating much more sophisticated bar charts. This iteration-based approach for rendering charts and graphs (which is influenced by eXtreme Programming) will serve you particularly well in this chapter for the following reason: visually appealing charts can require a great deal of code that can be logically partitioned into 'components' that can be implemented in ECMAScript functions.

The second part of the chapter extends the concepts introduced in the first part by showing you how to render single and multiple line graphs and how to create three-dimensional effects. After you have learned how to use ECMAScript functions, you will see how to produce these graphs using modularized functions, as well as graphs that implement your specific needs and requirements. All code and images for this chapter can be found on the companion CD-ROM in the Chapter 10 folder.