AJAX and PHP

AJAX Real-Time Charting with SVG
0.0
...
... more text nodes here that draw horizontal and vertical unit numbers
...
...
... more circle nodes here that draw filled blue circles for chart nodes
...
Have a closer look at this code snippet to identify all the chart elements. The SVG format supports
the notion of element groups, which are elements grouped under a element. In temp.svg we
have two groups: the first group contains all the charts' elements, translating them by (50, 50)
pixels, while the second element group is a child of the first group, and it contains the chart's
axis lines and numbers.
SVG knows how to handle many element types, which can also be animated (yes, SVG is very
powerful). In our example, we make use of some of the very basic ones: path (to draw the axis
lines and chart lines), text (to draw the axis numbers, and to dynamically display chart node
coordinates when the mouse cursor hovers over them—this latter feature isn't included in the code
snippet), and circle (to draw the blue dots on the chart that represent the chart nodes).
You can find documentation for these elements at:
• http://www.w3schools.com/svg/svg_path.asp
• http://www.w3schools.com/svg/svg_circle.asp
• http://www.w3schools.com/svg/svg_text.asp
The paths are described by a path definition. The complete code for the path element that draws
the chart lines you can see in Figure 7.1 looks like this:
A detail that was stripped from the code snippet was the mouseover and mouseout events of the
chart node circles. In our code, the mouseover event (which fires when you move the mouse
pointer over a node) will call a JavaScript function that displays a text above the node specifying
its coordinates. The mouseout event makes that text disappear. You can see this feature in action
in Figure 7.2, which displays the SVG chart application in action.
192
www.it-ebooks.info