G RAPHING S TATISTICS WITH RG RAPH
Figure 6.3: Our graph as HTML
<li> <p data-name="Google Chrome" data-percent="16"> Google Chrome - 16% </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 so much easier to work with programmatically since we won’t have to parse strings. If you open up the page in your browser or just look at Figure 6.3, you’ll see 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 element or JavaScript is not available. Now, let’s turn this markup into a graph.
Turning Our HTML into a Bar Graph We’re going to use a bar graph, so we’ll need to require both 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. In the head section of the HTML page, we need to load the libraries we need.
Report erratum this copy is (P1.0 printing, December 2010)
121