HTML5 and CSS3, Second Edition

Figure 18—A client-side bar graph using the canvas

AwesomeCo is updating the company website, and senior management would

like to see a graph of the most popular web browsers as determined by the

traffic the site gets. The back-end programmers will be able to get the data

in real time, but first they’d like to see whether we can come up with a way

to display the graph in the browser, so they’ve provided us with some test

data. Our goal is to transform that test data into a useful graph.

Describing Data with HTML

We could hard-code the values for the browser statistics in the JavaScript

code, but then only users with JavaScript would be able to see the values.

Instead, let’s put the data right on the page as text. We can read the data

with JavaScript and feed it to the graphing library later.

html5_canvas/canvas_graph.html

<divid="graph_data">

<h1>Browsersharefor thissite</h1>

<ul>

<li>

<pdata-name="Safari"data-percent="10">

Safari- 10%

</p>

</li>

<li>

<pdata-name="InternetExplorer"data-percent="30">

InternetExplorer- 30%

</p>

</li>

<li>

<pdata-name="Firefox"data-percent="15">

Firefox- 15%

</p>

</li>

<li>

report erratum • discuss

Graphing Statistics with RGraph • 121

Download from Wow! eBook <www.wowebook.com>