April 27, 2010
Been having a play with HTML5, very excited by the new semantics and especially keen on the new canvas tag. Aware that it’s not going to be supported everywhere in the immediate future but it’s a great step in the right direction. I don’t think it’s going to be the immediate flash killer some have made it out to be anytime soon (I love flash and AS and have no desire to see them go), but it can certainly work as a good alternative to flash for simple animation and interactivity. Once the decent JS frameworks add more functionality to support it it’s going to make life a lot more interesting.
I’ve not written any sort of tutorial/code article before, so bear with me, feel free to just download the source.
View the source of the demo for the full HTML, I’ll just include the pertinent parts here:
This sets up two canvases, one for each graph, I’ve named them the imaginative ‘Graph1’ and ‘Graph2’. The controls div contains four divs to be converted to jQuery UI sliders (one for each point / bar on the graphs).
First off we set up a couple of global variables:
graphPadding is just a number to use for spacing items of the graphs out. I’ve just set a single number to use for all margins, spacing, etc to keep things simple. colours is an array of colour codes, one for each of the graph points.
Next we initialise with the nice jQuery document.ready function:
The first command sets up the jQuery UI sliders including giving them the appropriate event handler to redraw the graph whenever any of them are changed. The second command just sets each slider to a random value. Next we call drawGraphs to draw their initial state.
Now we have the main graph drawing function, this is set up to draw both graphs in one go.
First we get the canvas dimensions, these could be stored as constants/globals somewhere or hard coded but I like the flexibility of checking on the fly. Really we should check each one individually and split the graph drawing into two functions but it’s a demo and I don’t care. Then we clear each canvas to start drawing on it using a function which will be defined below.
Prepare to draw the first graph by getting a reference to the appropriate canvas then calling getContext on it. Then we set the stroke style to black.
Draw the axis, a simple case of drawing two straight lines. We use a combination of the canvas dimensions and the graphPadding global to work out the positions.
Work out how much space we actually have to draw the points in. The first point is two sets of graphPadding from the left and the last is two from the right hence the * 4. Same applies vertically.
The points will be equally spaced horizontally so we just need to get their vertical position. Loop through the sliders, get the value for each one (0 – 100), work out the percentage of the available vertical space and add it to the points array.
Draw the graph lines. We separate the line drawing and point drawing as when we draw a circle it calls closePath which knackers up our lines (there’s probably a better way). To draw the lines we loop through the points and draw a line between each one.
To draw the points we just loop through the points array again, drawing a circle at each one, again the horizontal position of each point is fixed.
I’ll cut out most of the code for Graph 2 as it’s identical. The part of interest is:
Here we work out the available space for the bars by subtracting the appropriate number of graphPaddings from the total available space then dividing the result by the number of bars. We work out the max height of each bar by deleting 4 * graphPadding from the total available height.
Then we loop through the sliders, get the percentage value from each one and set it’s bar to the given percentage of the total height.
That’s pretty much it. I’ve used two additional helper functions which are based on those found at the Mozilla Canvas tutorial, they shouldn’t need any explanation:
So, there you go. Dynamic graphs without flash or server side graphics libraries. These could of course be achieved pretty much entirely with CSS and JS but it’s been a nice intro to HTML5 and the canvas tag.
I’ve not given this a huge amount of testing (or thought) as really for my own entertainment but hope it’s of interest.
I am Bob. This is my blog. It is an outlet and a substitute for real life. It contains my art, photography, illustration and thoughts on mental health (I deal with anxiety on a pretty much constant basis).
Help fund my existence. Buy my stuff (t-shirts, art prints, stock images & graphics)