Drawing Bar Chart in HTML Canvas

Foreword: In this article I explain how a bar chart can be drawn using the HTML canvas.

By: Chrysanthus Date Published: 21 Apr 2016

Introduction

A bar chart is a series of rectangular bars where each bar represents a group of items in a complete series of items; the longer the bar, the more the items in the group. The height of a bar is proportional to the number of items in the group. In this article I explain how a bar chart can be drawn using the HTML canvas. No image is involved. The little mathematical skills you need to achieve this is taught to you.

Example
You will draw the following figure (bar chart):

Browser Usage

Description of Bar Chart
People use different types of browsers. Consider a city of a total of 10,000 people. 2500 people use Internet Explorer; 400 use Opera; 600 use Safari; 2500 use Chrome; and 4000 use Firefox. In the chart, I is for Internet Explorer, O is for Opera, S is for Safari, C is for Chrome, and F is for Firefox. This information is represented in the following table:

Browser Type: Number
Internet Explorer: 2500
Opera: 400
Safari: 600
Chrome: 2500
Firefox: 4000

In the chart the horizontal line on which the bars stand is called the horizontal axis; it is for the bars. The vertical line is called the vertical axis; it indicates the numbers for the groups (in thousands).

Remember, the top-left corner of the canvas has coordinates, (0,0). The coordinates of any point in the canvas is given in general terms as (x,y). x value increases to the right and y value increases downward. The different values for x or y indicates the position of the corresponding pixel. A pixel is the smallest dot on the screen.

The horizontal axis, starts at point (30,240) and ends at point (260,240). The first bar stands at point (70,240); the next point (100,240), then (130,240), (160,240) and lastly (190,240). Each bar has a width of 15px. This width spreads about the point the bar is standing. For example, the first bar actually starts at point (62.5,240) and ends at point (77.5,240)

The vertical axis starts at point (30,240) and go up to point (30,40). Where the two axes start (meet) is called the origin. The vertical axis is calibrated in thousands. You can see the numbers 1, 2, 3 and 4 meaning 1000, 2000, 3000 and 4000. The height of each bar can be read at the vertical axis. The height of each bar is the number of people using the particular browser.

The Vertical Scale
The scale for the vertical axis is 1000-is-to-40, written as:

    1000 : 40

This means, for every 1000 people, there are 40 pixels to form the corresponding interval on the vertical axis.

So, in pixels, the height for Internet Explorer is gotten as follows:

    2500/1000 x 40 = 100

This number (100) is subtracted from 240, which is the y value for the horizontal axis, to obtain 140, which is the top y value for the bar of Internet Explorer. The top y values for the other bars are similarly obtained.

Coding
Any canvas code begins with something like:

        cv = document.getElementById('C1');

        cntxt = cv.getContext('2d');

cv holds the reference of the HTML canvas element. cntxt holds the reference of the two dimensional (2D) context, which draws. The code for the first bar (Internet Explorer) is:

        cntxt.beginPath();
        cntxt.moveTo(70,240);
        cntxt.lineWidth = 15;
        cntxt.strokeStyle = "brown";
        cntxt.lineTo(70,140);
        cntxt.stroke();

The path is begun; the context is moved to position (70,240); the width of the bar (line) is given; the color is also given; the context is moved to position (70,140); and the stroke() method traces the line.

The Complete Code
The complete code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>

    <figure style="width:308px; border:2px solid red; display:inline-block">
        <figcaption><strong>Browser Usage</strong></figcaption>
        <canvas id="C1" width="300" height="260">
        </canvas>
    <figure/>

    <script type="text/ECMAScript">
        cv = document.getElementById('C1');

        cntxt = cv.getContext('2d');

        //the axes
        cntxt.beginPath();
        cntxt.moveTo(30,240);
        cntxt.lineWidth = 1;
        cntxt.strokeStyle = "black";
        cntxt.lineTo(260,240);
        cntxt.stroke();

        cntxt.beginPath();
        cntxt.moveTo(30,240);
        cntxt.lineWidth = 1;
        cntxt.strokeStyle = "black";
        cntxt.lineTo(30,40);
        cntxt.stroke();

        //Internet Explorer
        cntxt.beginPath();
        cntxt.moveTo(70,240);
        cntxt.lineWidth = 15;
        cntxt.strokeStyle = "brown";
        cntxt.lineTo(70,140);
        cntxt.stroke();

        //Opera
        cntxt.beginPath();
        cntxt.moveTo(100,240);
        cntxt.lineWidth = 15;
        cntxt.strokeStyle = "brown";
        cntxt.lineTo(100,224);
        cntxt.stroke();

        //Safari
        cntxt.beginPath();
        cntxt.moveTo(130,240);
        cntxt.lineWidth = 15;
        cntxt.strokeStyle = "brown";
        cntxt.lineTo(130,216);
        cntxt.stroke();

        //Chrome
        cntxt.beginPath();
        cntxt.moveTo(160,240);
        cntxt.lineWidth = 15;
        cntxt.strokeStyle = "brown";
        cntxt.lineTo(160,140);
        cntxt.stroke();

        //Firefox
        cntxt.beginPath();
        cntxt.moveTo(190,240);
        cntxt.lineWidth = 15;
        cntxt.strokeStyle = "brown";
        cntxt.lineTo(190,80);
        cntxt.stroke();

        //labelling the vertical axis
        cntxt.beginPath();
        cntxt.fillText("1",22,202);
        cntxt.moveTo(28,200);
        cntxt.lineWidth = 1;
        cntxt.strokeStyle = "blue";
        cntxt.lineTo(32,200);
        cntxt.stroke();

        cntxt.fillText("2",22,162);
        cntxt.moveTo(28,160);
        cntxt.lineWidth = 1;
        cntxt.strokeStyle = "blue";
        cntxt.lineTo(32,160);
        cntxt.stroke();

        cntxt.fillText("3",22,122);
        cntxt.moveTo(28,120);
        cntxt.lineWidth = 1;
        cntxt.strokeStyle = "blue";
        cntxt.lineTo(32,120);
        cntxt.stroke();

        cntxt.fillText("4",22,82);
        cntxt.moveTo(28,80);
        cntxt.lineWidth = 1;
        cntxt.strokeStyle = "blue";
        cntxt.lineTo(32,80);
        cntxt.stroke();

        cntxt.fillText("I",70,251);
        cntxt.fillText("O",100,251);
        cntxt.fillText("S",130,251);
        cntxt.fillText("C",160,251);
        cntxt.fillText("F",190,251);

        //the axes names
        cntxt.fillText("No.(thousands)",22,37);
        cntxt.fillText("Browsers",238,251);

    </script>

</body>
</html>

Chrys

Broad Network

Related Articles

Drawing Bar Chart in HTML Canvas

Introduction

Related Links

Comments