Menu
I don’t know if this is a problem with my graphics implementation
or if it is a stupid (on my part) JS problem. ?
Let me know if I need to post on JS forum instead…
The script requires the attached transparent gif file: ‘dotclear.gif’
The following works great with FF on the imac and PC.
Every button works fine including the diagnol line drawing.
Script also works when using MS-IE and Safari EXCEPT for the ‘DLine1’ and ‘DLine2’ buttons.
Not errors with either browser, but also no diagnol lines are displayed ???
Offending function seems to be ‘PlotLine()’ as all other functions look as expected on other browsers.
Can someone tell me where I’m going wrong or if a different approach would be better?
[code=php]
<html>
<head>
<title>Draw Graphics</title>
</head>
<script type=’text/javascript’>
// Initialization
function Init(id,uX,uY,width,height,color,pen,scaleX,scaleY) {
this.id = id || ‘graph’;
this.uX = uX || 0; // default X origin
this.uY = uY || 0; // default Y origin
this.width = width || 400; // default W width
this.height = height || 200; // default H height
this.color = color || ‘#777777’; // default color (grey)
this.pen = pen || 1; // default pen size in pixels
this.scaleX = scaleX || 1; // not currently used
this.scaleY = scaleY || 1;
Init.prototype.PlotLine=_PlotLine; // (x1,y1, x2,y2)
Init.prototype.FillArea=_FillArea; // (x,y, w,h)
Init.prototype.BoxArea=_BoxArea; // (x,y, w,h)
Init.prototype.XLine=_XLine; // (x,y, w)
Init.prototype.YLine=_YLine; // (x,y, h)
Init.prototype.Axes=_Axes; // (x,y, w,h) x,y=origin of display _L
}
// Plot line
function _PlotLine(x1,y1,x2,y2) {
var str = ”;
var px=x1; var py=y1;
// check for pure horizontal or vertical lines
if (x1 == x2) { if (y2 < y1) { py=y1; y1=y2; y2=py; }
str = this.YLine(x1,y1,(y2-y1)); return str; }
if (y1 == y2) { if (x2 < x1) { px=x1; x1=x2; x2=px; }
str = this.XLine(x1,y1,(x2-x1)); return str; }
// allow for diagnol lines
var y2h=1;
if (x1 != x2) {
y2h = Math.abs(y1-y2) / Math.abs(x1-x2); // denominator can not be zero
// add denominator check for very very small number ???
}
if (px < x2) {
while(px<x2) {
str += ‘<div style=position:absolute;top:’+(py+this.uY)+’px;left:’+(px+this.uX)+’px;>’;
str += ‘<img src=dotclear.gif style=background-color:’+this.color+’;’;
str += ‘width:1px;height:’+y2h+’px;></div>’;
px++;
if (py < y2) { py = py+y2h;
if (py > y2) { py = y2; } } else { py = py-y2h; if (py < y2) { py = y2; }
}
}
} else {
while(px>x2) {
str += ‘<div style=position:absolute;top:’+(py+this.uY)+’px;left:’+(px+this.uX)+’px;>’;
str += ‘<img src=dotclear.gif style=background-color:’+this.color+’;’;
str += ‘width:1px;height:’+y2h+’px;></div>’;
px–;
if (py < y2) { py = py+y2h;
if (py > y2) { py = y2; } } else { py = py-y2h; if (py < y2) { py = y2; }
}
}
}
return str;
}
// FillArea drawing
function _FillArea(x,y,w,h) {
var str = ”;
str += ‘<div style=position:absolute;top:’+y+’px;left:’+x+’px;>’;
str += ‘<img src=dotclear.gif style=background-color:’+this.color+’;’;
str += ‘width:’+w+’px;height:’+h+’px;></div>’;
return str;
}
function _BoxArea(x,y,w,h) {
var str = ”;
str += this.XLine(x,y,w);
str += this.YLine(x,y,h);
str += this.XLine(x,(y+h),w);
str += this.YLine((x+w),y,h);
return str;
}
// X-axis drawing
function _XLine(x,y,w) {
var str = ”;
str += ‘<div style=position:absolute;top:’+y+’px;left:’+x+’px;>’;
str += ‘<img src=dotclear.gif style=background-color:’+this.color+’;’;
str += ‘width:’+w+’px;height:’+this.pen+’px;></div>’;
return str;
}
// Y-axis drawing
function _YLine(x,y,h) {
var str = ”;
str += ‘<div style=position:absolute;top:’+y+’px;left:’+x+’px;>’;
str += ‘<img src=dotclear.gif style=background-color:’+this.color+’;’;
str += ‘width:’+this.pen+’px;height:’+h+’px;></div>’;
return str;
}
// X-Y Axis drawing
function _Axes(x,y,w,h) {
var str = ”;
str += this.XLine(x,y,w);
str += this.YLine(x,(y-h),h);
return str;
}
// var Draw = new Init();
var Draw = new Init(‘graph’,100,100,200,100,’black’,1,1,1);
</script>
<body>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.PlotLine(0,0,400,200)”>DLine 1</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.PlotLine(0,200,400,0)”>DLine 2</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.PlotLine(150,150,250,150)”>XLine 1</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.PlotLine(150,150,150,250)”>YLine 2</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.PlotLine(250,250,250,150)”>XLine 3</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.PlotLine(250,250,150,250)”>YLine 4</button>
<br />
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.XLine(110,110,380)”>X-Line</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.YLine(490,110,180)”>Y-Line</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.Axes(110,290,380,180)”>Axes</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.BoxArea(100,100,400,200)”>Box</button>
<button onClick=”document.getElementById(‘graph’).innerHTML+=Draw.FillArea(110,110,380,180)”>Fill</button>
<select id=”ColorPick” onClick=”Draw.color=this.value”>
<option value=”#000000″>Color</option>
<option value=”#000000″>Black</option>
<option value=”#FF0000″>Red</option>
<option value=”#00FF00″>Green</option>
<option value=”#0000FF”>Blue</option>
<option value=”#FFFF00″>Yellow</option>
<option value=”#00FFFF”>Cyan</option>
<option value=”#FF00FF”>Purple</option>
<option value=”#FFFFFF”>White</option>
</select>
<button onClick=”document.getElementById(‘graph’).innerHTML=””>Clear</button>
<div id=”graph”></div>
</body>
</html>
Scaling is not yet implemented, so if you have any ideas, I’ll try to incorporate them.
I’m trying ot create a very simple line graph display. ?
Current ‘test’ version is located at: [url]http://www.nova.edu/~rumsey/JS/plot/Draw.html
[upl-file uuid=18dce586-28e2-4e4d-91a8-68e861f15bd2 size=42B]dotclear.gif