Documentation: Widget Graph

NOTE: EXPERIMENTAL - this version depends on MochiKit which is another large library to load.

NOTE: Alternatives include Plotr - a version built for Prototype rather than MochiKit. Problem is we don't use Prototype either. Most of the code is dependent only on ExtJS or stand alone, some is dependent on Yui (Window Manager).

Generate Bar, Line and Pie graphs (or charts) from Table Data.

This implementation uses PlotKit to do it in Javascript, and falls back to tables automatically. But a server side version using GD or similar could easily be written.

Example

Show Source


<table class="graph_pie">
        <thead>
                <tr>
                        <th>First</th>
                        <th>Second</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td class="xvalue">A Lable</td>
                        <td class="yvalue">10</td>
                </tr>
                <tr>
                        <td class="xvalue">2 B or Not</td>
                        <td class="yvalue">33</td>
                </tr>
                <tr>
                        <td class="xvalue">2</td>
                        <td class="yvalue">29</td>
                </tr>
                <tr>
                        <td class="xvalue">3</td>
                        <td class="yvalue">4</td>
                </tr>
                <tr>
                        <td class="xvalue">4</td>
                        <td class="yvalue">99</td>
                </tr>
                <tr>
                        <td class="xvalue">5</td>
                        <td class="yvalue">11</td>
                </tr>
        </tbody>
</table>

First	Second
A Lable	10
2 B or Not	33
2	29
3	4
4	99
5	11

Documentation: Widget Graph

Example

Standalone

Implementations

XSL

JS

CSS