<pdata-name="GoogleChrome"data-percent="45">
GoogleChrome- 45%
</p>
</li>
</ul>
</div>We’re using the HTML5 data attributes to store the browser names and the
percentages. Although we have that information in the text, it’s much easier
to work with programmatically since we won’t have to parse strings.The following figure shows that the graph data is nicely displayed and readable
even without the graph. This will be your fallback content for mobile devices
and other users where either the <canvas> tag or JavaScript is not available.Figure 19—Our graph data as HTML
Now let’s use this marked-up data to build a graph.
Turning Our HTML into a Bar Graph
We’re going to use a bar graph, so we’ll require the RGraph bar-graph library
as well as the main RGraph library. We’ll also use jQuery to grab the data
out of the document. Finally, we’ll put the code that builds our graph in a file
called javascripts/graph.js.We load the libraries we need right above the closing
tag:html5_canvas/canvas_graph.html
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<scriptsrc="javascripts/RGraph.common.js"></script>
<scriptsrc="javascripts/RGraph.bar.js" ></script>
<scriptsrc="javascripts/graph.js" ></script>Chapter 6. Drawing in the Browser • 122
Download from Wow! eBook <www.wowebook.com> report erratum • discuss