Share:

RGraph: HTML5 canvas graph library - Microsoft Internet Explorer (MSIE) support

Microsoft Internet Explorer 9

Starting from preview 3, Internet Explorer 9 has support for canvas, including the text and shadow APIs. It also benefits from hardware acceleration, and quick rendering times. You can see some screenshots here.

Introduction
Getting hold of ExCanvas
Caveats
Google Chrome Frame
Using a dynamically created canvas

Introduction

As of December 2009 RGraph now works partially with Internet Explorer without Google Chrome Frame. Graphs are rendered as VML. You are still recommended to use Google Chrome Frame to get the best results. The interactive features are unlikely to work correctly. RGraph only works with Microsoft Internet Explorer 8.

Thanks go to everyone involved with the ExCanvas project for providing the ExCanvas library.

Getting hold of ExCanvas

Google ExCanvas is distributed with RGraph in the "excanvas" directory. There is a minified gzip compressed version, along with the original.

Caveats

The interactive features of RGraph are unlikely to work correctly with MSIE 8.
Shadows are now available (on some graph types), albeit without blurring.
You must reference the Javascript libraries in the documents <head>.
You must use the window.onload event to create your graph.

Inside the window.onload function your graph must be created as a local variable (ie you must use the var keyword). Eg:

<script>
    window.onload = function ()
    {
        var myGraph = new RGraph.Bar('myCanvas', [1,9,8,7,3,4,8,4,9,5,7,8]);
        myGraph.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
        myGraph.Draw();
    }
</script>

If your page is large, there may be a slight pause before the window.onload event fires and thus creates the graph.
Changing the font that text is shown in is not available.

Google Chrome Frame

Instead of ExCanvas you can also use Google Chrome Frame. This basically turns Internet Explorer into Google Chrome, and fully supports RGraph. Since it involves a plugin installation, this is a better option if you can fully influence the users PC. If you can fully influence the users PC however, a better option might be to simply use one of the browsers with native support.

Using a dynamically created canvas

If you're creating your canvas dynamically there is an extra step that you must perform to allow it to be recognised by ExCanvas:

var canvas = document.createElement('CANVAS');
    canvas.id = 'cvs';
    canvas.width = 600;
    canvas.height = 250;
    canvas.style.border = '1px dashed black';
document.body.appendChild(canvas);

G_vmlCanvasManager.initElement(canvas);