Make Anti-alias (Almost) Lines
For line drawing, there's Bresenham's Line Algorithm and then there's everything else. Here's a nice line maker based on figuring out the hypotenuse of a triangle formed from using two given points as vertices and assuming the 90-degree angle vertices is not found at either point. These will be opposite ends of our line, a.k.a. our hypotenuse. The hypotenuse formula is one all high school students recognize—getting the square root of the sum of the squares of two adjacent sides. Of course, we are referring to right triangles only. Feel free to use the Make Anti-alias (Almost) Lines Using Bresenham's Line Algorithm 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 the algorithm to create line charts from CSV data or MySQL table data.
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. The Pythagorean theorem equation is the 2500-year-old formula for finding the length of the hypotenuse. The Pythagorean equation can be used to solve for a missing side on any right triangle. In the program below, given two points we find the length of the line between two given points. Then a variation on slope-intercept form and point-slope form equations is used to 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.
<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</TITLE>
<meta name="description" content="Make Anti-alias (Almost) Lines">
<meta name="keywords" content="Make Anti-alias (Almost) Lines,Make Anti-alias Lines, php,javascript, dhtml, DHTML">
</head>
<body>
<script language="javascript">
var xa, xb, ya, yb, x, y;
function goodline(xa, xb, ya, yb) {
var addtopage = "";var linelength = Math.sqrt((xa-xb)*(xa-xb)+(ya-yb)*(ya-yb));
for(var i=0; i<linelength; i++){
x=Math.round(xa+(xb-xa)*i/linelength);
y=Math.round(ya+(yb-ya)*i/linelength);
addtopage += "<div style='position:absolute;left:"+x+"px;top:"+y+"px;background-color:#a4a4a4;width:4px;height:4px;font-size:1px'></div>";}
document.body.innerHTML += addtopage;}
goodline(59,333,59,500);
</script>
</body>
</html>