Javascript Circular Charting - ΩJr. Software Articles and Products

Note: The methodology sampled in this article will be deprecated when the HTML5 Canvas element reaches recommendation status.


What and How
The areas below display circular and elliptical charts. These are generated using Javascript Circular Charting (JCC): nothing but html, css, some generic images, and unobtrusive ecmascript (a.k.a. javascript). For those wondering what they should look like, we've taken this Diagrams Screen Shot.


Why
The objective of JCC is to establish how far the mentioned tools can be used to display disc, elliptical and pie charts that are updatable based on information retrieved in realtime from various sources. As such, data generated inside the browser can be used to create a chart inside the browser too, without returning to the server. However, this testing page itself is not connected to any outside sources... yet.


Browser Compatibility
This method is built with and tested succesfully in

• Opera 9 - 12,
  
• Safari 3β - 5,
  
• Firefox 2 - 16,
  
• Google Chrome 20
  
• Internet Explorer 7 - 10*

*Internet Explorer 6 renders this page incorrectly due to margin inconsistencies, and the ugly black lines it shows, stems from lack of 24-bit Alpha-Transparancy support (for MSIE6) and lack of CSS-opacity support (for MSIE7).


Disclaimer
Please note that Venn diagram programming is a specialty I have yet to master. As such, the method showcased is merely an example, ready to be improved by those in the field of programming Venn diagrams.


Future
Of course it doesn't stop here. What about pie charts? What about animated discs? What about hyperlinks on each section of a chart? Plenty of room to improve, I say.