Exercise Explanation: AJAX and PHP SVG Charting Demo

This is the AJAX SVG application you create in Chapter 7 of AJAX and PHP: Building Responsive Web Applications. In this exercise you learn how to use SVG and AJAX to create a real-time charting application. To see the SVG chart you need to have a web browser with native SVG functionality, such as FireFox 1.5 or newer, or Opera 9.0 or newer, or to install a SVG Plugin. If you're using Internet Explorer, I recommend that you use the Adobe SVG Viewer

Scalable Vector Graphics (SVG) is one of the emerging technologies with a good chance of becoming the next "big thing" for web graphics, as was the case with Flash. SVG is a language for defining two-dimensional graphics. SVG isn't necessarily related to web development, but it fits very well into the picture because it complements the features offered naturally by web browsers. Today, there are more SVG implementations and standardization isn't great, but things are expected to improve in the future.

SVG is a World Wide Web Consortium (W3C) recommendation since January 2003. Among the big names that have contributed to its creation we can mention Sun Microsystems, Adobe, Apple, IBM, and Kodak to name just a few. The current specification is SVG 1.2. SVG Mobile, SVG Print, and sXBL are other recommendations under work at W3C that are likely to get support on most browsers and platforms.

The main features of SVG are:

• SVG graphics are defined in XML format, so the files can be easily manipulated with existing editors, parsers, etc.
• SVG images are scalable; they can zoomed, resized, and reoriented without losing quality.
• SVG includes font elements so that both text and graphical appearance are preserved.
• SVG includes declarative animation elements.
• SVG allows a multi-namespace XML application.
• SVG allows the script-based manipulation of the document tree using a subset of the XML DOM and the SVG uDOM.

For a primer on the world of SVG, check out these resources:

• The SVG W3C page at http://www.w3.org/Graphics/SVG/.
• An SVG introduction at http://www.w3schools.com/svg/svg_intro.asp.
• A very useful list of SVG links at http://www.svgi.org/.
• A handy SVG reference at http://www.w3schools.com/svg/svg_reference.asp.
• The SVG document structure is explained at http://www.w3.org/TR/SVG/struct.html.
• SVG examples at http://www.carto.net/papers/svg/samples/ and http://svg-whiz.com/samples.html.

In this case study you create a simple chart application whose input data is retrieved asynchronously from a PHP script. The generated data can be anything, and in our case we'll have a simple algorithm that generates random data. State management mechanism is used to generate new random numbers based on the previous values generated.

The complete AJAX and PHP tutorial features even more AJAX web development examples.

PHP developer? Learn PHP SEO (Search Engine Optimization) techniques. (ASP.NET SEO tutorial forthcoming)