Dynamically Sketch Line Chart using HTML5 Canvas


Download Source Code

Draw Line Chart dynamically using HTML5 Canvas feature.


With the ongoing progress of HTML5 and its powerful specifications, web developers have gained the ability to do things that were impossible in the past. Drawing graphics and creating animations directly in the browser is now completely possible thanks to a technology called HTML5 Canvas. Canvas is used by writing JavaScript that can access the canvas area through a full set of drawing functions, thus allowing for dynamically generated graphics. In this tutorial I am trying to present sketch Line Chart using HTML5 Canvas where the line chart values will be populated from the input form field.

Overview of dynamically sketch line chart by HTML5 Canvas

Input Form

Here you can draw three line chart individually which default name are Series-1, Series-2 and Series-3 and each Series contains 5 data where each data define as Type-1… Type-5. To draw the line chart you need data for Type that is respect to Y-axis for each Series. I have created a 4×6 input form field where you can input the data for draw a series.

Input field to sketch line chart

Here you can change the default name Series to as your wish. When input field value of Series is changed then LiveName() function is called and that is automatically effected in the Statistics area that is right side of the Canvas area.

And any data is not allowed except integer. And the function definition is as following,

Canvas Area

The HTML “canvas” element is used to draw graphics, on the fly, via scripting (usually JavaScript). Here I have declared a Canvas area that is width is 800px and height is 400px.

A scale image is placed left side of this canvas area. That’s why the complete code segment is as following,

And the button of the canvas area the “Types” scale is placed. That’s code segment is as following,

So the combine output of the above code segment is as following,

Blank canvas area

Select Series

Right side of the canvas area a “Series” selection box is shown. If you select “Series-1” radio button then a line chart is drawn using the 5 “Types” data for the Series-1. Same activity is applied for another “Series-2” and “Series-3” radio button.

Radio selection to draw the line

Add Style

As the HTML Skelton is done, so now we can apply the style for the about HTML Skelton. That’s is as following,

Draw Graph

Now I want to create a graph line (Horizontal and Vertical) within canvas area.

The stroke() method actually draws the path you have defined with all those moveTo() and lineTo() methods which default color is black, but you can change the color using strokeStyle property. The moveTo() method moves the path to the specified point in the canvas, without creating a line. The lineTo() method adds a new point and creates a line TO that point FROM the last specified point in the canvas (this method does not draw the line).

Draw horizontal and vertical scale

Get Form Values

Input field value to draw the line

Now time to collect the form input data. After collect the data by the getElementById, it converted to float data using parseFloat() function.

Next data is store in the two dimensional array y_axis.

From the all data, its need to determine the maximum and minimum value among the all data.

At last each data is converted the percentage value with respect to maximum and minimum values.

Draw Line Chart

After collecting the data from the input fields, now we can draw the line according to each “Series” of data. This draw function is called when you press the radio button for a “Series” which window is placed right side of the Canvas area.

The result for the click “Series-1” radio button is as following,

Draw the line chart by the input value


The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. Here is am trying to present to draw the line chart that’s values can be dynamically input by the user. You can use this line chart for any visual representation of the statically data. So keep going with canvas and Happy coding…:)

Previous articleVideo Creation Software Video Maker Fx with Crack
I am a professional software developer from last 4 years. I have experience in analysis, design, development, testing and implementation of desktop (using C, C++, C#) and web (using HTML5, CSS3, JavaScript, PHP, MySql) platform using. I have good exposure to object-oriented design, software architectures, design patterns, test-driven development and Project Management.