AJAX and PHP

AJAX Real-Time Charting with SVG0.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 supportsthe notion of element groups, which are elements grouped under a element. In temp.svg wehave 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'saxis lines and numbers.SVG knows how to handle many element types, which can also be animated (yes, SVG is verypowerful). In our example, we make use of some of the very basic ones: path (to draw the axislines and chart lines), text (to draw the axis numbers, and to dynamically display chart nodecoordinates when the mouse cursor hovers over them—this latter feature isn't included in the codesnippet), 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.aspThe paths are described by a path definition. The complete code for the path element that drawsthe 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 thechart node circles. In our code, the mouseover event (which fires when you move the mousepointer over a node) will call a JavaScript function that displays a text above the node specifyingits coordinates. The mouseout event makes that text disappear. You can see this feature in actionin Figure 7.2, which displays the SVG chart application in action.192