One of the common requests we get from our Moodle and Tōtara clients is that they want to see a graphical representation of their data. Things ranging from user progress, and course completion statistics to custom performance metrics. As we don't want to reinvent the wheel, we have made use of some javascript graphical libraries that are out there in the open source ecosphere. This is a quick overview of a couple of the ones we have used, and our experiences using them.
Firstly, a quick explanation of the formats browsers use for visuals and images.
Browsers and Graphs Rendering
Browsers use two main formats for graphics, each compatible with a different set of browsers. These are Scalable Vector Graphics, or SVG, and Vector Markup Language, or VML.
Modern browsers (Google Chrome, Mozilla Firefox, Safari v3.2+, Internet Explorer 9+) are all compatible with both, while older browsers (IE9, Safari 3.2) only support VML.
Data-Driven Documents (D3.js)
D3(external link) allows you to bind data to a DOM(external link), and then apply transformations to the document based on your data. D3 is a library that is fairly easy to use, has good tutorials and examples), and is well-documented. While it does not try to be a comprehensive tool that could cover every conceivable requirement, it does satisfy a large number and all of the common graphical types you could think of. In my experience with D3, I found that it was easy to pick up, not depending on extensive JavaScript experience. It was also fairly easy to create smooth and seamless transition animations between graph displays.
D3 creates all of its images using SVG format, and as such is not natively compatible with older browsers. As such I would not recommend you choose D3 if you know from the start that support for IE8 (author shudders at the thought) will be required. Needless to say, there are always options and workarounds.
IE8 and R2D3, A Turn to the Dark Side
In one case when we used D3 on a project, IE8 support was introduced as a requirement for a fair way into development. As such it was not a feasible option to just throw away what we had created to find a natively compatible option. This led us to use Raphael Rendered, Data Driven Documents, or R2D3.js. This is a customized version of D3 that uses RaphaelJS to convert the SVG images into VML. While this is a useful solution, it does not offer the full support for the SVG functionality D3 natively offers. You lose the smooth transition options for one, and end up having to add code like this:
While this can be a very handy solution when you have already begun development, I recommend choosing a natively-compatible VML library if you know you will need to support older browsers. You are always better off using a tool that was specifically designed to achieve what you are trying to do, rather than having to resort to a solution that is being forced to do something it wasn't originally designed for. I would also suggest that you question why anyone would seriously *need* to still be using Internet Explorer 8 or earlier these days, as all supported versions of Windows offer a higher, and frankly better, version of the browser (you may have noticed my dislike for IE8 by now, it's definitely from bad experiences, and I'm not alone).
Google Charts
Google Charts API is an extensive offering of ways to represent data in colourful and interesting ways. It has extensive documentation, loads of easy-to-follow examples(external link), and an active support forum(external link). It also offers full compatibility with both SVG and VML.
Using it is as simple as choosing your graph type and adding these lines, along with defining your draw function (which each graph has a fully complete example available):
">https://www.google.com/jsapi">