Versuchsfeld

Chart-o-matic is a easy-to-use solution for embedding simple charts in web documents. Initially developed as a part of my final year project at university, it will soon be released to the public under BSD-Licence.

Just another Charting-Library?

There are already several popular charting solutions around, both server-side (e.g. Libchart or the Google Charts API) and client-side (e.g. Flotr or the YUI Chart Control) so what makes Chart-o-matic special?
Chart-o-matic enforces the accessibility of the visualized data: It takes data that was marked up using html and turns it into a bar-, line-, or pie-charts. In a way, it does for charts what sIFR does for typography. See the examples below for a demonstation.

(If there are only tables displayed, your browser probably lacks Flash Player 9 or support for modern JavaScript features – this is a screenshot of what you should see)

Example 1: German Bundestag, allocation of seats in the election years 1990 to 2005

	1990	1994	1998	2002	2005
CDU/CSU (in seats)	319	294	245	248	226
SPD (in seats)	239	252	298	251	222
FDP (in seats)	79	47	43	47	61
Linke/PDS (in seats)	17	30	36	2	54
B90/Grüne (in seats)	8	49	47	55	51

How it Works

Chart-o-matic is written in JavaScript and ActionScript but to apply it you only need to know (X)HTML (to mark up the source data) and CSS (to describe how the chart should look like). Have a look at the style-sheet used to describe the Graphs shown on this page.

Apart from hChart and the CSS, Chart-o-matic consists of some JavaScript and a small Flash-application. Once the JavaScript-, Flash- and CSS-files are referenced from the (X)HTML-Document, all tables in the document that are marked up as described below are replaced with graphs.

Since the source data is availiable in html, user agents without support for Flash or JavaScript will display the raw data, while modern browsers will draw a chart according to the information given in (X)HTML and CSS. To see what browsers without support for Flash or JS will display, turn JavaScript off and reload this page or click here: Reload this page without Chart-o-matic applied to tables.

Example 2: Bundestag, election results for the years 1990 to 2005

	1990	1994	1998	2002	2005
CDU/CSU (in %)	43.8	41.4	38.5	35.1	35.2
SPD (in %)	33.5	36.4	40.9	38.5	34.2
FDP (in %)	11.0	6.9	6.2	7.4	9.8
B90/Grüne (in %)	5.11	7.3	6.7	8.6	8.1
Linke/PDS (in %)	2.4	4.4	5.1	4.0	8.7

Tables as a Data Source for Charting

Tables are ideal for describing large collections of statistical data. As others have said before: "XHTML tables are the new CSV" – tables are easy to create and can be viewed and edited with a wide range of applications. Furthermore, tables offer several techniques to improve accessibility, for example through using the attributes axis and scope.

The data source for a graph displayed with Chart-o-matic is a table marked up in a standardized way – in analogy to the nomenclature of some Microformats, this format is currently dubbed hChart. An hChart is a valid HTML- or XHTML-table that makes use of the above-mentioned attibutes and some specific class names. hChart is used to store the data to be displayed while any information that refers to the visual representation of the chart is given in the CSS. See the charts below for three more examples of graphs rendered with Chart-o-matic:

Background Information

Chart-o-matic builds upon the ASTRA-Framework, what makes it look similar to Yahoo's YUI Chart Control. The Chart Control is a mighty tool for creating charts and as it is fully integrated into YUI, it is rather a building block for complex web-apps than an simple solution for embedding charts into web documents. In contrast, Chart-o-matic aims primarily at users that can handle HTML and CSS but don't want to be bothered with JS or a platform library if they simply want to add some graphs to a document.

Apart from the well-known swfObject 2.0, that is used to safely embed the SWF-file, Chart-o-matic doesn't have any dependencies. Nevertheless, Chart-o-matic can be used together with a platform library of your choice.

The whole app (SWF-file and compressed JavaScript) is currently about 50kB. It has been tested in a wide range of browsers, including most recent versions of Safari, Opera, Firefox and IE (from version 6 up).

I'd love to hear your thought's on this project. You can leave your comments here.