Top 10 Daily Top Selling Deals - Official Deals

Official Coupons

Official Coupons

Tuesday, March 8, 2011

FMCharts: Dynamic and Accessible Web Charts

via Web Dev News by corrideat on 7/22/09

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 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.

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 (caption)
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.)
if set to true, it replaces the absolute values by relative
percentual values (eg 4 in a sample of 10 is represented as 40%.)
if set to true the length of the bars must be proportional among
them (only available for a sample or more)
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
the function which will apply the styles. For example, for a pie
chart it will be x.helpers.pie
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,,, 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 More information (in Spanish) is also available.


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

FMCharts: Dynamic and Accessible Web Charts

Share and Enjoy: twitter FMCharts: Dynamic and Accessible Web Charts delicious FMCharts: Dynamic and Accessible Web Charts stumbleupon FMCharts: Dynamic and Accessible Web Charts digg FMCharts: Dynamic and Accessible Web Charts sphinn FMCharts: Dynamic and Accessible Web Charts facebook FMCharts: Dynamic and Accessible Web Charts googlebookmark FMCharts: Dynamic and Accessible Web Charts

Computers-and-Technology Articles from