HTML5 Line Graph Using Canvas

Ashwani Tyagi
11y
25.7k
0
1
300
Article

Introduction

In this article I will walk through how to create a Line Chart using a HTML5 canvas.

What is a Line Chart?

A line chart is a style of chart that is created by connecting a series of data points together with a line. It is used to display information in a series of data points connected by straight line segments. It enables us to find trends (or patterns) over time.

Use of Line Chart

A line graph is used to represent a set of data values in which a quantity varies with time. We can use a line chart to show how the stock value for a certain company develops over time on the stock market. We can also use it for representing temperature, sales, employment, company profit or cost over a period of time.

The figure given below represents how to create a line series with symbols in HTML5.

Figure 1

Browser Support

It is supported by all major browsers such as Internet Explorer 9, Firefox 3.6+, Safari 4+ and Chrome etc.

Procedure for creating the Line Graph

Step 1

We first define the element using a HTML5 canvas. The height and width attributes sets the canvas and graph size.

Step 2

In order to interact with this canvas through JavaScript, we will need to first get the element by Id and then create a context.

var canvas = document.getElementById('mycanvas');

var ctx = canvas.getContext("2d");

</script>

Step 3

In the following step we will create a "LineChart()" function in which we define various methods, variables, constants and properties. In this step we will draw both the X-axis and Y-axis.

function LineChart(con)

{

// user defined properties

this.canvas = document.getElementById(con.canvasId);

this.minX = con.minX;

this.minY = con.minY;

this.maxX = con.maxX;

this.maxY = con.maxY;

this.unitsPerTickX = con.unitsPerTickX;

this.unitsPerTickY = con.unitsPerTickY;

// constants

this.padding = 10;

this.tickSize = 10;

this.axisColor = "#555";

this.pointRadius = 5;

this.font = "12pt Calibri";

this.fontHeight = 12;

// relationships

this.context = this.canvas.getContext("2d");

this.rangeX = this.maxX - this.minY;

this.rangeY = this.maxY - this.minY;

this.numXTicks = Math.round(this.rangeX / this.unitsPerTickX);

this.numYTicks = Math.round(this.rangeY / this.unitsPerTickY);

this.x = this.getLongestValueWidth() + this.padding * 2;

this.y = this.padding * 2;

this.width = this.canvas.width - this.x - this.padding * 2;

this.height = this.canvas.height - this.y - this.padding - this.fontHeight;

this.scaleX = this.width / this.rangeX;

this.scaleY = this.height / this.rangeY;

// draw x y axis and tick marks

this.drawXAxis();

this.drawYAxis();

}

Step 4

In the following step we will get the value of the longest width of the following Line Graph or chart. For finding the longest value we apply the loop that will return the longest Value Width.

LineChart.prototype.getLongestValueWidth = function ()

{

this.context.font = this.font;

var longestValueWidth = 0;

for (var n = 0; n <= this.numYTicks; n++)

{

var value = this.maxY - (n * this.unitsPerTickY);

longestValueWidth = Math.max(longestValueWidth, this.context.measureText(value).width);

}

return longestValueWidth;

};

Step 5

In this step we will draw the line chart along the x-axis. We also draw the tick marks along the x-axis and finally in this step we draw the x-axis labels. For drawing both the tick marks and labels we apply the loop.

LineChart.prototype.drawXAxis = function ()

{

var context = this.context;

context.save();

context.beginPath();

context.moveTo(this.x, this.y + this.height);

context.lineTo(this.x + this.width, this.y + this.height);

context.strokeStyle = this.axisColor;

context.lineWidth = 2;

context.stroke();

// draw tick marks

for (var n = 0; n < this.numXTicks; n++)

{

context.beginPath();

context.moveTo((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height);

context.lineTo((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height - this.tickSize);

context.stroke();

}

Figure 2

This figure represents tick mark along x-axis shown below:

// draw labels

context.font = this.font;

context.fillStyle = "black";

context.textAlign = "center";

context.textBaseline = "middle";

for (var n = 0; n < this.numXTicks; n++)

{

var label = Math.round((n + 1) * this.maxX / this.numXTicks);

context.save();

context.translate((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height + this.padding);

context.fillText(label, 0, 0);

context.restore();

}

context.restore();

};

Figure 3

This figure represent labels along the x-axis:

Step 6

Similarily, we will draw the line chart along the y-axis. We also draw the tick marks along the y-axis and finally in this step we draw the y-axis labels. For drawing both of the tick marks and labels we apply the loop.

LineChart.prototype.drawYAxis = function ()

{

var context = this.context;

context.save();

context.beginPath();

context.moveTo(this.x, this.y);

context.lineTo(this.x, this.y + this.height);

context.strokeStyle = this.axisColor;

context.lineWidth = 2;

context.stroke();

context.restore();

// draw tick marks

for (var n = 0; n < this.numYTicks; n++)

{

context.beginPath();

context.moveTo(this.x, n * this.height / this.numYTicks + this.y);

context.lineTo(this.x + this.tickSize, n * this.height / this.numYTicks + this.y);

context.stroke();

}

Figure 4

This figure shows the tick mark along the y-axis:

// draw values

context.font = this.font;

context.fillStyle = "black";

context.textAlign = "right";

context.textBaseline = "middle";

for (var n = 0; n < this.numYTicks; n++)

{

var value = Math.round(this.maxY - n * this.maxY / this.numYTicks);

context.save();

context.translate(this.x - this.padding, n * this.height / this.numYTicks + this.y);

context.fillText(value, 0, 0);

context.restore();

}

context.restore();

};

Figure 5

This figure represent labels along the y axis as shown:

Figure 6

This figure shows when the x axis and y axis are joined together:

xy axis.jpg

Step 7

In the following step we will draw the line. We will also describe the width and color of the line. Once the labels and lines are rendered, CanvasChart handles rendering the data points.

LineChart.prototype.drawLine = function (data, color, width)

{

var context = this.context;

context.save();

this.transformContext();

context.lineWidth = width;

context.strokeStyle = color;

context.fillStyle = color;

context.beginPath();

context.moveTo(data[0].x * this.scaleX, data[0].y * this.scaleY);

for (var n = 0; n < data.length; n++)

{

var point = data[n];

// draw segment

context.lineTo(point.x * this.scaleX, point.y * this.scaleY);

context.stroke();

context.closePath();

context.beginPath();

context.arc(point.x * this.scaleX, point.y * this.scaleY, this.pointRadius, 0, 2 * Math.PI, false);

context.fill();

context.closePath();

// position for next segment

context.beginPath();

context.moveTo(point.x * this.scaleX, point.y * this.scaleY);

}

context.restore();

};

Step 8

In the following step we will transform the context and move the context to the center.

LineChart.prototype.transformContext = function ()

{

var context = this.context;

// move context to center of canvas

this.context.translate(this.x, this.y + this.height);

// invert the y scale so that that increments

// as you move upwards

context.scale(1, -1);

};

Step 9

In the following step, window onload we will call the "drawline()" method that will draw a line based on the following points that are placed on the graph.

window.onload = function ()

{

var myLineChart = new LineChart({

canvasId: "myCanvas",

minX: 0,

minY: 0,

maxX: 140,

maxY: 100,

unitsPerTickX: 10,

unitsPerTickY: 10

});

var data = [{

x: 0,

y: 0

}, {

x: 20,

y: 10

}, {

x: 40,

y: 15

}, {

x: 60,

y: 40

}, {

x: 80,

y: 60

}, {

x: 100,

y: 50

}, {

x: 120,

y: 85

}, {

x: 140,

y: 100

}];

myLineChart.drawLine(data, "blue", 3);

var data = [{

x: 20,

y: 85

}, {

x: 40,

y: 75

}, {

x: 60,

y: 75

}, {

x: 80,

y: 45

}, {

x: 100,

y: 65

}, {

x: 120,

y: 40

}, {

x: 140,

y: 35

}];

myLineChart.drawLine(data, "red", 3);

};

Example

<!DOCTYPE html>

<head>

<title>Line Chart in HTML5</title>

function LineChart(con) {

// user defined properties

this.canvas = document.getElementById(con.canvasId);

this.minX = con.minX;

this.minY = con.minY;

this.maxX = con.maxX;

this.maxY = con.maxY;

this.unitsPerTickX = con.unitsPerTickX;

this.unitsPerTickY = con.unitsPerTickY;

// constants

this.padding = 10;

this.tickSize = 10;

this.axisColor = "#555";

this.pointRadius = 5;

this.font = "12pt Calibri";

this.fontHeight = 12;

// relationships

this.context = this.canvas.getContext("2d");

this.rangeX = this.maxX - this.minY;

this.rangeY = this.maxY - this.minY;

this.numXTicks = Math.round(this.rangeX / this.unitsPerTickX);

this.numYTicks = Math.round(this.rangeY / this.unitsPerTickY);

this.x = this.getLongestValueWidth() + this.padding * 2;

this.y = this.padding * 2;

this.width = this.canvas.width - this.x - this.padding * 2;

this.height = this.canvas.height - this.y - this.padding - this.fontHeight;

this.scaleX = this.width / this.rangeX;

this.scaleY = this.height / this.rangeY;

// draw x y axis and tick marks

this.drawXAxis();

this.drawYAxis();

}

LineChart.prototype.getLongestValueWidth = function () {

this.context.font = this.font;

var longestValueWidth = 0;

for (var n = 0; n <= this.numYTicks; n++) {

var value = this.maxY - (n * this.unitsPerTickY);

longestValueWidth = Math.max(longestValueWidth, this.context.measureText(value).width);

}

return longestValueWidth;

};

LineChart.prototype.drawXAxis = function () {

var context = this.context;

context.save();

context.beginPath();

context.moveTo(this.x, this.y + this.height);

context.lineTo(this.x + this.width, this.y + this.height);

context.strokeStyle = this.axisColor;

context.lineWidth = 2;

context.stroke();

// draw tick marks

for (var n = 0; n < this.numXTicks; n++) {

context.beginPath();

context.moveTo((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height);

context.lineTo((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height - this.tickSize);

context.stroke();

}

// draw labels

context.font = this.font;

context.fillStyle = "black";

context.textAlign = "center";

context.textBaseline = "middle";

for (var n = 0; n < this.numXTicks; n++) {

var label = Math.round((n + 1) * this.maxX / this.numXTicks);

context.save();

context.translate((n + 1) * this.width / this.numXTicks + this.x, this.y + this.height + this.padding);

context.fillText(label, 0, 0);

context.restore();

}

context.restore();

};

LineChart.prototype.drawYAxis = function () {

var context = this.context;

context.save();

context.beginPath();

context.moveTo(this.x, this.y);

context.lineTo(this.x, this.y + this.height);

context.strokeStyle = this.axisColor;

context.lineWidth = 2;

context.stroke();

context.restore();

// draw tick marks

for (var n = 0; n < this.numYTicks; n++) {

context.beginPath();

context.moveTo(this.x, n * this.height / this.numYTicks + this.y);

context.lineTo(this.x + this.tickSize, n * this.height / this.numYTicks + this.y);

context.stroke();

}

// draw values

context.font = this.font;

context.fillStyle = "black";

context.textAlign = "right";

context.textBaseline = "middle";

for (var n = 0; n < this.numYTicks; n++) {

var value = Math.round(this.maxY - n * this.maxY / this.numYTicks);

context.save();

context.translate(this.x - this.padding, n * this.height / this.numYTicks + this.y);

context.fillText(value, 0, 0);

context.restore();

}

context.restore();

};

LineChart.prototype.drawLine = function (data, color, width) {

var context = this.context;

context.save();

this.transformContext();

context.lineWidth = width;

context.strokeStyle = color;

context.fillStyle = color;

context.beginPath();

context.moveTo(data[0].x * this.scaleX, data[0].y * this.scaleY);

for (var n = 0; n < data.length; n++) {

var point = data[n];

// draw segment

context.lineTo(point.x * this.scaleX, point.y * this.scaleY);

context.stroke();

context.closePath();

context.beginPath();

context.arc(point.x * this.scaleX, point.y * this.scaleY, this.pointRadius, 0, 2 * Math.PI, false);

context.fill();

context.closePath();

// position for next segment

context.beginPath();

context.moveTo(point.x * this.scaleX, point.y * this.scaleY);

}

context.restore();

};

LineChart.prototype.transformContext = function () {

var context = this.context;

// move context to center of canvas

this.context.translate(this.x, this.y + this.height);

// invert the y scale so that that increments

// as you move upwards

context.scale(1, -1);

};

window.onload = function () {

var myLineChart = new LineChart({

canvasId: "myCanvas",

minX: 0,

minY: 0,

maxX: 140,

maxY: 100,

unitsPerTickX: 10,

unitsPerTickY: 10

});

var data = [{

x: 0,

y: 0

}, {

x: 20,

y: 10

}, {

x: 40,

y: 15

}, {

x: 60,

y: 40

}, {

x: 80,

y: 60

}, {

x: 100,

y: 50

}, {

x: 120,

y: 85

}, {

x: 140,

y: 100

}];

myLineChart.drawLine(data, "blue", 3);

var data = [{

x: 20,

y: 85

}, {

x: 40,

y: 75

}, {

x: 60,

y: 75

}, {

x: 80,

y: 45

}, {

x: 100,

y: 65

}, {

x: 120,

y: 40

}, {

x: 140,

y: 35

}];

myLineChart.drawLine(data, "red", 3);

};

</script>

</head>

<body>

</body>

</html>

Output

Up Next

Ebook Download

View all

New Layout Design using HTML and CSS

Read by 1 people

Download Now!

Learn

View all