Javascript Circular Charting - OmegaJunior.Net

The areas above 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 screen shot.

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.

This method is built with and tested succesfully in Opera 9, 9.5, Safari 3 Beta, Firefox 2, and Firefox 3 Beta 2. Internet Explorer 6 and 7 render this page incorrectly due to margin inconsistencies (and the ugly black lines stem from lack of 24-bit Alpha-Transparancy support (for MSIE6) and lack of CSS-opacity support (for MSIE7)).

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

Read on for the reasoning behind creating this method.

(Before people start complaining about it: yes, this page is marked up using HTML 5 and since that spec still is in the works, validation is difficult.)