On-Demand Graph Generation using AJAX and JavaScript

This is a technology demonstration of retrieving server-provided data using AJAX-style techniques. The graphical display is generated from within the browser, independent of the server. Client-side JavaScript retrieves XML-structured data and converts it to graphical form. SVG is used to produce scalable, interactive display output.

A sample of the XML-structured data is available at: bronx201101.xml. [Note: Firefox and Opera display XML correctly; some other browsers may present difficulties]

The demonstration includes three graphs:

Switching between the graphs is accomplished by clicking on the data bars. On the summary graphs, clicking on the data bars will switch the display to the related day-by-day detail graph (temperature or barometric pressure). Returning to the summary graph is accomplished by clicking on the “Reset” button.

This page presently supports two color schemes:

In both cases, client computed annotations (e.g., median and mean readings) are displayed in color. The annotations may be suppressed by clicking on the annotation legends. These color schemes are only intended to demonstrate the mechanics and have not been evaluated by our graphic designer.

This page has been tested on the Firefox 3.6/4 (Windows/Linux), Opera 11 (Windows/Linux), Chrome 11 (Windows/Linux) and Safari 5 (Windows).

We will be happy to answer any questions about this demonstration page.