JavaScript Graphing: The Good, The Bad and the IE8
At Catalyst IT, one of the common requests we get from our Moodle and Totara clients is that they want to be able to see a graphical representation of their data. Things ranging from user progress, course completion statistics all the way to custom performance metrics. As we don’t want to reinvent the wheel, we have made use of a number of 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 in 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 allows you to bind data to a DOM, 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 seemless 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 a fair way in to development. As such it was not a feasible option to just throw away what we had created in order to find a natively compatible option. This led us to using Raphael Rendered, Data Driven Documents, or R2D3.js. This is a customized version of D3 that using 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:
<!–[if lte IE 8]><script src=”r2d3.js” charset=”utf-8″></script><![endif]–>
<!–[if gte IE 9]><!–>
While this can be a very handy solution when you have already begun development, I definitely 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 version 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, as well as an active support forum. 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):
<script type=”text/javascript” src=”here.
Catalyst IT Australia maintains and supports a diverse array of Moodle and Totara sites. If you’d like to find out more about that, or are interested in your own custom graphics, check out: https://www.catalyst-au.net/products-services-elearning
