JavaScript Graphing: The Good, The Bad and the IE8

By Tim Price

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="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["charttype"]});

Google Charts also allows for you to create your own custom chart types, which you can then add to the chart gallery for anyone else to use. You don't have to, but it is a nice way to contribute to a helpful tool and to others who might not be as capable but want similar options (the open source way).

From my time using the Google charts API, I found it very simple to implement, while offering extensive customisation options. I also did not have to worry about compatibility issues with older browsers (the bane of all web developers). I would definitely recommend using it if you are looking for a graphing library, and I would use it again.

There are some commercial and terms considerations when using the Google Charts model, you can read these 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