I recently attended an HTML5 workshop held by
Mr Remy Sharp. I was the only honest schmo in the room to admit to having already
purchased the HTML5 book on offer. I was waiting for the free T-shirt that
never transpired 🙁 The workshop itself was really interesting and I left with
the usual ‘I’m going to change the world with this new knowledge’ excitement.
A few months have passed and I’ve finally got around to writing this blog (the
changing the world part will have to wait).
The part of the day that really got my juices flowing was the Canvas tag
stuff. It’s perhaps embarrassing to admit but I’d not had any dealings with it
beforehand. The bit that really blew my top was the traversing through each
pixel of a transposed image on the canvas and altering each one. Simply
amazing. During my lunch hours at work, I wanted to investigate the Canvas tag
in more depth. I wanted to create a simple table of data, that using
JavaScript, could be used to generate a simple line graph. I wasn’t even sure
if it was possible.
Just a quick mention of
Zen-Coding
which I was also introduced to at the Workshop. Imagine being able to write
entire blocks of HTML shorthand and then convert them at the press of a
button. So
div.class-name becomes
<div class="class-name"></div>and
ul>li*3 becomes
<ul><li></li><li></li><li></li></ul>
(Tabbed in reality)Back to the point…
Generating a line graph on the fly
The final example can be seen
here. I started off with a basic table of data within my HTML5 document.
| Day | Jokes Learnt | Girls Numbers |
|---|---|---|
| Day 1 | 5 | 1 |
| Day 2 | 7 | 1 |
| Day 3 | 10 | 3 |
| Day 4 | 20 | 4 |
| Day 5 | 40 | 7 |
Here we are studying the highly scientific effect of comedy on the fairer sex.
The next thing I added was the container for my X and Y labels and a key
holder which explained what the line represented.
<div id="y-axis">
<ul id="y-axis">
<li id="label-1"></li>
<li id="label-2"></li>
<li id="label-3"></li>
<li id="label-4"></li>
</ul>
</div>
<div id="canvas-holder"></div>
<div id="key-holder">
<table id="key">
<tbody>
<tr>
<th>
Key
</th>
<th>
Value
</th>
</tr>
</tbody>
</table>
</div>
<div id="x-axis"> </div>
I learnt at the workshop about document.querySelector and
document.querySelectorAll. Both return the corresponding DOM
elements of the queried parameters. I wanted this HTML file to be
self-sufficient and not require any 3rd party JavaScript libraries. So using
these DOM selectors I did the following.
var can = document.querySelector('canvas');
// Traverse each header to work out the keys required
var thList = document.querySelector('#data').querySelectorAll('th');
var dataKey = new Array();
// Start count at 1 to avoid our blank cell
for (i = 1; i < thList.length; i++) {
dataKey[i] = thList[i].innerHTML;
}
The first line assigns our canvas element to the variable
can. Next up we use the headers to define the number of lines
we need on our graph and what they represent. Notice that the count starts at
1 to ignore the first th cell which is empty. We assign these
variables to an array (dataKey).
// Use the td content to derive the data array
var tdList = document.querySelector('#data').querySelectorAll('td');
var dataArray = {};
var dataCount = 0;
var currentKey = '';
// Variables for our X and Y labels
var smallestFigure = 0;
var largestFigure = 0;
var xLabels = [];
var xlableCnt = 0;
// Traverse the td to derive our data array
for (i = 0; i < tdList.length; i++) {
// Set smallest/largest if value is a number
if (!isNaN(tdList[i].innerHTML)) {
var testNumber = parseFloat(tdList[i].innerHTML);
if (!smallestFigure && !largestFigure) {
smallestFigure = testNumber;
largestFigure = testNumber;
} else {
if (testNumber < smallestFigure) {
smallestFigure = testNumber;
}
if (testNumber > largestFigure) {
largestFigure = testNumber;
}
}
}
// Col 1 is the key for this row
if (dataCount == 0) {
currentKey = tdList[i].innerHTML;
dataArray[currentKey] = {};
xLabels[xlableCnt] = tdList[i].innerHTML;
xlableCnt++;
} else {
dataArray[currentKey][dataKey[dataCount]] = tdList[i].innerHTML;
}
// Count starts at zero
if (dataCount == (dataKey.length - 1)) {
dataCount = 0;
} else {
dataCount++;
}
}
OK, this may look slightly overwhelming. Just take some deep breaths and I'll
talk you through it. What this code is trying to do is to use the content of
the table to form a data array. Firstly the tdList becomes a
holder for all of the content within the td tags. Next, we
define all of the variables we are going to require to get our array. We loop
through all of the td DOM elements. For each
td element, we check whether the content is a valid number.
If it is we check the value against previous values to determine the largest
and smallest numbers. This will be used to determine our Y axis range. Our X
axis labels use the first (vertical) column in our table. Each label will also
be used as our array key to determine the values plotted on the canvas.
// Each value will be worth a units worth of pixel
var unit = can.height / largestFigure;
// Lets now get our side label
document.querySelector('#label-1').innerHTML = largestFigure;
document.querySelector('#label-2').innerHTML = (largestFigure / 4) * 3;
document.querySelector('#label-3').innerHTML = (largestFigure / 4) * 2;
document.querySelector('#label-4').innerHTML = (largestFigure / 4) * 1;
// Our bottom label
var xWidth = can.width / xLabels.length;
// Lets fill our x labels
for (i = 0; i < xLabels.length; i++) {
xSpan = document.createElement('span');
xSpan.innerHTML = xLabels[i];
xSpan.className = 'spanBlock';
xSpan.style.width = xWidth + 'px';
document.querySelector('#ul-x-axis').appendChild(xSpan);
}
Next up we use our assigned variables to determine the X and Y axis labels. We
find our unit (what each value is in pixels) by taking the length of the
canvas and dividing it by the largest figure we have. The Y axis is split into
4 so is not very dynamic, I'm sure you can do better. Also, you may have noted
I've picked some nice round numbers in this example, barely the case in
reality! Our X-axis uses the xLabels variable we assigned to
early. We create a new span DOM element and set the inner HTML to match the
value of the label. Now for the fun part...
// Check whether we can use the canvas
if (can.getContext){
// Get our object
var ctx = can.getContext('2d');
// Black out back ground
ctx.fillStyle = '#000';
ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#fff';
// default drawing style
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.save();
// Define array of fill colours first element is
// blank so that our keys can be used
strokeArr =new Array('','#fff','#0000FF');
The first line checks that we can actually use the
getContext method of the object. We set up our ctx object
which allows us to draw on our canvas tag. We create our black rectangle which
covers the canvas, this is the base for our chart. The
lineWidth and lineCap set up how our line
graph will look on the canvas. Our strokeArr sets the colours
for each of our lines. This isn't at all dynamic. You may ask
'why is the first element blank' and
'what if someone adds another column'. To which my response will be
'Shut the hell up!'. Anyway, we are now ready to start drawing our
lines.
for (i=0;i<dataKey.length;i++) {
if (dataKey[i] != undefined) {
// Set Starting point
ctx.strokeStyle = strokeArr[i];
ctx.beginPath();
ctx.moveTo(0,500);
// Set defualt points
xPoint = 0;
yPoint = 500;
// Item in object
xCount = 0;
// Loop through items
for (o in dataArray) {
// X point moves along with the count
xPoint = xCount * xWidth;
// Use the unit calculated earlier to calc the y point
if (dataArray[o][dataKey[i]]) {
yPoint = 500 - (dataArray[o][dataKey[i]] * unit);
} else {
yPoint = 500;
}
// Start new line or join existing
if (xCount == 0) {
ctx.moveTo(xPoint,yPoint);
} else {
ctx.lineTo(xPoint, yPoint);
}
xCount++;
}
// Add stroke
ctx.stroke();
// Add this row to key
keyTr = document.createElement('tr');
keyTd = document.createElement('td');
keyTd.style.backgroundColor = strokeArr[i];
keyTr.appendChild(keyTd);
keyTd2 = document.createElement('td');
keyTd2.innerHTML = dataKey[i];
keyTr.appendChild(keyTd2);
document.querySelector('#keytbody').appendChild(keyTr);
}
}
We are now ready to use our data array which we generated earlier. We loop
through each item (line on the chart) which contains an object of points on
the map. The strokeArr value is the colour of the line. The
beginPath method is the equivalent of taking your pen off of
the canvas. The moveTo method puts the pen back on the canvas
at the correct point, in this case where the X and Y axis meet. We start
looping the points on the canvas we need to draw.
The xPoint (where on the X axis we need to plot our point) is
calculated by using the xCount (number of iterations through
our X-axis) times the xWidth (number of pixels between each X
label). The Y axis is a little more complicated as the lowest Y point isn't 0
it's 500 (because the canvas start at the top left not the bottom left). We
use our data value and times it by the unit which gives us the number of
pixels up we need to be. We have our X and Y points so we now just need to set
them. We check whether this is a new line or an existing line and plot the
point accordingly. The ctx.stroke() fills the line for us.
Now we have our line we need to create a record in our key table. The first
td is filled with the same colour of the line while the
second td holds the label for that line. We append the new
table row to the key table.
And that's that. I was very impressed with the ease with which we can do this
funky stuff and look forward to more of the same!