Graph from scratch

James mentioned the other day that he was drinking tea “at a rate of 0.75 OC”, OC being the base speed at which I myself consume a mug of that wonderful brown liquid. A little flurry of tweets ensued which resulted in me kind of accepting a joke/challenge using a meme.

This post is mainly about plotting a graph with nothing but JavaScript and a canvas element, but it also gives me a chance to finally document my tea drinking habits for the world to gaze upon in wonder.


I’m going to build a simple plotted graph using JavaScript and a canvas element but without any external dependencies. I’ll try to walk you through each step of the way too, so you can pick and choose which parts of this code you’d like to use in your possibly unrelated canvas project.

This will be self contained within a neat little class, so you’ll easily be able to pull it out and modify it to your hearts content.


First I’m going to setup a couple of empty classes. I’m going to have a LineGraph class which inherits (using prototypical inheritance) from Graph. The base class will contain anything a generic graph would, such as containing data points and rendering.

It will be up to the individual implementations, a LineGraph in this case, to turn those data points into something visual.

Storing the data

The base Graph class needs to take a set of data and store it for later use by it’s child classes. This data could be an array (line graphs) or an object containing simple numbers (pie chart).

We’ll do this by adding a setDataSource method which is called from the constructor.

Creating the canvas

We’ll leave it to the base class to create and prepare the canvas element. It will create the element at a specified size and then store it’s context.

We’ll also add a way to fetch the canvas element for later. This will be used to inject the element into the DOM where you see fit.

You’ll now be able to create the canvas and inject it into your page with something like this.

Setting up the data

This isn’t very well defined, it’s kind of up to how the specific graph child class wishes to implement it. Here’s how I’m going to implement the data structure for the LineGraph class.

This allows us to name our plotted lines if we ever wanted to, colour them and specify the actual values they should display. I think the LineGraph class should be able to work with that.

Calculating the bounds

When the data source is set we’re going to want to pre-calculate the maximum amount of positions across the X and Y axis. We will use this count to divide the graph up into the right amount of columns and rows to represent every data point.

This will involve creating a few new functions and adding a call to one of them within setDataSource. But because these bound values are only really relevant to line graphs, we need to do this in the LineGraph class, not Graph.

All that block above is doing is calculating the upper bounds for the X and Y axis. It’s very easy to understand because everything is split into it’s own documented function that really doesn’t do that much. I could have probably squashed it down into a quarter of that size, but then you’d never understand it.

Keeping everything in small, well named and focussed functions keeps things testable and above all: clean. Now that our data is prepared, we can move onto rendering our data.

Rendering the graph

The first step is to add an initial render method to the base Graph class. This will call all of the appropriate methods to clean and then render the canvas.

drawDataSourceOntoCanvasElement is a noop method that LineGraph will override to plot it’s points and lines onto the canvas. By the time it’s called the canvas will be completely clean and ready for drawing.

Now for the final step(s); drawing the points and lines onto the canvas.

That’s it. That last block renders each line onto the canvas taking up all available space using it’s selected colour. Each line is marked with dots along it’s path with a line joining each point.

Wrapping it all up (FINALLY!)

The code above will leave you with two classes that can be used to set up and plot a graph onto a canvas. It is built in such a way that other graph types could descend from the base class to inherit some default functionality (a pie or bar chart for example).

You can pick up the full source and a small example usage in this gist. You can also play with an interactive version on jsFiddle, which I’ve also embedded below.

Feel free to leave your thoughts and opinions below, they’re appreciated. I hope you’ve found this useful!

  • David Wilkinson UK

    Hi, the content looks good, but the links are dead..