Javascript Circular Charting
Sunday, 23. December 2007, 14:19:26
There are multiple ways to create circular charts and diagrams. Usually, a chart is created by a server application, and served as an image to be included in a web page. This has all the usual advantages.
But what if the data for creating a chart / diagram isn't on the server? With all the new AJAX- and other javascript based web applications, the data might live in the client's computer only... it'd be downright silly to send these to the server if the only objective is to have a chart created. (Silly for obvious reasons: speed, bandwidth, server load, security, etc.)
So... if the data exists in the client, why not generate the charts in the client too?
Because browsers don't do graphics.
Sure, they can display graphics, and create new image objects too... but they aren't meant to be a drawing canvas. Any web application allowing such is either based on a plug-in, or an approximation of a drawing application.
Ah, you say, what's wrong with the java, flash, and active-x based plug-ins that allow us to draw up charts and diagrams? Surely they can work with data from the client?
Few things are wrong with those... except for the fact that they are plug-ins. How many browsers do you know that support SVG natively? Microsoft's flagship browser doesn't... instead it offers Microsoft's own variety of xml drawing, supported by no other browser. This means that authors are forced to continue catering to various browser and / or plug-in vendors.
No, thank you.
And some of you may even know that HTML5 will house the CANVAS element, for easy drawing purposes, including circles... however the few implementations I've seen don't work together yet.
Thus I came up with JCC: a method to create circular charts and diagrams using a few images of a disc, a bit of CSS and a bit of unobtrusive javascript.
Currently the methods are able to showcase the technology, but don't allow for real integration with data, yet. That will be the next step.
Examples include:
- 2 circle diagrams
- 3 Venn diagrams
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.
Also note that the examples in their current state work on 3 browsers:
- Opera 9 and newer (possibly including Opera Mini and Opera Mobile)
- Safari 3 and newer (and thus all kinds of KHTML browsers)
- Firefox 2, 3 beta and newer (and thus all kinds of Gecko browsers)
Thus far only Internet Explorer 6 fails to render the diagrams correctly, due to margin inconsistencies and lack of 24-bit Alpha Transparancy. Internet Explorer 7 does manage to render the diagrams, but miscalculates the image placement. Some tweaking may be needed.
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'd say.
Link: Javascript Charting
As soon as the HTML5 CANVAS element is implemented in mainstream browsers, JCC will be a thing of the past... but in the mean time: game on!
But what if the data for creating a chart / diagram isn't on the server? With all the new AJAX- and other javascript based web applications, the data might live in the client's computer only... it'd be downright silly to send these to the server if the only objective is to have a chart created. (Silly for obvious reasons: speed, bandwidth, server load, security, etc.)
So... if the data exists in the client, why not generate the charts in the client too?
Because browsers don't do graphics.
Sure, they can display graphics, and create new image objects too... but they aren't meant to be a drawing canvas. Any web application allowing such is either based on a plug-in, or an approximation of a drawing application.
Ah, you say, what's wrong with the java, flash, and active-x based plug-ins that allow us to draw up charts and diagrams? Surely they can work with data from the client?
Few things are wrong with those... except for the fact that they are plug-ins. How many browsers do you know that support SVG natively? Microsoft's flagship browser doesn't... instead it offers Microsoft's own variety of xml drawing, supported by no other browser. This means that authors are forced to continue catering to various browser and / or plug-in vendors.
No, thank you.
And some of you may even know that HTML5 will house the CANVAS element, for easy drawing purposes, including circles... however the few implementations I've seen don't work together yet.
Thus I came up with JCC: a method to create circular charts and diagrams using a few images of a disc, a bit of CSS and a bit of unobtrusive javascript.
Currently the methods are able to showcase the technology, but don't allow for real integration with data, yet. That will be the next step.
Examples include:
- 2 circle diagrams
- 3 Venn diagrams
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.
Also note that the examples in their current state work on 3 browsers:
- Opera 9 and newer (possibly including Opera Mini and Opera Mobile)
- Safari 3 and newer (and thus all kinds of KHTML browsers)
- Firefox 2, 3 beta and newer (and thus all kinds of Gecko browsers)
Thus far only Internet Explorer 6 fails to render the diagrams correctly, due to margin inconsistencies and lack of 24-bit Alpha Transparancy. Internet Explorer 7 does manage to render the diagrams, but miscalculates the image placement. Some tweaking may be needed.
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'd say.
Link: Javascript Charting
As soon as the HTML5 CANVAS element is implemented in mainstream browsers, JCC will be a thing of the past... but in the mean time: game on!
WIDGETIZE