I have been developing a script that shows bar graphs. While similar
systems already exist, this one particularly is geared towards
accessibility. I was inspired on CSS For Bar Graphs. However, a major improvement is the added flexibility that comes from implementing it in ECMAScript. Even with these changes, the prevailing
first intention remains: that the graph is readable in plain HTML,
which is why it is appropriate for an accessible design. It works by
firstly creating the appropiate DOM tree of the graph, and then
applying the corresponding styles.

The script is available at the address http://0xj.info/js/graphs.js. Using it isn’t that complicated.

The first thing is to create an instance of the object.

var x=_FMchart();

Then a layer must be specified, either in string or in DOM node form.
Accordingly:

x.setLayer("LayerID");
x.setLayer(document.getElementById("LayerID"));

After that, the data should be given:

x.draw(
{title:"Cases of H1N1 Influenza A in South America by country (progessive)",
categories: ["AR", ["BO","999"], "BR", "CL", "CO", "EC", "PE", "PY", "SR", "UY", "VE"],
proportional:true,
multidimentional:true,
dimensions:{w:"600px"},
data:{
"20090626":[1587,47,452,5186,72,125,360,79,11,195,153],
"20090705":[2485,319,812,7342,101,163,811,103,12,195,204],
"20090709":[2677,544,977,8160,118,204,1135,114,12,195,222],
"20090711":[2928,545,1027,9549,138,204,1580,114,12,520,231],
"20090714":[3056,545,1027,9549,166,204,1753,114,12,520,234]
}
});

The properties are

title

title (caption)

categories

array containing the different elements described by the data. In
the example, we are using the default colors for all the categories,
with the exception of BO (using color #999999.)

proportional

if set to true, it replaces the absolute values by relative
percentual values (eg 4 in a sample of 10 is represented as 40%.)

multidimentional

if set to true the length of the bars must be proportional among
them (only available for a sample or more)

data

the data itself. Labels are needed to compare data from different samples.
dimensions an object containing either one or both of the properties w (for
width) and h (for height), with units

helper

the function which will apply the styles. For example, for a pie
chart it will be x.helpers.pie

helperArgs

array containing the different arguments to pass to the helper.

For instance, the first value sets the radius (in pixels) to use for
the pie chart when using helpers.pie

Pie charts require SVG or VML support. Bar charts are currently supported on the following browsers:

• MSIE 5.5, 6, 7 and 8 (for Windows)
• Netscape 7 and 9
• Arora 0.7.1
• Mozilla Firefox 0.8, 1.0.8, 1.5.0.12, 2.0.0.20, 3.0 and 3.5
• Konqueror 3.5 and 4.2
• Galeon 2.0.6
• Opera 9.26, 9.63, 9.64 and 10
• Kazehakase 0.5.4
• Epiphany 2.22 and 2.26.3
• K-Meleon 1.1.4
• Flock 2.0.3
• Safari 3.2.1 and 4.0
• Avant 11.7

A demo available at http://youruseragent.info/download/chart.html. More information (in Spanish) is also available.

graphs.js

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

FMCharts: Dynamic and Accessible Web Charts