Gladiator Components >> Plot Component >> Plot Component API
Try It!
Select a plot type from the drop down below (Nota Bene: Requires Firefox v. 1.5+ or Opera 9.0+):
Introduction
Gladiator's plot component draws the following types of two-dimensional graphs, both individually or in any combination as compound plots, using SVG graphics:
- Scatter
- Line
- Area
- Region
Note Bene: Currently only the Firefox browser v. 1.5 or better has the native SVG rendering support required for viewing SVG graphics inline in compound XHTML-SVG documents such as this one here.
Features
-
Clientside Generation of SVG. Gladiator's plot component generates SVG presentation graphics using Javascript directly on the client from low-bandwidth XML data streams.
This model differs substantially from many existing systems which generate presentation graphics on the server, either as GIF or PNG bitmap graphics or, in newer systems, as SVG graphics. In such systems, the resulting graphics are sent to the client in finished form.
In contrast, Gladiator implements a model which maintains separation of the data (server) and presentation (client) layers. This model has several advantages. First, the heavy bandwidth required to send finished presentation graphics is eliminated. For example, SVG scatterplots generated in a comparison system (1) use more than 280 bytes per x-y coordinate pair. For scatter plots with hundreds or thousands of points, the bandwidth adds up quickly. Part of the problem stems from the fact that in some systems all of the CSS presentation information is sent (redundantly!) along with each pair of x-y coordinates.
In contrast, Gladiator avoids problems of this sort by sending only the bare x-y coordinate pair data. Single-letter XML tags are employed whenever it seems reasonable to further reduce bandwidth requirements. As a result, Gladiator requires only about 35 bytes to send an x-y coordinate pair:
<r><x>0.34567</x><y>12.4567</y></r>
00000000011111111112222222222333333
12345678901234567890123456789012345This represents a savings in bandwidth of over 8:1 compared to the other system. Considering a typical scatterplot, such as the plot of Fischer's 1936 Iris data with 150 coordinate points presented above, Gladiator provides a savings of over 36,000 bytes.
Another advantage of this approach is that it relieves the developer of much of the burden usually associated with programming application-generated graphics, thus allowing him or her more time to concentrate on the data itself. The developer need only supply the data along with a title and a few labels in an XML format that is trivial to generate.
-
Reduced Network Latency. Since Gladiator only sends the data across the wire, not the presentation, the savings in bandwidth is realized in reduced network latency and increased application responsiveness.
-
Automated Calculation of minima, maxima, & tick intervals. The plot component takes care of all calculations, such as x- and y-axis minima and maxima and major and minor tick intervals, automatically.
-
Plot Data Sent via AJAX. The plot component receives data points from an XML stream using AJAX. The generated SVG plot is then incorporated directly into an XHTML document.
-
Flexible. Titles, axes titles, and optional features like subtitles, annotation labels, grid lines, and minor tick marks along the axes of the plot can be easily incorporated by the inclusion of simple tags in the XML stream.
It is also possible to include desired axes minima and maxima as tags in the XML stream to override computed values. Special CSS classes can also be specified to enhance the presentation of labels and annotations.