faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

35 of 46 people (76%) answered Yes
Recently 6 of 10 people (60%) answered Yes

Entry

How do you draw straight lines?

Feb 16th, 2001 05:43
Martin Honnen,


The following code works with NN4, NN6 (though on some page loadings I 
got unexplainable errors), IE4+ and Opera 5; the lines are plotted 
point by point positioning a layer with the line color as the 
background color at every point. This is very memory consuming and 
demanding on the browsers.
<HTML>
<HEAD>
<TITLE>
Drawing of straight lines
</TITLE>
<SCRIPT>
var loaded = false;
function Line (args) {
  if (args)
    for (var p in args)
      this[p] = args[p];
  this.id = Line.lines.length;
  Line.lines[this.id] = this; 
  this.createLine();
}
function Line_createLine () {
  this.layerID = 'L' + this.id;
  this.cEnd = {x: Math.max(this.from.x, this.to.x) + this.width, y: 
Math.max(this.from.y, this.to.y) + this.width};
  this.constant = (this.to.x * this.from.y - this.from.x * this.to.y) / 
(this.to.x - this.from.x);
  this.gradient = (this.to.y - this.constant) / this.to.x;
  this.fun = function (x) { return this.gradient * x + this.constant; };
  if (!loaded) {
    this.writeCSS();
    this.writeHTML();
  }
}
Line.prototype.createLine = Line_createLine;
function Line_writeCSS () {
  var html = '';
  html += '<STYLE>';
  html += '#' + this.layerID + ' {';
  html += '  position: absolute;';
  html += '  left: 0px; top: 0px;';
  html += '  width: ' + this.cEnd.x + 'px;'
  html += '  height: ' + this.cEnd.y + 'px;';
  if (document.layers) 
    html += '  clip:rect(0px ' + this.cEnd.x + 'px ' + this.cEnd.y 
+ 'px 0px);';
  html += '}';
  for (var x = this.from.x; x <= this.to.x; x += this.width) {
    var y = Math.round(this.fun(x));
    html += '#' + this.layerID + 'P' + x + ' {';
    html += '  position: absolute;';
    html += '  left: ' + x + 'px;';
    html += '  top: ' + y + 'px;';
    if (document.layers) 
      html += '  layer-background-color: ' + this.color + ';';
    else
      html += '  background-color: ' + this.color + ';';
    html += '  width: ' + this.width + 'px;';
    html += '  height: ' + this.width + 'px;';
    html += '  clip: rect(0px ' + this.width + 'px ' + this.width + 
'px 0px);';
    html += '}';
  }
  html += '<\/STYLE>';
  document.write(html);
}
Line.prototype.writeCSS = Line_writeCSS;
function Line_writeHTML () {
  var html = '';
  html += '<DIV ID="' + this.layerID + '">';
  for (var x = this.from.x; x <= this.to.x; x += this.width) 
    html += '<DIV ID="' + this.layerID + 'P' + x + '"><\/DIV>';
  html += '<\/DIV>';
  document.write(html);
  this.initLayer();
}
Line.prototype.writeHTML = Line_writeHTML;
function Line_setVisibility (visibility) {
  if (!this.layer)
    this.initLayer();
  if (document.layers)
    this.layer.visibility = visibility == 'visible' ? 'show' : 'hide';
  else
    this.layer.style.visibility = visibility;
}
Line.prototype.setVisibility = Line_setVisibility;
function Line_toggleVisibility () {
  if (!this.layer)
    this.initLayer();
  if (document.layers) {
    if (this.layer.visibility == 'hide')
      this.layer.visibility = 'show';
    else
      this.layer.visibility = 'hide';
  }
  else {
    if (this.layer.style.visibility.toLowerCase() == 'hidden')
      this.layer.style.visibility = 'visible';
    else
      this.layer.style.visibility = 'hidden';
  }
}
Line.prototype.toggleVisibility = Line_toggleVisibility;
function Line_initLayer () {
  if (document.layers)
    this.layer = document[this.layerID];
  else if (document.all)
    this.layer = document.all[this.layerID];
  else if (document.getElementById)
    this.layer = document.getElementById(this.layerID);
}
Line.prototype.initLayer = Line_initLayer;
Line.prototype.cStart = {x: 0, y: 0};
Line.prototype.from = {x: 0, y: 0};
Line.prototype.to   = {x: 100, y: 100};
Line.prototype.color = 'green';
Line.prototype.width = 2;
Line.lines = new Array();
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
var l1 = new Line ();
if (document.all && !window.opera) 
  var to = {x: document.body.clientWidth, y: 
document.body.clientHeight };
else
  var to = {x: window.innerWidth, y: window.innerHeight };
var l2 = new Line ({
  to: to,
  color: 'red',
  width: 3
});
if (document.all && !window.opera) {
  var from = {x: 0, y: document.body.clientHeight};
  var to = {x: document.body.clientWidth, y: 0};
}
else {
  var from = {x: 0, y: window.innerHeight};
  var to = {x: window.innerWidth, y: 0};
}
var l3 = new Line ({
  from: from,
  to: to,
  color: 'blue',
  width: 3
});
</SCRIPT>
<STYLE>
#gui {
  position: absolute;
  left: 10px; top: 180px;
  z-index: 10;
}
</STYLE>
<DIV ID="gui">
<A HREF="javascript: void 0"
   ONCLICK="l1.toggleVisibility();
            return false;"
>
line 1 toggle visibility
</A>
<BR>
<A HREF="javascript: void 0"
   ONCLICK="l2.toggleVisibility();
            return false;"
>
line 2 toggle visibility
</A>
<BR>
<A HREF="javascript: void 0"
   ONCLICK="l3.toggleVisibility();
            return false;"
>
line 3 toggle visibility
</A>
</DIV>
</BODY>
</HTML>
You can find a working example at
  http://home.t-online.de/home/martin.honnen/dhtml/drawLines.html
See also the line chart knowledge base enty at
  http://www.faqts.com/knowledge_base/view.phtml/aid/1538/fid/128