Figure 20—Our graph rendered on the canvas
html5_canvas/javascripts/graph.js
varcanvas= document.getElementById('browsers');
if(canvas.getContext){
canvasGraph();
}With that, our graph is ready (but won’t work for people using browsers that
don’t support the <canvas> tag).Falling Back
When building this solution, we already covered fallbacks for accessibility
and lack of JavaScript, but our graph won’t display in Internet Explorer 8
because it doesn’t have canvas support.ExplorerCanvas (which we talked about in Falling Back, on page 118) and
RGraph work really well together. We just need to include excanvas.js in our
<head> section, and our graphs will automatically work in Internet Explorer- However, if you’re working with Internet Explorer 7 or older, you’ll have to
use an alternative solution.
However, since ExplorerCanvas needs to be loaded in the <head> section, there
can sometimes be race conditions where things are loaded in the wrong order.
In our case, ExplorerCanvas has to make modifications to the DOM and it
doesn’t always do those modifications as quickly as we need it to. There are
two ways to avoid this. First, we could use the configuration we used in Falling
Back, on page 118, to force ExplorerCanvas to see our canvas element. Second,
we could use jQuery’s $(document).ready() method to invoke the canvasGraph()
function. This ensures that the document really is ready to be manipulated
by our scripts. We’re already using jQuery anyway, so let’s change our code
slightly, like this:Chapter 6. Drawing in the Browser • 124
Download from Wow! eBook <www.wowebook.com> report erratum • discuss