For line drawing, there's Bresenham's Line Algorithm and then there's everything else. Here's a nice line maker based on Bresenham's Line Algorithm. Feel free to use Make Anti-alias (Almost) Lines instead.

JavaScript Charts, Graphs, Graphics, Circles, Ellipses, Arcs, Lines, and Polygons
Grab and Drop, Not Drag and Drop
Add Ids and onClicks to Divs
Add Ids and onClicks and Grab and Drop to Divs
Make Anti-alias (Almost) Lines
Make Anti-alias (Almost) Lines Using Bresenham's Line Algorithm
Good JavaScript Circle Algorithm
Good JavaScript Ellipse Algorithm
Good JavaScript Arc Algorithm
Make JavaScript Irregular Polygon
JavaScript Area of Irregular Polygon Algorithm
Make Line Chart from User-Inputted Data
Make Line Chart from CSV Data
Make Line Chart from MySQL Table Data
Make Bar Chart from User-Inputted Data
Make Bar Chart from CSV Data
Make Bar Chart from MySQL Table Data
Make Pie Chart from User-Inputted Data
Make Pie Chart from CSV Data
Make Pie Chart from MySQL Table Data



There are endless reasons to need a line. Our reason was to use a Pythagorean theorem-based algorithm to create line charts from CSV data or MySQL table data. However, we could have used this Bresenham's Line Algorithm instead in our line charts.

We chose to avoid jQuery and HTML5's Canvas since the former is unneeded and the latter has unsatisfactory support from browsers, and it's more fun just programming in straight JavaScript. There are JavaScript libraries around that have line routines, but you do not learn programming by cheating! And the same can be said for using filters and transforms which each browser does their own way—there's no standard—so this requires several different functions plus browser sniffing and IE dumped support for one method and supported another with little warning. (Note: even though you can use the PHP GD library functions to draw lines on images, since the line may cover the screen diagonally, this may mean creating an image as big as the screen, using up RAM memory like a wild man. Even though PHP programmers use the imagedestroy() function to clear the memory BEFORE the script ends, what if image creation itself runs you out of memory? If not, the imagedestroy() function is useful to keep memory usage DURING the script to an acceptable level.)

Now, back to the problem at hand. In the program below, the line between two given points is drawn using the slope of this line to guide us as we add pixel by pixel. The long dimension is incremented by 1 for each pixel, and the fractional slope is accumulated in such a way that we sometimes increment in the direction of the shorter dimension. The slope of a line characterizes the general direction in which a line points. To find the slope, you divide the difference of the y-coordinates of a point on a line by the difference of the x-coordinates.

But we needn't do this in this algorithm since we only need to accumulate fractional slope and sometimes increment in the direction of the shorter dimension, depending upon the error between the ideal line (if we used a pencil rather than pixels, which are much cruder) and the actual line we are constructing with pixels.

Starting from the first point, we plot each point of the line using 4-pixel-wide colored DIVs with the background-color:#a4a4a4. Although the result is not quite a line with anti-aliased smoothness, this technique is the next best thing. And then we use the innerHTML property, which can be used, as below, to modify your document's HTML on the fly—in this case by slapping a buttload of DIVs on the page. Feel free to use 1-pixel-wide DIVs with the background-color:#000 if you just want a simple line. A wider greyer one is more presentable, in our opinion. Especially for line charts. The lighter the grey, the more it looks anti-aliased—change the color and see for yourself.

The algorithm source for the code below is: https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html except for the 5x5 IMG point plotter. If you require true anti-aliasing, try Xiaolin Wu's line algorithm, but good luck finding a JavaScript version—at this writing there are none yet.

"?:" is the Conditional Operator. It's a shorthand method for building an evaluation, and then executing one of //two different assignments depending on the result. Here's the syntax: (condition) ? ifTrue : ifFalse

Do not be confused by the var dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1; stuff. It's just two different variables being declared, similar to var x0, x1, y0, y1;. In this case, we define sx. If x0 < x1 then sx is 1, otherwise it is -1. Similarly, err is dx/2 or dy/2 depending on whether dx>dy is true or false.

The while (true) statement will set the loop up so that it will loop forever but then we code in an if statement within the loop to test for when to terminate the loop. In this case, it is when the line start point reaches the line end point. We BREAK out of the loop then.

This algorithm chooses the integer y corresponding to the pixel center that is closest to the ideal (fractional) y for the same x. And on successive columns, y can remain the same or increase by 1. It monitors the vertical distance between the rounded and the exact y values for the current x. When x is increased, the error is increased by the slope. If the error exceeds 0.5, y is increased by 1. Keep in mind that lines are drawn out of pixels, so except for vertical or horizontal lines, all lines are approximate, drawing to the nearest pixel. You cannot draw between pixels. The closest thing you can do is plot some of the pixels near the line you draw in lighter colors so the jaggy characteristic is somewhat avoided (until you look at the screen really closely). Lighter colored pixels near the line's darker pixels is called anti-aliasing. It's done to fool the eyes into seeing a straight line.

For more info on Bresenham's Line Algorithm, go to wikipedia.

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Make Anti-alias (Almost) Lines with Bresenham's Line Algorithm</TITLE>
<meta name="description" content="Make Anti-alias (Almost) Lines with Bresenham's Line Algorithm">
<meta name="keywords" content="Make Anti-alias (Almost) Lines with Bresenham's Line Algorithm,View lines,Make Anti-alias (Almost) Lines,php,javascript, dhtml, DHTML">
</head>

<body>

<script language="javascript">
var x0, x1, y0, y1;

function bline(x0, x1, y0, y1) {
var dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1;
var dy = Math.abs(y1 - y0), sy = y0 < y1 ? 1 : -1;
var err = (dx>dy ? dx : -dy)/2;
while (true) {
document.write("<div style='position:absolute;left:"+x0+"px;top:"+y0+"px'><IMG SRC='anti.gif' WIDTH=5 HEIGHT=5 BORDER=0></div>");
if (x0 === x1 && y0 === y1) break;
var e2 = err;
if (e2 > -dx) { err -= dy; x0 += sx; }
if (e2 < dy) { err += dx; y0 += sy; } }}

bline(59, 333, 592, 0);
</script>

</body>
</html>