Learn to build JavaScript Canvas Line Chart in 2017

Reading Time: 5 minutes

Here, I will discuss how you can build a simple JavaScript Line Chart Library. Here we will try to make a line chart using HTML5 canvas. As it will be library so the code have to be easy for the other developers to use. The final product would look like this picture. I tried to keep this as simple as possible because thus you will understand the basics of the advanced javascript methodology. I hope you have intermediate javascript understanding. 

Javascript Html5 chart

Intended Usage Example

Here is an example code what we want to achieve for others to use this library. Please read the comments. I will encourage you to write the code ( do not copy )

Constructor Method

Now let’s build the main constructor method VasChart. This constructor will take one argument. The argument is actually CSS selector of the HTML5 canvas element.

Here one thing to be noted that variable names are appended with a hyphen  ” _ “. We will append the hyphen to only those variables which will be used by the library itself. As it is a library for a line chart, we need reference for the origin, axis and the actual coordinates object of the data to be drawn. Let’s define them in the constructor method.

Setting the line chart data

Now we need a method to set the data of the line chart. At the end of this method we will return ‘this’ to chain the methods.

Set context origin to the Lower Left of the Canvas

If you have programmed for the HTML5 canvas, you will know that the 0,0 coordinates actually lives in the top left corner of the canvas. To make the 0,0 coordinates in the bottom left corner, we need this method. We are doing this to ease out our thinking process. Otherwise we need to map every point respect to the canvas.

Draw Line Method

We are making a line chart library so obviously we need a method to draw a line. This method will take two arguments which are essentially two points. We will use this helper method two draw all the lines.

Set origin of the graph and calculate axis properties

Now use this above method to draw our axis. But the problem here is that we need to perfectly calculate the starting and ending coordinates of the two axises. We also want to give padding in the bottom and left of the canvas. In this belew method, we will set our origin and the set the axis properly.

Drawing the axis

Now we have properly set the axis. Let’s use our draw line method to draw the axis.

Calculate the pixel coordinates from the line data

Let’s understand the problem here. We have our data in the form of key and value. We need to calculate the exact coordinates for the lines in the graph. For that reason, we need to map each data point into the pixel domain. Like if a point x ( x = 5 ) is defined in the domain [0 , 10] we will calculate the value of x in the provided domain [0, 100]. This is done by our _map method. We also need to calculate the max and min of the data points.

Build Line Chart Data Coordinates Array

By the help of the above method, we will loop through the dataset and calculate the exact data point coordinates respect to the canvas. We will save this points in one array. In the end, we will use this array to draw all the lines in the graph.

The ultimate draw method

Now we will write the draw method, here will call our all necessary methods and draw the lines looping through that previously built array. Here we have scratched a little what you can achieve through vanilla js.

Homework for you

I want you to write a method to perfectly write the labels just below the x axis. Please make a pull request after solving it. You can also add colors to the context. You can add any features you like. It is your own javascript line chart library. The whole project can be found in the github. Just clone it and use it.

If you have any questions, please let me know in the comments. Hope you like this article.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.